From 933c09f7eb3dabbce06cf892842cf0de256114fb Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Thu, 12 Sep 2024 14:58:49 +0200
Subject: [PATCH] chore: Imporve styling of AddRow dialogs and autocomplete
 lists.

---
 .../GdeSelect/GdeSelect.tsx                   |  5 +++--
 .../GrossDepositionEnviromentGroup.tsx        |  9 +++++----
 .../OutcropAnalogueGroup.tsx                  |  9 +++++----
 .../OutcropSelect/OutcropSelect.tsx           |  5 +++--
 .../StratigraphicColumnSelect.styled.tsx      |  9 ---------
 .../StratigraphicColumnSelect.tsx             |  6 +++---
 .../ModelMetadataView.styled.tsx              |  6 ------
 .../ModelMetadataView/ModelMetadataView.tsx   |  9 +++++----
 .../addRowDialog/AddRowDialog.styled.ts       | 19 +++++++++++++++++++
 9 files changed, 43 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.styled.tsx
 create mode 100644 src/styles/addRowDialog/AddRowDialog.styled.ts

diff --git a/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx b/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx
index b76131e..541878e 100644
--- a/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx
+++ b/src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx
@@ -2,6 +2,7 @@
 import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
 import { GeologicalStandardDto } from '../../../api/generated';
 import { useFetchGrossDepData } from '../../../hooks/useFetchGrossDepData';
