Chore/model result veiw

src/components/CaseCardComponent/CaseCardComponent.styled.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { spacings } from '../../tokens/spacings';
+import { theme } from '../../tokens/theme';
+
+export const Wrapper = styled.div`
+  border-left: solid;
+  border-width: ${spacings.SMALL};
+  border-color: ${theme.light.primary.resting};
+  border-radius: ${spacings.BORDER_ROUNDED};
+`;
+
+export const Title = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  padding: ${spacings.LARGE} 0 0 ${spacings.LARGE};
+  column-gap: ${spacings.MEDIUM};
+`;
+
+export const CaseBorder = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.XXX_LARGE};
+
+  border-radius: ${spacings.CARD_ROUNDED};
+  border: solid 1px ${theme.light.ui.background.medium};
+`;

src/components/CaseCardComponent/CaseCardComponent.tsx

@@ -0,0 +1,21 @@
+import { Typography } from '@equinor/eds-core-react';
+import * as Styled from './CaseCardComponent.styled';
+
+export const CaseCardComponent = ({
+  children,
+  title,
+}: {
+  children: React.ReactNode;
+  title: string;
+}) => {
+  return (
+    <Styled.CaseBorder>
+      <Styled.Wrapper>
+        <Styled.Title>
+          <Typography variant="h4">{title}</Typography>
+        </Styled.Title>
+        {children}
+      </Styled.Wrapper>
+    </Styled.CaseBorder>
+  );
+};

src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx

@@ -13,6 +13,8 @@ import { ModelSelect } from './CaseCardParameters/ModelSelect/ModelSelect';
 import { GrainSizeSelect } from './CaseCardParameters/GrainSizeSelect/GrainSizeSelect';
 import { ParameterSelect } from './CaseCardParameters/ParameterSelect/ParameterSelect';
 
+import { CaseCardComponent } from '../../../../components/CaseCardComponent/CaseCardComponent';
+
 export default interface optionTypes {
   id: number;
   name: string;
@@ -57,11 +59,6 @@ export const CaseCard = ({
     { id: 7, name: 'General exponential' },
   ];
 
-  // const parameterOptions: optionTypes[] = [
-  //   { id: 8, name: 'Porosity' },
-  //   { id: 9, name: 'Permeability' },
-  // ];
-
   const modelAreas: optionTypes[] = [
     { id: 10, name: 'Proximal' },
     { id: 11, name: 'Left' },
@@ -87,9 +84,8 @@ export const CaseCard = ({
   };
 
   return (
-    <Styled.Wrapper>
+    <CaseCardComponent title={name}>
       <Styled.Case>
-        <Typography variant="h4">{name}</Typography>
         <Styled.CaseCard>
           {caseType === 'variogram' ? (
             <VariogramCaseCardInputs
@@ -158,6 +154,6 @@ export const CaseCard = ({
           </Styled.Parameters>
         )}
       </div>
-    </Styled.Wrapper>
+    </CaseCardComponent>
   );
 };

src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx

@@ -1,77 +1,19 @@
 import styled from 'styled-components';
 import { spacings } from '../../../../tokens/spacings';
-import { theme } from '../../../../tokens/theme';
 
 export const CaseResultView = styled.div`
   display: flex;
   flex-direction: column;
 
-  row-gap: ${spacings.MEDIUM};
-  padding-left: ${spacings.LARGE};
-  padding-bottom: ${spacings.LARGE};
+  row-gap: ${spacings.XXX_LARGE};
+  padding: ${spacings.LARGE};
 
-  > h2 {
-    margin-bottom: ${spacings.SMALL};
-  }
-  > h3 {
-    margin: ${spacings.SMALL};
-  }
+  width: 75vw;
 `;
 
 export const CaseResultList = styled.div`
   display: flex;
   flex-direction: column;
 
-  row-gap: ${spacings.LARGE};
-`;
-
-export const CaseResultCard = styled.div`
-  display: flex;
-  flex-direction: row;
-  row-gap: ${spacings.LARGE};
-
-  width: 60vw;
-  padding: ${spacings.X_LARGE};
-
-  border-radius: ${spacings.CARD_ROUNDED};
-  box-shadow: ${theme.light.ui.elevation.raised};
-
-  > div {
-    width: 50%;
-  }
-`;
-export const CaseResultStatus = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  padding: ${spacings.SMALL};
-  row-gap: ${spacings.SMALL};
-`;
-
-export const CaseLeftDiv = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${spacings.LARGE};
-
-  > table {
-    width: 80%;
-  }
-`;
-
-export const CaseStatusDisplay = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  column-gap: ${spacings.LARGE};
-`;
-
-export const CaseStatusButtons = styled.div`
-  display: flex;
-  flex-direction: row;
-  column-gap: ${spacings.SMALL};
-  padding-top: ${spacings.SMALL};
-
-  > button {
-    width: ${spacings.COMPUTE_BUTTON};
-  }
+  row-gap: ${spacings.XXX_LARGE};
 `;