Merge pull request #35 from Sicnecher/sicnecher-branch

Sicnecher branch
Sicnecher · Jan 19, 2025 · f40d048 · f40d048
2 parents 29d0ed4 + 72f73e8
commit f40d048
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 78 deletions.
diff --git a/src/cmps/AppHeader.jsx b/src/cmps/AppHeader.jsx
@@ -9,7 +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 iconStyle = {width: 22, height: 22};
   const navigate = useNavigate();
 
   function onLogOut() {
@@ -23,13 +23,13 @@ export function AppHeader({ userData = null }) {
         <svg
           viewBox="0 0 33 33"
           fill="currentColor"
-          width="20"
-          height="20"
+          width="25"
+          height="25"
           aria-hidden="true"
-          className="icon_da9e87501e"
+          class="icon_da9e87501e"
           data-testid="topbar-icon"
         >
-          <g clipPath="url(#clip0_1150_158978)">
+          <g clip-path="url(#clip0_1150_158978)">
             <path
               d="M20.3812 4.62863C20.3812 2.47439 18.6357 0.728027 16.4826 0.728027C14.3294 0.728027 12.584 2.47439 12.584 4.62863V8.91568C12.584 11.0699 14.3294 12.8163 16.4826 12.8163C18.6357 12.8163 20.3812 11.0699 20.3812 8.91568V4.62863Z"
               fill="url(#paint0_linear_1150_158978)"
@@ -68,8 +68,8 @@ export function AppHeader({ userData = null }) {
               y2="13.595"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint1_linear_1150_158978"
@@ -79,8 +79,8 @@ export function AppHeader({ userData = null }) {
               y2="16.521"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint2_linear_1150_158978"
@@ -90,8 +90,8 @@ export function AppHeader({ userData = null }) {
               y2="21.306"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint3_linear_1150_158978"
@@ -101,8 +101,8 @@ export function AppHeader({ userData = null }) {
               y2="21.333"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint4_linear_1150_158978"
@@ -112,8 +112,8 @@ export function AppHeader({ userData = null }) {
               y2="16.52"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
-              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
+              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
+              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
             </linearGradient>
             <clipPath id="clip0_1150_158978">
               <path fill="#fff" d="M0 0H33V33H0z"></path>

diff --git a/src/cmps/BoardDetailsHeader.jsx b/src/cmps/BoardDetailsHeader.jsx
@@ -1,9 +1,9 @@
 import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import HomeIcon from "@mui/icons-material/HomeOutlined";
 import HorizDotsIcon from "@mui/icons-material/MoreHorizOutlined";
-import SearchIcon from '@mui/icons-material/SearchOutlined';
+import SearchIcon from "@mui/icons-material/SearchOutlined";
 export function BoardDetailsHeader({ boardTitle }) {
-  const iconStyle = { width: 18, height: 16 };
+  const iconStyle = { width: 20, height: 18 };
   return (
     <header className="board-details-header">
       <br />
@@ -13,8 +13,10 @@ export function BoardDetailsHeader({ boardTitle }) {
       </div>
       <section className="board-nav">
         <div>
-          <HomeIcon style={iconStyle} />
-          <h6>Main Table</h6>
+          <div>
+            <HomeIcon style={iconStyle} />
+            <h5>Main Table</h5>
+          </div>
           <HorizDotsIcon style={iconStyle} />
           <hr className="highlight" />
         </div>
@@ -24,12 +26,12 @@ export function BoardDetailsHeader({ boardTitle }) {
         <div className="newTask-button">
           <div className="new-task-button">New Item</div>
           <div className="arrow-down">
-            <ArrowDownIcon style={iconStyle} />
+            <ArrowDownIcon style={{...iconStyle, height:20}} />
           </div>
         </div>
         <div className="choice-div">
-            <SearchIcon style={iconStyle} />
-            <small>Search</small>
+          <SearchIcon style={iconStyle} />
+          <small>Search</small>
         </div>
       </section>
     </header>

diff --git a/src/cmps/MainInnerIndex.jsx b/src/cmps/MainInnerIndex.jsx
@@ -5,13 +5,17 @@ import { loadBoards } from "../store/actions/boards.actions.js";
 import { addBoard, updateBoardName } from "../store/actions/boards.actions.js";
 import { loadUsers, logout } from "../store/actions/user.actions.js";
 import { BoardCard } from "./BoardCard.jsx";
+import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
 
 export function MainInnerIndex({ user, isBoard, boards }) {
   const navigate = useNavigate();
   useEffect(() => {
     loadBoardsAndUsers()
   }, []);
 
+  const iconStyle = { width: 22, height: 22 };
+
 
   function loadBoardsAndUsers() {
     loadBoards()
@@ -26,12 +30,16 @@ export function MainInnerIndex({ user, isBoard, boards }) {
   return !isBoard ? (
     <div className="main-inner-index">
       <section className="welcome-section">
-        <h3>Hello {user.fullName}!</h3>
-        <h3>Quickly access your recent boards, Inbox and workspaces</h3>
+        <small>Hello {user.fullName}!</small>
+        <small id="bold">Quickly access your recent boards, Inbox and workspaces</small>
       </section>
-      <section className="recently-viewed-section">
-        <h3>Recently viewed</h3>
-
+      <hr />
+      <br />
+      <section className="recently-visited-section">
+        <div className="recently-visited-header">
+          <ArrowDownIcon style={iconStyle} />
+          <h4>Recently visited</h4>
+        </div>
         <div className="boards-container">
           {boards.map((board) => (
             <BoardCard key={board.id} board={board} onUpdateBoardName={onUpdateBoardName} />

diff --git a/src/cmps/SideBar.jsx b/src/cmps/SideBar.jsx
@@ -22,7 +22,7 @@ export function SideBar({ boards, user, onRemoveBoard }) {
     addBoard();
   }
 
-  const iconStyle = { width: 18, height: 16 };
+  const iconStyle = { width: 22, height: 22 };
 
   return (
     <nav className="side-bar">
@@ -35,39 +35,40 @@ export function SideBar({ boards, user, onRemoveBoard }) {
         }
       >
         <HomeIcon className="side-bar-icon home" style={iconStyle} />
-        <h4>Home</h4>
+        <p>Home</p>
       </section>
       {/* My Work Section */}
       <section>
         <MyWorkIcon className="side-bar-icon myWork" style={iconStyle} />
-        <h4>My Work</h4>
+        <p>My Work</p>
       </section>
 
       <hr />
 
       {/* Favorites Section */}
       <section>
         <FavoritesIcon className="side-bar-icon favorites" style={iconStyle} />
-        <h4>Favorites</h4>
+        <p>Favorites</p>
       </section>
 
       <hr />
 
       {/* Workspaces Section */}
-      <section>
+      <div className="workspaces">
+        <section>
         <WorkspacesIcon className="side-bar-icon work" style={iconStyle} />
-        <h4>Workspaces</h4>
-      </section>
-
-      <div className="add-board">
+        <p>Workspaces</p>          
+        </section>
+        <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 }} />
+          <PlusIcon style={{width: 28, height: 26}} />
         </button>
       </div>
+      </div>
 
       {/* Board List */}
       <ul className="sidebar-boardlist">
@@ -83,7 +84,7 @@ export function SideBar({ boards, user, onRemoveBoard }) {
                 )
               }
             >
-              <BoardIcon style={{ width: 16, height: 16 }} />
+              <BoardIcon style={iconStyle} />
               {/* Board Title Navigation */}
               <h3>{board.title}</h3>
 

diff --git a/src/styles/_Board-details-header.scss b/src/styles/_Board-details-header.scss
@@ -3,7 +3,7 @@
 }
 
 .boardTitle {
-  font-size: 0.8rem;
+  font-size: 1.1rem;
   display: inline-flex;
   align-items: center;
   gap: 1rem;
@@ -21,11 +21,12 @@
   align-items: center;
   gap: 1rem;
   margin-top: 0.5rem;
-  & > div {
+  & div {
     display: flex;
     align-items: center;
     gap: 0.2rem;
-    & h6 {
+    & h5 {
+        font-size: 14px;
       font-weight: 500;
     }
     margin-bottom: 0.1rem;
@@ -76,20 +77,19 @@ header.board-details-header {
         border: none;
         color: #3f3f3f;
         background-color: #fff;
-        font-size: 1rem;
         cursor: pointer;
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
         color: white;
         .new-task-button{
-            font-size: 11px;
+            font-size: 14px;
             font-weight: 500;
             padding: 6px;
             padding-bottom: 6.5px;
             padding-left: 8px;
             padding-right: 8px;
-            border-top-left-radius: 3px;
-            border-bottom-left-radius: 3px;
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
             background-color: #0073ea;
         }
         & .arrow-down{
@@ -111,6 +111,10 @@ header.board-details-header {
         padding: 4px;
         border-radius: 2.5px;
         cursor: pointer;
+        & small{
+            font-size: 15px;
+            font-weight: 500;
+        }
         &:hover{
             background-color: rgba(103, 104, 121, 0.1);
         }

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
@@ -2,9 +2,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding:3px;
+  padding:8px;
   padding-left: 20px;
-  padding-right: 12px;
+  padding-right: 22px;
 
   top: 0;
   div {
@@ -36,7 +36,7 @@
 .icons-section {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 1.2rem;
 }
 
 .vertical-line {
@@ -50,6 +50,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  font-size: 22px;
   &  .lighter{
     font-weight: 450;
   }

diff --git a/src/styles/_mainInnerIndex.scss b/src/styles/_mainInnerIndex.scss
@@ -1,29 +1,44 @@
 .main-inner-index {
-  padding: 2rem;
-  font-family: 'Roboto', sans-serif;
+  display: grid;
+  grid-template-rows: 48px 1px 35px 1fr;
+  padding-top: 0.8rem;
+  font-family: "Roboto", sans-serif;
   box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.6);
   border-top-left-radius: 5px;
   background-color: #fff;
   border-top-left-radius: 12px;
 
-
   .welcome-section {
-    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding-left: 1.5rem;
+    padding-top: 0.22rem;
 
-    h3 {
-      font-size: 1.5rem;
-      font-weight: 500;
+    small {
       color: #333;
-      margin: 0.5rem 0;
+      font-size: 15px;
+    }
+    #bold {
+      font-weight: 550;
     }
   }
 
-  .recently-viewed-section {
-    h3 {
-      font-size: 1.25rem;
-      font-weight: 500;
-      color: #333;
+  hr{
+    margin-top: 0.4rem ;
+  }
+
+  .recently-visited-section {
+    padding-left: 2.5rem;
+    & > .recently-visited-header {
+      display: flex;
+      align-items: center;
       margin-bottom: 1rem;
+      h4 {
+        font-size: 1.1rem;
+        font-weight: 800;
+        color: #333;
+      }
     }
 
     .boards-container {
@@ -62,4 +77,4 @@
       }
     }
   }
-}
+}