New Gov Actions

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

@@ -7,7 +7,7 @@ import { useTranslation } from "@hooks";
 interface Props {
   isChecked?: boolean;
   text: string;
-  variant?: string;
+  variant?: "blueThin" | "blue";
 }
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
@@ -19,6 +19,10 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
       return ICONS.copyBlueIcon;
     }
 
+    if (variant === "blueThin") {
+      return ICONS.copyBlueThinIcon;
+    }
+
     if (isChecked) {
       return ICONS.copyWhiteIcon;
     }

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

@@ -0,0 +1,48 @@
+import { Typography } from "@mui/material";
+
+import { Button } from "@atoms";
+import { ICONS } from "@consts";
+import { useModal } from "@context";
+
+export const ExternalModalButton = ({
+  label,
+  url,
+}: {
+  label: string;
+  url: string;
+}) => {
+  const { openModal } = useModal();
+
+  return (
+    <Button
+      onClick={() => {
+        openModal({
+          type: "externalLink",
+          state: {
+            externalLink: url,
+          },
+        });
+      }}
+      sx={{
+        p: 0,
+        mb: 4,
+        ":hover": {
+          backgroundColor: "transparent",
+        },
+      }}
+      disableRipple
+      variant="text"
+    >
+      <Typography variant="body1" fontWeight={500} color="primary">
+        {label}
+      </Typography>
+      <img
+        alt="external link"
+        src={ICONS.externalLinkIcon}
+        height="20"
+        width="20"
+        style={{ marginLeft: "8px" }}
+      />
+    </Button>
+  );
+};

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

