More styling

markohanesian · Jul 9, 2024 · e0f21e3 · e0f21e3
1 parent b431777
commit e0f21e3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/src/components/CommentInput.js b/src/components/CommentInput.js
@@ -3,11 +3,31 @@ import { UserContext } from "../contexts/user";
 import { db } from "../firebase";
 import Liker from "./Liker";
 import { Stack, TextField, Button } from "@mui/material";
+import { styled } from "@mui/system";
 
-const CommentPostBtn = {
-    backgroundColor: 'rgb(139, 195, 74)',
-    color: "black"
-};
+// Styled component for custom TextField
+const CustomTextField = styled(TextField)(({ theme }) => ({
+  '& .MuiInputBase-input': {
+    color: 'white', // Text color
+  },
+  '& .MuiInputLabel-root': {
+    color: 'whitesmoke', // Placeholder text color
+  },
+  '& .MuiInputLabel-root.Mui-focused': {
+    color: 'whitesmoke', // Focused placeholder text color
+  },
+  '& .MuiOutlinedInput-root': {
+    '& fieldset': {
+      borderColor: 'whitesmoke', // Unfocused border color
+    },
+    '&:hover fieldset': {
+      borderColor: 'whitesmoke', // Hover border color
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'whitesmoke', // Focused border color
+    },
+  },
+}));
 
 export default function CommentInput({ id, comments }) {
   const [user] = useContext(UserContext).user;
@@ -42,17 +62,20 @@ export default function CommentInput({ id, comments }) {
     <Stack
       direction={{ xs: "column", sm: "row" }}
       spacing={2}
+      alignItems="center"
+      justifyContent="space-between"
+      sx={{ width: '100%' }}
     >
-      <TextField
+      <CustomTextField
         variant="outlined"
         placeholder="Add a comment..."
         fullWidth
         value={comment}
         onChange={(e) => setComment(e.target.value)}
         sx={{ flex: 1 }}
       />
-      <Stack direction="row" spacing={2} justifyContent="space-between">
-        <Button variant="contained" onClick={addComment} style={CommentPostBtn}>
+      <Stack direction="row" spacing={1}>
+        <Button variant="contained" color="primary" onClick={addComment}>
           Post
         </Button>
         <Liker />

diff --git a/src/components/feed.js b/src/components/feed.js
@@ -6,7 +6,6 @@ const FeedStyle = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  backgroundColor: 'rgb(58,63,65)'
 };
 
 export default function Feed() {

diff --git a/src/components/post.js b/src/components/post.js
@@ -9,10 +9,10 @@ import { Grid, Stack } from "@mui/material";
 const PostStyle = {
   padding: "1rem",
   margin: "1rem",
-  backgroundColor: "white",
   width: "90vw",
   maxWidth: "600px",
   position: "relative",
+  border: "2px solid rgb(139, 195, 74)"
 };
 
 const PostHeaderLeft = {
@@ -22,6 +22,7 @@ const PostHeaderLeft = {
 
 const PostUserName = {
   marginLeft: "1rem",
+  color: "white"
 };
 
 const PostProfilePic = {
@@ -36,10 +37,11 @@ const PostPhotoUrl = {
   objectFit: "cover",
 };
 
-const PostTextCaption = {};
+const PostTextCaption = {
+  color: "white"
+};
 
 const DeleteButtonStyle = {
-  color: "white",
   border: "none",
   padding: "0.5rem",
   cursor: "pointer",