Merge branch 'styling' into 'master'

General styling changes and simple snapshot component

See merge request it2810-h20/team-75/prosjekt-2!12

frontend/src/Components/ArtPage.tsx

-import React, {Context} from 'react';
+import React from 'react';
 import ExhibitionPiece from './ExhibitionPiece';
 import FavoriteButton from './FavoriteButton';
 import DropDown from './DropDown';
@@ -44,9 +44,9 @@ class ArtPage extends React.Component<props, state> {
 
     componentDidUpdate(prevProps: Readonly<props>, prevState: Readonly<state>): void {
         const {pageId} = this.props; // No toString as it compares with prevState
-        if (prevProps.pageId != pageId) { // We have changed page. Must update the options
+        if (prevProps.pageId !== pageId) { // We have changed page. Must update the options
             const savedOptions = sessionStorage.getItem(pageId.toString());
-            if (savedOptions != null) { // Stored something previously
+            if (savedOptions !== null) { // Stored something previously
                 const savedOptionsObject = JSON.parse(savedOptions); // Convert string to object
                 this.updateOptions(savedOptionsObject);
             } else {
@@ -84,4 +84,4 @@ class ArtPage extends React.Component<props, state> {
     }
 }
 
-export default ArtPage;
\ No newline at end of file
+export default ArtPage;

frontend/src/Components/ExhibitionPiece.tsx

-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import usePoetry from './usePoetry';
 import SVGs from '../SVGs';
 
@@ -33,4 +33,4 @@ const ExhibitionPiece = (props: props) => {
   );
 };
 
-export default ExhibitionPiece;
\ No newline at end of file
+export default ExhibitionPiece;

frontend/src/Components/LandingPage.tsx

-import React, {ReactComponentElement, ReactElement} from 'react';
+import React, { ReactElement} from 'react';
 import NavButton from './NavButton';
 import "../Style/LandingPage.css"
 import FavoriteLink from "./FavoriteLink";

frontend/src/Components/MainPage.tsx

 import React from 'react';
 import '../Style/MainPage.css';
-import ExhibitionPiece from './ExhibitionPiece';
 import LandingPage from './LandingPage';
 import ArtPage from './ArtPage';
 
@@ -22,13 +21,13 @@ class MainPage extends React.Component<props, state> {
     state = {currentPage: 1, totalPages: 11}; // Index of which page to render. 0 is the landing page
 
     determineRender() { // Decides what page will be rendered
-        return this.state.currentPage == 0 ? <LandingPage/> :
+        return this.state.currentPage === 0 ? <LandingPage/> :
             <ArtPage pageId={this.state.currentPage}/>;
     }
 
     changePage = (increment: boolean) => {
         const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
-        if (newPage == -1)
+        if (newPage === -1)
             this.setState({currentPage: this.state.totalPages - 1}); // Negative modulo not supported
         else
             this.setState({currentPage: newPage % this.state.totalPages}); // Go to the new page or loop around if you've hit last page
@@ -41,9 +40,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

 import React, {useContext} from 'react';
-import usePoetry from "./usePoetry";
 import {PageContext} from "./MainPage";
+import leftarrow from "../Media/left-arrow.png";
+import rightarrow from "../Media/right-arrow.png";
 
 type props = {
   direction: string;
@@ -11,13 +12,18 @@ const NavButton = (props: props) => {
   console.log(context);
 
   const onClick = () => {
-    const increment: boolean = props.direction == "right";
+    const increment: boolean = props.direction === "right";
     context.changePage(increment);
   };
 
   return (
-    <button onClick={onClick}>{props.direction}</button>
+    <img
+      src={props.direction === "right" ? rightarrow : leftarrow}
+      alt={props.direction}
+      style={{ width: '4rem', height: '4rem' }}
+      onClick={onClick}
+    />
   )
 };
 
-export default NavButton;
\ No newline at end of file
+export default NavButton;

frontend/src/Style/ArtPage.css

 .artpage {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
-    grid-template-rows: 1fr 10fr 1fr;
+    grid-template-rows: 1fr 11fr;
     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;
@@ -14,7 +18,17 @@
     flex-direction: column;
 }
 
+.exhibition-piece-title {
+    text-align: center;
+}
+
+svg {
+    margin-top: 5%;
+    border: 1px solid black;
+}
+
 .dropdown {
+    grid-area: dropdown;
     grid-row: 1 / 2;
     grid-column: 3 / 4;
     display: flex;
@@ -23,20 +37,26 @@
     margin-top: 1rem;
 }
 
+.favorite-button {
+    grid-area: favorite;
+    margin-left: 2rem;
+    margin-top: 1rem;
+}
+
 .background-one {
-    background-color: red;
+    background-color: rgb(175, 213, 170);
 }
 
 .background-two {
-    background-color: purple;
+    background-color: rgb(108, 178, 209);
 }
 
 .background-three {
-    background-color: grey;
+    background-color: rgb(254, 200, 216);
 }
 
 .background-four {
-    background-color: green;
+    background-color: rgb(255, 223, 211);
 }
 
 .font-arial {
@@ -51,18 +71,13 @@
     font-family: "Comic Sans MS", serif;
 }
 
-.navbutton {
-    grid-row: 3 / 4;
-    display: flex;
-}
 
 .navbutton.left {
-    grid-column: 1 / 2;
-    flex-direction: row-reverse;
+    grid-area: left;
     margin-right: 10rem;
 }
 .navbutton.right {
-    grid-column: 3 / 4;
+    grid-area: right;
     margin-left: 10rem;
 }
 
@@ -71,4 +86,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%;   
 }

frontend/src/__tests__/ArtPage.snapshot.test.tsx

+import React from 'react'
+import ArtPage from "../Components/ArtPage"
+import renderer from 'react-test-renderer'
+
+it('renders correctly', () => {
+    const tree = renderer
+        .create(<ArtPage pageId={0} />)
+        .toJSON();
+    expect(tree).toMatchSnapshot()
+})

frontend/src/__tests__/__snapshots__/ArtPage.snapshot.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="artpage background-one font-calibri"
+>
+  <div
+    className="favorite-button"
+  >
+    <img
+      alt="favorite-active"
+      onClick={[Function]}
+      src="favorite.png"
+      style={
+        Object {
+          "height": "4rem",
+          "width": "4rem",
+        }
+      }
+    />
+  </div>
+  <div
+    className="dropdown"
+  >
+    <span
+      className="settings-icon"
+      onClick={[Function]}
+    />
+  </div>
+  <div
+    className="exhibition-piece"
+  >
+    <div
+      className="exhibition-piece-title"
+    >
+      <h1>
+        Loading...
+      </h1>
+    </div>
+    <div
+      className="author"
+    >
+      Loading...
+    </div>
+    <div
+      className="svg-artwork"
+    />
+    <div
+      className="poem"
+    >
+      <p>
+        Loading...
+      </p>
+    </div>
+  </div>
+  <div
+    className="navbutton left"
+  >
+    <img
+      onClick={[Function]}
+      src="left-arrow.png"
+      style={
+        Object {
+          "height": "4rem",
+          "width": "4rem",
+        }
+      }
+    />
+  </div>
+  <div
+    className="navbutton right"
+  >
+    <img
+      onClick={[Function]}
+      src="right-arrow.png"
+      style={
+        Object {
+          "height": "4rem",
+          "width": "4rem",
+        }
+      }
+    />
+  </div>
+</div>
+`;