update button text size, refactor card header

celinalou92 · Jul 12, 2024 · 498bfbd · 498bfbd
1 parent 71f6efb
commit 498bfbd
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 47 deletions.
diff --git a/app/components/Buttons/Buttons.tsx b/app/components/Buttons/Buttons.tsx
@@ -1,47 +1,50 @@
-import { Project } from "@/types/Project"
-import { Button } from "@mui/material"
+import { Project } from "@/types/Project";
+import { Button } from "@mui/material";
 
 export const getButtons = (project: Project) => {
-    {
-        return project.name != "Amanda Lynn Photography" ? (
-            <>
-                <Button
-                    variant="outlined"
-                    href={project.links[0]}
-                    color="secondary"
-                    target="_blank"
-                    rel="noreferrer"
-                    sx={{
-                        padding: ".5rem 1rem"
-                    }}
-                >
-                    See Github
-                </Button>
-                <Button
-                    target="_blank"
-                    rel="noreferrer"
-                    variant="outlined"
-                    sx={{
-                        padding: ".5rem 1rem"
-                    }}
-                    href={project.links[1]}
-                    color="secondary">
-                    See Live Site
-                </Button>
-            </>
-        ) : (
-            <Button
-                target="_blank"
-                rel="noreferrer"
-                variant="outlined"
-                href={project.links[0]}
-                color="secondary"
-                sx={{
-                    padding: ".5rem 1rem"
-                }}
-            >
-                See Demo on Vimeo
-            </Button>
-        )
-    }
-}
+  {
+    return project.name != "Amanda Lynn Photography" ? (
+      <>
+        <Button
+          variant="outlined"
+          href={project.links[0]}
+          color="secondary"
+          target="_blank"
+          rel="noreferrer"
+          sx={{
+            padding: ".5rem 1rem",
+            fontSize: ".75rem",
+          }}
+        >
+          See Github
+        </Button>
+        <Button
+          target="_blank"
+          rel="noreferrer"
+          variant="outlined"
+          sx={{
+            padding: ".5rem 1rem",
+            fontSize: ".75rem",
+          }}
+          href={project.links[1]}
+          color="secondary"
+        >
+          See Live Site
+        </Button>
+      </>
+    ) : (
+      <Button
+        target="_blank"
+        rel="noreferrer"
+        variant="outlined"
+        href={project.links[0]}
+        color="secondary"
+        sx={{
+          padding: ".5rem 1rem",
+        }}
+      >
+        See Demo on Vimeo
+      </Button>
+    );
+  }
+};
diff --git a/app/components/StyledCard/StyledCard.tsx b/app/components/StyledCard/StyledCard.tsx
@@ -33,7 +33,7 @@ export default function StyledCard({
       >
         <Stack rowGap={3}>
           <Stack sx={{ borderBottom: "1px solid #ff79725c" }}>
-            <Typography width={"100%"} gutterBottom variant="h5">
+            <Typography textTransform={"uppercase"} width={"100%"} gutterBottom variant="body1">
               {contentHeader}
             </Typography>
           </Stack>

diff --git a/app/globals.css b/app/globals.css
@@ -107,6 +107,16 @@ a:hover {
  color: #fff;
 }
 
+/* Hide scrollbar for Chrome, Safari and Opera */
+*::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+* {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
 
 .outer {
   padding-left: 55%;
@@ -144,7 +154,7 @@ a:hover {
 /* Tablet and Smaller Desktop */
 @media (max-width: 900px) {
   .outer{
-    padding: 10% 10%;
+    padding: 20% 10%;
   }
 
   .asideContainer {