Merge branch 'dropdown-styling' into 'master'

Style dropdown menu and buttons #8 #10 #11

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

frontend/src/Components/DropDown.tsx

-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import '../Style/DropDown.css';
 import DropDownSelect from './DropDownSelect';
 
 const DropDown = () => {
-  const [clicked, setClicked] = useState(false);
+    const [clicked, setClicked] = useState(false);
 
-  const BackgroundOptions = ["One", "Two", "Three", "Four"];
-  const FontOptions = ['Calibri', 'Arial', 'Sans'];
-  const MusicOptions = ["Upbeat", "Downbeat"];
+    const BackgroundOptions = ["One", "Two", "Three", "Four"];
+    const FontOptions = ['Calibri', 'Arial', 'Sans'];
+    const MusicOptions = ["Upbeat", "Downbeat"];
 
-  const determineRender = () => {
-    if (clicked) return (
-      <div className={'dropdown-menu'}>
-        <DropDownSelect
-          optionLabel={"Background"}
-          options={BackgroundOptions}
-        />
-        <DropDownSelect
-          optionLabel={"Font"}
-          options={FontOptions}
-        />
-        <DropDownSelect
-          optionLabel={"Sound"}
-          options={MusicOptions}
-        />
-      </div>
-    );
-  };
+    const determineRender = () => {
+        if (clicked) return (
+            <div className={"dropdown-menu"}>
+                <span className={'cross-icon'} onClick={() => setClicked(!clicked)}/>
+                <div className={'dropdowns'}>
+                    <DropDownSelect
+                        optionLabel={"Background"}
+                        options={BackgroundOptions}
+                    />
+                    <DropDownSelect
+                        optionLabel={"Font"}
+                        options={FontOptions}
+                    />
+                    <DropDownSelect
+                        optionLabel={"Sound"}
+                        options={MusicOptions}
+                    />
+                </div>
+            </div>
+        );
+        return <span className={'settings-icon'} onClick={() => setClicked(!clicked)}/>
+    };
 
-  return (<div className={'dropdown'}>
-    <span className={'settings-icon'} onClick={() => setClicked(!clicked)}/>
-    {determineRender()}
-  </div>);
+    return (<div className={'dropdown'}>
+            {determineRender()}
+    </div>);
 };
 
 export default DropDown;
\ No newline at end of file

frontend/src/Components/DropDownSelect.tsx

@@ -22,7 +22,7 @@ const DropDownSelect = (props: props) => {
         return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
     };
 
-    return (<div className={'drop-down-toggle'}>
+    return (<div className={'dropdown-toggle'}>
         <form>
             <label>
                 {props.optionLabel}

frontend/src/Components/ExhibitionPiece.tsx

@@ -11,9 +11,9 @@ const ExhibitionPiece = (props: props) => {
 
   const renderPoems = () => {
     if (poem != null)
-      return poem.map(line => <p>{line}</p>)
+      return poem.map(line => <p>{line}</p>);
     return <p>Loading...</p>
-  }
+  };
 
   return (
     <div className={'exhibition-piece'}>

frontend/src/Style/ArtPage.css

@@ -64,4 +64,11 @@
 .navbutton.right {
     grid-column: 3 / 4;
     margin-left: 10rem;
+}
+
+.navbutton button {
+    font-size: large;
+    width: 5rem;
+    height: 2rem;
+    margin-bottom: 3rem;
 }
\ No newline at end of file

frontend/src/Style/DropDown.css

@@ -4,4 +4,42 @@
     background-size: contain;
     width: 3rem;
     height: 3rem;
+}
+
+.cross-icon {
+    align-self: flex-end;
+    background-image: url("../Media/cross-icon.png");
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 3rem;
+    height: 3rem;
+}
+
+.dropdown {
+    font-family: initial;
+}
+
+.dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    background-color: whitesmoke;
+}
+
+.dropdown-toggle {
+    margin: 1rem 1rem 1.5rem;
+    font-size: large;
+}
+
+label {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dropdown-toggle select {
+    width: 5rem;
+    margin-left: 1rem;
+    font-size: smaller;
 }
\ No newline at end of file