From aaaf65b32a9afc2d9a658b0c49c9d489f17f2bab Mon Sep 17 00:00:00 2001 From: Stig Ofstad Date: Mon, 4 Dec 2023 13:04:39 +0100 Subject: [PATCH] style: fix misc styling --- .../Components/Combinations/CardContainer.tsx | 3 ++- .../Combinations/CombinationCard.tsx | 11 +++++---- .../Combinations/CombinationTable.tsx | 8 +------ web/src/Components/Common/EditProducts.tsx | 15 ++++++------ web/src/Components/Common/Tooltip.tsx | 23 +++++++------------ web/src/Components/ContactButton.tsx | 14 ++++++----- .../Optimization/OptimizationRunner.tsx | 14 +++++------ web/src/Components/RefreshButton.tsx | 14 ++++++----- 8 files changed, 49 insertions(+), 53 deletions(-) diff --git a/web/src/Components/Combinations/CardContainer.tsx b/web/src/Components/Combinations/CardContainer.tsx index ef4c6f3..9464d76 100644 --- 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 index f404c01..f8db825 100644 --- 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(0) const [D50, setD50] = useState(0) const [D90, setD90] = useState(0) + const [isHeaderEditable, setIsHeaderEditable] = useState(false) // On first render with products, set enabledProducts from saved combinations useEffect(() => { @@ -129,10 +131,11 @@ export const CombinationCard = ({
- setIsHeaderEditable(!isHeaderEditable)}> + { setCombinationName(event.target.value) }} diff --git a/web/src/Components/Combinations/CombinationTable.tsx b/web/src/Components/Combinations/CombinationTable.tsx index c570fca..1dad940 100644 --- 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)', }} />
diff --git a/web/src/Components/Common/EditProducts.tsx b/web/src/Components/Common/EditProducts.tsx index d2f21fe..9cf9d2b 100644 --- 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 ( <> - Select products in blend - + + + Select products in blend + + - - + + - + ) diff --git a/web/src/Components/Common/Tooltip.tsx b/web/src/Components/Common/Tooltip.tsx index bc79a23..69d8e98 100644 --- 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 ( - + {children} - ? + + + ) diff --git a/web/src/Components/ContactButton.tsx b/web/src/Components/ContactButton.tsx index 61eb35b..41dc212 100644 --- 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(false) @@ -14,8 +13,11 @@ export const ContactButton = () => { Contact - Contact and support - + + + Contact and support + +

Questions regarding access and usage of the LCM optimizer can be directed at Ove Braadland{' '} {process.env.REACT_APP_APPLICATION_OWNER} @@ -26,10 +28,10 @@ export const ContactButton = () => { https://github.com/equinor/lcm

- - + + - + ) diff --git a/web/src/Components/Optimization/OptimizationRunner.tsx b/web/src/Components/Optimization/OptimizationRunner.tsx index 8851503..b839dc4 100644 --- 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)} /> - Formulas used in optimizer - -
+ + Formulas used in optimizer + + @@ -140,10 +141,10 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
Total fitness – weighted average:
- - + + - +
@@ -173,7 +174,6 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza - Optimzier Advanced options diff --git a/web/src/Components/RefreshButton.tsx b/web/src/Components/RefreshButton.tsx index 4fc88d3..ea943a5 100644 --- 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 - Synchronize SharePoint data - + + + Synchronize SharePoint data + +

This will synchronize products distribution and products metadata from SharePoint ( @@ -55,8 +57,8 @@ export const RefreshButton = () => { The sync job will take approximately 1 minute, and the LCM App will be unavailable during this time.

{loading && } - - + + - + )