From b038b8cad7dd5baafe7b28c08e9675ad26a588e3 Mon Sep 17 00:00:00 2001
From: Peter Bull Hove <peterbullhove@gmail.com>
Date: Thu, 4 Apr 2024 14:05:37 +0200
Subject: [PATCH] feat: more styling

---
 .../Components/Bridging/InputContainer.tsx    | 179 ++++++++++--------
 web/src/Components/MainBody.tsx               |   2 +-
 2 files changed, 101 insertions(+), 80 deletions(-)

diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx
index cba8b6f..6e38040 100644
--- a/web/src/Components/Bridging/InputContainer.tsx
+++ b/web/src/Components/Bridging/InputContainer.tsx
@@ -4,6 +4,7 @@ import { BridgingOption, CeramicDiscsValues } from '../../Enums'
 import { findDValue } from '../../Utils'
 import { GraphData } from '../../Types'
 import { Variants } from '@equinor/eds-core-react/dist/types/components/types'
+import { colors } from '../../colors'
 
 type InputContainerProps = {
   mode: BridgingOption
@@ -39,97 +40,117 @@ const InputContainer = ({
         backgroundColor: 'white',
         borderRadius: '0.5rem',
         padding: '0.5rem',
-        marginBlockStart: '1rem',
       }}
     >
       <InputWrapper>
-        <Typography variant='h3'>Bridging options</Typography>
-        <span>Bridging based on:</span>
-        <RadioWrapper>
-          <Radio
-            label='Permeability'
-            name='group'
-            value={BridgingOption.PERMEABILITY}
-            onChange={onBridgeOptionChange}
-            checked={mode === BridgingOption.PERMEABILITY}
-          />
-          <Radio
-            label='Average pore size/crack opening'
-            name='group'
-            value={BridgingOption.AVERAGE_PORESIZE}
-            onChange={onBridgeOptionChange}
-            checked={mode === BridgingOption.AVERAGE_PORESIZE}
-          />
-          <Tooltip
-            title={
-              'Max poresize/crack opening is the largest pore throat diameter or widest crack/aperture width (fracture width or screen slot opening)'
-            }
-          >
+        <div
+          style={{
+            width: '180px',
+            border: '1px solid rgb(220, 220, 220)',
+            borderRadius: '0.5rem',
+            backgroundColor: `${colors.background}`,
+            padding: '0.5rem',
+          }}
+        >
+          <Typography variant='h3'>Bridging options</Typography>
+          <span>Bridging based on:</span>
+          <RadioWrapper>
             <Radio
-              label='Max pore size/crack opening'
+              label='Permeability'
               name='group'
-              value={BridgingOption.MAXIMUM_PORESIZE}
+              value={BridgingOption.PERMEABILITY}
               onChange={onBridgeOptionChange}
-              checked={mode === BridgingOption.MAXIMUM_PORESIZE}
+              checked={mode === BridgingOption.PERMEABILITY}
             />
-          </Tooltip>
-          <Radio
-            label='Ceramic Discs'
-            name='group'
-            value={BridgingOption.CERAMIC_DISCS}
-            onChange={onBridgeOptionChange}
-            checked={mode === BridgingOption.CERAMIC_DISCS}
-          />
-        </RadioWrapper>
-        <div style={{ width: '150px' }}>
-          {mode === BridgingOption.CERAMIC_DISCS ? (
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              {/* <label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label> */}
-              <NativeSelect
-                onChange={event => onBridgeValueChange(event.target.value)}
-                id={'ceramic-disk-selector'}
-                label={'Disk Size'}
-                meta={'microns'}
-              >
-                {CeramicDiscsValues.map((value, index) => {
-                  return (
-                    <option value={value} key={index + value}>
-                      {value}
-                    </option>
-                  )
-                })}
-              </NativeSelect>
-              {/* <small style={{ alignSelf: 'flex-end' }}>microns</small> */}
-            </div>
-          ) : (
-            <TextField
-              label={InputLabels[mode]}
-              type='number'
-              id='textfield-number'
-              meta={unit}
-              value={bridgeValue || 0}
-              onChange={event => onBridgeValueChange(event.target.value)}
-              variant={bridgeValueVariant}
-              helperText={bridgeValueHelperText}
+            <Radio
+              label='Average pore size/crack opening'
+              name='group'
+              value={BridgingOption.AVERAGE_PORESIZE}
+              onChange={onBridgeOptionChange}
+              checked={mode === BridgingOption.AVERAGE_PORESIZE}
             />
-          )}
+            <Tooltip
+              title={
+                'Max poresize/crack opening is the largest pore throat diameter or widest crack/aperture width (fracture width or screen slot opening)'
+              }
+            >
+              <Radio
+                label='Max pore size/crack opening'
+                name='group'
+                value={BridgingOption.MAXIMUM_PORESIZE}
+                onChange={onBridgeOptionChange}
+                checked={mode === BridgingOption.MAXIMUM_PORESIZE}
+              />
+            </Tooltip>
+            <Radio
+              label='Ceramic Discs'
+              name='group'
+              value={BridgingOption.CERAMIC_DISCS}
+              onChange={onBridgeOptionChange}
+              checked={mode === BridgingOption.CERAMIC_DISCS}
+            />
+          </RadioWrapper>
+          <div style={{ width: '100%', margin: 'auto' }}>
+            {mode === BridgingOption.CERAMIC_DISCS ? (
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                {/* <label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label> */}
+                <NativeSelect
+                  onChange={event => onBridgeValueChange(event.target.value)}
+                  id={'ceramic-disk-selector'}
+                  label={'Disk Size'}
+                  meta={'microns'}
+                >
+                  {CeramicDiscsValues.map((value, index) => {
+                    return (
+                      <option value={value} key={index + value}>
+                        {value}
+                      </option>
+                    )
+                  })}
+                </NativeSelect>
+                {/* <small style={{ alignSelf: 'flex-end' }}>microns</small> */}
+              </div>
+            ) : (
+              <TextField
+                label={InputLabels[mode]}
+                type='number'
+                id='textfield-number'
+                meta={unit}
+                value={bridgeValue || 0}
+                onChange={event => onBridgeValueChange(event.target.value)}
+                variant={bridgeValueVariant}
+                helperText={bridgeValueHelperText}
+              />
+            )}
+          </div>
         </div>
       </InputWrapper>
       {optimalBridgeGraphData.length > 0 && (
-        <div style={{ marginBlockStart: '1rem' }}>
+        <div
+          style={{
+            marginBlockStart: '2rem',
+            width: '180px',
+            border: '1px solid rgb(220, 220, 220)',
+            borderRadius: '0.5rem',
+            backgroundColor: `${colors.background}`,
+            padding: '0.5rem',
+          }}
+        >
           <Typography variant='h3'>Optimal Bridge:</Typography>
-          <p>
-            D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}
-            {'\u00B5m'}
-          </p>
-          <p>
-            D50: {findDValue(optimalBridgeGraphData, 50, 'Bridge')}
-            {'\u00B5m'}
-          </p>
-          <p>
-            D90: {findDValue(optimalBridgeGraphData, 90, 'Bridge')}
-            {'\u00B5m'}
-          </p>
+          <div style={{ marginInlineStart: '0.5rem' }}>
+            <p>
+              D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}
+              {'\u00B5m'}
+            </p>
+            <p>
+              D50: {findDValue(optimalBridgeGraphData, 50, 'Bridge')}
+              {'\u00B5m'}
+            </p>
+            <p>
+              D90: {findDValue(optimalBridgeGraphData, 90, 'Bridge')}
+              {'\u00B5m'}
+            </p>
+          </div>
         </div>
       )}
     </div>
diff --git a/web/src/Components/MainBody.tsx b/web/src/Components/MainBody.tsx
index bd197c0..a846b8c 100644
--- a/web/src/Components/MainBody.tsx
+++ b/web/src/Components/MainBody.tsx
@@ -158,7 +158,7 @@ export default ({ products }: MainBodyProps): ReactElement => {
       </MainComponentsWrapper>
       <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', padding: '0.5rem' }}>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex' }}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant={'h3'}>Blends</Typography>
             <Icon style={{ cursor: 'pointer', paddingLeft: '5px' }} data={info_circle} />
           </div>