changed styling of motiveCard and card to make it responsive (#771)

* changed styling of motiveCard and card to make it responsive * code smells * code smells --------- Co-authored-by: endre2112 <[email protected]>
Fotogjengen · Oct 26, 2023 · 10e8e50 · 10e8e50
1 parent 2a300f0
commit 10e8e50
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/src/components/MotiveCard/MotiveCard.module.css b/src/components/MotiveCard/MotiveCard.module.css
@@ -0,0 +1,9 @@
+
+
+.container {
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 0.5rem;
+}
diff --git a/src/components/MotiveCard/MotiveCard.tsx b/src/components/MotiveCard/MotiveCard.tsx
@@ -1,16 +1,17 @@
-import { Card, CardContent, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import React, { FC, ReactNode } from "react";
 import { MotiveDto } from "../../../generated";
+
+import styles from "./MotiveCard.module.css";
 interface Props {
   motive: MotiveDto;
-  key: number;
   children?: ReactNode;
 }
 
 const MotiveCard: FC<Props> = (props: Props) => {
   return (
-    <Card key={props?.motive?.motiveId?.id}>
-      <CardContent>
+    <div className={styles.container}>
+      <div>
         <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
           {props?.motive?.categoryDto?.name}
         </Typography>
@@ -26,10 +27,9 @@ const MotiveCard: FC<Props> = (props: Props) => {
         <Typography variant="body2">
           Dato: {props?.motive?.dateCreated}
         </Typography>
-        <br />
-        {props.children}
-      </CardContent>
-    </Card>
+      </div>
+      {props.children}
+    </div>
   );
 };
 

diff --git a/src/views/Intern/Motives/Motives.module.css b/src/views/Intern/Motives/Motives.module.css
@@ -8,4 +8,12 @@
     text-transform: uppercase;
     padding-bottom: 1rem;
     color: #1b1b1b;
-}
+}
+
+
+.motivesGrid {
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: 2rem;
+}
diff --git a/src/views/Intern/Motives/Motives.tsx b/src/views/Intern/Motives/Motives.tsx
@@ -1,4 +1,3 @@
-import Masonry from "@mui/lab/Masonry";
 import React, { useState, useEffect } from "react";
 import { MotiveDto } from "../../../../generated";
 import { MotiveApi } from "../../../utils/api/MotiveApi";
@@ -17,14 +16,17 @@ const Motives = () => {
   }, []);
 
   const mapMotives = (motivesCurrentList: MotiveDto[]) => {
-    return motivesCurrentList.map((motive: MotiveDto, index: number) => (
+    return motivesCurrentList.map((motive: MotiveDto, index) => (
       <MotiveCard key={index} motive={motive}>
-        <Link to={`/intern/motive/${motive.motiveId.id}`}>
+        <Link
+          className={styles.cardlink}
+          to={`/intern/motive/${motive.motiveId.id}`}
+        >
           <Button
             size="small"
             variant="contained"
             endIcon={<EditIcon />}
-            sx={{marginTop: 2}}
+            sx={{ marginTop: 2 }}
             fullWidth
           >
             Rediger motiv
@@ -37,9 +39,7 @@ const Motives = () => {
   return (
     <div className={styles.motives}>
       <h2> Motiv </h2>
-      <Masonry columns={4} spacing={2} sx={{ paddingTop: 2 }}>
-        {mapMotives(motives)}
-      </Masonry>
+      <div className={styles.motivesGrid}>{mapMotives(motives)}</div>
     </div>
   );
 };