[#220] add styling for DRepCard in default state

govtool/frontend/src/components/atoms/Button.tsx

@@ -19,6 +19,7 @@ export const Button = ({
       sx={{
         fontSize: size === "extraLarge" ? 16 : 14,
         height: buttonHeight,
+        whiteSpace: "nowrap",
         ...sx,
       }}
       variant={variant}

govtool/frontend/src/components/atoms/StatusPill.tsx

@@ -0,0 +1,57 @@
+import { Chip, ChipProps, styled } from "@mui/material";
+import { cyan, errorRed, successGreen } from "@/consts";
+
+type Status = 'active' | 'retired' | 'inactive';
+
+interface StatusPillProps {
+  status: Status;
+  label?: string;
+  size?: 'small' | 'medium';
+  sx?: ChipProps['sx'];
+}
+
+export const StatusPill = ({
+  status,
+  label = status,
+  size = 'small',
+  sx
+}: StatusPillProps) => (
+  <StyledChip
+    status={status}
+    size={size}
+    label={label}
+    sx={sx}
+  />
+);
+
+const getBgColor = (status: Status): string => {
+  switch (status) {
+    case 'active':
+      return successGreen.c200;
+    case 'retired':
+      return errorRed.c100;
+    case 'inactive':
+      return cyan.c100;
+    // no default
+  }
+};
+
+const getTextColor = (status: Status): string => {
+  switch (status) {
+    case 'active':
+      return successGreen.c700;
+    case 'retired':
+      return errorRed.c500;
+    case 'inactive':
+      return cyan.c500;
+    // no default
+  }
+};
+
+const StyledChip = styled(Chip)<{ status: Status }>(({ theme, status }) => ({
+  backgroundColor: getBgColor(status),
+  color: getTextColor(status),
+  border: `2px solid ${theme.palette.neutralWhite}`,
+  fontSize: '0.75rem',
+  textTransform: 'capitalize',
+}));

govtool/frontend/src/components/atoms/index.ts

@@ -22,6 +22,7 @@ export * from "./Radio";
 export * from "./ScrollToManage";
 export * from "./ScrollToTop";
 export * from "./Spacer";
+export * from "./StatusPill";
 export * from "./StakeRadio";
 export * from "./TextArea";
 export * from "./Tooltip";

govtool/frontend/src/components/organisms/DRepCard.tsx

@@ -0,0 +1,130 @@
+import { useNavigate } from "react-router-dom";
+import { Box, ButtonBase, Divider } from "@mui/material";
+
+import { useTranslation } from "@hooks";
+import { Button, StatusPill, Typography } from "@atoms";
+import { Card } from "@molecules";
+import { correctAdaFormat } from "@/utils";
+import { ICONS } from "@/consts";
+
+export const DRepCard = ({
+  isConnected,
+  name,
+  id,
+  votingPower,
+  status,
+}: any) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return (
+    <Card sx={{ container: "root / inline-size", py: 2.5 }}>
+      <Box
+        display="flex"
+        flexDirection="column"
+        rowGap={4}
+        columnGap={6}
+        sx={{
+          "@container root (min-width: 480px)": {
+            flexDirection: "row",
+          },
+        }}
+      >
+        <Box flex={2} minWidth={0} sx={{ containerType: "inline-size" }}>
+          <Box
+            display="flex"
+            flexDirection="column"
+            rowGap={3}
+            columnGap={6}
+            sx={{
+              "@container (min-width: 480px)": {
+                flexDirection: "row",
+                alignItems: "center",
+              },
+              containerType: "inline-size",
+            }}
+          >
+            <Box flex={1} minWidth={0}>
+              <Typography sx={ellipsisStyles}>{name}</Typography>
+              <ButtonBase
+                sx={{
+                  gap: 1,
+                  maxWidth: "100%",
+                  "&:hover": {
+                    opacity: 0.6,
+                    transition: "opacity 0.3s",
+                  },
+                }}
+              >
+                <Typography color="primary" variant="body2" sx={ellipsisStyles}>
+                  {id}
+                </Typography>
+                <img alt="" src={ICONS.copyBlueIcon} />
+              </ButtonBase>
+            </Box>
+
+            <Box display="flex" gap={3}>
+              <Box maxWidth={100}>
+                <Typography
+                  variant="caption"
+                  color="textSecondary"
+                  sx={{ mb: 0.5 }}
+                >
+                  {t("votingPower")}
+                </Typography>
+                <Typography sx={{ whiteSpace: "nowrap" }}>
+                  ₳
+                  {' '}
+                  {correctAdaFormat(votingPower)}
+                </Typography>
+              </Box>
+              <Divider
+                orientation="vertical"
+                flexItem
+                sx={({ palette }) => ({ borderColor: palette.lightBlue })}
+              />
+              <Box>
+                <Typography
+                  variant="caption"
+                  color="textSecondary"
+                  sx={{ mb: 0.5 }}
+                >
+                  {t("status")}
+                </Typography>
+                <StatusPill status={status} sx={{ width: 80 }} />
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box
+          display="flex"
+          flex={1}
+          gap={2.5}
+          minWidth={isConnected ? 233 : 310}
+          sx={{
+            "@container root (min-width: 480px)": {
+              justifyContent: "flex-end",
+            },
+          }}
+        >
+          <Button variant="outlined" onClick={() => navigate(`/drep/${id}`)}>
+            {t("viewDetails")}
+          </Button>
+          {status === "active" && isConnected && (
+            <Button>{t("delegate")}</Button>
+          )}
+          {status === "active" && !isConnected && (
+            <Button>{t("connectToDelegate")}</Button>
+          )}
+        </Box>
+      </Box>
+    </Card>
+  );
+};
+
+const ellipsisStyles = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+} as const;

govtool/frontend/src/components/organisms/index.ts

@@ -15,6 +15,7 @@ export * from "./DelegateTodRepStepOne";
 export * from "./DelegateTodRepStepTwo";
 export * from "./Drawer";
 export * from "./DrawerMobile";
+export * from "./DRepCard";
 export * from "./DRepDirectoryContent";
 export * from "./EditDRepInfoSteps";
 export * from "./ExternalLinkModal";

govtool/frontend/src/i18n/locales/en.ts

@@ -254,8 +254,11 @@ export const en = {
       abstainCardTitle: "Abstain from Every Vote",
       automatedVotingOptions: "Automated Voting Options",
       editBtn: "Edit DRep data",
+      delegationOptions: "Delegation Options",
       meAsDRep: "This  DRep ID is connected  to your wallet",
+      myDelegation: "You have delegated <strong>₳ {{ada}}</strong> to:",
       myDRep: "This is your DRep",
+      listTitle: "Find a DRep",
       noConfidenceDescription:
         "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals",
       noConfidenceTitle: "Signal No Confidence on Every Vote",
@@ -751,6 +754,7 @@ export const en = {
     status: "Status",
     submit: "Submit",
     thisLink: "this link",
+    viewDetails: "View details",
     votingPower: "Voting power",
     yes: "Yes",
   },

govtool/frontend/src/pages/DRepDirectoryContent.tsx

@@ -1,10 +1,105 @@
+import { Box } from "@mui/material";
 import { FC } from "react";
-import { AutomatedVotingOptions } from "@organisms";
+import { AutomatedVotingOptions, DRepCard } from "@organisms";
+import { Typography } from "@atoms";
+import { Trans, useTranslation } from "react-i18next";
 
 interface DRepDirectoryContentProps {
   isConnected?: boolean;
 }
 
 export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
   isConnected,
-}) => <>{isConnected && <AutomatedVotingOptions />}</>;
+}) => {
+  const { t } = useTranslation();
+
+  const ada = 1234567;
+
+  return (
+    <Box display="flex" flexDirection="column" gap={4}>
+      {isConnected && (
+        <div>
+          <Typography variant="title2" sx={{ mb: 2 }}>
+            <Trans i18nKey="dRepDirectory.myDelegation" values={{ ada }} />
+          </Typography>
+          <DRepCard key={data[0]} isConnected={isConnected} {...data[0]} />
+        </div>
+      )}
+
+      {isConnected && (
+        <div>
+          <Typography variant="title2" sx={{ mb: 2 }}>{t("dRepDirectory.delegationOptions")}</Typography>
+          <AutomatedVotingOptions />
+        </div>
+      )}
+
+      <div>
+        <Typography fontSize={18} fontWeight={500}>{t("dRepDirectory.listTitle")}</Typography>
+        <Box component="ul" p={0} display="flex" flexDirection="column" gap={3}>
+          {data.map((dRep) => (
+            <Box key={dRep.id} component="li" sx={{ listStyle: "none" }}>
+              <DRepCard key={dRep.id} isConnected={isConnected} {...dRep} />
+            </Box>
+          ))}
+        </Box>
+      </div>
+    </Box>
+  );
+};
+
+const data = [
+  {
+    name: "DRep 1",
+    id: "1kejngelrngekngeriogj3io4j3gnd3",
+    votingPower: 3000000,
+    status: "active",
+  },
+  {
+    name: "DRep 2",
+    id: "1kejrngelrngekngeriogfrej3io4fj3gn3",
+    votingPower: 10000000,
+    status: "active",
+  },
+  {
+    name: "DRep 1",
+    id: "1kejngelrngekngeriogj3io4j3gnd3",
+    votingPower: 1000000,
+    status: "active",
+  },
+  {
+    name: "DRep 2",
+    id: "1kejrngelrngekngeriogfrej3io4fj3gn3",
+    votingPower: 9900000000000000,
+    status: "active",
+  },
+  {
+    name: "DRep 1",
+    id: "1kejngelrngekngeriogj3io4j3gn3",
+    votingPower: 12345678,
+    status: "active",
+  },
+  {
+    name: "DRep 2",
+    id: "1kejrngelrngekngeriogfrej3io4j3gn3",
+    votingPower: 1234567800,
+    status: "active",
+  },
+  {
+    name: "DRep 4",
+    id: "1kejrngelkngeriogj3io4j3gn3",
+    votingPower: 12345678000000,
+    status: "retired",
+  },
+  {
+    name: "DRep 3",
+    id: "1kejrngelrngekngeriogj3io4j3gn2",
+    votingPower: 123456,
+    status: "active",
+  },
+  {
+    name: "Some dreps can have a very long name and it will be displayed correctly",
+    id: "1kejrngelrngekngeriogj3io4j3gn3",
+    votingPower: 123456,
+    status: "inactive",
+  },
+];

govtool/frontend/src/stories/StatusPill.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { StatusPill } from "@atoms";
+
+const meta = {
+  title: "Example/StatusPill",
+  component: StatusPill,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof StatusPill>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const StatusPillActive: Story = {
+  args: {
+    status: "active",
+  },
+};
+
+export const StatusPillInactive: Story = {
+  args: {
+    status: "inactive",
+  },
+};
+
+export const StatusPillRetired: Story = {
+  args: {
+    status: "retired",
+  },
+};