add cta button/link; test user link look

rage · Aug 28, 2023 · 9fa5176 · 9fa5176
1 parent 1180f39
commit 9fa5176
Show file tree

Hide file tree

Showing 22 changed files with 894 additions and 138 deletions.
diff --git a/frontend/components/NewLayout/Common/Button.tsx b/frontend/components/NewLayout/Common/Button.tsx
@@ -0,0 +1,89 @@
+import {
+  EnhancedButton,
+  EnhancedButtonProps,
+  Button as MUIButton,
+} from "@mui/material"
+import { css, styled } from "@mui/material/styles"
+
+import ArrowRight from "../Icons/ArrowRight"
+
+const ButtonText = styled("span")`
+  margin: 12px 24px;
+`
+
+const EnhancedMUIButton = styled(MUIButton)(
+  ({ theme, startIcon, href }) => `
+  ${
+    href
+      ? css`
+          &.MuiButton-containedPrimary {
+            ${ButtonText} {
+              margin: 12px 0 12px 16px;
+              padding-right: 16px;
+              border-right: solid 1px ${theme.palette.common.additional.skyblue};
+            }
+            &.Mui-disabled {
+              ${ButtonText} {
+                border-right: solid 1px ${theme.palette.common.grayscale.dark};
+              }
+            }
+          }
+          &.MuiButton-containedSecondary {
+            ${ButtonText} {
+              margin: 12px 16px;
+            }
+            &.MuiButton-endIcon {
+              padding-right: 1rem;
+              padding-left: 0;
+            }
+          }
+        `.styles
+      : ""
+  }
+  ${
+    startIcon
+      ? css`
+          &.MuiButton-containedPrimary {
+            ${ButtonText} {
+              margin: 12px 16px 12px 0;
+              padding-left: 16px;
+              border-left: solid 1px ${theme.palette.common.additional.skyblue};
+            }
+            &.Mui-disabled {
+              ${ButtonText} {
+                border-left: solid 1px ${theme.palette.common.grayscale.dark};
+              }
+            }
+          }
+          &.MuiButton-containedSecondary {
+            ${ButtonText} {
+              margin: 12px 16px;
+            }
+            &.MuiButton-startIcon {
+              padding-left: 1rem;
+              padding-right: 0;
+            }
+          }
+        `.styles
+      : ""
+  }
+`,
+) as EnhancedButton
+
+const Button = ({
+  children,
+  ...props
+}: React.PropsWithChildren<EnhancedButtonProps>) => {
+  const { href } = props
+
+  const endIcon: EnhancedButtonProps["endIcon"] =
+    props.endIcon ?? (href ? <ArrowRight /> : undefined)
+
+  return (
+    <EnhancedMUIButton {...props} endIcon={endIcon}>
+      <ButtonText>{children}</ButtonText>
+    </EnhancedMUIButton>
+  )
+}
+
+export default Button