button styling and color theme change

mykovasyl · Mar 31, 2023 · be8ca43 · be8ca43
1 parent fe53ca5
commit be8ca43
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 19 deletions.
diff --git a/client/src/components/LogIn.js b/client/src/components/LogIn.js
@@ -89,12 +89,13 @@ function LogIn() {
               autoComplete='current-password'
             />
             <Button
-              type='submit'
               fullWidth
+              type='submit'
               variant='contained'
-              sx={{ mt: 3, mb: 2 }}
+              onClick={handleSubmit}
+              sx={{ mt: 3, mb: 2, backgroundColor: "#DE5928" }}
             >
-              Sign In
+              Log In
             </Button>
           </Box>
         </Box>

diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
@@ -57,12 +57,16 @@ function NavBar() {
         <>
           <ListItem disablePadding as={Link} to='/login'>
             <ListItemButton sx={buttonStyle}>
-              <ListItemText>Log In</ListItemText>
+              <ListItemText>
+                <div style={boldText}>Log In</div>
+              </ListItemText>
             </ListItemButton>
           </ListItem>
           <ListItem disablePadding as={Link} to='/signup'>
             <ListItemButton sx={buttonStyle}>
-              <ListItemText>Sign Up</ListItemText>
+              <ListItemText>
+                <div style={boldText}>Sign Up</div>
+              </ListItemText>
             </ListItemButton>
           </ListItem>
         </>

diff --git a/client/src/components/RandomRecipe.js b/client/src/components/RandomRecipe.js
@@ -32,7 +32,12 @@ function RandomRecipe() {
 
   return (
     <div>
-      <Button type='button' variant='contained' onClick={handleClick}>
+      <Button
+        type='button'
+        variant='contained'
+        onClick={handleClick}
+        style={{ backgroundColor: "#DE5928" }}
+      >
         Get Random Recipe
       </Button>
       {recipe.title ? (

diff --git a/client/src/components/Recipe.js b/client/src/components/Recipe.js
@@ -100,7 +100,12 @@ function Recipe({ recipe }) {
       <CardActions disableSpacing>
         {user_id ? (
           id ? (
-            <Button type='button' variant='contained' onClick={deleteRecipe}>
+            <Button
+              type='button'
+              variant='contained'
+              onClick={deleteRecipe}
+              style={{ backgroundColor: "#bd2a00" }}
+            >
               Delete it!
             </Button>
           ) : null
@@ -111,7 +116,7 @@ function Recipe({ recipe }) {
             variant='contained'
             onClick={addRecipe}
           >
-            <FavoriteIcon />
+            <FavoriteIcon sx={{ color: "#FF7844" }} />
           </IconButton>
         )}
         <ExpandMore

diff --git a/client/src/components/RecipeBook.js b/client/src/components/RecipeBook.js
@@ -16,7 +16,7 @@ function RecipeBook() {
   }));
   const recipesDisplayed = currentUser.recipes.map((recipe) => (
     <Grid item xs={6} md={4} key={recipe.id}>
-      <Item>
+      <Item sx={{ backgroundColor: "#fbd0a8" }}>
         <Recipe key={recipe.summary} recipe={recipe} />
       </Item>
     </Grid>

diff --git a/client/src/components/RecipeForm.js b/client/src/components/RecipeForm.js
@@ -198,14 +198,15 @@ function RecipeForm() {
                 />
               </Grid>
             </Grid>
-            <Button
-              type='submit'
-              fullWidth
-              variant='contained'
-              sx={{ mt: 3, mb: 2 }}
-            >
-              Add to booka!
-            </Button>
+            <Grid display='flex' justifyContent='center' alignItems='center'>
+              <Button
+                type='submit'
+                variant='contained'
+                sx={{ mt: 3, mb: 2, backgroundColor: "#DE5928" }}
+              >
+                Add to booka!
+              </Button>
+            </Grid>
           </Box>
         </Box>
       </Container>

diff --git a/client/src/components/SignUp.js b/client/src/components/SignUp.js
@@ -122,10 +122,11 @@ function SignUp() {
               </Grid>
             </Grid>
             <Button
-              type='submit'
               fullWidth
+              type='submit'
               variant='contained'
-              sx={{ mt: 3, mb: 2 }}
+              onClick={handleSubmit}
+              sx={{ mt: 3, mb: 2, backgroundColor: "#DE5928" }}
             >
               Sign Up
             </Button>