refactor: implemented common case card component and adapted styling

equinor · Nov 1, 2023 · 45c8084 · 45c8084
1 parent 0dba5c2
commit 45c8084
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 31 deletions.
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/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>
   );
 };
diff --git a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
@@ -34,14 +34,13 @@ export const ComputeObject = () => {
       <ComputeCaseInfoActions addCase={addCase} caseInfo={ObjectCaseInfo} />
       {cases.length !== 0 ? (
         cases.map((c) => (
-          <Styled.CaseBorder key={c.id}>
-            <CaseCard
-              id={c.id}
-              name={c.name}
-              removeCase={removeCase}
-              caseType={'object'}
-            />
-          </Styled.CaseBorder>
+          <CaseCard
+            key={c.id}
+            id={c.id}
+            name={c.name}
+            removeCase={removeCase}
+            caseType={'object'}
+          />
         ))
       ) : (
         <Typography>Add a Case</Typography>

diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.styled.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.styled.tsx
@@ -19,14 +19,7 @@ export const Case = styled.div`
 
   border-left: solid ${spacings.XX_SMALL} ${theme.light.ui.background.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};
-`;
 export const AddCaseButton = styled(Button)`
   width: fit-content;
 `;
diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
@@ -46,14 +46,13 @@ export const ComputeVariogram = () => {
       <ComputeCaseInfoActions addCase={addCase} caseInfo={variogramCaseInfo} />
       {cases.length !== 0 ? (
         cases.map((c) => (
-          <Styled.CaseBorder key={c.id}>
-            <CaseCard
-              id={c.id}
-              name={c.name}
-              removeCase={removeCase}
-              caseType={'variogram'}
-            />
-          </Styled.CaseBorder>
+          <CaseCard
+            key={c.id}
+            id={c.id}
+            name={c.name}
+            removeCase={removeCase}
+            caseType={'variogram'}
+          />
         ))
       ) : (
         <Typography>Add a Case</Typography>