(litmus-portal): Fix the styling and css issues (#2085)

* (litmus-portal): Fix the styling and css issues Signed-off-by: Chandan Kumar <chandan.kumar@mayadata.io> * Remove the background color definition from root Signed-off-by: Chandan Kumar <chandan.kumar@mayadata.io>
2020-09-17 18:54:33 +05:30 · 2020-09-17 18:54:33 +05:30 · 094ec4d8ec
parent 9f6240915c
commit 094ec4d8ec
13 changed files with 51 additions and 27 deletions
--- a/litmus-portal/frontend/src/components/Header/styles.ts
+++ b/litmus-portal/frontend/src/components/Header/styles.ts
@ -5,14 +5,13 @@ const useStyles = makeStyles((theme: Theme) => ({
  appBar: {
    width: '100%',
    height: '100%',
-    backgroundColor: theme.palette.background.default,
+    background: theme.palette.background.default,
  },

  headerFlex: {
    height: '5%',
    flexDirection: 'row',
    justifyContent: 'space-between',
-    backgroundColor: theme.palette.background.default,
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(0.5),
    paddingTop: theme.spacing(1),
@ -23,7 +22,6 @@ const useStyles = makeStyles((theme: Theme) => ({
    height: '5%',
    flexDirection: 'row',
    justifyContent: 'space-between',
-    backgroundColor: theme.palette.background.default,
    marginTop: theme.spacing(0),
    marginBottom: theme.spacing(0),
    paddingTop: theme.spacing(0),
@ -36,7 +34,6 @@ const useStyles = makeStyles((theme: Theme) => ({
    height: '5%',
    flexDirection: 'row',
    justifyContent: 'space-between',
-    backgroundColor: theme.palette.background.default,
    marginTop: theme.spacing(0),
    marginBottom: theme.spacing(0),
    paddingTop: theme.spacing(1),
@ -47,7 +44,6 @@ const useStyles = makeStyles((theme: Theme) => ({
    height: '5%',
    flexDirection: 'row',
    justifyContent: 'space-between',
-    backgroundColor: theme.palette.background.default,
    marginTop: theme.spacing(0.5),
    marginBottom: theme.spacing(0),
    paddingTop: theme.spacing(2),
@ -63,7 +59,7 @@ const useStyles = makeStyles((theme: Theme) => ({
  projectDisplay: {
    marginTop: theme.spacing(-1.25),
    fontSize: 12,
-    color: 'grey',
+    color: theme.palette.projectDisplayColor,
  },
  // Style for ProfileDropdownSection and ProfileDropdownItems.
  avatarBackground: {
@ -155,6 +151,7 @@ const useStyles = makeStyles((theme: Theme) => ({
    paddingBottom: theme.spacing(1),
    paddingLeft: theme.spacing(8),
    paddingRight: theme.spacing(8),
+    color: theme.palette.buttonEditProfile,
  },

  dividerTop: {
--- a/litmus-portal/frontend/src/components/InputField/styles.ts
+++ b/litmus-portal/frontend/src/components/InputField/styles.ts
@ -9,6 +9,7 @@ const useStylesLitmus = makeStyles((theme: Theme) =>
          : `1px solid ${theme.palette.primary.dark}`,
      overflow: 'hidden',
      borderRadius: 4,
+      color: 'inherit',
      backgroundColor: theme.palette.common.white,
      transition: theme.transitions.create(['border-color', 'box-shadow']),
      '&$error': {
@ -28,6 +29,7 @@ const useStylesLitmus = makeStyles((theme: Theme) =>
      },
      '&$focused': {
        backgroundColor: theme.palette.common.white,
+        color: 'inherit',
      },
    },
    focused: {
@ -78,7 +80,7 @@ const useStyles = makeStyles((theme) => ({
    borderColor: theme.palette.error.main,
  },
  inputArea: {
-    width: theme.spacing(45),
+    width: 'inherit',
    marginTop: theme.spacing(1),
    paddingLeft: theme.spacing(2),
    textDecoration: 'none',
--- a/litmus-portal/frontend/src/components/QuickActionCard/index.tsx
+++ b/litmus-portal/frontend/src/components/QuickActionCard/index.tsx
@ -22,7 +22,7 @@ const QuickActionCard = () => {

  return (
    <div className={classes.quickActionCard}>
-      <Card elevation={0}>
+      <Card className={classes.quickActionCard} elevation={0}>
        <Typography className={classes.mainHeader}>
          {t('quickActionCard.quickActions')}
        </Typography>
--- a/litmus-portal/frontend/src/components/QuickActionCard/style.ts
+++ b/litmus-portal/frontend/src/components/QuickActionCard/style.ts
@ -3,9 +3,10 @@ import { makeStyles } from '@material-ui/core';
 const useStyles = makeStyles((theme) => ({
  quickActionCard: {
    fontSize: '1.125rem',
+    backgroundColor: 'inherit',
  },
  listItem: {
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
    paddingLeft: theme.spacing(2.5),
    paddingBottom: theme.spacing(0.25),
    textDecoration: 'none',
@ -15,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
  },
  mainHeader: {
    fontSize: '1.0625rem',
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
  },
 }));

--- a/litmus-portal/frontend/src/components/SideBar/styles.ts
+++ b/litmus-portal/frontend/src/components/SideBar/styles.ts
@ -8,6 +8,7 @@ const useStyles = makeStyles((theme: Theme) => ({
  drawerPaper: {
    width: '100%',
    position: 'relative',
+    backgroundColor: theme.palette.sidebarBackground,
  },
  litmusDiv: {
    display: 'flex',
--- a/litmus-portal/frontend/src/components/WelcomeModal/styles.ts
+++ b/litmus-portal/frontend/src/components/WelcomeModal/styles.ts
@ -33,6 +33,7 @@ const useStyles = makeStyles((theme: Theme) => ({
  inputArea: {
    width: '60%',
    margin: '1rem auto',
+    color: theme.palette.primary.contrastText,
  },
  passwordArea: {
    width: '60%',
--- a/litmus-portal/frontend/src/containers/app/App-styles.ts
+++ b/litmus-portal/frontend/src/containers/app/App-styles.ts
@ -2,7 +2,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';

 const useStyles = makeStyles((theme: Theme) => ({
  root: {
-    width: '100vw',
+    width: 'auto',
    height: '100vh',
    zIndex: 1,
  },
--- a/litmus-portal/frontend/src/containers/layouts/Scaffold/styles.ts
+++ b/litmus-portal/frontend/src/containers/layouts/Scaffold/styles.ts
@ -17,7 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({
  },
  content: {
    gridArea: 'content',
-    backgroundColor: theme.palette.background.default,
+    background: theme.palette.layoutBackground,
    padding: theme.spacing(3),
    overflowY: 'scroll',
  },
--- a/litmus-portal/frontend/src/pages/HomePage/style.ts
+++ b/litmus-portal/frontend/src/pages/HomePage/style.ts
@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({

  mainDiv: {
    padding: theme.spacing(3.75),
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.homePageCardBackgroundColor,
    width: '50rem',
    display: 'flex',
    flexDirection: 'row',
@ -40,6 +40,7 @@ const useStyles = makeStyles((theme) => ({
    width: '14.375rem',
    border: '1px solid ',
    borderColor: theme.palette.secondary.dark,
+    backgroundColor: theme.palette.homePageWorkflowCardBackgroundColor,
    borderRadius: 3,
    marginLeft: theme.spacing(5),
    boxShadow: '2px 1px 9px rgba(91, 68, 186, 0.25)',
@ -56,7 +57,7 @@ const useStyles = makeStyles((theme) => ({

  createWorkflowTitle: {
    fontSize: 25,
-    color: theme.palette.secondary.dark,
+    color: theme.palette.workflowTitleColor,
    fontWeight: 'bold',
    marginLeft: theme.spacing(3.75),
    marginTop: theme.spacing(2.5),
@ -72,7 +73,7 @@ const useStyles = makeStyles((theme) => ({
  },

  arrowForwardIcon: {
-    color: theme.palette.secondary.dark,
+    color: theme.palette.workflowTitleColor,
    marginLeft: theme.spacing(22.5),
    marginTop: theme.spacing(4.375),
    marginBottom: theme.spacing(2.5),
@ -85,14 +86,14 @@ const useStyles = makeStyles((theme) => ({
  },

  mainResult: {
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
    fontSize: '1.5625rem',
    maxWidth: '27.5rem',
    marginBottom: theme.spacing(3.125),
  },

  mainDesc: {
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
    fontSize: '1.125rem',
    maxWidth: '36rem',
  },
@ -116,7 +117,7 @@ const useStyles = makeStyles((theme) => ({
  statDiv: {
    width: '50rem',
    flexGrow: 1,
-    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    backgroundColor: theme.palette.homePageCardBackgroundColor,
    borderRadius: 3,
    [theme.breakpoints.down('sm')]: {
      width: '18rem',
@ -132,16 +133,16 @@ const useStyles = makeStyles((theme) => ({

  quickActionDiv: {
    marginTop: theme.spacing(2),
-    borderLeft: '1px solid rgba(0, 0, 0, 0.05)',
    paddingLeft: theme.spacing(2),
    marginLeft: theme.spacing(3),
+    background: 'inherit',
  },

  cardDiv: {
    display: 'flex',
    flexDirection: 'row',
    flexGrow: 1,
-    paddingLeft: theme.spacing(5),
+    padding: theme.spacing(4),
    [theme.breakpoints.down('sm')]: {
      display: 'flex',
      flexDirection: 'column',
--- a/litmus-portal/frontend/src/theme/index.tsx
+++ b/litmus-portal/frontend/src/theme/index.tsx
@ -44,6 +44,13 @@ declare module '@material-ui/core/styles/createPalette' {
      failedTests: string;
    };
    waitingStatusColor: string;
+    projectDisplayColor?: string;
+    buttonEditProfile?: string;
+    homePageCardBackgroundColor?: string;
+    homePageWorkflowCardBackgroundColor?: string;
+    workflowTitleColor?: string;
+    layoutBackground?: string;
+    sidebarBackground?: string;
  }
  // allow configuration using `createMuiTheme`
  interface PaletteOptions {
@ -70,6 +77,13 @@ declare module '@material-ui/core/styles/createPalette' {
      failedTests: string;
    };
    waitingStatusColor?: string;
+    projectDisplayColor?: string;
+    buttonEditProfile?: string;
+    homePageCardBackgroundColor?: string;
+    homePageWorkflowCardBackgroundColor?: string;
+    workflowTitleColor?: string;
+    layoutBackground?: string;
+    sidebarBackground?: string;
  }
 }
 function customTheme(options: ThemeOptions) {
@ -140,6 +154,13 @@ function customTheme(options: ThemeOptions) {
        failedTests: 'rgba(202, 44, 44, 0.2)',
      },
      waitingStatusColor: 'rgba(246, 185, 43, 0.1)',
+      projectDisplayColor: 'rgba(128, 128, 128)',
+      buttonEditProfile: 'rgba(0, 0, 0)',
+      homePageCardBackgroundColor: '#FFFFFF',
+      homePageWorkflowCardBackgroundColor: '#FFFFFF',
+      workflowTitleColor: '#5B44BA',
+      layoutBackground: '#FAFBFD',
+      sidebarBackground: '#FAFBFD',
    },
    typography: {
      fontSize: 12,
--- a/litmus-portal/frontend/src/views/Home/AverageResilienceScore/styles.ts
+++ b/litmus-portal/frontend/src/views/Home/AverageResilienceScore/styles.ts
@ -6,7 +6,7 @@ const useStyles = makeStyles((theme) => ({
    height: '14.6875rem',
    marginRight: theme.spacing(3),
    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.secondary.contrastText,
+    backgroundColor: theme.palette.homePageCardBackgroundColor,
  },
  headerMain: {
    fontWeight: 'bold',
@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({
  testResultDesc: {
    marginLeft: theme.spacing(6),
    marginTop: theme.spacing(-9.5),
-    opacity: 0.5,
+    opacity: 0.6,
  },
 }));

--- a/litmus-portal/frontend/src/views/Home/PassedVsFailed/styles.ts
+++ b/litmus-portal/frontend/src/views/Home/PassedVsFailed/styles.ts
@ -5,7 +5,7 @@ const useStyles = makeStyles((theme) => ({
    width: '20.3125rem',
    height: '14.6875rem',
    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.secondary.contrastText,
+    backgroundColor: theme.palette.homePageCardBackgroundColor,
  },
  boxMain: {
    display: 'flex',
@ -80,7 +80,7 @@ const useStyles = makeStyles((theme) => ({
  statsDesc: {
    marginLeft: theme.spacing(4.375),
    marginTop: theme.spacing(1.875),
-    opacity: 0.5,
+    opacity: 0.6,
  },
 }));

--- a/litmus-portal/frontend/src/views/Home/TotalWorkflows/styles.ts
+++ b/litmus-portal/frontend/src/views/Home/TotalWorkflows/styles.ts
@ -5,7 +5,7 @@ const useStyles = makeStyles((theme) => ({
    width: '20.3125rem',
    height: '14.6875rem',
    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.secondary.contrastText,
+    backgroundColor: theme.palette.homePageCardBackgroundColor,
  },
  heading: {
    textAlign: 'center',
@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
    color: theme.palette.secondary.dark,
  },
  maxCount: {
-    color: theme.palette.customColors.black(0.2),
+    color: theme.palette.text.disabled,
  },
  workflow: {
    marginLeft: theme.spacing(4.375),
@ -38,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
  avgDesc: {
    marginLeft: theme.spacing(4.375),
    marginTop: theme.spacing(1.875),
-    opacity: 0.5,
+    opacity: 0.6,
  },
  avatarStyle: {
    backgroundColor: theme.palette.secondary.dark,