Reduce inline styling

equinor · Jan 29, 2025 · 6f26595 · 6f26595
1 parent 6c5fa46
commit 6f26595
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx
@@ -7,7 +7,8 @@ import {
     StyledInspectionCards,
     StyledInspectionContent,
     StyledInspectionData,
-    StyledSection,
+    StyledInspectionOverviewDialogView,
+    StyledInspectionOverviewSection,
 } from './InspectionStyles'
 import { Typography } from '@equinor/eds-core-react'
 import { GetInspectionImage } from './InspectionReportUtilities'
@@ -59,31 +60,17 @@ export const InspectionOverviewSection = ({ tasks }: { tasks: Task[] }) => {
     const { TranslateText } = useLanguageContext()
 
     return (
-        <StyledSection
-            style={{
-                width: 'auto',
-                borderColor: 'auto',
-                padding: 'auto',
-                maxHeight: 'auto',
-            }}
-        >
+        <StyledInspectionOverviewSection>
             <Typography variant="h4">{TranslateText('Last completed inspection')}</Typography>
             <InspectionOverview tasks={tasks} />
-        </StyledSection>
+        </StyledInspectionOverviewSection>
     )
 }
 
 export const InspectionOverviewDialogView = ({ tasks }: { tasks: Task[] }) => {
     return (
-        <StyledSection
-            style={{
-                width: '350px',
-                borderColor: 'white',
-                padding: '0px',
-                maxHeight: '60vh',
-            }}
-        >
+        <StyledInspectionOverviewDialogView>
             <InspectionOverview tasks={tasks} />
-        </StyledSection>
+        </StyledInspectionOverviewDialogView>
     )
 }
diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx
@@ -60,16 +60,25 @@ export const StyledInfoContent = styled.div`
     align-items: flex-start;
 `
 
-export const StyledSection = styled.div`
+export const StyledInspectionOverviewSection = styled.div`
     display: flex;
     padding: 24px;
     min-width: 240px;
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
     border-radius: 6px;
-    border: 1.194px solid ${tokens.colors.ui.background__medium.hex};
+    border: 1px solid ${tokens.colors.ui.background__medium.hex};
     background: ${tokens.colors.ui.background__default.hex};
+`
+
+export const StyledInspectionOverviewDialogView = styled.div`
+    display: flex;
+    max-height: 60vh;
+    width: 350px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
     overflow-y: scroll;
 `