chore: Imporve styling of AddRow dialogs and autocomplete lists.

equinor · Sep 12, 2024 · 933c09f · 933c09f
1 parent 1b76f16
commit 933c09f
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 34 deletions.
diff --git 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/...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/...ossDepositionEnviroment/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
@@ -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
@@ -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/...onents/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.styled.tsx b/...onents/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect.styled.tsx
diff --git 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
@@ -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
@@ -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,21 +331,21 @@ export const ModelMetadataView = ({
         </div>
       </Styled.Metadata>
 
-      <Dialog open={showStratColDialog}>
+      <StyledDialog.DialogWindow open={showStratColDialog}>
         <Dialog.Header>Add stratigraphic column</Dialog.Header>
         <Dialog.CustomContent>
           <StratigraphicColumnSelect
             stratColumnObject={stratColumnObject}
             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
@@ -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};
+`;