+import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { GdeType } from '../GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup';
 
 export const GdeSelect = ({
@@ -38,7 +39,7 @@ export const GdeSelect = ({
   );
 
   return (
-    <div>
+    <StyledDialog.AutocompleteList>
       <Autocomplete
         label="Gross Depositional Environment (GDE)"
         options={Gde}
@@ -93,6 +94,6 @@ export const GdeSelect = ({
         }}
         noOptionsText="No options"
       />
-    </div>
+    </StyledDialog.AutocompleteList>
   );
 };
diff --git a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
index 80ab904..16a8ab2 100644
--- a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
+++ b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
@@ -18,6 +18,7 @@ import {
   GeologicalStandardDto,
 } from '../../../api/generated';
 import { queryClient } from '../../../auth/queryClient';
+import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { GdeSelect } from '../GdeSelect/GdeSelect';
 import * as Styled from './GrossDepositionEnviromentGroup.styled';
 
@@ -160,18 +161,18 @@ export const GrossDepositionEnviromentGroup = ({
         </div>
       </Styled.Wrapper>
 
-      <Dialog open={showGdeDialog}>
+      <StyledDialog.DialogWindow open={showGdeDialog}>
         <Dialog.Header>Add Gross Deposition Enviroment</Dialog.Header>
         <Dialog.CustomContent>
           <GdeSelect gdeObject={gdeObject} setGdeObject={setGdeObject} />
         </Dialog.CustomContent>
-        <Dialog.Actions>
+        <StyledDialog.Actions>
           <Button onClick={handleAddGde}>Add</Button>
           <Button variant="outlined" onClick={handleGdeDialog}>
             Close
           </Button>
-        </Dialog.Actions>
-      </Dialog>
+        </StyledDialog.Actions>
+      </StyledDialog.DialogWindow>
     </>
   );
 };
diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
index af82621..a7f8a2e 100644
--- a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
+++ b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
@@ -14,6 +14,7 @@ import {
   OutcropDto,
 } from '../../../api/generated';
 import { useOutcropAnalouge } from '../../../hooks/useOutcropAnalogue';
+import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { OutcropSelect } from '../OutcropSelect/OutcropSelect';
 import * as Styled from './OutcropAnalogueGroup.styled';
 
@@ -131,7 +132,7 @@ export const OutcropAnalogueGroup = ({
           </Button>
         </div>
       </Styled.Wrapper>
-      <Dialog open={showOutcropDialog}>
+      <StyledDialog.DialogWindow open={showOutcropDialog}>
         <Dialog.Header>Add Outcrop Analogue</Dialog.Header>
         <Dialog.CustomContent>
           <OutcropSelect
@@ -140,13 +141,13 @@ export const OutcropAnalogueGroup = ({
             setOutcropObject={setOutcropObject}
           />
         </Dialog.CustomContent>
-        <Dialog.Actions>
+        <StyledDialog.Actions>
           <Button onClick={handleAddOutcropAnalogue}>Add</Button>
           <Button variant="outlined" onClick={handleOutcropDialog}>
             Close
           </Button>
-        </Dialog.Actions>
-      </Dialog>
+        </StyledDialog.Actions>
+      </StyledDialog.DialogWindow>
     </>
   );
 };
diff --git a/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx b/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx
index 663f942..31d0c4e 100644
--- a/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx
+++ b/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx
@@ -2,6 +2,7 @@
 import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
 import { OutcropDto } from '../../../api/generated';
 import { useFetchOutcropData } from '../../../hooks/useFetchOutcropData';
+import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { OutcropType } from '../OutcropAnalogueGroup/OutcropAnalogueGroup';
 
 export const OutcropSelect = ({
@@ -25,7 +26,7 @@ export const OutcropSelect = ({
   };
 
   return (
-    <div>
+    <StyledDialog.AutocompleteList>
       <Autocomplete
         label="Analogue"
         options={OutcropData.data.data}
@@ -95,6 +96,6 @@ export const OutcropSelect = ({
         noOptionsText="No options"
         readOnly
       />
-    </div>
+    </StyledDialog.AutocompleteList>
   );
 };
diff --git a/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.styled.tsx b/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.styled.tsx
deleted file mode 100644
index d93f62b..0000000
--- a/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.styled.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import { spacings } from '../../../tokens/spacings';
-
-export const AutocompleteList = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  row-gap: ${spacings.MEDIUM};
-`;
diff --git a/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx b/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx
index 146e61a..f6536a7 100644
--- a/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx
+++ b/src/components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.tsx
@@ -13,7 +13,7 @@ import {
   useFetchSmdaMetadataStratigraphicUnits,
   useFetchSmdaStratigraphicColumns,
 } from '../../../hooks/useFetchStratColData';
-import * as Styled from './StratigraphicColumnSelect.styled';
+import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 
 export const StratigraphicColumnSelect = ({
   stratColumnObject,
@@ -58,7 +58,7 @@ export const StratigraphicColumnSelect = ({
   );
 
   return (
-    <Styled.AutocompleteList>
+    <StyledDialog.AutocompleteList>
       <Autocomplete
         label="Country"
         options={filterCountries.sort((a, b) =>
@@ -201,6 +201,6 @@ export const StratigraphicColumnSelect = ({
         }
         noOptionsText="No options"
       />
-    </Styled.AutocompleteList>
+    </StyledDialog.AutocompleteList>
   );
 };
diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx
index 9577caa..a595a3a 100644
--- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx
+++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx
@@ -1,4 +1,3 @@
-import { Dialog } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
 
@@ -26,8 +25,3 @@ export const MetadataInfo = styled.div`
 
   max-width: 60%;
 `;
-
-export const Actions = styled(Dialog.Actions)`
-  display: flex;
-  column-gap: ${spacings.SMALL};
-`;
diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
index 65657eb..6de5f90 100644
--- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
+++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
@@ -21,6 +21,7 @@ import { OutcropAnalogueGroup } from '../../../components/OutcropAnalogue/Outcro
 import { StratigraphicColumnSelect } from '../../../components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect';
 import { StratigrapicGroups } from '../../../components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups';
 import { useFetchModel } from '../../../hooks/useFetchModel';
+import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { StratColumnType } from '../../HandleModel/HandleModelComponent/HandleModelComponent';
 import { EditNameDescription } from '../EditNameDescription/EditNameDescription';
 import * as Styled from './ModelMetadataView.styled';
@@ -330,7 +331,7 @@ export const ModelMetadataView = ({
         </div>
       </Styled.Metadata>
 
-      <Dialog open={showStratColDialog}>
+      <StyledDialog.DialogWindow open={showStratColDialog}>
         <Dialog.Header>Add stratigraphic column</Dialog.Header>
         <Dialog.CustomContent>
           <StratigraphicColumnSelect
@@ -338,13 +339,13 @@ export const ModelMetadataView = ({
             setStratColumnObject={setStratColumnObject}
           />
         </Dialog.CustomContent>
-        <Styled.Actions>
+        <StyledDialog.Actions>
           <Button onClick={handleAddStratCol}>Add</Button>
           <Button variant="outlined" onClick={handleStratColDialog}>
             Close
           </Button>
-        </Styled.Actions>
-      </Dialog>
+        </StyledDialog.Actions>
+      </StyledDialog.DialogWindow>
     </Styled.Wrapper>
   );
 };
diff --git a/src/styles/addRowDialog/AddRowDialog.styled.ts b/src/styles/addRowDialog/AddRowDialog.styled.ts
new file mode 100644
index 0000000..4cb217b
--- /dev/null
+++ b/src/styles/addRowDialog/AddRowDialog.styled.ts
@@ -0,0 +1,19 @@
+import { Dialog } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../tokens/spacings';
+
+export const Actions = styled(Dialog.Actions)`
+  display: flex;
+  column-gap: ${spacings.SMALL};
+`;
+
+export const DialogWindow = styled(Dialog)`
+  min-width: 400px;
+`;
+
+export const AutocompleteList = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.MEDIUM};
+`;