changed the position of navbuttons

frontend/src/Components/MainPage.tsx

@@ -41,9 +41,6 @@ class MainPage extends React.Component<props, state> {
     render() {
         return (
             <div className={'main-page'}>
-                <div className={'header'}>
-                    Header
-                </div>
                 <div className={'body'}>
                     <PageContext.Provider value={{
                         changePage: this.changePage,

frontend/src/Components/NavButton.tsx

@@ -23,7 +23,6 @@ const NavButton = (props: props) => {
       style={{ width: '4rem', height: '4rem' }}
       onClick={onClick}
     />
-    // <button onClick={onClick}>{props.direction}</button>
   )
 };
 

frontend/src/Style/ArtPage.css

@@ -3,10 +3,15 @@
     grid-template-columns: 1fr 2fr 1fr;
     grid-template-rows: 1fr 10fr 1fr;
     height: 100vh;
+    grid-template-areas:
+        "favorite . dropdown"
+        "left exhibition right"
+        ". . ." ;
 }
 
 .exhibition-piece {
     display: flex;
+    grid-area: exhibition;
     grid-row: 2 / 3;
     grid-column: 2 / 3;
     align-items: center;
@@ -58,11 +63,13 @@
 
 .navbutton.left {
     grid-column: 1 / 2;
+    grid-area: left;
     flex-direction: row-reverse;
     margin-right: 10rem;
 }
 .navbutton.right {
     grid-column: 3 / 4;
+    grid-area: right;
     margin-left: 10rem;
 }
 
@@ -71,4 +78,4 @@
     width: 5rem;
     height: 2rem;
     margin-bottom: 3rem;
-}
\ No newline at end of file
+}

frontend/src/Style/LandingPage.css

 .landing-page {
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
-  gap: 0px 0px;
-  grid-template-areas:
-    ". Title ."
-    ". welcome-svg ."
-    ". welcome-svg ."
-    "navbutton-left welcome-p navbutton-right";
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-rows: 1fr 10fr 1fr;
+    height: 100vh;
+    grid-template-areas:
+        ". Title ."
+        "left welcomesvg right"
+        ". welcomep ." ;
 }
 
 .title { 
@@ -17,18 +16,18 @@
 }
 
 .welcome-svg { 
-    grid-area: welcome-svg;
+    grid-area: welcomesvg;
     place-self: center; 
 }
 
 .favorites {
-    grid-area: welcome-p;
+    grid-area: welcomep;
     padding-top: 7rem;
     padding-left: 3rem;
 }
 
 .welcome-p { 
-    grid-area: welcome-p;
+    grid-area: welcomep;
     text-align: left;
     margin: 25px 50px 100px;
     font-family: Arial, Helvetica, sans-serif;
@@ -36,9 +35,17 @@
 }
 
 .navbutton.left { 
-    grid-area: navbutton-left; 
+    grid-area: left;
+    place-self: center;
+    position: fixed;
+    top: 50%;
+    left: 5%; 
 }
 
 .navbutton.right {
-    grid-area: navbutton-right; 
+    grid-area: right;
+    place-self: center;
+    position: fixed;
+    top: 50%;
+    right: 5%;   
 }