Merge pull request #32 from 001elijah/fix

Fix
001elijah · Jun 26, 2023 · c738d33 · c738d33
2 parents 3cf4311 + fa13473
commit c738d33
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 17 deletions.
diff --git a/src/components/DefaultBoard/Default.module.scss b/src/components/DefaultBoard/Default.module.scss
@@ -2,7 +2,9 @@
 @import '../../assets/styles/mixins';
 
 .BackGround {
-  height: 100vh;
+  height: calc(100vh - 60px);
+  position: relative;
+
   &.dark {
     background-color: #1f1f1f;
   }
@@ -13,21 +15,25 @@
     background-color: #ecedfd;
   }
 }
-.Wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  height: 100%;
-}
+// .Wrapper {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   // height: 100%
+// }
 .DefaultTitle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   font-weight: 400;
   font-size: 14px;
   line-height: 1.29;
   text-align: center;
   letter-spacing: -0.02em;
-  margin-left: auto;
-  margin-right: auto;
+  max-height: min-content;
+  // margin-left: auto;
+  // margin-right: auto;
 
   @include mobileSmall {
     max-width: 335px;
@@ -37,6 +43,9 @@
   }
   @include tablet {
     width: 486px;
+    .BackGround {
+      height: calc(100vh - 68px);
+    }
   }
   &.dark {
     color: #ffffff80;

diff --git a/src/components/DefaultBoard/DefaultBoard.jsx b/src/components/DefaultBoard/DefaultBoard.jsx
@@ -11,7 +11,7 @@ export const DefaultDashBoard = () => {
     <>
       <div className={clsx(s.BackGround, s[theme])}>
         <HeaderDashBoard />
-        <div className={s.Wrapper}>
+        {/* <div className={s.Wrapper}> */}
           <p className={clsx(s.DefaultTitle, s[theme])}>
             Before starting your project, it is essential
             <span className={clsx(s.DefaultLink, s[theme])}>
@@ -23,7 +23,7 @@ export const DefaultDashBoard = () => {
             effective collaboration among team members.
           </p>
         </div>
-      </div>
+      {/* </div> */}
     </>
   );
 };
diff --git a/src/components/HelpWindow/HelpWindow.module.scss b/src/components/HelpWindow/HelpWindow.module.scss
@@ -4,7 +4,8 @@
 .container {
   width: 197px;
   height: 238px;
-  margin-top: 40px;
+  // margin-top: 40px;
+  margin-top: auto;
   background-color: $off-white-color;
   border-radius: 8px;
   padding: 14px;

diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
@@ -2,6 +2,7 @@
 @import '../../assets/styles/mixins';
 .container {
   width: 225px;
+  max-height: 100%;
   background-color: $white-color;
   padding: 14px 0 24px;
 
@@ -39,6 +40,10 @@
 
   // opacity: 0;
   // transition: opacity 0.3s ease-in;
+
+  // &>div>div{
+  //   height: 100%;
+  // }
 }
 
 .text {

diff --git a/src/index.scss b/src/index.scss
@@ -26,7 +26,8 @@
 
 body {
   margin: 0;
-
+  height: 100vh;
+  // overflow: hidden;
   font-family: 'Poppins-Regular', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -3,22 +3,22 @@ import { useMediaQuery } from 'react-responsive';
 import { Outlet } from 'react-router-dom';
 import { Sidebar } from '../components/Sidebar/Sidebar';
 import { Header } from 'components/Header/Header';
-import { Container } from 'components/Container';
+// import { Container } from 'components/Container';
 
 export const HomePage = () => {
   const isDesktopSize = useMediaQuery({ query: '(min-width: 1280px)' });
 
   return (
     <div>
-      <Container>
+      {/* <Container> */}
         <div style={{ display: 'flex' }}>
           {isDesktopSize && <Sidebar />}
           <div style={{ width: '100%' }}>
             <Header />
             <Outlet />
           </div>
         </div>
-      </Container>
+      {/* </Container> */}
     </div>
   );
 };