idk

Sicnecher · Jan 18, 2025 · acce447 · acce447
1 parent b062816
commit acce447
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 50 deletions.
diff --git a/src/cmps/AppHeader.jsx b/src/cmps/AppHeader.jsx
@@ -9,6 +9,7 @@ import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import { logout } from "../store/actions/user.actions";
 
 export function AppHeader({ userData = null }) {
+  const iconStyle = {width: 16, height: 18};
   const navigate = useNavigate();
 
   function onLogOut() {
@@ -125,15 +126,13 @@ export function AppHeader({ userData = null }) {
         </div>
       </section>
       <section className="icons-section">
-        <NotificationsNoneIcon />
-        <InboxIcon />
-        <PersonAddAltIcon />
-        <ExtensionIcon />
-        <SearchIcon />
+        <NotificationsNoneIcon style={iconStyle} />
+        <InboxIcon style={iconStyle} />
+        <PersonAddAltIcon style={iconStyle} />
+        <ExtensionIcon style={iconStyle} />
         <div className="vertical-line"></div> {/* Vertical line separator */}
-        <QuestionMarkIcon />
-        <div className="vertical-line"></div> {/* Vertical line separator */}
-        <AppsIcon />
+        <SearchIcon style={iconStyle} />
+        <QuestionMarkIcon style={iconStyle} />
         <div className="account-logo" onClick={onLogOut}>
           <img
           sizes="10px"

diff --git a/src/cmps/SideBar.jsx b/src/cmps/SideBar.jsx
@@ -1,32 +1,39 @@
 import HomeIcon from "@mui/icons-material/HomeOutlined";
-import MyWorkIcon from "@mui/icons-material/EventAvailableOutlined"
-import FavoritesIcon from "@mui/icons-material/StarBorderRounded"
-import WorkspacesIcon from "@mui/icons-material/GridViewOutlined"
-import { useNavigate, useLocation } from "react-router"
-import { addBoard } from "../store/actions/boards.actions"
+import MyWorkIcon from "@mui/icons-material/EventAvailableOutlined";
+import FavoritesIcon from "@mui/icons-material/StarBorderRounded";
+import WorkspacesIcon from "@mui/icons-material/GridViewOutlined";
+import { useNavigate, useLocation } from "react-router";
+import { addBoard } from "../store/actions/boards.actions";
 import { utilService } from "../services/util.service";
-
+import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import PlusIcon from "@mui/icons-material/AddOutlined";
+import BoardIcon from "@mui/icons-material/SpaceDashboardOutlined";
 export function SideBar({ boards, user, onRemoveBoard }) {
-  const location = useLocation()
-  const navigate = useNavigate()
+  const location = useLocation();
+  const navigate = useNavigate();
 
   function onChangeAdressOnce(fullAddress) {
     if (location.pathname !== fullAddress) {
-      navigate(fullAddress)
+      navigate(fullAddress);
     }
   }
 
   function handleAddBoard() {
-    addBoard()
+    addBoard();
   }
 
-  const iconStyle= {width: 18}
+  const iconStyle = { width: 18, height: 16 };
 
   return (
     <nav className="side-bar">
       {/* Home Section */}
-      <section onClick={() => onChangeAdressOnce(
-        `/${utilService.getNameFromEmail(user.email)}s-team.sunday.com`)}>
+      <section
+        onClick={() =>
+          onChangeAdressOnce(
+            `/${utilService.getNameFromEmail(user.email)}s-team.sunday.com`
+          )
+        }
+      >
         <HomeIcon className="side-bar-icon home" style={iconStyle} />
         <h4>Home</h4>
       </section>
@@ -52,24 +59,33 @@ export function SideBar({ boards, user, onRemoveBoard }) {
         <h4>Workspaces</h4>
       </section>
 
-      <button className="add-board" onClick={handleAddBoard}>
-        +Add a new board
-      </button>
+      <div className="add-board">
+        <div>
+          <h3>Main Workspace</h3>
+          <ArrowDownIcon style={iconStyle} />
+        </div>
+        <button className="add-board-button" onClick={handleAddBoard}>
+          <PlusIcon style={{ height: 20, width: 22 }} />
+        </button>
+      </div>
 
       {/* Board List */}
       <ul className="sidebar-boardlist">
         {boards.map((board) => (
           <li key={board.id}>
-            <div className="sidebar-board">
+            <div
+              className="sidebar-board"
+              onClick={() =>
+                onChangeAdressOnce(
+                  `/${utilService.getNameFromEmail(
+                    user.email
+                  )}s-team.sunday.com/boards/${board.id}`
+                )
+              }
+            >
+              <BoardIcon style={{ width: 16, height: 16 }} />
               {/* Board Title Navigation */}
-              <p
-                onClick={() =>
-                  onChangeAdressOnce(
-                    `/${utilService.getNameFromEmail(user.email)}s-team.sunday.com/boards/${board.id}`)
-                }
-              >
-                {board.title}
-              </p>
+              <h3>{board.title}</h3>
 
               <button
                 className="remove"
@@ -82,5 +98,5 @@ export function SideBar({ boards, user, onRemoveBoard }) {
         ))}
       </ul>
     </nav>
-  )
+  );
 }
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
@@ -36,13 +36,13 @@
 .icons-section {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.8rem;
 }
 
 .vertical-line {
   width: 1px;
-  height: 24px; /* Adjust height as needed */
-  background-color: #000; /* Adjust color as needed */
+  height: 20px; /* Adjust height as needed */
+  background-color: #d0d4e4; /* Adjust color as needed */
   margin: 0 8px; /* Adjust spacing as needed */
 }
 

diff --git a/src/styles/_sideBar.scss b/src/styles/_sideBar.scss
@@ -1,13 +1,14 @@
-@import './vars';
+@import "./vars";
 
 .side-bar {
+  color: #333;
   width: 200px;
   background: linear-gradient(135deg, #ffffff 5%, #eceff8 100%);
   // background: linear-gradient(135deg, #0073ea 5%, #00c6ff 100%);
   display: flex;
   flex-direction: column;
-  padding-left: 1rem;
-  font-family: 'Roboto', sans-serif;
+  padding-left: 0.4rem;
+  font-family: "Roboto", sans-serif;
   border-top-right-radius: 12px;
   // border-bottom-right-radius: 12px;
   font-size: 10px;
@@ -17,7 +18,8 @@
     font-size: 12px;
     display: flex;
     align-items: center;
-    margin: 0.3rem 0;
+    margin: 0.3rem;
+    margin-left: 0.4rem;
     cursor: pointer;
     transition: background-color 0.3s;
 
@@ -55,14 +57,20 @@
 
   .sidebar-boardlist {
     list-style: none;
+    width: 90%;
+    margin-left: 0.4rem;
 
     .sidebar-board {
       cursor: pointer;
-
+      // padding-top: 10px;
+      padding:5px;
+      border-radius: 4px;
+      & h3 {
+        font-weight: 500;
+      }
       display: flex;
-      justify-content: space-between;
+      gap: 10px;
       align-items: center;
-      border-bottom: 1px solid #333;
 
       &:hover {
         background-color: #f0f0f0;
@@ -76,15 +84,36 @@
 }
 
 .add-board {
-  width: 100%;
+  display: grid;
+  grid-template-columns: 85% 15%;
+  width: 95%;
+  gap: 4px;
   background-color: #fff;
   padding: 0.5em;
-  margin-bottom: 1rem;
   margin-top: 1rem;
-  border: 0.01em solid #d1d1d1;
-
-  &:hover {
-    border: 1px solid #333;
+  color: #323338;
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 3px;
+    border: 1px solid #c3c6d4;
+    border-radius: 3px;
+    &:hover {
+      background-color: rgba(103, 104, 121, 0.1);
+    }
+  }
+  & > button {
+    padding-top: 3px;
+    background-color: #0073ea;
+    border: none;
+    border-radius: 3px;
+    color: white;
+    cursor: pointer;
+    &:hover {
+      background-color: #0060b9;
+    }
   }
 }