refactor styles

celinalou92 · Jul 12, 2024 · bafdd30 · bafdd30
1 parent 75fb02d
commit bafdd30
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 13 deletions.
diff --git a/app/components/Buttons/Buttons.tsx b/app/components/Buttons/Buttons.tsx
@@ -11,13 +11,19 @@ export const getButtons = (project: Project) => {
                     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
@@ -30,6 +36,9 @@ export const getButtons = (project: Project) => {
                 variant="outlined"
                 href={project.links[0]}
                 color="secondary"
+                sx={{
+                    padding: ".5rem 1rem"
+                }}
             >
                 See Demo on Vimeo
             </Button>

diff --git a/app/components/Contact/Contact.tsx b/app/components/Contact/Contact.tsx
@@ -30,14 +30,14 @@ export const Contact = () => {
 
   return (
     <Stack className="hover">
-      <Typography variant="h6">Contact:</Typography>
+      <Typography letterSpacing="1px" >Contact:</Typography>
       {contactData.map((contact) => (
         <Stack
           key={contact.linkText}
           display="flex"
           flexDirection="row"
           alignItems="center"
-          paddingBottom="3px"
+          padding={.5}
           sx={(theme) => ({
             mobileContactStyles,
             [theme.breakpoints.down("md")]: mobileContactStyles,

diff --git a/app/components/Nav/Nav.tsx b/app/components/Nav/Nav.tsx
@@ -2,15 +2,15 @@ import { Stack, Typography } from "@mui/material";
 import Link from "next/link";
 import { Contact } from "../Contact/Contact";
 
-export const NavBar = ({matches}: {matches: boolean}) => {
+export const NavBar = () => {
   const navItems = [
     { name: "About", link: "/#about" },
     { name: "Skills", link: "/#skills" },
-    { name: "Portfolio", link: "/#projects" }
+    { name: "Portfolio", link: "/#projects" },
   ];
   return (
     <Stack
-    className="navBar"
+      className="navBar"
       paddingLeft={"1rem"}
       sx={(theme) => ({
         [theme.breakpoints.down("md")]: {
@@ -27,12 +27,21 @@ export const NavBar = ({matches}: {matches: boolean}) => {
           key={navItem.name}
           href={navItem.link}
         >
-          <Typography variant={"h6"} letterSpacing="1px" color="secondary">
-            {navItem.name}
-          </Typography>
+          <Stack padding={1}>
+            <Typography letterSpacing="1px">{navItem.name}</Typography>
+          </Stack>
         </Link>
       ))}
-      {!matches && <Contact />}
+      <Stack
+        padding={1}
+        sx={(theme) => ({
+          [theme.breakpoints.down("md")]: {
+            display: "none",
+          },
+        })}
+      >
+        <Contact />
+      </Stack>
     </Stack>
   );
 };
diff --git a/app/components/SkillList/SkillsList.tsx b/app/components/SkillList/SkillsList.tsx
@@ -34,8 +34,8 @@ export const SkillList = ({ skillsListData }: { skillsListData: Skills }) => {
         <Grid
           container
           display="flex"
-          flexDirection="row"
-          alignItems="flex-start"
+          flexDirection={{sm:"column", md:"row"}}
+          alignItems={{sm:"center", md:"center"}}
           justifyContent="space-between"
           spacing={2}
           rowGap={5}

diff --git a/app/components/StyledCard/StyledCard.tsx b/app/components/StyledCard/StyledCard.tsx
@@ -18,7 +18,7 @@ export default function StyledCard({
       elevation={2}
       sx={{
         width: "70%",
-        border: "1px solid #121216",
+        border: "1px solid #ff79725c",
         borderRadius: "15px",
         textAlign: "center"
       }}
@@ -28,6 +28,7 @@ export default function StyledCard({
       <CardContent
         sx={{
           padding: "2% 0",
+          borderTop: "1px solid #ff79725c" 
         }}
       >
         <Stack rowGap={3}>

diff --git a/app/globals.css b/app/globals.css
@@ -98,7 +98,8 @@ a {
   color: #FF7972;
 }
 
-a:active {
+
+a:hover {
   color: #FF7972;
 }