Refactor/make styles batch 6 part 2 (#2811)

Adds another batch of refactored components
Unleash · Jan 3, 2023 · 093156f · 093156f
1 parent b631618
commit 093156f
Show file tree

Hide file tree

Showing 15 changed files with 272 additions and 328 deletions.
diff --git a/...sultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/...sultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx
@@ -33,7 +33,7 @@ export const FeatureStrategyItem = ({
             style={{
                 borderColor: result.enabled
                     ? theme.palette.success.main
-                    : 'inherit',
+                    : 'none',
             }}
             strategy={{ ...strategy, id: `${objectId(strategy)}` }}
             orderNumber={index + 1}

diff --git a/...gyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx b/...gyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx
@@ -1,9 +1,7 @@
-import { Chip, Typography, useTheme } from '@mui/material';
+import { Chip, Typography, useTheme, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useStyles } from './PlaygroundParametertem.styles';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { CancelOutlined } from '@mui/icons-material';
-import classnames from 'classnames';
 
 interface IConstraintItemProps {
     value: Array<string | number>;
@@ -12,29 +10,55 @@ interface IConstraintItemProps {
     showReason?: boolean;
 }
 
+const StyledDivContainer = styled('div', {
+    shouldForwardProp: prop => prop !== 'showReason',
+})<{ showReason?: boolean }>(({ theme, showReason }) => ({
+    width: '100%',
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: `1px solid ${theme.palette.dividerAlternative}`,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.spacing(2),
+    opacity: showReason ? 0.9 : 1,
+    backgroundColor: showReason ? theme.palette.background.paper : 'inherit',
+}));
+
+const StyledDivColumn = styled('div')(({ theme }) => ({
+    flexDirection: 'column',
+}));
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+    margin: theme.spacing(0.5),
+}));
+
+const StyledParagraph = styled('p')(({ theme }) => ({
+    display: 'inline',
+    margin: theme.spacing(0.5, 0),
+    maxWidth: '95%',
+    textAlign: 'center',
+    wordBreak: 'break-word',
+}));
+
 export const PlaygroundParameterItem = ({
     value,
     text,
     input,
     showReason = false,
 }: IConstraintItemProps) => {
-    const { classes: styles } = useStyles();
     const theme = useTheme();
 
     const color = input === 'no value' ? 'error' : 'neutral';
     const reason = `value does not match any ${text}`;
 
     return (
-        <div
-            className={classnames(
-                styles.container,
-                showReason ? styles.disabled : ''
-            )}
-        >
+        <StyledDivContainer showReason={showReason}>
             <Typography variant="subtitle1" color={theme.palette[color].main}>
                 {`${input}`}
             </Typography>
-            <div className={styles.column}>
+            <StyledDivColumn>
                 <ConditionallyRender
                     condition={Boolean(showReason)}
                     show={
@@ -51,13 +75,13 @@ export const PlaygroundParameterItem = ({
                     show={<p>No {text}s added yet.</p>}
                     elseShow={
                         <div>
-                            <p className={styles.paragraph}>
+                            <StyledParagraph>
                                 {value.length}{' '}
                                 {value.length > 1 ? `${text}s` : text} will get
                                 access.
-                            </p>
+                            </StyledParagraph>
                             {value.map((v: string | number) => (
-                                <Chip
+                                <StyledChip
                                     key={v}
                                     label={
                                         <StringTruncator
@@ -66,18 +90,17 @@ export const PlaygroundParameterItem = ({
                                             maxLength={50}
                                         />
                                     }
-                                    className={styles.chip}
                                 />
                             ))}
                         </div>
                     }
                 />
-            </div>
+            </StyledDivColumn>
             <ConditionallyRender
                 condition={Boolean(showReason)}
                 show={<CancelOutlined color={'error'} />}
                 elseShow={<div />}
             />
-        </div>
+        </StyledDivContainer>
     );
 };
diff --git a/...t/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts b/...t/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts
diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
@@ -1,61 +1,87 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    containerStyles: {
-        display: 'flex',
-        [theme.breakpoints.down('md')]: {
-            flexDirection: 'column',
-        },
-    },
-    projectToggles: {
-        width: '100%',
-        minWidth: 0,
-    },
-    header: {
-        backgroundColor: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadiusLarge,
-        marginBottom: '1rem',
-    },
-    innerContainer: {
-        padding: '1.25rem 2rem',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-    },
-    separator: {
-        width: '100%',
-        backgroundColor: theme.palette.grey[200],
-        height: '1px',
-    },
-    tabContainer: {
-        padding: '0 2rem',
-    },
-    tabButton: {
-        textTransform: 'none',
-        fontSize: '1rem',
-        flexGrow: 1,
-        flexBasis: 0,
-        [theme.breakpoints.down('md')]: {
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1),
-        },
-        [theme.breakpoints.up('md')]: {
-            minWidth: 160,
-        },
-    },
-    title: {
-        margin: 0,
-        width: '100%',
-        fontSize: theme.fontSizes.mainHeader,
-        fontWeight: 'bold',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: '1rem',
+import { styled, Tab } from '@mui/material';
+import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton';
+
+export const StyledDiv = styled('div')(() => ({
+    display: 'flex',
+}));
+
+export const StyledTopRow = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+}));
+
+export const StyledColumn = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+}));
+
+export const StyledName = styled('div')(() => ({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));
+
+export const StyledTitle = styled('span')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    fontWeight: 'normal',
+}));
+
+export const StyledText = styled(StyledTitle)(({ theme }) => ({
+    color: theme.palette.neutral.dark,
+}));
+
+export const StyledFavoriteIconButton = styled(FavoriteIconButton)(
+    ({ theme }) => ({
+        marginLeft: theme.spacing(-1.5),
+    })
+);
+
+export const StyledHeader = styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadiusLarge,
+    marginBottom: theme.spacing(2),
+}));
+
+export const StyledInnerContainer = styled('div')(({ theme }) => ({
+    padding: theme.spacing(2.5, 5),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'start',
+}));
+
+export const StyledProjectTitle = styled('h2')(({ theme }) => ({
+    margin: 0,
+    width: '100%',
+    fontSize: theme.fontSizes.mainHeader,
+    fontWeight: 'bold',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(2),
+}));
+
+export const StyledSeparator = styled('div')(({ theme }) => ({
+    width: '100%',
+    backgroundColor: theme.palette.tertiary.light,
+    height: '1px',
+}));
+
+export const StyledTabContainer = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 4),
+}));
+
+export const StyledTab = styled(Tab)(({ theme }) => ({
+    textTransform: 'none',
+    fontSize: theme.fontSizes.bodySize,
+    flexGrow: 1,
+    flexBasis: 0,
+    [theme.breakpoints.down('md')]: {
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
     },
-    titleText: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
+    [theme.breakpoints.up('md')]: {
+        minWidth: 160,
     },
 }));