style: fix misc styling

equinor · Dec 5, 2023 · aaaf65b · aaaf65b
1 parent 8a485e1
commit aaaf65b
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 53 deletions.
diff --git a/web/src/Components/Combinations/CardContainer.tsx b/web/src/Components/Combinations/CardContainer.tsx
@@ -24,7 +24,8 @@ export const Card = styled.div`
 export const CombinationTableHeader = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 5px 10px;
+  align-items: self-end;
+  padding: 0px 10px;
   background-color: #f7f7f7;
   border-bottom: #bfbfbf 2px solid;
 `

diff --git a/web/src/Components/Combinations/CombinationCard.tsx b/web/src/Components/Combinations/CombinationCard.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react'
 // @ts-ignore
-import { Button, Icon, Switch, TextField } from '@equinor/eds-core-react'
+import { Button, Icon, Switch, Input} from '@equinor/eds-core-react'
 import CombinationTable from './CombinationTable'
 import styled from 'styled-components'
 import { Card } from './CardContainer'
@@ -14,6 +14,7 @@ import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce'
 const CardHeader = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: self-end;
 `
 
 const CardSummation = styled.div`
@@ -26,7 +27,7 @@ const CardSummation = styled.div`
 const DValues = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 3px 5px 15px 10px;
+  padding: 3px 5px 0 10px;
 `
 
 interface CombinationCardProps {
@@ -61,6 +62,7 @@ export const CombinationCard = ({
   const [D10, setD10] = useState<number>(0)
   const [D50, setD50] = useState<number>(0)
   const [D90, setD90] = useState<number>(0)
+  const [isHeaderEditable, setIsHeaderEditable] = useState<boolean>(false)
 
   // On first render with products, set enabledProducts from saved combinations
   useEffect(() => {
@@ -129,10 +131,11 @@ export const CombinationCard = ({
     <Card>
       <div>
         <CardHeader>
-          <TextField
+          <Button variant='ghost_icon' onClick={()=>setIsHeaderEditable(!isHeaderEditable)}><Icon  name='edit' size={16} /></Button>
+          <Input
             id={`${combination.name}`}
             value={combinationName}
-            style={{ background: 'transparent', paddingTop: '10px' }}
+            readOnly={!isHeaderEditable}
             onChange={(event: any) => {
               setCombinationName(event.target.value)
             }}

diff --git a/web/src/Components/Combinations/CombinationTable.tsx b/web/src/Components/Combinations/CombinationTable.tsx
@@ -86,13 +86,7 @@ export const CombinationTable = ({
                   type='number'
                   onChange={(event: any) => handleValueChange(id, event.target.value)}
                   style={{
-                    background: 'transparent',
-                    maxWidth: '200px',
-                    height: '37px',
-                    borderTop: 'none',
-                    borderBottom: 'none',
-                    boxShadow: 'none',
-                    textAlign: 'center',
+                    '--eds-input-background': 'rgba(133,186,191,0.15)',
                   }}
                 />
               </div>

diff --git a/web/src/Components/Common/EditProducts.tsx b/web/src/Components/Common/EditProducts.tsx
@@ -4,7 +4,6 @@ import { Button, Dialog, Icon, Scrim } from '@equinor/eds-core-react'
 import SelectProducts from '../SelectProducts'
 import { Products } from '../../Types'
 
-const { Actions, Title, CustomContent } = Dialog
 
 interface AddProductsProps {
   allProducts: Products
@@ -23,19 +22,21 @@ export const EditProducts = ({ allProducts, enabledProducts, setEnabledProducts
   return (
     <>
       <Button variant='outlined' onClick={() => setDialogOpen(true)}>
-        <Icon name='edit' title='edit' />
         Select products
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen}>
-        <Title>Select products in blend</Title>
-        <CustomContent style={{ display: 'flex', flexFlow: 'column', alignItems: 'center' }}>
+        <Dialog.Header>
+
+        <Dialog.Title>Select products in blend</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.CustomContent style={{ display: 'flex', flexFlow: 'column', alignItems: 'center' }}>
           <SelectProducts
             allProducts={allProducts}
             enabledProducts={selectedProducts}
             setEnabledProducts={setSelectedProducts}
           />
-        </CustomContent>
-        <Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
+        </Dialog.CustomContent>
+        <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
           <Button
             style={{ width: '200px' }}
             onClick={() => {
@@ -45,7 +46,7 @@ export const EditProducts = ({ allProducts, enabledProducts, setEnabledProducts
           >
             Ok
           </Button>
-        </Actions>
+        </Dialog.Actions>
       </Dialog>
     </>
   )

diff --git a/web/src/Components/Common/Tooltip.tsx b/web/src/Components/Common/Tooltip.tsx
@@ -1,20 +1,11 @@
 import styled from 'styled-components'
 import React, { ReactElement } from 'react'
 // @ts-ignore
-import { Tooltip as EDSTooltip } from '@equinor/eds-core-react'
+import { Tooltip as EDSTooltip, Icon } from '@equinor/eds-core-react'
+import { help_outline} from '@equinor/eds-icons'
 import { COLORS } from '../../Enums'
 
-const StyledTooltipIcon = styled.div`
-  background-color: white;
-  height: 18px;
-  margin: 15px 2px;
-  width: 18px;
-  border-radius: 20px;
-  border: #cccccc solid 1px;
-  color: ${COLORS.secondary};
-  display: flex;
-  font-size: 16px;
-  font-weight: 600;
+const Wrapper = styled.div`
   justify-content: center;
   align-items: center;
   &:hover {
@@ -24,7 +15,7 @@ const StyledTooltipIcon = styled.div`
 
 const TooltipWrapper = styled.div`
   display: flex;
-  align-items: flex-end;
+  align-items: center;
 `
 
 interface TooltipProps {
@@ -34,10 +25,12 @@ interface TooltipProps {
 
 export const Tooltip = ({ text, children }: TooltipProps): ReactElement => {
   return (
-    <TooltipWrapper key={text}>
+    <TooltipWrapper>
       {children}
       <EDSTooltip title={text} placement={'top-end'}>
-        <StyledTooltipIcon>?</StyledTooltipIcon>
+        <Wrapper>
+        <Icon data={help_outline} size={18} style={{color: COLORS.secondary}}/>
+        </Wrapper>
       </EDSTooltip>
     </TooltipWrapper>
   )

diff --git a/web/src/Components/ContactButton.tsx b/web/src/Components/ContactButton.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 // @ts-ignore
 import { Button, Dialog, Icon } from '@equinor/eds-core-react'
 
-const { Actions, Title, CustomContent } = Dialog
 
 export const ContactButton = () => {
   const [dialogOpen, setDialogOpen] = useState<boolean>(false)
@@ -14,8 +13,11 @@ export const ContactButton = () => {
         Contact
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen}>
-        <Title>Contact and support</Title>
-        <CustomContent style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '500px' }}>
+        <Dialog.Header>
+
+        <Dialog.Title>Contact and support</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.CustomContent style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '500px' }}>
           <p>
             Questions regarding access and usage of the LCM optimizer can be directed at Ove Braadland{' '}
             <a href={`mailto:${process.env.REACT_APP_APPLICATION_OWNER}`}>{process.env.REACT_APP_APPLICATION_OWNER}</a>
@@ -26,10 +28,10 @@ export const ContactButton = () => {
               https://github.com/equinor/lcm
             </a>
           </p>
-        </CustomContent>
-        <Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
+        </Dialog.CustomContent>
+        <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
           <Button onClick={() => setDialogOpen(false)}>Close</Button>
-        </Actions>
+        </Dialog.Actions>
       </Dialog>
     </>
   )

diff --git a/web/src/Components/Optimization/OptimizationRunner.tsx b/web/src/Components/Optimization/OptimizationRunner.tsx
@@ -106,9 +106,10 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
           onClick={() => setDialogOpen(true)}
         />
         <Dialog style={{ width: 'auto' }} open={dialogOpen}>
-          <Title>Formulas used in optimizer</Title>
-          <CustomContent>
-            <div></div>
+                  <Dialog.Header>
+          <Dialog.Title>Formulas used in optimizer</Dialog.Title>
+        </Dialog.Header>
+          <Dialog.CustomContent>
             <table style={{ border: '50px' }}>
               <tr>
                 <th style={{ fontWeight: 'normal' }}>Total fitness – weighted average:</th>
@@ -140,10 +141,10 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
                 </th>
               </tr>
             </table>
-          </CustomContent>
-          <Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
+          </Dialog.CustomContent>
+          <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
             <Button onClick={() => setDialogOpen(false)}>Close</Button>
-          </Actions>
+          </Dialog.Actions>
         </Dialog>
       </Typography>
       <div style={{ display: 'flex' }}>
@@ -173,7 +174,6 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
           <EditProducts allProducts={allProducts} enabledProducts={products} setEnabledProducts={setProducts} />
         </InputWrapper>
         <InputWrapper>
-          <Typography variant='body_short'>Optimzier</Typography>
           <Accordion style={{ paddingTop: '10px' }}>
             <Accordion.Item>
               <Accordion.Header>Advanced options</Accordion.Header>

diff --git a/web/src/Components/RefreshButton.tsx b/web/src/Components/RefreshButton.tsx
@@ -9,7 +9,6 @@ import { AuthContext } from 'react-oauth2-code-pkce'
 import Icon from '../Icons'
 import { IAuthContext } from 'react-oauth2-code-pkce'
 
-const { Actions, Title, CustomContent } = Dialog
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -42,8 +41,11 @@ export const RefreshButton = () => {
         Synchronize with SharePoint
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen} isDismissable={true}>
-        <Title>Synchronize SharePoint data</Title>
-        <CustomContent style={{ display: 'flex', flexFlow: 'column', alignItems: 'center' }}>
+        <Dialog.Header>
+
+        <Dialog.Title>Synchronize SharePoint data</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.CustomContent style={{ display: 'flex', flexFlow: 'column', alignItems: 'center' }}>
           <p>
             This will synchronize products distribution and products metadata from SharePoint (
             <a href='https://statoilsrm.sharepoint.com/sites/LCMTeamBlend'>
@@ -55,8 +57,8 @@ export const RefreshButton = () => {
             The sync job will take approximately 1 minute, and the LCM App will be <b>unavailable</b> during this time.
           </p>
           {loading && <CircularProgress />}
-        </CustomContent>
-        <Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'normal' }}>
+        </Dialog.CustomContent>
+        <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'normal' }}>
           <ButtonWrapper>
             <Button onClick={() => setDialogOpen(false)} disabled={loading}>
               Cancel
@@ -72,7 +74,7 @@ export const RefreshButton = () => {
               Sync Now
             </Button>
           </ButtonWrapper>
-        </Actions>
+        </Dialog.Actions>
       </Dialog>
     </>
   )