add profile page and edit profile dialog (#5)

src/App.css

@@ -41,6 +41,12 @@ body {
 div.container-lg {
   margin: auto;
   max-width: var(--SIZE-CONTAINER-LG);
+  padding-right: 1rem;
+}
+
+.main-container {
+  border: solid var(--COLOR-BACKGROUND-DARK-100);
+  border-width: 0 thin 0 thin;
 }
 
 /* override */

src/App.js

@@ -35,8 +35,8 @@ function App() {
 
             <Box
               component="main"
+              className="main-container"
               gridColumn={matches ? "span 9" : "span 6"}
-              p={2}
             >
               <Routes>
                 <Route path={ROUTE_BOOKMARKS} element={<Bookmarks />} />

src/assets/icons/LinkIcon.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const LinkIcon = (props) => {
+  return (
+    <svg height="48" width="48" {...props}>
+      <path d="M22.5 34H14Q9.75 34 6.875 31.125Q4 28.25 4 24Q4 19.75 6.875 16.875Q9.75 14 14 14H22.5V17H14Q11 17 9 19Q7 21 7 24Q7 27 9 29Q11 31 14 31H22.5ZM16.25 25.5V22.5H31.75V25.5ZM25.5 34V31H34Q37 31 39 29Q41 27 41 24Q41 21 39 19Q37 17 34 17H25.5V14H34Q38.25 14 41.125 16.875Q44 19.75 44 24Q44 28.25 41.125 31.125Q38.25 34 34 34Z" />
+    </svg>
+  );
+};

src/assets/index.js

@@ -10,6 +10,7 @@ export { FilledHomeIcon } from "./icons/FilledHomeIcon";
 export { FilledProfileIcon } from "./icons/FilledProfileIcon";
 
 export { HashtagIcon } from "./icons/HashtagIcon";
+export { LinkIcon } from "./icons/LinkIcon";
 
 export { OpenInNewIcon } from "./icons/OpenInNewIcon";
 export { OutlinedBookmarkIcon } from "./icons/OutlinedBookmarkIcon";

src/components/dialog/broadcast-dialog/BroadcastDialog.jsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import { HimanshuJPG } from "assets";
+import { BROADCAST_MAX_CHARACTERS } from "utils";
 import styles from "./BroadcastDialog.module.css";
 import {
   CircularProgressWithLabel,
@@ -18,19 +19,14 @@ import {
   TextField,
 } from "@mui/material";
 
-/**
- * maximum characters length in a post
- */
-const maxCharacters = 256;
-
 export const BroadcastDialog = ({
   openBroadcastDialog,
   setOpenBroadcastDialog,
 }) => {
   const [postText, setPostText] = useState("");
 
   const handlePostTextChange = (event) => {
-    if (maxCharacters - event.target.value.length >= 0)
+    if (BROADCAST_MAX_CHARACTERS - event.target.value.length >= 0)
       setPostText(event.target.value);
   };
 
@@ -79,15 +75,19 @@ export const BroadcastDialog = ({
       </DialogContent>
 
       <DialogActions className={styles.action_broadcast}>
-        {maxCharacters - postText.length > 20 ? (
+        {BROADCAST_MAX_CHARACTERS - postText.length > 20 ? (
           <CircularProgress
             size="2rem"
             sx={{ marginRight: "1rem" }}
             variant="determinate"
-            value={Math.round((postText.length * 100) / maxCharacters)}
+            value={Math.round(
+              (postText.length * 100) / BROADCAST_MAX_CHARACTERS
+            )}
           />
         ) : (
-          <CircularProgressWithLabel value={maxCharacters - postText.length} />
+          <CircularProgressWithLabel
+            value={BROADCAST_MAX_CHARACTERS - postText.length}
+          />
         )}
 
         <CustomButton

src/components/dialog/edit-profile-dialog/EditProfileDialog.jsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { BIO_MAX_CHARACTERS } from "utils";
+import { FilledAccountCircleIcon } from "assets";
+import styles from "./EditProfileDialog.module.css";
+
+import { CustomButton, DialogActionsCloseIcon, FormWrapper } from "components";
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  InputAdornment,
+  TextField,
+  Typography,
+} from "@mui/material";
+
+export const EditProfileDialog = ({
+  openEditProfileDialog,
+  setOpenEditProfileDialog,
+  newProfileData,
+  setNewProfileData,
+}) => {
+  const [bioText, setBioText] = useState(newProfileData.bio);
+
+  const handleBioTextChange = (event) => {
+    if (BIO_MAX_CHARACTERS - event.target.value.length >= 0) {
+      setBioText(event.target.value);
+      setNewProfileData((prevData) => ({
+        ...prevData,
+        bio: event.target.value.trim(),
+      }));
+    }
+  };
+
+  const handleNewProfileDataChange = (event) => {
+    setNewProfileData((prevData) => ({
+      ...prevData,
+      [event.target.name]: event.target.value.trim(),
+    }));
+  };
+
+  const handleClose = () => {
+    setOpenEditProfileDialog(false);
+  };
+
+  return (
+    <Dialog
+      open={openEditProfileDialog}
+      onClose={handleClose}
+      className={styles.dialogContainer}
+    >
+      <Box display="flex" alignItems="center">
+        <DialogActionsCloseIcon handleClose={handleClose} />
+
+        <Typography component="h1" fontWeight="bold" variant="h4">
+          Edit
+        </Typography>
+      </Box>
+
+      <DialogContent className={styles.dialogContent}>
+        <Box position="relative" px={1}>
+          <Box className={styles.background_img}></Box>
+          <Box ml={2} className={styles.profile_pic}>
+            <FilledAccountCircleIcon className={styles.accountCircle_icon} />
+          </Box>
+        </Box>
+
+        <FormWrapper>
+          <TextField
+            label="Name"
+            name="name"
+            type="text"
+            placeholder="Your Name..."
+            value={newProfileData.name}
+            onChange={handleNewProfileDataChange}
+            InputLabelProps={{ shrink: true }}
+          />
+
+          <TextField
+            label="Bio"
+            type="text"
+            multiline
+            minRows={3}
+            maxRows={4}
+            placeholder="Your Bio..."
+            value={bioText}
+            onChange={handleBioTextChange}
+            InputLabelProps={{ shrink: true }}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Typography component="p" className={styles.bioText_count}>
+                    {`${bioText.length} / ${BIO_MAX_CHARACTERS}`}
+                  </Typography>
+                </InputAdornment>
+              ),
+            }}
+          />
+
+          <TextField
+            label="Website URL"
+            name="websiteURL"
+            type="url"
+            value={newProfileData.websiteURL}
+            onChange={handleNewProfileDataChange}
+            placeholder="Your Website URL..."
+            InputLabelProps={{ shrink: true }}
+          />
+        </FormWrapper>
+      </DialogContent>
+
+      <DialogActions className={styles.action_save}>
+        <CustomButton className={styles.btn_save} onClick={handleClose}>
+          Save
+        </CustomButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+EditProfileDialog.propTypes = {
+  openEditProfileDialog: PropTypes.bool,
+  setOpenEditProfileDialog: PropTypes.func,
+  newProfileData: PropTypes.shape({
+    name: PropTypes.string,
+    bio: PropTypes.string,
+    websiteURL: PropTypes.string,
+  }),
+  setNewProfileData: PropTypes.func,
+};
+
+EditProfileDialog.defaultProps = {
+  openEditProfileDialog: false,
+  setOpenEditProfileDialog: () => {},
+  newProfileData: {
+    name: "",
+    bio: "",
+    websiteURL: "",
+  },
+  setNewProfileData: () => {},
+};

src/components/dialog/edit-profile-dialog/EditProfileDialog.module.css

@@ -0,0 +1,61 @@
+button.btn_save {
+  font-size: 1.4rem;
+  padding: 0.5rem 1.2rem;
+}
+
+div.action_save {
+  padding: 0.5rem 2rem 1rem;
+}
+
+div.dialogContent {
+  padding: 0;
+}
+
+div.dialogContent form {
+  margin-top: 4rem;
+  padding: 2rem 2rem 0;
+}
+
+div.dialogContent textarea[placeholder="Your Bio..."] {
+  line-height: 1.5em;
+  margin-top: 1rem;
+}
+
+p.bioText_count {
+  font-size: 1.4rem;
+  position: absolute;
+  transform: translate(-100%, 20%);
+  top: 0;
+}
+
+.accountCircle_icon {
+  fill: var(--COLOR-TEXT);
+  height: 100%;
+  margin: -0.1rem 0 0 -0.1rem;
+  width: 100%;
+}
+
+.accountCircle_icon > path {
+  transform: translate(-8%, -8%) scale(2.2);
+}
+
+.background_img {
+  background-color: var(--COLOR-SEARCH-INNER-SHADOW);
+  height: 14rem;
+  width: 100%;
+}
+
+.dialogContainer > div:nth-child(3) > div {
+  color: var(--COLOR-TEXT);
+  width: 55rem;
+}
+
+.profile_pic {
+  background-color: var(--COLOR-SEARCH-BACKGROUND);
+  border: thick solid var(--COLOR-SEARCH-BACKGROUND);
+  border-radius: 50%;
+  height: 10rem;
+  position: absolute;
+  transform: translateY(-50%);
+  width: 10rem;
+}

src/components/index.js

@@ -1,4 +1,5 @@
 export { BroadcastDialog } from "./dialog/broadcast-dialog/BroadcastDialog";
+export { EditProfileDialog } from "./dialog/edit-profile-dialog/EditProfileDialog";
 export { LogoutDialog } from "./dialog/logout-dialog/LogoutDialog";
 export { SignInDialog } from "./dialog/sign-in-dialog/SignInDialog";
 export { SignUpDialog } from "./dialog/sign-up-dialog/SignUpDialog";

src/components/left-side-navbar/LeftSideNavbar.jsx

@@ -30,7 +30,7 @@ export const LeftSideNavbar = () => {
   return (
     <Box
       component="aside"
-      gridColumn="span 3"
+      gridColumn="span 2"
       py={2}
       className={styles.aside}
       sx={{ flexDirection: "column" }}

src/components/left-side-navbar/LeftSideNavbar.module.css

@@ -12,6 +12,7 @@
 .aside {
   display: flex;
   justify-content: space-between;
+  width: 27rem;
 }
 
 .ellipsisIcon {

src/components/right-sidebar/RightSideBar.jsx

@@ -19,8 +19,9 @@ export const RightSideBar = () => {
   return (
     <Box
       component="aside"
-      gridColumn="span 3"
+      gridColumn="span 4"
       py={2}
+      pl={3}
       sx={{ display: matches ? "none" : "unset" }}
     >
       <InputBase

src/components/right-sidebar/RightSideBar.module.css

@@ -7,7 +7,7 @@ div.inputField {
   font-size: 1.7rem;
   margin: auto;
   padding: 0.5rem 1.5rem;
-  width: 100%;
+  width: 90%;
 }
 
 .followBox {
@@ -16,7 +16,7 @@ div.inputField {
   color: var(--COLOR-TEXT);
   margin: 3rem auto 0.5rem;
   padding: 2rem;
-  width: 100%;
+  width: 90%;
 }
 
 .followBox h2 {

src/components/shared/form-wrapper/FormWrapper.module.css

@@ -8,7 +8,7 @@
   margin: 1rem 0;
 }
 
-.form :is(label, input) {
+.form :is(label, input, textarea) {
   color: var(--COLOR-TEXT);
   font-size: 1.8rem;
 }

src/data/index.js

@@ -1,2 +1,3 @@
 export { LeftSideNavbarData } from "./left-side-navbar-data";
+export { ProfileData } from "./profile-data";
 export { SignInDialogData } from "./sign-in-dialog-data";

src/data/profile-data.js

@@ -0,0 +1,18 @@
+import { v4 as uuid } from "uuid";
+
+export const ProfileData = {
+  tabsOptions: [
+    {
+      _id: uuid(),
+      value: "Broadcasts",
+    },
+    {
+      _id: uuid(),
+      value: "Likes",
+    },
+    {
+      _id: uuid(),
+      value: "Replies",
+    },
+  ],
+};