New layout wip: button styling, hero component etc (#1240)

* more button styling; add contentwrapper; introduction * created generic hero, generallist etc., fixed module page card size uniformity
rage · Aug 31, 2023 · 962a24c · 962a24c
1 parent d82baf2
commit 962a24c
Show file tree

Hide file tree

Showing 35 changed files with 1,990 additions and 917 deletions.
diff --git a/frontend/components/NewLayout/Common/Button.tsx b/frontend/components/NewLayout/Common/Button.tsx
@@ -12,38 +12,47 @@ const ButtonText = styled("span")`
 `
 
 const EnhancedMUIButton = styled(MUIButton)(
-  ({ theme, startIcon, href }) => `
+  ({ theme, startIcon, href, color }) => `
   ${
     href
-      ? css`
-          &.MuiButton-containedPrimary {
+      ? color === "secondary"
+        ? css`
+            ${ButtonText} {
+              margin: 12px 16px;
+            }
+            &.MuiButton-endIcon {
+              padding-right: 1rem;
+              padding-left: 0;
+            }
+          `.styles
+        : css`
             ${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
+          `.styles
       : ""
   }
   ${
     startIcon
-      ? css`
-          &.MuiButton-containedPrimary {
+      ? color === "secondary"
+        ? css`
+            ${ButtonText} {
+              margin: 12px 16px;
+            }
+            &.MuiButton-startIcon {
+              padding-left: 1rem;
+              padding-right: 0;
+            }
+          `.styles
+        : css`
             ${ButtonText} {
               margin: 12px 16px 12px 0;
               padding-left: 16px;
@@ -54,17 +63,7 @@ const EnhancedMUIButton = styled(MUIButton)(
                 border-left: solid 1px ${theme.palette.common.grayscale.dark};
               }
             }
-          }
-          &.MuiButton-containedSecondary {
-            ${ButtonText} {
-              margin: 12px 16px;
-            }
-            &.MuiButton-startIcon {
-              padding-left: 1rem;
-              padding-right: 0;
-            }
-          }
-        `.styles
+          `.styles
       : ""
   }
 `,

diff --git a/frontend/components/NewLayout/Common/ContentWrapper.tsx b/frontend/components/NewLayout/Common/ContentWrapper.tsx
@@ -0,0 +1,21 @@
+import { styled } from "@mui/material/styles"
+
+const ContentWrapper = styled("div")(
+  ({ theme }) => `
+  margin: 0 auto;
+  max-width: 100%;
+  padding: 0 1rem;
+  position: relative;
+
+  ${theme.breakpoints.up("sm")} {
+    padding: 0 2rem;
+  }
+
+  ${theme.breakpoints.up("lg")} {
+    max-width: 1216px;
+    padding: 0;
+  }
+`,
+)
+
+export default ContentWrapper
diff --git a/frontend/components/NewLayout/Common/GeneralList.tsx b/frontend/components/NewLayout/Common/GeneralList.tsx
@@ -0,0 +1,72 @@
+import React from "react"
+
+import { styled } from "@mui/material/styles"
+
+import GeneralListItem, { GeneralListItemProps } from "./GeneralListItem"
+
+const GeneralListRoot = styled("ul")(
+  ({ theme, children }) => `
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 1.75rem;
+
+  ${theme.breakpoints.up("md")} {
+    margin-bottom: 2rem;
+  }
+  ${theme.breakpoints.up("lg")} {
+    margin-bottom: 2.5rem;
+  }
+
+  &.list__style-grid {
+    display: flex;
+    display: grid;
+    gap: 32px 0;
+
+    ${theme.breakpoints.up(768)} {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 32px 24px;
+    }
+
+    ${theme.breakpoints.up("desktop")} {
+      ${
+        // no orphans
+        React.Children.count(children) % 3 !== 1
+          ? "grid-template-columns: repeat(3, 1fr);"
+          : ""
+      }
+    }
+
+    ${theme.breakpoints.up("xxl")} {
+      gap: 32px;
+    }
+
+    li {
+      background-color: ${theme.palette.common.grayscale.backgroundBox};
+      width: 100%;
+      height: auto;
+    }
+  }
+`,
+)
+
+const listStyles = ["list", "grid"] as const
+
+export type ListStyle = (typeof listStyles)[number]
+
+export interface GeneralListProps {
+  type?: ListStyle
+  items?: Array<GeneralListItemProps>
+}
+
+const GeneralList = ({ type, items }: GeneralListProps) => {
+  return (
+    <GeneralListRoot className={`list__style-${type}`}>
+      {items?.map((item) => (
+        <GeneralListItem key={item.title} {...item} listStyle={type} />
+      ))}
+    </GeneralListRoot>
+  )
+}
+
+export default GeneralList