UI fixes beta9 (#2950)

* UI fixes

Signed-off-by: Vansh Bhatia <vansh@chaosnative.com>

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

@@ -171,7 +171,7 @@ const SideBar: React.FC = () => {
             <UsageIcon />
           </CustomisedListItem>
         )}
-        <hr id="quickActions" />
+        <hr className={classes.quickActions} />
         <CustomisedListItem
           key="litmusDocs"
           handleClick={() => {

litmus-portal/frontend/src/components/SideBar/styles.ts

@@ -36,10 +36,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   drawerList: {
     marginTop: theme.spacing(8.375),
-    '& #quickActions': {
+  },
-      width: '80%',
+  quickActions: {
-      border: `1px solid ${theme.palette.border.main}`,
+    width: '80%',
-    },
+    border: `1px solid ${theme.palette.border.main}`,
   },
   versionlogo: {
     width: '1.25rem',

litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/index.tsx

@@ -15,12 +15,14 @@ import BackButton from '../../../components/Button/BackButton';
 import GithubInputFields from '../../../components/GitHubComponents/GithubInputFields/GithubInputFields';
 import GitHubToggleButton from '../../../components/GitHubComponents/GitHubToggleButtons/GitHubToggleButton';
 import Loader from '../../../components/Loader';
+import { constants } from '../../../constants';
 import {
   ADD_MY_HUB,
   GENERATE_SSH,
   SAVE_MY_HUB,
   UPDATE_MY_HUB,
 } from '../../../graphql/mutations';
+import { GET_HUB_STATUS } from '../../../graphql/queries';
 import {
   CreateMyHub,
   MyHubData,
@@ -28,15 +30,13 @@ import {
   SSHKey,
   SSHKeys,
 } from '../../../models/graphql/user';
+import { HubStatus } from '../../../models/redux/myhub';
 import { getProjectID } from '../../../utils/getSearchParams';
 import {
   isValidWebUrl,
   validateStartEmptySpacing,
 } from '../../../utils/validate';
 import useStyles from './styles';
-import { constants } from '../../../constants';
-import { HubStatus } from '../../../models/redux/myhub';
-import { GET_HUB_STATUS } from '../../../graphql/queries';
 
 interface GitHub {
   HubName: string;
@@ -373,7 +373,6 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
   return (
     <Drawer
       className={classes.drawer}
-      variant="persistent"
       anchor="right"
       open={drawerState}
       classes={{

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

@@ -69,7 +69,7 @@ const ScheduleAndRunStats: React.FC<ScheduleAndRunStatsProps> = ({
   }
 
   return (
-    <Paper className={classes.workflowGraphs}>
+    <Paper elevation={0} className={classes.workflowGraphs}>
       <Tabs
         value={activeTab}
         onChange={handleChange}

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

@@ -2,9 +2,9 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   workflowGraphs: {
-    padding: theme.spacing(3.125, 3.75, 3.125, 10),
+    padding: theme.spacing(4.75, 3.75, 4.75, 10),
     height: '100%',
-    marginBottom: theme.spacing(3.125),
+    filter: `drop-shadow(0px 0.3px 0.9px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1.6px 3.6px rgba(0, 0, 0, 0.13))`,
   },
   graphContainer: {
     width: '900px',

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

@@ -70,7 +70,7 @@ const WorkflowGraphs: React.FC<WorkflowGraphsProps> = ({ data }) => {
       </FormControl>
       <div className={classes.graphs}>
         <ScheduleAndRunStats filter={filters} />
-        <Paper className={classes.radialChartContainer}>
+        <Paper elevation={0} className={classes.radialChartContainer}>
           <RadialChart
             radialData={graphData}
             legendTableHeight={150}

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

@@ -19,7 +19,8 @@ const useStyles = makeStyles((theme) => ({
   radialChartContainer: {
     width: '22rem',
     borderRadius: '0.1875rem',
-    marginBottom: theme.spacing(3.125),
+    padding: theme.spacing(1.25, 4.125, 1.25, 4.125),
+    filter: `drop-shadow(0px 0.3px 0.9px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1.6px 3.6px rgba(0, 0, 0, 0.13))`,
   },
   selectText: {
     height: '2.5rem',

litmus-portal/frontend/src/views/Settings/GitOpsTab/styles.ts

@@ -24,6 +24,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(3.125),
     border: `1px solid ${theme.palette.border.main}`,
     borderRadius: 3,
+    backgroundColor: theme.palette.background.paper,
   },
   locallyText: {
     fontSize: '1.25rem',
@@ -40,6 +41,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: theme.spacing(2.5),
     display: 'flex',
     borderRadius: 3,
+    backgroundColor: theme.palette.background.paper,
   },
   infoText: {
     maxWidth: '25rem',

litmus-portal/frontend/src/views/Settings/ImageRegistry/styles.ts

@@ -9,6 +9,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(3.125),
     border: `1px solid ${theme.palette.border.main}`,
     borderRadius: 3,
+    backgroundColor: theme.palette.background.paper,
   },
   radio: {
     color: theme.palette.primary.main,