Merge pull request #41 from Sicnecher/sicnecher-branch

fix: some fixes

src/App.jsx

@@ -1,4 +1,4 @@
-import { HashRouter as Router, Routes, Route } from "react-router-dom";
+import { HashRouter as Router, Routes, Route, Navigate } from "react-router-dom";
 
 import "./styles/mainStyles.scss";
 import { UserMsg } from "./cmps/Usermsg";
@@ -9,6 +9,7 @@ import { MondayIndex } from "./pages/MondayIndex";
 import { useSelector } from "react-redux";
 import { useEffect } from "react";
 import { utilService } from "./services/util.service";
+import { useNavigate } from "react-router-dom";
 
 function App() {
   const loggedInUser = useSelector((state) => state.userModule.user);
@@ -27,6 +28,7 @@ function App() {
           </Routes>
         ) : (
           <Routes>
+            <Route path="/" element={<Navigate to={`/${utilService.getNameFromEmail(loggedInUser.email)}s-team.sunday.com`} />} />
             <Route path={`/${utilService.getNameFromEmail(loggedInUser.email)}s-team.sunday.com`} element={<MondayIndex />} />
             <Route path={`/${utilService.getNameFromEmail(loggedInUser.email)}s-team.sunday.com/boards/:boardId`} element={<MondayIndex isBoard={true} />} />
             <Route path={`/${utilService.getNameFromEmail(loggedInUser.email)}s-team.sunday.com/board`} element={<MondayIndex isBoard={true} />} />

src/cmps/AppHeader.jsx

@@ -7,19 +7,21 @@ import PersonAddAltIcon from "@mui/icons-material/PersonAddAlt";
 import InboxIcon from "@mui/icons-material/Inbox";
 import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import { logout } from "../store/actions/user.actions";
+import { useSelector } from "react-redux";
 
-export function AppHeader({ userData = null }) {
-  const iconStyle = {width: 22, height: 22};
+export function AppHeader() {
+  const user = useSelector((state) => state.userModule.user);
+  const iconStyle = { width: 22, height: 22 };
   const navigate = useNavigate();
 
   function onLogOut() {
     navigate("/");
     logout();
   }
 
-  return userData ? (
+  return user ? (
     <div className="header-flex">
-      <section className="header-sentance">
+      <section onClick={() => navigate("/")} className="header-sentance">
         <svg
           viewBox="0 0 33 33"
           fill="currentColor"
@@ -135,11 +137,11 @@ export function AppHeader({ userData = null }) {
         <QuestionMarkIcon style={iconStyle} />
         <div className="account-logo" onClick={onLogOut}>
           <img
-          sizes="10px"
+            sizes="10px"
             className="account-logo-img"
             src="https://cdn.monday.com/images/logos/monday_logo_icon.png"
           ></img>
-          <h4>{userData.email[0].toUpperCase()}</h4>
+          <h4>{user.email[0].toUpperCase()}</h4>
         </div>
       </section>
     </div>

src/styles/_Board-details-header.scss

@@ -57,7 +57,7 @@ header.board-details-header {
   position: sticky;
   top: 0;
   background-color: #fff;
-  z-index: 4;
+  z-index: 11;
 }
 
 .board-header-actions{

src/styles/_Board-details.scss

@@ -45,7 +45,7 @@
   flex-direction: column;
   background-color: white;
   border-top-left-radius: 12px;
-  padding-left: 3rem;
+  padding-left: 2rem;
 }
 /* Grid Items */
 .grid-item {
@@ -145,7 +145,7 @@ div {
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 7;
+  z-index: 9;
 }
 
 .modal {
@@ -158,7 +158,7 @@ div {
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 250px;
-  z-index: 8;
+  z-index: 10;
 }
 
 .color-list {
@@ -226,9 +226,6 @@ div {
   border: 1px solid #e1dede;
 }
 
-.add-column {
-}
-
 .add-task {
   opacity: 0.5;
   border-top: 1px solid #e0dede;
@@ -242,21 +239,16 @@ div {
 }
 section.labels-grid {
   position: sticky;
-  top: 190px;
-  z-index: 3;
+  top: 200px;
+  z-index: 10;
   background-color: #fff;
   border: 1px solid #e0dddd;
 }
 
 div.group-title-flex {
   position: sticky;
   padding: 1rem;
-  top: 140px;
+  top: 145px;
   background-color: #fff;
-  z-index: 2;
-}
-
-section.task-title {
-  position: sticky;
-  left: 0;
+  z-index: 8;
 }

src/styles/_Header.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding:8px;
+  padding:4px;
   padding-left: 20px;
   padding-right: 22px;
 
@@ -51,6 +51,12 @@
   align-items: center;
   gap: 6px;
   font-size: 22px;
+  border-radius: 5px;
+  padding: 5px;
+  cursor: pointer;
+  &:hover{
+    background-color: rgba(103, 104, 121, 0.1);
+  }
   &  .lighter{
     font-weight: 450;
   }

src/styles/dynamicCmps/modals/_ChatModal.scss

@@ -1,6 +1,18 @@
 
-  .chat-modal {
-    z-index: 100;
+.chat-modal{
+  z-index: 10; // this z-index bs has to be solved..
+  position: fixed; // unfortunately since absolute sticks with group-list element
+  top: 36px; // probably will change later
+  right: 0px;
+  height: 100vh;
+  background-color: white;
+  .expand-line{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     top:0px;
     height: 100vh;
@@ -61,7 +73,6 @@
     }
 
 
-
     .create-comment {
       display: flex;
       flex-direction: column;
@@ -181,3 +192,4 @@
 
 
 
+}

src/styles/dynamicCmps/modals/_DateModal.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   .date-modal {
-    z-index: 100;
+    z-index: 10;
     position: absolute;
     top: 75px; // temporary
     left: -200px; // temporary

src/styles/dynamicCmps/modals/_MembersModal.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   .members-modal {
-    z-index: 100;
+    z-index: 10;
     position: absolute;
     top: 75px; // temporary
     left: 0px; // temporary

src/styles/dynamicCmps/modals/_SelectedTasksModal.scss

@@ -1,27 +1,29 @@
 .selected-tasks-modal {
   position: fixed;
-  border-radius: 10px;;
-  bottom: 20px; /* Adjust this value to move it slightly above the bottom */
-  left: 50%;
+  border-radius: 4px;;
+  bottom: 40px; /* Adjust this value to move it slightly above the bottom */
+  left: 52.5%;
   transform: translateX(-50%); /* Center horizontally */
   background-color: #ffffff;
-  box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.6);
+  box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.3);
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
+  gap: 30px;
+  padding-right: 10px;
   z-index: 7;
-
   &-header {
     display: flex;
-    align-items: center;
 
     &-blur {
-      background: rgba(255, 255, 255, 0.8);
+      background-color: #0073ea;
       backdrop-filter: blur(10px);
-      padding: 5px 10px;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      padding: 8px;
+      padding-left: 25px;
+      padding-right: 25px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: white;
     }
 
     h2 {
@@ -30,9 +32,10 @@
     }
 
     h4 {
-      margin: 0 0 0 10px;
-      font-size: 1rem;
-      color: #666;
+      margin: 5px 0px 0px 20px;
+      font-size: 1.5rem;
+      color: #353535;
+      font-weight: 400;
     }
   }