Changed header layout and added in some responsiveness

AugustRushG · Nov 3, 2022 · 088cbe6 · 088cbe6
1 parent 777a5a6
commit 088cbe6
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 182 deletions.
diff --git a/BACKEND/server.js b/BACKEND/server.js
@@ -22,7 +22,7 @@ const cors = require('cors');
 const corsOptions = {
     credentials:true,
     origin:'https://recordit123.netlify.app',
-   // origin:'http://localhost:3000',
+    //origin:'http://localhost:3000',
     optionsSuccessStatus:220,
 };
 app.use(cors(corsOptions));

diff --git a/start_page/src/Header.js b/start_page/src/Header.js
@@ -42,6 +42,8 @@ const Header = () => {
        return location.pathname.includes('/dashboard/');
     }
 
+
+
 
 
 
@@ -108,22 +110,22 @@ const Header = () => {
 
         {isLaptop && dashboardRego() && 
         <>
-          <Button variant="warning" id='LogOut' onClick={signOut}>LogOut</Button> 
-          <Link to ='/About' className='About'><Button variant="warning" >About</Button></Link>
+          <Button variant="warning" id='LogOut' onClick={signOut}>Logout</Button> 
+          <Button variant="warning" id='About' onClick={()=>navigate("About")}>About</Button>
         </>
         }
         {isLaptop &&!auth?.user && !dashboardRego() &&
           <>
-            <Link to = '/LogIn'  className='LogIn'> <Button variant="warning" id='LogIn'>LogIn</Button></Link>
-            <Link to = '/Register' className='SignUp'> <Button variant="warning" id='SignUp'>SignUp</Button></Link>
-            <Link to ='/About' className='About'><Button variant="warning" >About</Button></Link>
+          <Button variant="warning" id='LogIn' onClick={()=>navigate("LogIn")}>LogIn</Button>
+          <Button variant="warning" id='SignUp' onClick={()=>navigate("Register")}>SignUp</Button>
+          <Button variant="warning" id='About' onClick={()=>navigate("About")}>About</Button>
           </>
         }
 
         {isLaptop &&auth?.user && !dashboardRego() &&
           <>
-            <div className='dashboard'> <Button variant="warning" id='dashboard' onClick={()=>navigate(-1)}>Dashboard</Button></div>
-            <Link to ='/About' className='About'><Button variant="warning" >About</Button></Link>
+            <Button variant="warning" id='dashboard' onClick={()=>navigate(-1)}>Dashboard</Button>
+            <Button variant="warning" id='About' onClick={()=>navigate("About")}>About</Button>
           </>
         }
 

diff --git a/start_page/src/dashBoard/dashboardcss/Dashboard.css b/start_page/src/dashBoard/dashboardcss/Dashboard.css
@@ -371,7 +371,8 @@
     position:absolute;
     left: 2vw;
     height: 100%;
-    width: 70%;
+    width: 80%;
+
 }
 
 .PieChartBackGround{
@@ -718,7 +719,6 @@
     }
 }
 
-
 @media all and (max-width: 450px){
 
 
@@ -1057,5 +1057,55 @@
 
 }
 
+@media all and (max-height:1150px){
+
+    .PieChartContainer{
+        width: 70%;
+    }
+
+
+}
+
+@media all and (max-height:1000px){
+
+    .PieChartContainer{
+        width: 65%;
+    }
+
+
+}
+
+@media all and (max-height:950px){
+
+    .VerticalBarChartContainer{
+        width: 90%;
+    }
+
+
+}
+
+@media all and (max-height:900px){
+
+    .PieChartContainer{
+        width: 60%;
+    }
+
+
+}
+
+
+@media all and (max-height:800px){
+
+    .PieChartContainer{
+        width: 55%;
+    }
+
+    .VerticalBarChartContainer{
+        width: 85%;
+    }
+
+
+}
+
 
 
diff --git a/start_page/src/index.css b/start_page/src/index.css
@@ -11,6 +11,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+
 
 
 }
@@ -45,102 +46,57 @@ body {
   width: 100%;
   height: 10vh;
 
+
+
   background: #FFFFFF; 
 }
 
-.LogIn,.Account{
+#LogIn,#SignUp,#About{
+
+  position: relative;
 
-  position: absolute;
-
+  top: 4vh;
+  height: 4vh;
   width: 6vw;
-  min-width: 65px;
-  right: 16.5vw;
-  top: 2.5vh;
+  left: 76vw;
   margin-right: 1vw;
-
+  
 }
 
-#LogIn{
-  width: 100%;
-  height: 4.5vh;
-  font-family: 'Inter', sans-serif;
-  font-size: 100%;
-  color: #000000;
-
-  text-align: center;
-
+#LogOut{
+  position: relative;
+  top: 4vh;
+  left: 90vw;
+  height: 4vh;
+  width: 7vw;
 }
 
-.SignUp{
-
-  position: absolute;
-  width: 6vw;
-  min-width: 65px;
-  right: 9.8vw;
-  top: 2.5vh;
-  margin-right: 10px;
-
-
-
+#dashboard{
+  position: relative;
+  top: 4vh;
+  left: 90vw;
+  height: 4vh;
+  width: 7vw;
 }
 
-#SignUp{
 
-
-  width: 100%;
-  height: 4.5vh;
-  font-family: 'Inter', sans-serif;
-  font-size: 100%;
-  color: #000000;
-  text-align: center;
 
-}
 
-#LogOut{
-  position: absolute;
-  width: fit-content; 
-  height: 4.5vh;
-  right: 10vw;
-  top: 2.5vh;
-  margin: auto;
-
-  font-family: 'Inter', sans-serif;
-  font-size: 100%;
-  color: #000000;
-  text-align: center;
-
-}
-
-.About{
-  position: absolute;
-  min-width: 65px;
-  width: 5vw;
-  right: 4vw;
-  top: 2.5vh;
-  margin-left: 1vw;
-}
-
-.About > Button{
-  width: 100%;
-  height: 4.5vh;
-  font-family: 'Inter', sans-serif;
-  font-size: 100%;
-  color: #000000;
-  text-align: center;
-
-}
 
 .Header h1{
   position: absolute;
   left: 2vw;
-  top: 1vh;
+  top: 2vh;
 
   font-family: 'Allerta Stencil', sans-serif;
   font-weight: 400;
   font-size: 250%;
   line-height: 61px;
+
+  width: 10vw;
 
   color: #000000;
+
 
 }
 
@@ -171,30 +127,20 @@ button:active {
   transform: translateY(4px);
 }
 
-.dashboard{
-
-  position: absolute;
-
-  min-width: 65px;
-  right: 9.8vw;
-  top: 2.5vh;
-  margin-right: 10px;
-
-
-}
-
-#dashboard{
-  height: 4.5vh;
-  font-family: 'Inter', sans-serif;
-  font-size: 100%;
-}
 
 #ResetButton{
   margin-top: 5px;
 }
 
 
+@media all and (min-width:1200px) {
+
 
+  #LogIn,#SignUp,#About{
+    font-size: 1vw;
+  }
+
+}
 
 @media all and (max-width:1050px){