@@ -0,0 +1,45 @@
+import { Box } from "@mui/material";
+
+import { Typography } from "@atoms";
+import { openInNewTab } from "@utils";
+import { ICONS } from "@consts";
+
+type IconLinkProps = {
+  label: string;
+  navTo: string;
+  isSmall?: boolean;
+};
+
+export const IconLink = ({ label, navTo, isSmall }: IconLinkProps) => {
+  const openLink = () => openInNewTab(navTo);
+
+  return (
+    <Box
+      onClick={openLink}
+      sx={{
+        alignItems: "center",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "row",
+        overflow: "hidden",
+      }}
+    >
+      <img alt="link" height={16} src={ICONS.link} width={16} />
+      <Typography
+        color="primary"
+        fontWeight={400}
+        sx={{
+          ml: 0.5,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          ...(isSmall && {
+            fontSize: 14,
+            lineHeight: "20px",
+          }),
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+};

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

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
+
+import { Typography } from "@atoms";
 import { UseFormRegister, UseFormSetValue } from "react-hook-form";
 
 type RadioProps = {
@@ -10,11 +12,20 @@ type RadioProps = {
   setValue: UseFormSetValue<any>;
   register: UseFormRegister<any>;
   dataTestId?: string;
+  disabled?: boolean;
 };
 
 export const Radio = ({ ...props }: RadioProps) => {
-  const { isChecked, name, setValue, title, value, dataTestId, register } =
-    props;
+  const {
+    isChecked,
+    name,
+    setValue,
+    title,
+    value,
+    dataTestId,
+    register,
+    disabled,
+  } = props;
 
   const handleClick = () => {
     setValue(name, value);
@@ -23,13 +34,17 @@ export const Radio = ({ ...props }: RadioProps) => {
   return (
     <Box
       data-testid={dataTestId}
-      onClick={handleClick}
-      borderRadius={2}
-      p={0.2}
-      border={isChecked ? 1 : 0}
-      borderColor={isChecked ? "specialCyanBorder" : "white"}
+      onClick={() => {
+        if (!disabled) handleClick();
+      }}
+      borderRadius={isChecked ? "15px" : "12px"}
+      p={isChecked ? "2px" : 0}
+      border={isChecked ? 2 : 0}
+      borderColor={isChecked ? "specialCyanBorder" : undefined}
       sx={[{ "&:hover": { color: "blue", cursor: "pointer" } }]}
-      flex={1}
+      boxShadow={
+        "0px 1px 2px 0px rgba(0, 51, 173, 0.08), 0px 1px 6px 1px rgba(0, 51, 173, 0.15)"
+      }
     >
       <input
         type="radio"
@@ -39,15 +54,16 @@ export const Radio = ({ ...props }: RadioProps) => {
         checked={isChecked}
       />
       <Box
-        borderRadius={1.5}
+        borderRadius={"12px"}
         bgcolor={isChecked ? "specialCyan" : "white"}
         py={1.5}
-        border={isChecked ? 0 : 1}
-        borderColor="lightBlue"
       >
         <Typography
-          textAlign="center"
-          color={isChecked ? "white" : "textBlack"}
+          variant="body1"
+          sx={{
+            textAlign: "center",
+            color: isChecked ? "white" : "textBlack",
+          }}
         >
           {title}
         </Typography>

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

@@ -0,0 +1,40 @@
+import { Box } from "@mui/material";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+
+import { theme } from "@/theme";
+
+interface Props {
+  disabled: boolean;
+  onClick: (e: any) => void;
+  left?: boolean;
+}
+
+export const SliderArrow = ({ disabled, onClick, left }: Props) => {
+  const {
+    palette: { primaryBlue, arcticWhite, lightBlue },
+  } = theme;
+
+  return (
+    <Box
+      onClick={onClick}
+      sx={{
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        border: `1px solid ${lightBlue}`,
+        backgroundColor: arcticWhite,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "pointer",
+      }}
+    >
+      <ChevronRightIcon
+        sx={{
+          transform: `rotate(${left ? 180 : 0}deg)`,
+          color: disabled ? "#C1BED3" : primaryBlue,
+        }}
+      />
+    </Box>
+  );
+};

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

@@ -2,7 +2,7 @@ import { styled } from "@mui/material";
 import * as TooltipMUI from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
-type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
+export type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
   heading?: string;
   paragraphOne?: string;
   paragraphTwo?: string;

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

@@ -1,6 +1,7 @@
-import { Vote } from "@models";
 import { Box, Typography } from "@mui/material";
 
+import { Vote } from "@models";
+
 export const VotePill = ({
   vote,
   width,

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

@@ -5,9 +5,11 @@ export * from "./Checkbox";
 export * from "./ClickOutside";
 export * from "./CopyButton";
 export * from "./DrawerLink";
+export * from "./ExternalModalButton";
 export * from "./FormErrorMessage";
 export * from "./FormHelpfulText";
 export * from "./HighlightedText";
+export * from "./IconLink";
 export * from "./InfoText";
 export * from "./Input";
 export * from "./Link";
@@ -19,6 +21,7 @@ export * from "./modal/ModalWrapper";
 export * from "./Radio";
 export * from "./ScrollToManage";
 export * from "./ScrollToTop";
+export * from "./SliderArrow";
 export * from "./Spacer";
 export * from "./StakeRadio";
 export * from "./TextArea";

govtool/frontend/src/components/molecules/DataActionsBar.tsx

@@ -50,7 +50,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
 
   return (
     <>
-      <Box alignItems="center" display="flex" justifyContent="flex-start">
+      <Box alignItems="center" display="flex" justifyContent="space-between">
         <InputBase
           inputProps={{ "data-testid": "search-input" }}
           onChange={(e) => setSearchText(e.target.value)}
@@ -76,7 +76,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
             fontWeight: 500,
             height: 48,
             padding: "16px 24px",
-            width: 231,
+            width: 500,
           }}
         />
         <OrderActionsChip

govtool/frontend/src/components/molecules/DataMissingInfoBox.tsx

@@ -0,0 +1,60 @@
+import { Box, Link } from "@mui/material";
+
+import { Typography } from "@atoms";
+import { useTranslation } from "@hooks";
+import { openInNewTab } from "@utils";
+
+export const DataMissingInfoBox = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      sx={{
+        mb: 4,
+        pr: 6,
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: "18px",
+          fontWeight: 500,
+          color: "errorRed",
+          mb: 0.5,
+        }}
+      >
+        {/* TODO: Text to confirm/change */}
+        The data that was originally used when this Governance Action was
+        created has been formatted incorrectly.
+      </Typography>
+      <Typography
+        sx={{
+          fontWeight: 400,
+          color: "errorRed",
+          mb: 0.5,
+        }}
+      >
+        {/* TODO: Text to confirm/change */}
+        GovTool uses external sources for Governance Action data, and these
+        sources are maintained by the proposers of the Actions. This error means
+        that GovTool cannot locate the data on the URL specified when the
+        Governance Action was originally posted.
+      </Typography>
+      <Link
+        onClick={() =>
+          // TODO: Add the correct link
+          openInNewTab(
+            "https://docs.sanchogov.tools/how-to-use-the-govtool/getting-started/get-a-compatible-wallet"
+          )
+        }
+        sx={{
+          fontFamily: "Poppins",
+          fontSize: "16px",
+          lineHeight: "24px",
+          cursor: "pointer",
+        }}
+      >
+        {t("learnMore")}
+      </Link>
+    </Box>
+  );
+};