feat: using Layout for User Guide

cardano-foundation · Jul 29, 2024 · a75632b · a75632b
1 parent c6973f3
commit a75632b
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 837 deletions.
diff --git a/ui/summit-2024/src/__fixtures__/userGuide.ts b/ui/summit-2024/src/__fixtures__/userGuide.ts
@@ -12,12 +12,14 @@ interface UserGuideSection {
 
 interface UserGuideMenuEntry {
   label: string;
+  title: string;
   sections: UserGuideSection[];
 }
 
 const userGuideMenu: UserGuideMenuEntry[] = [
   {
     label: "What You’ll Need",
+    title: "To Submit Votes, You’ll Need:",
     sections: [
       {
         number: 1,
@@ -39,6 +41,7 @@ const userGuideMenu: UserGuideMenuEntry[] = [
   },
   {
     label: "Creating an Account",
+    title: "Create and Verify Your Account:",
     sections: [
       {
         number: 1,
@@ -58,6 +61,7 @@ const userGuideMenu: UserGuideMenuEntry[] = [
   },
   {
     label: "How to Vote",
+    title: "How to Submit a Vote:",
     sections: [
       {
         number: 1,
@@ -99,4 +103,5 @@ const userGuideMenu: UserGuideMenuEntry[] = [
   },
 ];
 
+export type { UserGuideMenuEntry }
 export { userGuideMenu };
diff --git a/ui/summit-2024/src/components/Layout/Layout.tsx b/ui/summit-2024/src/components/Layout/Layout.tsx
@@ -10,12 +10,16 @@ type MenuItem = {
 
 type LayoutProps = {
   menuOptions: MenuItem[];
+  title: string;
+  bottom?: ReactNode;
   mode?: "scroll" | "change";
   defaultOption?: number;
 };
 
 const Layout: React.FC<LayoutProps> = ({
   menuOptions,
+    title,
+                                           bottom,
   mode = "scroll",
   defaultOption = 0,
 }) => {
@@ -192,7 +196,27 @@ const Layout: React.FC<LayoutProps> = ({
                 </>
             )}
         </Grid>
-        <Grid item xs={12} md={9.6} lg={10} sx={{ padding: "0px 20px" }}>
+        <Grid item xs={12} md={9.6} lg={10} sx={{
+          background: "transparent",
+          padding: {
+            xs: "0px 20px",
+            sm: "20px 0pxs",
+          },
+            marginTop: "10px"
+        }}>
+          <Typography
+              sx={{
+                color: theme.palette.text.neutralLightest,
+                fontFamily: "Dosis",
+                fontSize: "32px",
+                fontStyle: "normal",
+                fontWeight: 700,
+                lineHeight: "36px",
+                marginBottom: "32px",
+              }}
+          >
+            {title}
+          </Typography>
           {mode === "change"
             ? menuOptions.find((option) => option.label === selectedOption)
                 ?.content
@@ -208,6 +232,9 @@ const Layout: React.FC<LayoutProps> = ({
                   {option.content}
                 </div>
               ))}
+            {
+                bottom
+            }
         </Grid>
       </Grid>
     </Box>