fix: end of day

equinor · Apr 3, 2024 · 081808e · 081808e
1 parent 2dbd1f2
commit 081808e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 42 deletions.
diff --git a/web/src/Components/Common/Tooltip.tsx b/web/src/Components/Common/Tooltip.tsx
@@ -3,7 +3,7 @@ import React, { ReactElement } from 'react'
 // @ts-ignore
 import { Tooltip as EDSTooltip, Icon } from '@equinor/eds-core-react'
 import { help_outline } from '@equinor/eds-icons'
-import { COLORS } from '../../Enums'
+import { colors } from '../../colors'
 
 const Wrapper = styled.div`
   justify-content: center;
@@ -29,7 +29,7 @@ export const Tooltip = ({ text, children }: TooltipProps): ReactElement => {
       {children}
       <EDSTooltip title={text} placement={'top-end'}>
         <Wrapper>
-          <Icon data={help_outline} size={18} style={{ color: COLORS.secondary }} />
+          <Icon data={help_outline} size={18} style={{ color: colors.secondary }} />
         </Wrapper>
       </EDSTooltip>
     </TooltipWrapper>

diff --git a/web/src/Components/MainBody.tsx b/web/src/Components/MainBody.tsx
@@ -12,6 +12,7 @@ import { ErrorToast } from './Common/Toast'
 import { AuthContext, IAuthContext } from 'react-oauth2-code-pkce'
 import { Bridge, Combination, Combinations, Products } from '../Types'
 import useLocalStorage from '../Hooks'
+import { colors } from '../colors'
 
 const MainComponentsWrapper = styled.div`
   padding: 16px 0 16px 0;
@@ -171,7 +172,7 @@ export default ({ products }: MainBodyProps): ReactElement => {
         <Accordion>
           <Accordion.Item>
             <Accordion.Header>Concentration blends</Accordion.Header>
-            <Accordion.Panel style={{ overflow: 'auto', backgroundColor: '#f7f7f7' }}>
+            <Accordion.Panel style={{ overflow: 'auto', backgroundColor: `${colors.background}` }}>
               <CardContainer
                 sacks={false}
                 combinations={combinations}

diff --git a/web/src/Components/Optimization/OptimizationRunner.tsx b/web/src/Components/Optimization/OptimizationRunner.tsx
@@ -150,34 +150,45 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
         </Dialog.Actions>
       </Dialog>
       <div style={{ display: 'flex' }}>
-        <InputWrapper>
-          <Typography variant='body_short'>Products</Typography>
-          <div
-            style={{
-              border: '1px solid #DCDCDC',
-              maxHeight: '300px',
-              minHeight: '100px',
-              overflow: 'auto',
-              margin: '10px 0',
-              backgroundColor: '#f5f5f5',
-              borderRadius: '4px',
-              padding: '4px',
-            }}
-          >
-            {Object.values(products).map((product: any) => {
-              return (
-                <Typography key={product.id} variant='body_short'>
-                  {product.title}
-                </Typography>
-              )
-            })}
+        <div>
+          <div style={{ display: 'flex' }}>
+            <InputWrapper>
+              <Typography variant='body_short'>Products</Typography>
+              <div
+                style={{
+                  border: '1px solid #DCDCDC',
+                  maxHeight: '300px',
+                  minHeight: '100px',
+                  overflow: 'auto',
+                  margin: '10px 0',
+                  backgroundColor: '#f5f5f5',
+                  borderRadius: '4px',
+                  padding: '4px',
+                }}
+              >
+                {Object.values(products).map((product: any) => {
+                  return (
+                    <Typography key={product.id} variant='body_short'>
+                      {product.title}
+                    </Typography>
+                  )
+                })}
+              </div>
+              <EditProducts allProducts={allProducts} enabledProducts={products} setEnabledProducts={setProducts} />
+            </InputWrapper>
+            <InputWrapper>
+              <Typography variant='body_short'>Pill</Typography>
+              <PillInput pill={pill} setPill={setPill} isLoading={loading} setInvalidInput={setInvalidInput} />
+            </InputWrapper>
           </div>
-          <EditProducts allProducts={allProducts} enabledProducts={products} setEnabledProducts={setProducts} />
-        </InputWrapper>
-        <InputWrapper>
-          <Typography variant='body_short'>Pill</Typography>
-          <PillInput pill={pill} setPill={setPill} isLoading={loading} setInvalidInput={setInvalidInput} />
-        </InputWrapper>
+          <div style={{ display: 'flex', padding: '16px 0' }}>
+            <Button onClick={() => handleOptimize()} disabled={loading || invalidInput || iterations <= 0}>
+              <Icon data={play} title='play' />
+              Run optimizer
+            </Button>
+            {loading && <CircularProgress style={{ padding: '0 15px', height: '35px', width: '35px' }} />}
+          </div>
+        </div>
         <InputWrapper>
           <Accordion style={{ paddingTop: '10px' }}>
             <Accordion.Item>
@@ -269,13 +280,6 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
           </Accordion>
         </InputWrapper>
       </div>
-      <div style={{ display: 'flex', padding: '16px 0', alignSelf: 'flex-end' }}>
-        <Button onClick={() => handleOptimize()} disabled={loading || invalidInput || iterations <= 0}>
-          <Icon data={play} title='play' />
-          Run optimizer
-        </Button>
-        {loading && <CircularProgress style={{ padding: '0 15px', height: '35px', width: '35px' }} />}
-      </div>
 
       {failedRun && <p style={{ color: 'red' }}>Failed to run the optimizer</p>}
     </Wrapper>

diff --git a/web/src/Enums.ts b/web/src/Enums.ts
@@ -5,9 +5,4 @@ export enum BridgingOption {
   CERAMIC_DISCS = 'CERAMIC_DISCS',
 }
 
-export enum COLORS {
-  primary = 'black',
-  secondary = '#017078',
-}
-
 export const CeramicDiscsValues = ['10', '12', '20', '40', '50', '55', '120']
diff --git a/web/src/colors.ts b/web/src/colors.ts
@@ -0,0 +1,5 @@
+export const colors = {
+  primary: '#black',
+  secondary: '#017078',
+  background: '#f7f7f7',
+}