Fixed Table FormControl active colors + updated workflow pills + minor ux fixes (#2943)

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>

litmus-portal/frontend/public/locales/en/translation.yaml

@@ -1057,7 +1057,7 @@ createWorkflow:
     errYaml: Error in CRD Yaml.
     codeIsFine: Your code is fine.
     youCanMoveOn: You can move on !
-    workflowNameValidationMessage: Workflow name can only be alpha numeric and should not contain capital letters
+    workflowNameValidationMessage: Workflow name can only be lowercase characters and alpha numeric
     subjectValidationMessage: Subject can only have alphanumeric characters and - . _ in-between
     test: test
     YAML: YAML

litmus-portal/frontend/src/components/UserDetails/index.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, Typography } from '@material-ui/core';
+import { Avatar, Typography } from '@material-ui/core';
 import { ButtonOutlined, InputField, Modal } from 'litmus-ui';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,9 +37,9 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
   // avatar image source string
   const [avatar, setAvatar] = useState<string>('./avatars/default.svg');
 
-  const handleOpen = () => {
-    setOpen(true);
-  };
+  // const handleOpen = () => {
+  //   setOpen(true);
+  // };
 
   const handleClose = () => {
     setOpen(false);
@@ -61,9 +61,9 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
               className={classes.avatarBackground}
               src={avatar}
             />
-            <Button className={classes.edit} onClick={handleOpen} disabled>
+            {/* <Button className={classes.edit} onClick={handleOpen} disabled>
               {t('settings.userManagementTab.createUser.userDetails.button')}
-            </Button>
+            </Button> */}
             <Modal
               open={open}
               onClose={handleClose}

litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableToolbar.tsx

@@ -242,8 +242,9 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
         </Typography>
       </Button>
 
-      <div className={classes.addButton}>
       <ButtonFilled
+        className={classes.addButton}
+        size="small"
         onClick={() => {
           history.push({
             pathname: '/analytics/dashboard/create',
@@ -255,7 +256,6 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
           {t('analyticsDashboard.dashboardTable.addDashboard')}
         </Typography>
       </ButtonFilled>
-      </div>
       <DateRangeSelector
         anchorEl={dateRangeSelectorRef.current as HTMLElement}
         isOpen={isDateRangeSelectorPopoverOpen}

litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/styles.ts

@@ -192,15 +192,11 @@ const useStyles = makeStyles((theme) => ({
   },
 
   dateRangeDefault: {
-    height: '2rem',
-    textDecoration: 'none',
-    textTransform: 'none',
     padding: theme.spacing(1),
   },
 
   addButton: {
-    marginRight: theme.spacing(3),
-    marginLeft: theme.spacing(1),
+    margin: theme.spacing(0, 2),
   },
 
   icon: {

litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/index.tsx

@@ -54,7 +54,7 @@ const WorkflowGraphs: React.FC<WorkflowGraphsProps> = ({ data }) => {
   ];
   return (
     <div className={classes.root}>
-      <FormControl variant="outlined" className={classes.formControl} focused>
+      <FormControl variant="outlined" className={classes.formControl}>
         <InputLabel className={classes.selectText} />
         <Select
           value={filters}

litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/styles.ts

@@ -23,6 +23,7 @@ const useStyles = makeStyles((theme) => ({
   },
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
   formControl: {

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx

@@ -189,11 +189,7 @@ const BrowseSchedule: React.FC = () => {
             }
           />
 
-          <FormControl
-            variant="outlined"
-            className={classes.formControl}
-            focused
-          >
+          <FormControl variant="outlined" className={classes.formControl}>
             <InputLabel className={classes.selectText}>Name</InputLabel>
             <Select
               value={filters.suspended}
@@ -219,12 +215,7 @@ const BrowseSchedule: React.FC = () => {
           </FormControl>
 
           {/* Select Cluster */}
-          <FormControl
-            variant="outlined"
-            className={classes.formControl}
-            color="primary"
-            focused
-          >
+          <FormControl variant="outlined" className={classes.formControl}>
             <InputLabel className={classes.selectText}>Target Agent</InputLabel>
             <Select
               value={filters.cluster_name}

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts

@@ -31,6 +31,7 @@ const useStyles = makeStyles((theme) => ({
   },
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
 

litmus-portal/frontend/src/views/ChaosWorkflows/Runs/HeaderSection.tsx

@@ -100,7 +100,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         />
 
         {/* Select Workflow */}
-        <FormControl variant="outlined" className={classes.formControl} focused>
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>
             Workflow Status
           </InputLabel>
@@ -118,7 +118,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         </FormControl>
 
         {/* Select Cluster */}
-        <FormControl variant="outlined" className={classes.formControl} focused>
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>Target Cluster</InputLabel>
           <Select
             value={clusterValue}

litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx

@@ -11,7 +11,7 @@ import {
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { ButtonFilled, LightPills } from 'litmus-ui';
+import { ButtonFilled, OutlinedPills } from 'litmus-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import TimePopOver from '../../../components/TimePopOver';
@@ -143,13 +143,13 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
   const getVariant = (variant: string | undefined) => {
     switch (variant) {
       case 'succeeded':
-        return 'success';
+        return 'succeeded';
       case 'failed':
-        return 'danger';
+        return 'failed';
       case 'running':
-        return 'warning';
+        return 'running';
       default:
-        return undefined;
+        return 'pending';
     }
   };
 
@@ -237,7 +237,8 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
         </Popover>
       </TableCell>
       <TableCell>
-        <LightPills
+        <OutlinedPills
+          size="small"
           variant={getVariant(data.phase?.toLowerCase())}
           label={data.phase ?? ''}
         />

litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts

@@ -35,6 +35,7 @@ const useStyles = makeStyles((theme) => ({
 
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
 
@@ -44,10 +45,11 @@ const useStyles = makeStyles((theme) => ({
     height: '2.5rem',
     minWidth: '9rem',
     border: '0.125rem solid',
-    borderRadius: 4,
-    borderColor: theme.palette.primary.main,
     marginRight: theme.spacing(3.75),
     textTransform: 'none',
+    '&:focus': {
+      borderColor: theme.palette.primary.main,
+    },
   },
   displayDate: {
     marginLeft: theme.spacing(1),

litmus-portal/frontend/src/views/Targets/BrowseCluster/HeaderSection.tsx

@@ -9,16 +9,16 @@ import {
   Select,
   Typography,
 } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import SearchIcon from '@material-ui/icons/Search';
 import { ButtonOutlined } from 'litmus-ui';
 import React, { useState } from 'react';
 import { DateRangePicker } from 'react-date-range';
-import { useTranslation } from 'react-i18next';
-import { useTheme } from '@material-ui/core/styles';
 import 'react-date-range/dist/styles.css'; // main css file
 import 'react-date-range/dist/theme/default.css'; // theme css file
+import { useTranslation } from 'react-i18next';
 import useStyles from './styles';
 
 interface HeaderSectionProps {
@@ -97,12 +97,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         />
 
         {/* Select Workflow */}
-        <FormControl
-          variant="outlined"
-          className={classes.formControl}
-          color="primary"
-          focused
-        >
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>
             {t('workflowCluster.header.status')}
           </InputLabel>
@@ -128,12 +123,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         </FormControl>
 
         {/* Select Cluster */}
-        <FormControl
-          variant="outlined"
-          className={classes.formControl}
-          color="primary"
-          focused
-        >
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>
             {t('workflowCluster.header.target')}
           </InputLabel>
@@ -154,8 +144,8 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
             </MenuItem>
           </Select>
         </FormControl>
-        <div className={classes.dateBtn}>
-          <ButtonOutlined disabled={false} onClick={popOverClick}>
+
+        <ButtonOutlined className={classes.selectRange} onClick={popOverClick}>
           <Typography className={classes.displayDate}>
             {displayDate}
             <IconButton className={classes.iconButton}>
@@ -163,7 +153,6 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
             </IconButton>
           </Typography>
         </ButtonOutlined>
-        </div>
         <Popover
           open={isOpen}
           anchorEl={popAnchorEl}

litmus-portal/frontend/src/views/Targets/BrowseCluster/styles.ts

@@ -32,18 +32,20 @@ const useStyles = makeStyles((theme) => ({
   },
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
-  selectDate: {
+  selectRange: {
     display: 'flex',
     flexDirection: 'row',
     height: '2.5rem',
     minWidth: '9rem',
-    border: '1.7px solid',
-    borderRadius: '2rem',
-    borderColor: theme.palette.secondary.main,
+    borderColor: theme.palette.border.main,
     marginRight: theme.spacing(3.75),
     textTransform: 'none',
+    '&:focus': {
+      borderColor: theme.palette.primary.main,
+    },
   },
   displayDate: {
     marginLeft: theme.spacing(1),
@@ -198,9 +200,6 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'space-between',
     gap: '1rem',
   },
-  dateBtn: {
-    marginRight: theme.spacing(2.5),
-  },
   w7: { width: '7rem' },
   // delete user
   delDiv: {