syncing after fetching my synced forking

Client/src/App.jsx

@@ -1,33 +1,9 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
 function App() {
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <div></div>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

Client/src/Pages/PlayGround/PlayGround-Popup-Modals.jsx

@@ -5,10 +5,19 @@ import DualButtonPopupModalWithTextfields from "../../components/PopupModals/Dua
 function PlayGroundPopupModals() {
   return (
     <div style={{ display: "flex" }}>
-      <DualButtonPopupModal />
+      <DualButtonPopupModal
+        subject="Unsaved changes"
+        description="Do you want to save or discard changes?"
+        esc="Discard"
+        save="Save changes"
+      />
       <br />
       <br />
-      <DualButtonPopupModalWithTextfields />
+      <DualButtonPopupModalWithTextfields
+        title="Create new organization"
+        esc="Cancel"
+        save="Save"
+      />
     </div>
   );
 }

Client/src/Pages/PlayGround/PlayGround-announcements.jsx

@@ -1,3 +1,4 @@
+import "./playGround.css";
 import React from "react";
 import AnnouncementsDualButtonWithIcon from "../../components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
@@ -8,7 +9,7 @@ import AnnouncementUpdateSubscription from "../../components/Announcements/Annou
 
 function PlayGroundAnnouncements() {
   return (
-    <div>
+    <div className="playground">
       <AnnouncementsDualButtonWithIcon
         icon={
           <div className="info-icon-frame">
@@ -52,7 +53,7 @@ function PlayGroundAnnouncements() {
       />
       <br />
       <br />
-      <AnnouncementsMessageBar />
+      <AnnouncementsMessageBar message="New employee created successfully" />
       <br />
       <br />
       <AnnouncementUpdateSubscription

Client/src/Pages/PlayGround/PlayGround.jsx

@@ -48,7 +48,10 @@ function PlayGround() {
       <hr />
       {/* Now, illustration of the Description text fields */}
       <br />
-      <DescriptionTextField hintText="This is a hint text to help user." />
+      <DescriptionTextField
+        hasError={false}
+        hintText="This is a hint text to help user."
+      />
       <DescriptionTextField
         hasError={true}
         hintText="This is a hint text to help user."

Client/src/Pages/PlayGround/playGround.css

@@ -8,7 +8,12 @@
 
 .tooltip-playground {
   margin: auto;
-  width: 100%;
+  padding: 5%;
+  width: 5%;
   justify-content: center;
   text-align: center;
 }
+
+.playground {
+  padding: 40px;
+}

Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx

@@ -1,14 +1,15 @@
 import "./announcementUpdateSubscription.css";
 import React from "react";
+import PropTypes from "prop-types";
 
-function AnnouncementUpdateSubscription({
+const AnnouncementUpdateSubscription = ({
   title,
   text,
   cancel,
   positive,
   header,
   button,
-}) {
+}) => {
   return (
     <div className="update-subscription">
       <div className="update-subscription-dialog">
@@ -35,6 +36,15 @@ function AnnouncementUpdateSubscription({
       <div className="v-spacing-medium"></div>
     </div>
   );
-}
+};
+
+AnnouncementUpdateSubscription.propTypes = {
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  cancel: PropTypes.string.isRequired,
+  positive: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  button: PropTypes.string.isRequired,
+};
 
 export default AnnouncementUpdateSubscription;

Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css

@@ -30,7 +30,7 @@
 .subscription-dialog-title {
   font-size: 1rem;
   font-family: var(--update-subscription-font-family);
-  font-weight: 900;
+  font-weight: 700;
   color: var(--update-subscription-color-0);
 }
 
@@ -68,6 +68,7 @@
   border: 1px solid var(--update-subscription-color-4);
   background-color: var(--update-subscription-color-5);
   color: var(--update-subscription-color-2);
+  font-size: 13px;
 }
 
 .update-subscription-title {

Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx

@@ -1,8 +1,9 @@
 import "./announcementsDualButton.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
+import PropTypes from "prop-types";
 
-function AnnouncementsDualButton({ subject, body, esc, primary }) {
+const AnnouncementsDualButton = ({ subject, body, esc, primary }) => {
   return (
     <div className="announcement-without-tile">
       <div className="announcement-without-content">
@@ -20,6 +21,13 @@ function AnnouncementsDualButton({ subject, body, esc, primary }) {
       </div>
     </div>
   );
-}
+};
+
+AnnouncementsDualButton.propTypes = {
+  subject: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  esc: PropTypes.string.isRequired,
+  primary: PropTypes.string.isRequired,
+};
 
 export default AnnouncementsDualButton;

Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx

@@ -1,6 +1,7 @@
 import "./announcementsDualButtonWithIcon.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
+import PropTypes from "prop-types";
 
 function AnnouncementsDualButtonWithIcon({
   icon,
@@ -33,4 +34,12 @@ function AnnouncementsDualButtonWithIcon({
   );
 }
 
+AnnouncementsDualButtonWithIcon.propTypes = {
+  icon: PropTypes.object,
+  subject: PropTypes.string,
+  body: PropTypes.string,
+  esc: PropTypes.string,
+  primary: PropTypes.string,
+};
+
 export default AnnouncementsDualButtonWithIcon;

Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css

@@ -44,6 +44,7 @@
 .announcement-content-body {
   font-size: var(--announcement-font-size-0);
   color: var(--announcement-font-color-1);
+  font-weight: 300;
 }
 
 .announcement-content-controllers {
@@ -54,13 +55,13 @@
 
 .controllers-button-esc {
   font-size: var(--announcement-font-size-0);
-  font-weight: 500;
+  font-weight: 600;
   margin-right: 12px;
 }
 
 .controllers-button-primary {
   font-size: var(--announcement-font-size-0);
-  font-weight: 500;
+  font-weight: 600;
   color: var(--announcement-font-color-2);
 }
 

Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx

@@ -1,13 +1,12 @@
 import "./announcementsMessageBar.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
+import PropTypes from "prop-types";
 
-function AnnouncementsMessageBar() {
+function AnnouncementsMessageBar({ message }) {
   return (
     <div className="announcement-tile">
-      <div className="announcement-messagebar-body">
-        New employee created successfully
-      </div>
+      <div className="announcement-messagebar-body">{message}</div>
       <div className="announcement-close">
         <CloseIcon style={{ fill: "#98A2B3" }} />
       </div>
@@ -15,4 +14,8 @@ function AnnouncementsMessageBar() {
   );
 }
 
+AnnouncementsMessageBar.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
 export default AnnouncementsMessageBar;

Client/src/components/Charts/Servers/ServerStatus.jsx

@@ -1,13 +1,20 @@
 import React from "react";
 import "./serverStatus.css";
+import PropTypes from "prop-types";
 
-function ServerStatus({ title, value, state }) {
+const ServerStatus = ({ title, value, state }) => {
   return (
     <div className="server-status-tile">
       <div className="server-status-tile-title">{title}</div>
       <div className={`server-status-tile-value ` + " " + state}>{value}</div>
     </div>
   );
-}
+};
+
+ServerStatus.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  state: PropTypes.string.isRequired,
+};
 
 export default ServerStatus;

Client/src/components/Charts/Servers/serverStatus.css

@@ -15,6 +15,7 @@
 .server-status-tile {
   width: 230px;
   margin: var(--spacing-general-0);
+  margin-left: 10px;
   padding: var(--spacing-general-1);
   border: 1px solid var(--color-border-0);
   border-radius: var(--border-radius-0);

Client/src/components/Charts/Statistics/Statistic.jsx

@@ -1,13 +1,19 @@
 import React from "react";
 import "./statistic.css";
+import PropTypes from "prop-types";
 
-function Statistic({ title, value }) {
+const Statistic = ({ title, value }) => {
   return (
     <div className="statistic-tile">
       <div className="statistic-tile-title">{title}</div>
       <div className="statistic-tile-value">{value}</div>
     </div>
   );
-}
+};
+
+Statistic.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};
 
 export default Statistic;

Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx

@@ -1,8 +1,9 @@
 import "./complexAlert.css";
 import React from "react";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import PropTypes from "prop-types";
 
-function ComplexAlert({ theme }) {
+const ComplexAlert = ({ theme }) => {
   if (theme === "red") {
     return (
       <div className="icon-holder-outer-red">
@@ -20,6 +21,10 @@ function ComplexAlert({ theme }) {
       </div>
     );
   }
-}
+};
+
+ComplexAlert.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
 
 export default ComplexAlert;

Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx

@@ -1,20 +1,33 @@
 import "./dualButtonPopupModal.css";
 import React from "react";
+import PropTypes from "prop-types";
 
-function DualButtonPopupModal({ open = true }) {
+const DualButtonPopupModal = ({
+  open = true,
+  subject,
+  description,
+  esc,
+  save,
+}) => {
   return (
     <div className="dual-button-popup-modal-holder">
-      <div className="dual-button-popup-modal-subject">Unsaved changes</div>
-      <div className="dual-button-popup-modal-description">
-        Do you want to save or discard changes?
-      </div>
+      <div className="dual-button-popup-modal-subject">{subject}</div>
+      <div className="dual-button-popup-modal-description">{description}</div>
       <div className="dual-modal-spacing"></div>
       <div className="dual-button-popup-modal-controllers">
-        <button className="transparent-discard-button">Discard</button>
-        <button className="blue-save-button">Save changes</button>
+        <button className="transparent-discard-button">{esc}</button>
+        <button className="blue-save-button">{save}</button>
       </div>
     </div>
   );
-}
+};
+
+DualButtonPopupModal.propTypes = {
+  open: PropTypes.bool,
+  subject: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  esc: PropTypes.string.isRequired,
+  save: PropTypes.string.isRequired,
+};
 
 export default DualButtonPopupModal;

Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css

@@ -21,7 +21,8 @@
 .dual-button-popup-modal-subject {
   font-family: var(--popup-font-family-0);
   color: var(--popup-color-0);
-  font-weight: 900;
+  font-weight: bolder;
+  font-size: 16px;
 }
 
 .dual-button-popup-modal-description {
@@ -52,6 +53,7 @@
   color: white;
   font-family: var(--popup-font-family-0);
   cursor: pointer;
+  font-size: 13px;
 }
 
 .transparent-discard-button {
@@ -59,4 +61,5 @@
   background-color: transparent;
   font-family: var(--popup-font-family-0);
   margin: 5px 10px;
+  font-size: 13px;
 }

Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx

@@ -1,13 +1,13 @@
 import "./dualButtonPopupModalWithTextfields.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
-import { TextField } from "@mui/material";
+import PropTypes from "prop-types";
 
-function DualButtonPopupModalWithTextfields() {
+function DualButtonPopupModalWithTextfields({ title, esc, save }) {
   return (
     <div className="popup-modal-holder">
       <div className="popup-modal-header">
-        <div className="popup-modal-title">Create new organization</div>
+        <div className="popup-modal-title">{title}</div>
         <div className="popup-modal-close">
           <CloseIcon style={{ fill: "#98A2B3" }} />
         </div>
@@ -17,13 +17,19 @@ function DualButtonPopupModalWithTextfields() {
       <div className="spacing-height"></div>
       <div className="spacing-height"></div>
       <div className="popup-modal-controllers">
-        <button className="white-cancel-button">Cancel</button>
-        <button className="blue-save-button">Save</button>
+        <button className="white-cancel-button">{esc}</button>
+        <button className="blue-save-button">{save}</button>
       </div>
     </div>
   );
 }
 
+DualButtonPopupModalWithTextfields.propTypes = {
+  title: PropTypes.string.isRequired,
+  esc: PropTypes.string.isRequired,
+  save: PropTypes.string.isRequired,
+};
+
 export default DualButtonPopupModalWithTextfields;
 
 function PopupModalTextfield() {

Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css

@@ -30,7 +30,7 @@
 }
 
 .popup-modal-input-title {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   color: var(--popup-modal-with-input-title-color);
 }
 
@@ -57,4 +57,5 @@
   border: 1px solid var(--popup-color-with-input-border-1);
   border-radius: 4px;
   cursor: pointer;
+  font-size: 13px;
 }

Client/src/components/TextFields/Description/DescriptionTextField.jsx

@@ -1,12 +1,14 @@
 import React from "react";
 import "./descriptionTextField.css";
 import { TextField } from "@mui/material";
+import PropTypes from "prop-types";
 
-function DescriptionTextField({ hintText, hasError }) {
+const DescriptionTextField = ({ hintText, hasError }) => {
   return (
     <div className="description-field-holder">
-      <div className="text-field-title">Website</div>
+      <div className="text-field-title">Description</div>
       <TextField
+        id="description-field-area"
         error={hasError}
         className="description-field-area"
         multiline
@@ -16,6 +18,11 @@ function DescriptionTextField({ hintText, hasError }) {
       />
     </div>
   );
-}
+};
+
+DescriptionTextField.propTypes = {
+  hintText: PropTypes.string.isRequired,
+  hasError: PropTypes.bool.isRequired,
+};
 
 export default DescriptionTextField;

Client/src/components/TextFields/Description/descriptionTextField.css

@@ -2,6 +2,7 @@
   --color-title-1: #344054;
   --font-family-1: "Roboto", "Helvetica", "Arial", sans-serif;
   --text-field-margin-0: 10px 20px;
+  --description-color-0: #344054;
 }
 
 .description-field-holder {
@@ -14,9 +15,13 @@
   font-weight: bold;
   font-family: var(--font-family-1);
   margin-bottom: 10px;
+  font-size: 13px;
+  color: var(--description-color-0);
+  font-weight: bold;
 }
 
 .description-field-area {
+  min-width: 320px;
   font-size: 13px;
   border-radius: 8px;
 }
@@ -30,3 +35,14 @@
 .with-error {
   color: red;
 }
+
+#description-field-area-helper-text {
+  margin-left: 0;
+  margin-top: 10px;
+  font-size: 11px;
+}
+
+#description-field-area {
+  min-width: 320px;
+  font-size: 13px;
+}

Client/src/components/TextFields/Email/EmailTextField.jsx

@@ -4,7 +4,7 @@ import { InputAdornment, TextField } from "@mui/material";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 
-function EmailTextField({
+const EmailTextField = ({
   id,
   label,
   variant,
@@ -12,10 +12,9 @@ function EmailTextField({
   icon,
   helperText,
   error,
-}) {
+}) => {
   const [showIcon, setShowIcon] = useState(false);
 
-  // State to control mouse hover effect
   const handleMouseEnter = () => setShowIcon(true);
   const handleMouseLeave = () => setShowIcon(false);
 
@@ -33,13 +32,26 @@ function EmailTextField({
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
-                {error && showIcon && (
-                  <ErrorOutlineIcon style={{ fill: "red" }} />
-                )}
-                {error && !showIcon && (
-                  <ErrorOutlineIcon style={{ fill: "red" }} />
-                )}
-                {!error && showIcon && <HelpOutlineIcon />}
+                <div className="icon-holder">
+                  {error && showIcon && (
+                    <ErrorOutlineIcon
+                      className="text-field-icon"
+                      style={{ fill: "red", width: "16px", height: "16px" }}
+                    />
+                  )}
+                  {error && !showIcon && (
+                    <ErrorOutlineIcon
+                      className="text-field-icon"
+                      style={{ fill: "red", width: "16px", height: "16px" }}
+                    />
+                  )}
+                  {!error && showIcon && (
+                    <HelpOutlineIcon
+                      className="text-field-icon"
+                      style={{ width: "16px", height: "16px" }}
+                    />
+                  )}
+                </div>
               </InputAdornment>
             ),
           }}
@@ -50,6 +62,6 @@ function EmailTextField({
       </div>
     </>
   );
-}
+};
 
 export default EmailTextField;

Client/src/components/TextFields/Email/emailTextField.css

@@ -1,6 +1,5 @@
-#outlined-basic {
-  width: 320px;
-  font-size: 13px;
+:root {
+  --textfield-color-0: #344054;
 }
 
 .email-text-field {
@@ -8,8 +7,36 @@
   margin: 10px 20px;
 }
 
+#outlined-basic {
+  width: 320px;
+  height: 14px;
+  font-size: 13px;
+  padding: 8px 12px;
+}
+
 .email-text-field-title {
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   margin: 0 20px;
   margin-top: 30px;
+  font-size: 13px;
+  color: var(--textfield-color-0);
+  font-weight: bold;
+}
+
+#outlined-basic-helper-text {
+  margin-left: 0;
+  margin-top: 10px;
+  font-size: 11px;
+}
+
+.text-field-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-holder {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  margin: 0;
 }

Client/src/components/TextFields/Website/WebsiteTextField.jsx

@@ -3,11 +3,11 @@ import "./websiteTextField.css";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
-function WebsiteTextField({
+const WebsiteTextField = ({
   showHelp = true,
   hasCopyButton = false,
   hintText,
-}) {
+}) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
@@ -19,9 +19,7 @@ function WebsiteTextField({
     <>
       <div className="website-textfield-title">Website</div>
       <div className="website-textfield">
-        <label className="website-label" htmlFor="website">
-          http://
-        </label>
+        <label className="website-label">http://</label>
         <input
           type="url"
           name="website-url"
@@ -41,14 +39,17 @@ function WebsiteTextField({
         )}
         {hasCopyButton && (
           <div className="copy-to-clipboard-button" onClick={handleCopy}>
-            <ContentCopyIcon className="copy-icon" />
-            <span>{copied ? " Copied " : " Copy "}</span>
+            <ContentCopyIcon
+              className="copy-icon"
+              style={{ width: "20px", height: "20px" }}
+            />
+            <span className="">{copied ? " Copied " : " Copy "}</span>
           </div>
         )}
       </div>
       <label className="website-textfield-hint">{hintText}</label>
     </>
   );
-}
+};
 
 export default WebsiteTextField;

Client/src/components/TextFields/Website/websiteTextField.css

@@ -1,4 +1,5 @@
 :root {
+  --website-color-0: #344054;
   --border-color: #d0d5dd;
   --label-font-color: #475467;
   --icon-color: #98a2b3;
@@ -11,6 +12,9 @@
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   margin: 0 20px;
   margin-top: 30px;
+  font-size: 13px;
+  color: var(--website-color-0);
+  font-weight: bold;
 }
 
 .website-textfield {
@@ -28,11 +32,10 @@
 }
 
 .website-label {
-  height: 33px;
-  padding: 5px 20px 5px 10px;
+  padding: 6px 20px 6px 10px;
   border: solid 1px var(--border-color);
   border-right: none;
-  border-radius: 8px 0 0 8px;
+  border-radius: 4px 0 0 4px;
   font-size: 13px;
   text-align: center;
   display: flex;
@@ -43,8 +46,8 @@
 
 .website-url {
   width: 248px;
-  height: 33px;
-  padding: 5px 15px;
+  height: 31.5px;
+  padding: 0px 15px;
   border: solid 1px var(--border-color);
 }
 
@@ -61,8 +64,7 @@
 }
 
 .copy-to-clipboard-button {
-  height: 33px;
-  padding: 5px 20px 5px 10px;
+  padding: 5.5px 20px 6px 10px;
   border: solid 1px var(--border-color);
   border-left: none;
   border-radius: 0 8px 8px 0;
@@ -76,7 +78,7 @@
 }
 
 .copy-icon {
-  margin-right: 10px;
+  margin-right: 5px;
 }
 
 .with-no-copy-button {

Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx

@@ -1,7 +1,6 @@
 import "./tooltipWithTail.css";
 import React from "react";
 import { styled } from "@mui/material/styles";
-import Button from "@mui/material/Button";
 import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";