Issue 113: Implement Settings page Frontend

frontend/src/scenes/settings/Settings.css

@@ -0,0 +1,6 @@
+.settings{
+    display: flex;
+    justify-content: center;
+    width: 60%;
+    margin: 30px 30px;
+}

frontend/src/scenes/settings/Settings.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import SettingsTabs from "./SettingsTabs/SettingsTabs";
+import './Settings.css'
+import HomePageTemplate from "../../components/templates/HomePageTemplate";
+
+const Settings = () => {
+  return (
+    <div>
+      <HomePageTemplate>
+        <div className="settings">
+          <SettingsTabs />
+        </div>
+      </HomePageTemplate>
+    </div>
+  );
+};
+
+export default Settings;

frontend/src/scenes/settings/SettingsTabs/ProfileTab/ProfileTab.css

@@ -0,0 +1,83 @@
+*{
+    font-size: 13px;
+}
+.form{
+    padding-bottom: 20px;
+    border-bottom: 1px solid #EEEEEE;
+}
+.first-name-element{
+    display: flex;
+    justify-content: space-between;
+    margin: 0px;
+}
+.form-elements{
+    display: flex;
+    justify-content: space-between;
+    margin: 25px 0px;
+}
+.photo-elements{
+    display: flex;
+    gap: 12px;
+    margin: 30px 0px;
+}
+.photo-options{
+    display: flex;
+    gap: 20px;
+}
+.label-elements{
+    display: flex;
+    flex-direction: column;
+}
+.label{
+    font-weight: 600;
+}
+.support-text{
+    margin: 0;
+    font-weight: 400;
+    color: #667085;
+    padding-right: 25px;
+}
+.input{
+    width: 378px;
+    height: 34px;
+    border: 1px solid #D0D5DD;
+    border-radius: 4px;
+}
+.update{
+    color: #1976d2;
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+.button-options{
+    display: flex;
+    gap: 16px;
+}
+.save-button{
+    display: flex;
+    justify-content: flex-end;
+}
+.save{
+    width: 160px;
+    height: 34px;
+    color: white;
+    background-color: #4C7DE7;
+    padding: 10px 16px;
+    border: 1px solid #175CD3;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.delete-heading{
+    margin-top: 10px;
+    margin-bottom: 0px;
+}
+.delete{
+    width: 160px;
+    height: 34px;
+    color: white;
+    background-color: #DB504A;
+    border: 1px solid #DB504A;
+    margin-top: 20px;
+    border-radius: 4px;
+    cursor: pointer;
+}

frontend/src/scenes/settings/SettingsTabs/ProfileTab/ProfileTab.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import Avatar from "../../../../components/Avatar/Avatar";
+import "./ProfileTab.css";
+
+const ProfileTab = () => {
+  return (
+    <div>
+      <div>
+        <form className="form">
+          <div className="first-name-element">
+            <label htmlFor="first-name" className="label">
+              First Name
+            </label>
+            <input
+              type="text"
+              name="first-name"
+              id="first-name"
+              className="input"
+            />
+          </div>
+          <div className="form-elements">
+            <label htmlFor="last-name" className="label">
+              Last Name
+            </label>
+            <input
+              type="text"
+              name="last-name"
+              id="last-name"
+              className="input"
+            />
+          </div>
+          <div className="form-elements">
+            <div className="label-elements">
+              <label htmlFor="email" className="label">
+                Email
+              </label>
+              <p className="support-text">
+                This is your current email address -- it cannot be changed.
+              </p>
+            </div>
+            <input type="email" name="email" id="email" className="input" />
+          </div>
+          <div className="photo-elements">
+            <div>
+              <label htmlFor="photo" className="label">
+                Your Photo
+              </label>
+              <p className="support-text">
+                This photo will be displayed in your profile page.
+              </p>
+            </div>
+            <div className="photo-options">
+              <Avatar src="/vendetta.png" alt="User" size="large"/>
+              <div className="button-options">
+                <p>Delete</p>
+                <button className="update">Update</button>
+              </div>
+            </div>
+          </div>
+          <div className="save-button">
+            <button className="save">Save</button>
+          </div>
+        </form>
+        <div>
+            <div>
+                <h4 className="delete-heading">Delete Account</h4>
+                <p className="support-text">Note that deleting your account will remove all data from our system. This is permanent and non-recoverable.</p>
+            </div>
+            <button className="delete">Delete Account</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileTab;

frontend/src/scenes/settings/SettingsTabs/SettingsTabs.css

@@ -0,0 +1,3 @@
+.tab-label{
+    font-size: 13px !important;
+}

frontend/src/scenes/settings/SettingsTabs/SettingsTabs.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import TabContext from '@mui/lab/TabContext';
+import TabList from '@mui/lab/TabList';
+import TabPanel from '@mui/lab/TabPanel';
+import './SettingsTabs.css'
+import ProfileTab from './ProfileTab/ProfileTab';
+
+
+const tabLabel = ['Profile', 'Password', 'Team']
+
+export default function SettingsTabs() {
+  const [value, setValue] = useState('1');
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%', typography: 'body1' }}>
+      <TabContext value={value}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <TabList onChange={handleChange} aria-label="lab API tabs example">
+            <Tab label="Profile" value="1" className='tab-label'/>
+            <Tab label="Password" value="2" className='tab-label'/>
+            <Tab label="Team" value="3" className='tab-label'/>
+          </TabList>
+        </Box>
+        <TabPanel value="1"><ProfileTab/></TabPanel>
+        <TabPanel value="2">Item Two</TabPanel>
+        <TabPanel value="3">Item Three</TabPanel>
+      </TabContext>
+    </Box>
+  );
+}