Feature/fg 98

src/components/Arkivsjef/ArchiveBossCreateUser/ArchiveBossCreateUser.tsx

@@ -19,11 +19,6 @@ const ArchiveBossCreateUser = () => {
   const createUser = async () => {
 
     const displayName = `${givenName} ${surname}`
-
-    console.log("JAJAJA");
-    console.log("Display Name:", displayName);
-
-
 
     const apiUrl = "https://graph.microsoft.com/v1.0/users";
     const newUser = {

src/components/ImageViewer/GridImageViewer.tsx

@@ -36,15 +36,13 @@ const ShowMotive: FC<Props> = ({ photos }) => {
   return (
     <>
       <div className={styles.backgroundFlex}>
-        <div className={styles.filterAndImages}>
+
           <div className={styles.flex}>
             {imageItems}
             {/*TODO: remove filling elements, this is a temp fix! This fix ensures that the first image in a row always is at the far left. FInd a better method for doing this  */}
-            <div className={styles.fillingEmptySpaceChilds} />
-            <div className={styles.fillingEmptySpaceChilds} />
-            <div className={styles.fillingEmptySpaceChilds} />
+
           </div>
-        </div>
+
       </div>
     </>
   );

src/components/ImageViewer/MotiveImage.tsx

@@ -21,7 +21,7 @@ const MotiveImage: FC<Props> = ({
   return (
     <>
       <div className={styles.motiveImage} onClick={() => updateIndex(index)}>
-        <img src={image} height="200px" width="300px" />
+        <img src={image} width="250px" />
         <div className={styles.imageContainer}>
           <p className={styles.imageTitle}>{title}</p>
           <p className={styles.imageTitle}>31.08.21</p>

src/components/ImageViewer/imageStyle.module.css

@@ -1,8 +1,20 @@
+
+
 .motiveImage {
-    height: 200px;
-    width: 300px;
-    box-shadow: 0px 4px 4px 0px rgba(0,0,0, 0.25);
-    background-color: #F3F3F3;
+    width: 256px;
+    height: 172px;
+    box-shadow: 2px 4px 4px 2px rgba(0,0,0, 0.25);
+    background-color: white;
+    position: relative;
+
+}
+
+.motiveImage img{
+    margin: 10px auto;
+    position: absolute;
+    left: 3px;
+    bottom: -7px;
+
 }
 
 .motiveImage:hover {
@@ -13,9 +25,13 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-around;
+    justify-content: center;
+    gap: 10px;
+    margin: 0px;
+
 }
 
+
 .filling-empty-space-childs {
     width:300px;
     padding: 0px;
@@ -28,12 +44,13 @@
     flex: 1;
 }
 
+
+
 .backgroundFlex {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
-    background-color: white;
     border-radius: 5px;
 }
 
@@ -102,13 +119,13 @@
 }
 
 .imageContainer {
-    position: relative;
-    bottom: 50px;
-    left: 0px;
+    position: absolute;
+    bottom: 3px;
+    left: 3px;
     background-color: #000000;
     opacity: 0.3;
     height: 43px;
-    width: 100%;
+    width: 250px;
 }
 
 .imageTitle {
@@ -120,4 +137,4 @@
     background-color: "#000000";
     height: 2px;
     width: 95%;
-}
+} 

src/views/Search/Search.tsx

@@ -6,7 +6,7 @@ import styles from "./Searchbar.module.css";
 const Search = () => {
   return (
     <div>
-      <div className={styles.backgroundFlex}>
+      <div className={styles.backgroundFlex} style={{backgroundColor: "white"}}>
         <SearchField />
       </div>
       <h2>De 20 nyligste bildene:</h2>

src/views/Search/Searchbar.module.css

@@ -9,7 +9,6 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
-  background-color: white;
   border-radius: 5px;
   padding:1.5px;
 }