From 258c8040d9946cf124dc66d7928a38505bd1098d Mon Sep 17 00:00:00 2001
From: "Mariana R. Santos" <mrica@equinor.com>
Date: Wed, 8 Nov 2023 14:26:04 +0100
Subject: [PATCH] Add cards to mission definition page

---
 .../MissionDefinitionPage.tsx                 | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx
index dc9c9d5df..59e77ecf0 100644
--- a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx
+++ b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx
@@ -77,23 +77,34 @@ const StyledEditButton = styled(Button)`
     padding-top: 0px;
     margin-top: 0px;
 `
+const StyledCard = styled(Card)`
+    display: flex;
+    padding: 8px;
+    height: 110px;
+`
 
 function MetadataItem({ title, content, onEdit }: { title: string; content: any; onEdit?: () => void }) {
     return (
         <StyledFormItem>
-            <StyledTitleComponent>
-                <Typography variant="body_long_bold" color={tokens.colors.text.static_icons__secondary.rgba}>
-                    {title}
+            <StyledCard style={{ boxShadow: tokens.elevation.raised }}>
+                <StyledTitleComponent>
+                    <Typography variant="body_long_bold" color={tokens.colors.text.static_icons__secondary.rgba}>
+                        {title}
+                    </Typography>
+                    {onEdit && (
+                        <StyledEditButton variant="ghost" onClick={onEdit}>
+                            <Icon name={Icons.Edit} size={16} />
+                        </StyledEditButton>
+                    )}
+                </StyledTitleComponent>
+                <Typography
+                    variant="body_long"
+                    group="paragraph"
+                    color={tokens.colors.text.static_icons__secondary.rgba}
+                >
+                    {content}
                 </Typography>
-                {onEdit && (
-                    <StyledEditButton variant="ghost" onClick={onEdit}>
-                        <Icon name={Icons.Edit} size={16} />
-                    </StyledEditButton>
-                )}
-            </StyledTitleComponent>
-            <Typography variant="body_long" group="paragraph" color={tokens.colors.text.static_icons__secondary.rgba}>
-                {content}
-            </Typography>
+            </StyledCard>
         </StyledFormItem>
     )
 }