From fe57dea91e10bfdaad38efb4872bcc31e3093777 Mon Sep 17 00:00:00 2001
From: Arkajyoti Mukherjee
 <32966391+arkajyotiMukherjee@users.noreply.github.com>
Date: Mon, 14 Sep 2020 23:28:08 +0530
Subject: [PATCH] validation bug fix, css fixes for release (#2069)

- Bug fixes in multiple components
- workflow name validation bug fixed

Signed-off-by: arkajyotiMukherjee <arkajyoti.mukherjee@mayadata.io>
---
 .../frontend/public/icons/LitmusLogo.svg      |  12 ++++
 .../frontend/public/icons/community.png       | Bin 503 -> 0 bytes
 .../frontend/public/icons/setting.png         | Bin 405 -> 0 bytes
 .../frontend/public/icons/workflows.png       | Bin 598 -> 0 bytes
 .../src/components/InputField/index.tsx       |  18 +++++-
 .../src/components/InputField/styles.ts       |   4 +-
 .../frontend/src/components/SideBar/index.tsx |  21 +++---
 .../frontend/src/components/SideBar/styles.ts |   4 +-
 .../frontend/src/components/Tabs/index.tsx    |   4 +-
 .../frontend/src/pages/Community/index.tsx    |  12 ++--
 .../frontend/src/pages/Community/styles.ts    |   7 +-
 .../frontend/src/pages/LoginPage/index.tsx    |   2 +-
 .../frontend/src/pages/Settings/index.tsx     |  16 +++--
 .../frontend/src/pages/Settings/styles.ts     |   8 +--
 .../frontend/src/pages/Workflows/index.tsx    |  14 ++--
 .../frontend/src/pages/Workflows/styles.ts    |   5 +-
 litmus-portal/frontend/src/svg/community.svg  |   3 +
 litmus-portal/frontend/src/svg/home.svg       |   3 +
 litmus-portal/frontend/src/svg/hub.svg        |   7 ++
 litmus-portal/frontend/src/svg/settings.svg   |   5 ++
 litmus-portal/frontend/src/svg/target.svg     |  11 ++++
 litmus-portal/frontend/src/svg/workflows.svg  |   6 ++
 litmus-portal/frontend/src/theme/index.tsx    |  10 ++-
 litmus-portal/frontend/src/utils/validate.ts  |   9 +++
 .../ChaosWorkflows/BrowseWorkflow/styles.ts   |   2 +-
 .../ChaosWorkflows/CustomStatus/Status.tsx    |   5 +-
 .../CreateWorkflow/ChooseWorkflow/index.tsx   |  60 +++++++++++-------
 .../AccountsTab/AccountSettings/styles.ts     |   2 -
 .../TeammingTab/InviteNew/Invite/index.tsx    |   4 +-
 .../TeammingTab/InviteNew/Invite/styles.ts    |   4 +-
 .../Settings/TeammingTab/InviteNew/styles.ts  |   1 -
 .../src/views/Settings/TeammingTab/styles.ts  |   1 +
 .../UserManagement/index.tsx                  |   3 -
 .../UserManagement/styles.ts                  |   3 +-
 34 files changed, 182 insertions(+), 84 deletions(-)
 create mode 100644 litmus-portal/frontend/public/icons/LitmusLogo.svg
 delete mode 100644 litmus-portal/frontend/public/icons/community.png
 delete mode 100644 litmus-portal/frontend/public/icons/setting.png
 delete mode 100644 litmus-portal/frontend/public/icons/workflows.png
 create mode 100644 litmus-portal/frontend/src/svg/community.svg
 create mode 100644 litmus-portal/frontend/src/svg/home.svg
 create mode 100644 litmus-portal/frontend/src/svg/hub.svg
 create mode 100644 litmus-portal/frontend/src/svg/settings.svg
 create mode 100644 litmus-portal/frontend/src/svg/target.svg
 create mode 100644 litmus-portal/frontend/src/svg/workflows.svg

diff --git a/litmus-portal/frontend/public/icons/LitmusLogo.svg b/litmus-portal/frontend/public/icons/LitmusLogo.svg
new file mode 100644
index 000000000..396007f94
--- /dev/null
+++ b/litmus-portal/frontend/public/icons/LitmusLogo.svg
@@ -0,0 +1,12 @@
+<svg width="128" height="47" viewBox="0 0 128 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M65.2226 31.3221V33.6448H55.9019V12.7409H58.6166V31.3221H65.2226Z" fill="black"/>
+<path d="M70.8933 33.6448H68.2992V17.8085H70.8933V33.6448ZM69.5962 15.0032C69.1337 15.0032 68.7315 14.8524 68.3897 14.5507C68.0679 14.229 67.907 13.8067 67.907 13.2838C67.907 12.761 68.0679 12.3487 68.3897 12.0471C68.7315 11.7253 69.1337 11.5645 69.5962 11.5645C70.0588 11.5645 70.4509 11.7253 70.7727 12.0471C71.1145 12.3487 71.2855 12.761 71.2855 13.2838C71.2855 13.8067 71.1145 14.229 70.7727 14.5507C70.4509 14.8524 70.0588 15.0032 69.5962 15.0032Z" fill="black"/>
+<path d="M78.0178 17.8085H81.9995V20.0406H78.0178V28.7581C78.0178 29.8441 78.2088 30.6082 78.5909 31.0506C78.9931 31.4729 79.526 31.6841 80.1896 31.6841C80.5315 31.6841 80.8532 31.6338 81.1549 31.5333C81.4766 31.4327 81.7481 31.3121 81.9693 31.1713L82.4821 33.2526C81.6576 33.7353 80.7828 33.9766 79.8578 33.9766C78.3697 33.9766 77.2536 33.5643 76.5095 32.7398C75.7856 31.8952 75.4236 30.5077 75.4236 28.5772V13.5553L78.0178 13.1028V17.8085Z" fill="black"/>
+<path d="M85.2961 18.2609C85.9999 18.0397 86.7641 17.8588 87.5886 17.718C88.4131 17.5571 89.1672 17.4767 89.8509 17.4767C90.5548 17.4767 91.1882 17.5672 91.7513 17.7482C92.3344 17.9291 92.8472 18.2308 93.2897 18.6531C93.8125 18.3112 94.3756 18.0297 94.9789 17.8085C95.5821 17.5873 96.2458 17.4767 96.9697 17.4767C97.6937 17.4767 98.3472 17.5873 98.9304 17.8085C99.5337 18.0096 100.046 18.3615 100.469 18.8642C100.891 19.367 101.223 20.0507 101.464 20.9154C101.706 21.76 101.826 22.8158 101.826 24.0827V33.6448H99.232V24.2938C99.232 22.7253 99.051 21.579 98.6891 20.8551C98.3271 20.1311 97.6434 19.7692 96.6379 19.7692C96.2558 19.7692 95.8637 19.8395 95.4615 19.9803C95.0794 20.1211 94.7174 20.3121 94.3756 20.5534C94.5364 21.016 94.6571 21.5388 94.7375 22.122C94.818 22.7052 94.8582 23.3587 94.8582 24.0827V33.6448H92.2641V24.2938C92.2641 22.7253 92.0831 21.579 91.7211 20.8551C91.3591 20.1311 90.6754 19.7692 89.6699 19.7692C89.1471 19.7692 88.5538 19.8697 87.8902 20.0708V33.6448H85.2961V18.2609Z" fill="black"/>
+<path d="M116.162 33.1923C115.9 33.2929 115.578 33.3934 115.196 33.494C114.834 33.5744 114.442 33.6448 114.02 33.7051C113.618 33.7855 113.205 33.8459 112.783 33.8861C112.381 33.9464 112.009 33.9766 111.667 33.9766C110.843 33.9766 110.088 33.876 109.405 33.6749C108.721 33.494 108.138 33.1621 107.655 32.6795C107.173 32.1969 106.801 31.5433 106.539 30.7188C106.278 29.8742 106.147 28.8185 106.147 27.5516V17.8085H108.741V27.4611C108.741 29.0095 108.972 30.1055 109.435 30.749C109.918 31.3724 110.641 31.6841 111.607 31.6841C111.928 31.6841 112.25 31.674 112.572 31.6539C112.894 31.6137 113.226 31.5433 113.567 31.4428V17.8085H116.162V33.1923Z" fill="black"/>
+<path d="M123.053 31.8048C123.817 31.8048 124.39 31.5936 124.773 31.1713C125.175 30.7289 125.376 30.1558 125.376 29.4519C125.376 29.0095 125.295 28.6375 125.135 28.3358C124.974 28.0141 124.762 27.7326 124.501 27.4912C124.24 27.2499 123.938 27.0388 123.596 26.8578C123.254 26.6567 122.912 26.4455 122.571 26.2243C122.229 26.0232 121.897 25.792 121.575 25.5306C121.253 25.249 120.962 24.9373 120.7 24.5955C120.459 24.2335 120.258 23.8313 120.097 23.3889C119.956 22.9264 119.886 22.3935 119.886 21.7902C119.886 20.4831 120.288 19.4273 121.092 18.6229C121.917 17.8185 123.023 17.4163 124.411 17.4163C124.994 17.4163 125.547 17.4968 126.07 17.6577C126.592 17.7984 127.025 17.9593 127.367 18.1403L126.794 20.2216C126.432 20.0205 126.07 19.8697 125.708 19.7692C125.346 19.6686 124.954 19.6183 124.531 19.6183C123.888 19.6183 123.375 19.8094 122.993 20.1915C122.611 20.5534 122.42 21.0863 122.42 21.7902C122.42 22.1924 122.49 22.5443 122.631 22.8459C122.772 23.1275 122.953 23.3889 123.174 23.6302C123.415 23.8514 123.677 24.0626 123.958 24.2637C124.26 24.4648 124.571 24.6558 124.893 24.8368C125.275 25.058 125.647 25.2993 126.009 25.5607C126.391 25.8221 126.723 26.1338 127.005 26.4958C127.306 26.8377 127.548 27.2499 127.729 27.7326C127.91 28.1951 128 28.7582 128 29.4218C128 30.8093 127.588 31.9254 126.763 32.77C125.959 33.6146 124.773 34.0369 123.204 34.0369C122.4 34.0369 121.676 33.9263 121.032 33.7051C120.389 33.4839 119.906 33.2828 119.584 33.1018L120.127 30.9601C120.429 31.121 120.831 31.302 121.334 31.5031C121.857 31.7042 122.43 31.8048 123.053 31.8048Z" fill="black"/>
+<path d="M0 0H37.1254V42.9262C37.1254 44.8485 35.5671 46.4067 33.6449 46.4067H3.4805C1.55828 46.4067 0 44.8485 0 42.9262V0Z" fill="#858CDD"/>
+<path d="M5.80127 2.31934H11.6021V18.5617H5.80127V2.31934Z" fill="#5B44BA"/>
+<path d="M5.80127 18.5625H11.6021V41.7659H5.80127V18.5625Z" fill="#F0F0F0"/>
+<path d="M15.082 41.7666L15.082 35.9658L32.4846 35.9658L32.4846 41.7666L15.082 41.7666Z" fill="#F0F0F0"/>
+</svg>
diff --git a/litmus-portal/frontend/public/icons/community.png b/litmus-portal/frontend/public/icons/community.png
deleted file mode 100644
index 9dfe12aaa63aace19cfa794dfa5f6bf38fdfd658..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 503
zcmV<T0SNwyP)<h;3K|Lk000e1NJLTq000jF000jN1^@s6JJyv-00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0gOpRK~#7Fg;UK@
z!cY+2eJ_Ed*a1{vtU#;)tw627VFn#wh=G9_7=(cikP6fafDS?j>A(!vB)jel7Ysr6
z@D98C?a#O0LpZQb=e>#u4kMI+&>svMU+|Bid78~(*|zNkrw;y3K!pmailA<oxPGb#
zrocjB1)TKy{nwAfV7EIgCsbH5(bHh?vd)54u~>LUpk)@g2e$$PM2%ivXN#GuyPb8L
z7u<88Y9KkTH(3GEGK!M*Xw(YQ&J0+Z&+Fk4@NMdW!dU{a)heoJq`L7NZrbg!lXjMo
zk2<>U_z{quey?$z3Hidqn$i9guI`mUH)gy)DX2Y-Q9W-J!vn|#?4s={WW31k2|(L4
z>4X{PQFyRK6lFxba@}bSAlV8H(wTqYjIrcdqNaeEDg@fs#;N!L&j7pKSt+I@%+2eV
zvn1Th6UKhE$sKB_soc^6M5Pu+eR*Lb3gq^eCnrn=A_Zi*wcL86fl5L~%}^qrCXi21
tJ-1#uqDaX>hL9P2%Zh_IwjD$+{{nI2w2{j_4b%Vt002ovPDHLkV1f<+*bV>y

diff --git a/litmus-portal/frontend/public/icons/setting.png b/litmus-portal/frontend/public/icons/setting.png
deleted file mode 100644
index 4fede81844f4517fc03aa03a24ffb8152b921230..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 405
zcmV;G0c!q<P)<h;3K|Lk000e1NJLTq000jF000jN1^@s6JJyv-00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0V+vEK~#7FrBdBZ
z!$1tSFQE^pg&Tnp!UU)rgbf%Wh#!?IX|BlwRg{Wu&~5-5Bpc8T2pdH37L+p=5Y-WK
z1c~qMY=8c2e+Tdnpef;bg71$;u6(QV#p0&us$nMb@L-r(j85#q-u+~9d(^4yhiQg{
z?IZ`JZ9Kmm`~EUS2A+zQdI15I#<6`r-5|mtAUYPS#zJ(DzQc5yIEv(I4O}4vH`Sv~
zWHwuW9swVs=wc2%(0Aq}<*9Ak+gi#eXzlm|M8!@y2$C~ED^!=r5#@6fT?yz@)*nJ7
zPF;f&$JZM@Zt@(V2Mw|DTwT5ZLg)2`9j{jBA1mQ(mOc_7|9w6x8qb4ZxmI$G8|Am1
zO%URaOIc?`O1b5EFZruMRZDkZReA4c`77Q5Je7P<%((J_00000NkvXXu0mjf^L(D>

diff --git a/litmus-portal/frontend/public/icons/workflows.png b/litmus-portal/frontend/public/icons/workflows.png
deleted file mode 100644
index 96af12e7f85cb38fc8cc6b226f9efd21a06b7a9a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 598
zcmV-c0;&CpP)<h;3K|Lk000e1NJLTq000jF000jN1^@s6JJyv-00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0qaRbK~#7Fg;UXS
z+E5VOJCuC+gAPI}FzFyv5U3!g0?@=xCLRpJVw_2g2U3BC3Ir7xDu}2cqyvwCE#2kb
z!@@v5ax)s~>27tqdnXzU?k1u*gUT?DFQ)iU^m^Z$#K8oLIjc&OKoOWuj|;D^#`piA
znVZ(=CrHm&ghC~$tD=5+`J?Xg-ELIv^={vTQ1|!e*ygQ?H4@b!m5C_&R?Fp8%AmQz
zWRNaZ^^c`$r1S>Rg%W)X_^A~|UpEdzhcs`yAeyKYt<mVq{6**3bRvanxbMp$xPSLs
zMcPJd0(lC7z?D?N7(g^+M)LR=yqiwL2QUBS>rR`jN27~nz|tmuol=E5)-e$~yY~XD
zPEPXr&N~k@SBW__t(iOLxpjlA;^BGAMzUmo_OWqwHidKt9>wR4A}<<5&X}E|559=d
z6j4vpj5{@1tvI%i9&7IP$G;#LI*ra%pyE5`!U?1py5)$kKfNvMgMBc$;XC@Gjp%wi
zj%PnY;>x|Kga`HIgIfR&I3d*;h&wix%oscvlbRB$B_qkDeRK2Kdqe&HxMNAbVfzc<
z+&6QQ3K#ZnTU;&@DK=I=V{<q%L)JvdN}xB<Mq@g%61WAsysqt9G3&&EXKXaJC>A&h
kKdPg!u9?Xi*gvuO3yBr{F42XBA^-pY07*qoM6N<$g1%}A5&!@I

diff --git a/litmus-portal/frontend/src/components/InputField/index.tsx b/litmus-portal/frontend/src/components/InputField/index.tsx
index d212a1286..b660a55a4 100644
--- a/litmus-portal/frontend/src/components/InputField/index.tsx
+++ b/litmus-portal/frontend/src/components/InputField/index.tsx
@@ -1,10 +1,10 @@
-import { TextField, OutlinedInputProps } from '@material-ui/core';
-import React, { useState } from 'react';
+import { OutlinedInputProps, TextField } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
+import AccountCircle from '@material-ui/icons/AccountCircle';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
-import AccountCircle from '@material-ui/icons/AccountCircle';
+import React, { useState } from 'react';
 import { useStyles, useStylesLitmus } from './styles';
 
 interface InputFieldProps {
@@ -17,6 +17,7 @@ interface InputFieldProps {
   value: string;
   required?: boolean;
   iconType?: string | undefined;
+  styles?: Object;
   handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -27,6 +28,7 @@ const InputField: React.FC<InputFieldProps> = ({
   disabled,
   helperText,
   validationError,
+  styles,
   success,
   required,
   iconType,
@@ -60,6 +62,7 @@ const InputField: React.FC<InputFieldProps> = ({
         required={required}
         onChange={handleChange}
         variant="filled"
+        style={styles}
         InputProps={
           {
             classes,
@@ -91,6 +94,7 @@ const InputField: React.FC<InputFieldProps> = ({
         type={showPassword ? 'text' : 'password'}
         required={required}
         onChange={handleChange}
+        style={styles}
         variant="filled"
         InputProps={
           {
@@ -123,6 +127,7 @@ const InputField: React.FC<InputFieldProps> = ({
           value={value}
           type={type}
           required={required}
+          style={styles}
           onChange={handleChange}
           variant="filled"
           InputProps={
@@ -148,6 +153,7 @@ const InputField: React.FC<InputFieldProps> = ({
           helperText={helperText}
           value={value}
           type={type}
+          style={styles}
           required={required}
           onChange={handleChange}
           variant="filled"
@@ -173,6 +179,7 @@ const InputField: React.FC<InputFieldProps> = ({
           helperText={helperText}
           value={value}
           type={type}
+          style={styles}
           required={required}
           onChange={handleChange}
           variant="filled"
@@ -203,6 +210,7 @@ const InputField: React.FC<InputFieldProps> = ({
           value={value}
           type={type}
           required={required}
+          style={styles}
           onChange={handleChange}
           variant="filled"
           InputProps={
@@ -228,6 +236,7 @@ const InputField: React.FC<InputFieldProps> = ({
           helperText={helperText}
           value={value}
           type={type}
+          style={styles}
           required={required}
           onChange={handleChange}
           variant="filled"
@@ -253,6 +262,7 @@ const InputField: React.FC<InputFieldProps> = ({
           helperText={helperText}
           value={value}
           type={type}
+          style={styles}
           required={required}
           onChange={handleChange}
           variant="filled"
@@ -284,6 +294,7 @@ const InputField: React.FC<InputFieldProps> = ({
           helperText={helperText}
           value={value}
           type={type}
+          style={styles}
           required={required}
           onChange={handleChange}
           variant="filled"
@@ -317,6 +328,7 @@ const InputField: React.FC<InputFieldProps> = ({
       helperText={helperText}
       value={value}
       type={type}
+      style={styles}
       required={required}
       onChange={handleChange}
       variant="filled"
diff --git a/litmus-portal/frontend/src/components/InputField/styles.ts b/litmus-portal/frontend/src/components/InputField/styles.ts
index 2a9318276..5f3b02ef9 100644
--- a/litmus-portal/frontend/src/components/InputField/styles.ts
+++ b/litmus-portal/frontend/src/components/InputField/styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, createStyles, Theme, fade } from '@material-ui/core';
+import { createStyles, fade, makeStyles, Theme } from '@material-ui/core';
 
 const useStylesLitmus = makeStyles((theme: Theme) =>
   createStyles({
@@ -9,7 +9,6 @@ const useStylesLitmus = makeStyles((theme: Theme) =>
           : `1px solid ${theme.palette.primary.dark}`,
       overflow: 'hidden',
       borderRadius: 4,
-      margin: '0 1rem',
       backgroundColor: theme.palette.common.white,
       transition: theme.transitions.create(['border-color', 'box-shadow']),
       '&$error': {
@@ -81,6 +80,7 @@ const useStyles = makeStyles((theme) => ({
   inputArea: {
     width: theme.spacing(45),
     marginTop: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
     textDecoration: 'none',
     borderRadius: 3,
   },
diff --git a/litmus-portal/frontend/src/components/SideBar/index.tsx b/litmus-portal/frontend/src/components/SideBar/index.tsx
index b5b277f64..47e2c782c 100644
--- a/litmus-portal/frontend/src/components/SideBar/index.tsx
+++ b/litmus-portal/frontend/src/components/SideBar/index.tsx
@@ -10,6 +10,10 @@ import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
+import { ReactComponent as CommunityIcon } from '../../svg/community.svg';
+import { ReactComponent as HomeIcon } from '../../svg/home.svg';
+import { ReactComponent as SettingsIcon } from '../../svg/settings.svg';
+import { ReactComponent as WorkflowsIcon } from '../../svg/workflows.svg';
 import useStyles from './styles';
 
 interface CustomisedListItemProps {
@@ -66,7 +70,7 @@ const SideBar: React.FC = () => {
           }}
           label="Home"
         >
-          <img src="/icons/workflows.png" alt="home" />
+          <HomeIcon />
         </CustomisedListItem>
         <CustomisedListItem
           key="workflow"
@@ -75,17 +79,8 @@ const SideBar: React.FC = () => {
           }}
           label="Workflows"
         >
-          <img src="/icons/workflows.png" alt="workflow" />
+          <WorkflowsIcon />
         </CustomisedListItem>
-        {/* <CustomisedListItem
-          key="hub"
-          handleClick={() => {
-            history.push('/404');
-          }}
-          label="My Hub"
-        >
-          <img src="/icons/hub.png" alt="hub" />
-        </CustomisedListItem> */}
         <CustomisedListItem
           key="community"
           handleClick={() => {
@@ -93,7 +88,7 @@ const SideBar: React.FC = () => {
           }}
           label="Community"
         >
-          <img src="/icons/community.png" alt="community" />
+          <CommunityIcon />
         </CustomisedListItem>
         {userRole === 'Owner' && (
           <CustomisedListItem
@@ -103,7 +98,7 @@ const SideBar: React.FC = () => {
             }}
             label="Settings"
           >
-            <img src="/icons/setting.png" alt="settings" />
+            <SettingsIcon />
           </CustomisedListItem>
         )}
       </List>
diff --git a/litmus-portal/frontend/src/components/SideBar/styles.ts b/litmus-portal/frontend/src/components/SideBar/styles.ts
index 867394c42..9164d660f 100644
--- a/litmus-portal/frontend/src/components/SideBar/styles.ts
+++ b/litmus-portal/frontend/src/components/SideBar/styles.ts
@@ -39,12 +39,14 @@ const useStyles = makeStyles((theme: Theme) => ({
     '&:hover': {
       backgroundColor: theme.palette.secondary.light,
       color: theme.palette.getContrastText(theme.palette.primary.contrastText),
+      '& path': {
+        fill: theme.palette.common.white,
+      },
     },
   },
 
   listIcon: {
     paddingLeft: theme.spacing(2),
-    alignSelf: 'center',
   },
   listText: {
     marginLeft: theme.spacing(0),
diff --git a/litmus-portal/frontend/src/components/Tabs/index.tsx b/litmus-portal/frontend/src/components/Tabs/index.tsx
index 22195cc2f..e58f59d33 100644
--- a/litmus-portal/frontend/src/components/Tabs/index.tsx
+++ b/litmus-portal/frontend/src/components/Tabs/index.tsx
@@ -10,7 +10,7 @@ const TabPanel: React.FC<TabPanelProps> = ({ children, index, value }) => {
   return (
     <div role="tabpanel" hidden={value !== index}>
       {value === index && (
-        <Box p={3}>
+        <Box style={{ marginTop: 30, marginLeft: 10 }}>
           <>{children}</>
         </Box>
       )}
@@ -28,7 +28,7 @@ const StyledTab = withStyles((theme) =>
       fontSize: '0.95rem',
       paddingTop: theme.spacing(1.875),
       paddingBottom: theme.spacing(1.875),
-      width: '15.9375rem',
+      borderBottom: `1px solid ${theme.palette.customColors.black(0.1)}`,
       '&:focus': {
         opacity: 1,
       },
diff --git a/litmus-portal/frontend/src/pages/Community/index.tsx b/litmus-portal/frontend/src/pages/Community/index.tsx
index aaa7b74f2..5c266accd 100644
--- a/litmus-portal/frontend/src/pages/Community/index.tsx
+++ b/litmus-portal/frontend/src/pages/Community/index.tsx
@@ -31,13 +31,15 @@ const Community: React.FC = () => {
 
   return (
     <Scaffold>
-      <div>
+      <div className={classes.root}>
         <div>
-          <Typography className={classes.mainHeader}>Community</Typography>
+          <Typography variant="h3" className={classes.mainHeader}>
+            Community
+          </Typography>
         </div>
 
         {/* Litmus Daily Insights */}
-        <section className="Daily Insights">
+        <section>
           <Header2>{t('community.heading')}</Header2>
           <Typography>{t('community.headingDesc')}</Typography>
           <div className={classes.cardDiv}>
@@ -46,7 +48,7 @@ const Community: React.FC = () => {
         </section>
 
         {/* Litmus Analytics Dashboard */}
-        <section className="Litmus Analytics Dashboard">
+        <section>
           <div className={classes.LitmusAnalyticsBlock}>
             <Header2>{t('community.analyticDesc')}</Header2>
             <div className={classes.LitmusAnalyticsDiv}>
@@ -93,7 +95,7 @@ const Community: React.FC = () => {
         </section>
 
         {/* Litmus Used Statistics all over the World */}
-        <section className="Litmus Used Stats">
+        <section>
           <div className={classes.LitmusUsedBlock}>
             <Header2>{t('community.statsHeading')}</Header2>
             <div className={classes.LitmusUsedDiv}>
diff --git a/litmus-portal/frontend/src/pages/Community/styles.ts b/litmus-portal/frontend/src/pages/Community/styles.ts
index 703d94647..996630faf 100644
--- a/litmus-portal/frontend/src/pages/Community/styles.ts
+++ b/litmus-portal/frontend/src/pages/Community/styles.ts
@@ -2,11 +2,12 @@ import { makeStyles } from '@material-ui/core/styles';
 
 // Community Component Styling
 const useStyles = makeStyles((theme) => ({
+  root: {
+    margin: theme.spacing(1.5),
+  },
   mainHeader: {
     color: theme.palette.text.primary,
-    fontSize: '2.5rem',
-    marginTop: theme.spacing(5),
-    marginBottom: theme.spacing(6),
+    margin: theme.spacing(4.5, 1.5, 2.5, 0),
   },
 
   LitmusAnalyticsBlock: {
diff --git a/litmus-portal/frontend/src/pages/LoginPage/index.tsx b/litmus-portal/frontend/src/pages/LoginPage/index.tsx
index 7cc79b89a..ba491664a 100644
--- a/litmus-portal/frontend/src/pages/LoginPage/index.tsx
+++ b/litmus-portal/frontend/src/pages/LoginPage/index.tsx
@@ -68,7 +68,7 @@ const LoginPage = () => {
     <div className={classes.rootContainer}>
       <div className={classes.mainDiv}>
         <div className={classes.box}>
-          <img src="icons/LitmusLogo.png" alt="litmus logo" />
+          <img src="icons/LitmusLogo.svg" alt="litmus logo" />
           <Typography variant="h2" className={classes.heading}>
             <div dangerouslySetInnerHTML={{ __html: t('login.heading') }} />
           </Typography>
diff --git a/litmus-portal/frontend/src/pages/Settings/index.tsx b/litmus-portal/frontend/src/pages/Settings/index.tsx
index 690e2cd77..3731f73af 100644
--- a/litmus-portal/frontend/src/pages/Settings/index.tsx
+++ b/litmus-portal/frontend/src/pages/Settings/index.tsx
@@ -1,4 +1,5 @@
 import { Box, Paper, Tab, Tabs, Typography } from '@material-ui/core';
+import useTheme from '@material-ui/core/styles/useTheme';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import Scaffold from '../../containers/layouts/Scaffold';
@@ -28,7 +29,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
+      {value === index && <Box style={{ marginLeft: 15 }}>{children}</Box>}
     </div>
   );
 }
@@ -54,15 +55,22 @@ const Settings: React.FC = () => {
     tabs.changeSettingsTabs(newValue);
   };
 
+  const theme = useTheme();
+
   return (
     <Scaffold>
-      <Typography className={classes.Head}>Settings </Typography>
+      <Typography variant="h3" className={classes.Head}>
+        Settings
+      </Typography>
       <Paper className={classes.root} elevation={0}>
         <Tabs
           value={settingsTabValue}
           onChange={handleChange}
-          indicatorColor="secondary"
-          textColor="secondary"
+          TabIndicatorProps={{
+            style: {
+              backgroundColor: theme.palette.secondary.dark,
+            },
+          }}
         >
           <Tab label="My Account" {...tabProps(0)} />
           <Tab label="Team" {...tabProps(1)} />
diff --git a/litmus-portal/frontend/src/pages/Settings/styles.ts b/litmus-portal/frontend/src/pages/Settings/styles.ts
index 4c4c21ada..4f98cab99 100644
--- a/litmus-portal/frontend/src/pages/Settings/styles.ts
+++ b/litmus-portal/frontend/src/pages/Settings/styles.ts
@@ -7,13 +7,11 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: '63.75rem',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginLeft: theme.spacing(11),
+    marginLeft: theme.spacing(2),
+    borderBottom: `1px solid ${theme.palette.customColors.black(0.1)}`,
   },
   Head: {
-    fontSize: '2.25rem',
-    marginLeft: theme.spacing(11),
-    marginTop: theme.spacing(4.875),
-    marginBottom: theme.spacing(3.5),
+    margin: theme.spacing(4.5, 1.5, 2.5, 1.5),
   },
 }));
 export default useStyles;
diff --git a/litmus-portal/frontend/src/pages/Workflows/index.tsx b/litmus-portal/frontend/src/pages/Workflows/index.tsx
index a7b83a2aa..741b30810 100644
--- a/litmus-portal/frontend/src/pages/Workflows/index.tsx
+++ b/litmus-portal/frontend/src/pages/Workflows/index.tsx
@@ -1,4 +1,5 @@
 import { AppBar, Typography } from '@material-ui/core';
+import useTheme from '@material-ui/core/styles/useTheme';
 import Tabs from '@material-ui/core/Tabs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,15 +25,17 @@ const Workflows = () => {
   );
   const tabs = useActions(TabActions);
 
+  const theme = useTheme();
+
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     tabs.changeWorkflowsTabs(newValue);
   };
 
   return (
     <Scaffold>
-      <section className="Header section">
+      <section>
         <div className={classes.header}>
-          <Typography variant="h4">Chaos Workflows</Typography>
+          <Typography variant="h3">Chaos Workflows</Typography>
           <div className={classes.scheduleBtn}>
             <ButtonFilled
               isPrimary={false}
@@ -47,8 +50,11 @@ const Workflows = () => {
         <Tabs
           value={workflowTabValue}
           onChange={handleChange}
-          indicatorColor="secondary"
-          textColor="secondary"
+          TabIndicatorProps={{
+            style: {
+              backgroundColor: theme.palette.secondary.dark,
+            },
+          }}
           variant="fullWidth"
         >
           <StyledTab label="Browse workflows" />
diff --git a/litmus-portal/frontend/src/pages/Workflows/styles.ts b/litmus-portal/frontend/src/pages/Workflows/styles.ts
index f5fd4d7f3..80be81781 100644
--- a/litmus-portal/frontend/src/pages/Workflows/styles.ts
+++ b/litmus-portal/frontend/src/pages/Workflows/styles.ts
@@ -5,8 +5,8 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    marginTop: theme.spacing(2.5),
-    marginBottom: theme.spacing(2.5),
+    color: theme.palette.text.primary,
+    margin: theme.spacing(4.5, 1.5, 2.5, 1.5),
   },
   scheduleBtn: {
     marginLeft: 'auto',
@@ -14,6 +14,7 @@ const useStyles = makeStyles((theme) => ({
   appBar: {
     background: 'transparent',
     boxShadow: 'none',
+    paddingLeft: theme.spacing(1.5),
   },
 }));
 
diff --git a/litmus-portal/frontend/src/svg/community.svg b/litmus-portal/frontend/src/svg/community.svg
new file mode 100644
index 000000000..9596798fa
--- /dev/null
+++ b/litmus-portal/frontend/src/svg/community.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5094 11.565C14.8349 10.8784 14.9999 10.1421 14.9999 9.37382C14.9999 6.6314 12.8231 4.38511 10.0972 4.25322C9.48296 2.04048 7.46513 0.49707 5.15635 0.49707C2.31325 0.49707 0.000225769 2.79697 0.000225769 5.6239C0.000225769 6.39217 0.165163 7.12853 0.490703 7.81508L0.00875096 10.2251C-0.0525953 10.5319 0.218043 10.8031 0.524891 10.7424L2.96465 10.26C3.57583 10.5499 4.22597 10.7119 4.90318 10.7443C5.7571 13.8189 9.18678 15.3611 12.0354 14.0099C14.7074 14.5382 14.499 14.5006 14.5604 14.5006C14.8381 14.5006 15.0455 14.2462 14.9913 13.975L14.5094 11.565ZM3.22538 9.40879C3.13747 9.36385 3.03692 9.34982 2.94013 9.36898L0.999548 9.75267L1.38183 7.8411C1.40126 7.74398 1.38731 7.64308 1.34217 7.55487C1.03494 6.95383 0.879111 6.30419 0.879111 5.6239C0.879111 3.28158 2.79787 1.37596 5.15635 1.37596C6.99953 1.37596 8.62265 2.57446 9.18988 4.28849C6.50325 4.63199 4.47979 7.05616 4.73938 9.85158C4.20985 9.80069 3.70256 9.65274 3.22538 9.40879ZM13.6183 11.591L14.0006 13.5026L12.06 13.1189C11.9631 13.0998 11.8627 13.1138 11.7747 13.1587C11.1737 13.4659 10.5241 13.6218 9.84377 13.6218C7.50146 13.6218 5.59583 11.7161 5.59583 9.37382C5.59583 7.0315 7.50146 5.12587 9.84377 5.12587C12.2023 5.12587 14.121 7.0315 14.121 9.37382C14.121 10.0541 13.9652 10.7037 13.658 11.3048C13.6128 11.393 13.5989 11.4939 13.6183 11.591Z" fill="#777777"/>
+</svg>
diff --git a/litmus-portal/frontend/src/svg/home.svg b/litmus-portal/frontend/src/svg/home.svg
new file mode 100644
index 000000000..5de067eec
--- /dev/null
+++ b/litmus-portal/frontend/src/svg/home.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8431 7.1209L13.7722 6.04997L7.87911 0.156868C7.66992 -0.0522893 7.33077 -0.0522893 7.12158 0.156868L1.22845 6.04997L0.156988 7.12146C-0.0485593 7.33429 -0.0426893 7.67344 0.170141 7.87899C0.37776 8.07951 0.706893 8.07951 0.914512 7.87899L1.07093 7.72147V14.4643C1.07093 14.7601 1.31079 15 1.60668 15H13.3929C13.6888 15 13.9287 14.7601 13.9287 14.4643V7.72147L14.0856 7.87846C14.2984 8.084 14.6376 8.0781 14.8431 7.8653C15.0437 7.65768 15.0437 7.32852 14.8431 7.1209ZM9.10703 13.9285H5.8926V9.64262H9.10703V13.9285ZM12.8572 13.9285H10.1785V9.10691C10.1785 8.81102 9.93863 8.57116 9.64274 8.57116H5.35685C5.06096 8.57116 4.82111 8.81102 4.82111 9.10691V13.9285H2.14243V6.65001L7.49978 1.29262L12.8572 6.65001V13.9285Z" fill="#777777"/>
+</svg>
diff --git a/litmus-portal/frontend/src/svg/hub.svg b/litmus-portal/frontend/src/svg/hub.svg
new file mode 100644
index 000000000..e9edd53fc
--- /dev/null
+++ b/litmus-portal/frontend/src/svg/hub.svg
@@ -0,0 +1,7 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.69695 6.51732V0.878906H10.5759V0H4.42352V0.878906H5.30242V6.51732L1.01377 12.9504C0.743538 13.3557 0.718489 13.8743 0.948352 14.3038C1.17819 14.7332 1.62356 15 2.11068 15H12.8887C13.3758 15 13.8212 14.7332 14.0511 14.3037C14.2809 13.8742 14.2558 13.3557 13.9856 12.9503L9.69695 6.51732ZM6.18133 6.78346V0.878906H8.81805V6.78346L9.94756 8.47772C9.72751 8.4358 9.4934 8.4082 9.2575 8.4082C8.28602 8.4082 7.34283 8.8742 7.30317 8.89403C7.08449 9.00337 6.3778 9.28711 5.74188 9.28711C5.34868 9.28711 4.94685 9.18296 4.64907 9.08183L6.18133 6.78346ZM13.2761 13.889C13.2388 13.9588 13.1263 14.1211 12.8887 14.1211H2.11068C1.87311 14.1211 1.76058 13.9588 1.72323 13.889C1.6859 13.8192 1.61324 13.6356 1.74502 13.4379L4.14704 9.83487C4.51677 9.97723 5.12336 10.166 5.74188 10.166C6.71336 10.166 7.65655 9.70002 7.69621 9.68019C7.91486 9.57085 8.62155 9.28711 9.2575 9.28711C9.85932 9.28711 10.4817 9.53098 10.7188 9.63448L13.2544 13.4379C13.3861 13.6356 13.3135 13.8192 13.2761 13.889Z" fill="#777777"/>
+<path d="M8.81812 10.6055H9.69702V11.4844H8.81812V10.6055Z" fill="#777777"/>
+<path d="M7.0603 12.3633H7.93921V13.2422H7.0603V12.3633Z" fill="#777777"/>
+<path d="M5.30249 11.4844H6.1814V12.3633H5.30249V11.4844Z" fill="#777777"/>
+<path d="M7.0603 7.08984H7.93921V7.96875H7.0603V7.08984Z" fill="#777777"/>
+</svg>
diff --git a/litmus-portal/frontend/src/svg/settings.svg b/litmus-portal/frontend/src/svg/settings.svg
new file mode 100644
index 000000000..13e0ce256
--- /dev/null
+++ b/litmus-portal/frontend/src/svg/settings.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5601 2.04282H9.45206C9.39801 1.91696 9.31973 1.7991 9.2171 1.6965L8.40974 0.88914C8.19977 0.67914 7.92054 0.563477 7.62353 0.563477C7.32655 0.563477 7.04735 0.67914 6.83732 0.889111L6.02996 1.69647C5.92736 1.79907 5.84905 1.91693 5.795 2.04279H0.439892C0.196963 2.04279 0 2.23972 0 2.48265C0 2.72558 0.196963 2.92257 0.439892 2.92257H5.79506C5.84911 3.04843 5.92739 3.16629 6.03002 3.26889L6.83738 4.07625C7.04738 4.28625 7.32661 4.40189 7.62359 4.40189C7.9206 4.40189 8.1998 4.28622 8.4098 4.07625L9.21716 3.26889C9.31976 3.16629 9.39807 3.04843 9.45212 2.92257H14.5601C14.8031 2.92257 15 2.72561 15 2.48268C15 2.23975 14.8031 2.04282 14.5601 2.04282ZM8.59507 2.64686L7.78771 3.45422C7.74388 3.49805 7.68561 3.52219 7.62359 3.52219C7.56157 3.52219 7.5033 3.49805 7.45947 3.45422L6.65211 2.64686C6.56161 2.55633 6.56161 2.40909 6.65211 2.31859L7.45947 1.51126C7.5033 1.46743 7.56157 1.44329 7.62359 1.44329C7.68561 1.44329 7.74388 1.46743 7.78771 1.51126L8.59507 2.31862C8.68557 2.40912 8.68557 2.55636 8.59507 2.64686Z" fill="#777777"/>
+<path d="M14.5601 6.11881H5.97974C5.92473 5.99113 5.84542 5.87374 5.74414 5.77249L4.93681 4.96513C4.72681 4.75513 4.44758 4.6395 4.1506 4.6395C3.85359 4.6395 3.57439 4.75516 3.36439 4.96513L2.55703 5.77249C2.45443 5.87509 2.37612 5.99295 2.32207 6.11881H0.439892C0.196963 6.11881 0 6.31574 0 6.55867C0 6.8016 0.196963 6.99856 0.439892 6.99856H2.32212C2.37618 7.12442 2.45446 7.24228 2.55708 7.34488L3.36445 8.15224C3.57442 8.36224 3.85364 8.47791 4.15066 8.47791C4.44764 8.47791 4.72684 8.36224 4.93687 8.15224L5.7442 7.34491C5.84545 7.24366 5.92478 7.12627 5.9798 6.99859H14.5601C14.8031 6.99859 15 6.80163 15 6.5587C15 6.31577 14.803 6.11881 14.5601 6.11881ZM5.12208 6.72282L4.31475 7.53015C4.27092 7.57398 4.21265 7.59812 4.15063 7.59812C4.08861 7.59812 4.03033 7.57398 3.98651 7.53015L3.17914 6.72279C3.08865 6.63229 3.08865 6.48505 3.17914 6.39455L3.98651 5.58719C4.03033 5.54336 4.08861 5.51922 4.15063 5.51922C4.21265 5.51922 4.27092 5.54336 4.31475 5.58719L5.12208 6.39455C5.16591 6.43838 5.19005 6.49665 5.19005 6.55864C5.19005 6.62066 5.16591 6.67896 5.12208 6.72282Z" fill="#777777"/>
+<path d="M14.5601 10.0778H12.3846C12.3305 9.95196 12.2523 9.8341 12.1496 9.73151L11.3423 8.92414C11.1323 8.71414 10.8531 8.59848 10.5561 8.59848C10.2591 8.59848 9.97987 8.71414 9.76985 8.92411L8.96248 9.73148C8.85989 9.83407 8.78158 9.95193 8.72752 10.0778H0.439892C0.196963 10.0778 0 10.2748 0 10.5177C0 10.7606 0.196963 10.9576 0.439892 10.9576H8.72761C8.78166 11.0834 8.85994 11.2013 8.96257 11.3039L9.76993 12.1113C9.97993 12.3213 10.2592 12.4369 10.5561 12.4369C10.8532 12.4369 11.1324 12.3212 11.3424 12.1113L12.1497 11.3039C12.2523 11.2013 12.3306 11.0834 12.3847 10.9576H14.5602C14.8031 10.9576 15.0001 10.7606 15.0001 10.5177C15 10.2748 14.803 10.0778 14.5601 10.0778ZM11.5276 10.6818L10.7202 11.4892C10.6764 11.533 10.6181 11.5572 10.5561 11.5572C10.4941 11.5572 10.4358 11.533 10.392 11.4892L9.58463 10.6818C9.49413 10.5913 9.49413 10.4441 9.58463 10.3536L10.392 9.54626C10.4358 9.50243 10.4941 9.47829 10.5561 9.47829C10.6181 9.47829 10.6764 9.50243 10.7202 9.54626L11.5276 10.3536C11.6181 10.4441 11.6181 10.5913 11.5276 10.6818Z" fill="#777777"/>
+</svg>
diff --git a/litmus-portal/frontend/src/svg/target.svg b/litmus-portal/frontend/src/svg/target.svg
new file mode 100644
index 000000000..6c117064b
--- /dev/null
+++ b/litmus-portal/frontend/src/svg/target.svg
@@ -0,0 +1,11 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M14.1775 2.15706C13.65 1.62922 12.9344 1.33276 12.1882 1.33302C11.4423 1.33126 10.7266 1.62762 10.2003 2.15615L6.56882 5.78765C5.85032 6.50729 5.57564 7.55841 5.85026 8.53755C5.93066 8.8226 6.22693 8.9885 6.51198 8.9081C6.79703 8.82769 6.96293 8.53142 6.88253 8.24637C6.71323 7.64086 6.88309 6.99111 7.32707 6.54593L10.9585 2.91496C11.6375 2.23586 12.7384 2.23574 13.4175 2.91471C14.0966 3.59366 14.0967 4.69458 13.4178 5.37368L9.78632 9.00515C9.54834 9.24345 9.2461 9.40725 8.91653 9.47653C8.62658 9.53689 8.44047 9.82087 8.50083 10.1108C8.55274 10.3602 8.77284 10.5386 9.02751 10.5378C9.06499 10.5378 9.10238 10.5338 9.13905 10.526C9.67167 10.4137 10.16 10.1487 10.5446 9.76344L14.1761 6.1325C15.2742 5.03509 15.2749 3.25525 14.1775 2.15706Z" fill="#777777"/>
+<path d="M9.13415 6.47721C9.05374 6.19216 8.75747 6.02625 8.47242 6.10666C8.18737 6.18707 8.02147 6.48333 8.10188 6.76838C8.27117 7.3739 8.10131 8.02365 7.65733 8.46882L4.02583 12.1003C3.34689 12.7794 2.24596 12.7796 1.56686 12.1006C0.887759 11.4216 0.887633 10.3207 1.56658 9.64161L5.19808 6.00957C5.43569 5.77134 5.73758 5.60754 6.06681 5.53819C6.35723 5.48009 6.54557 5.19759 6.48747 4.9072C6.42937 4.61681 6.14687 4.42844 5.85647 4.48653C5.85292 4.48726 5.84941 4.48798 5.84589 4.48876C5.31318 4.60122 4.82464 4.86616 4.43983 5.25132L0.808327 8.88282C-0.281225 9.98918 -0.267588 11.7693 0.838774 12.8589C1.93307 13.9365 3.68963 13.9366 4.78408 12.8591L8.41555 9.22707C9.13409 8.50744 9.40877 7.45631 9.13415 6.47721Z" fill="#777777"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="15" height="15" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/litmus-portal/frontend/src/svg/workflows.svg b/litmus-portal/frontend/src/svg/workflows.svg
new file mode 100644
index 000000000..8fd2e61ff
--- /dev/null
+++ b/litmus-portal/frontend/src/svg/workflows.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2.5C5 3.88071 3.88071 5 2.5 5C1.11929 5 0 3.88071 0 2.5C0 1.11929 1.11929 0 2.5 0C3.88071 0 5 1.11929 5 2.5Z" fill="#777777"/>
+<path d="M15 12.5C15 13.8807 13.8807 15 12.5 15C11.1193 15 10 13.8807 10 12.5C10 11.1193 11.1193 10 12.5 10C13.8807 10 15 11.1193 15 12.5Z" fill="#777777"/>
+<path d="M0 10H5V15H0V10Z" fill="#777777"/>
+<path d="M10 3L12.8284 0.171573L15.6569 3L12.8284 5.82843L10 3Z" fill="#777777"/>
+</svg>
diff --git a/litmus-portal/frontend/src/theme/index.tsx b/litmus-portal/frontend/src/theme/index.tsx
index 41c3c9cdc..0c9976b88 100644
--- a/litmus-portal/frontend/src/theme/index.tsx
+++ b/litmus-portal/frontend/src/theme/index.tsx
@@ -150,6 +150,7 @@ const theme = customTheme({
       },
       mark: {
         marginLeft: -6.8,
+        paddingTop: 1.8,
         backgroundImage: `url(${'./icons/arrow.svg'})`,
         backgroundColor: 'none',
         '&[data-index="9"]': {
@@ -164,7 +165,7 @@ const theme = customTheme({
         fontFamily: 'Ubuntu',
         fontSize: 15,
         marginTop: -5,
-        marginLeft: -45,
+        marginLeft: '-5%',
         color: 'rgba(0, 0, 0, 0.4)',
       },
       markLabelActive: {
@@ -173,6 +174,13 @@ const theme = customTheme({
         color: '#FFFFFF',
       },
     },
+    MuiTab: {
+      root: {
+        '&$selected': {
+          color: '#5B44BA',
+        },
+      },
+    },
     MuiFormLabel: {
       root: {
         paddingLeft: 20,
diff --git a/litmus-portal/frontend/src/utils/validate.ts b/litmus-portal/frontend/src/utils/validate.ts
index c071dea07..4e36a5ac5 100644
--- a/litmus-portal/frontend/src/utils/validate.ts
+++ b/litmus-portal/frontend/src/utils/validate.ts
@@ -19,6 +19,15 @@ export const validateEmail = (value: string) => {
   return false;
 };
 
+export const validateWorkflowName = (value: string) => {
+  const workflowValid = /^[a-z0-9._-]+$/g;
+  if (value.length > 0) {
+    if (value.match(workflowValid)) return false;
+    return true;
+  }
+  return false;
+};
+
 export const validatePassword = (value: string) => {
   const passValid = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
   if (value.length > 0) {
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
index 96adb6c95..a0fad51fa 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
 
   // Table and Table Data Properties
   tableMain: {
-    marginTop: theme.spacing(6.25),
+    marginTop: theme.spacing(4.25),
     border: `1px solid ${theme.palette.customColors.black(0.07)}`,
     backgroundColor: theme.palette.common.white,
     height: '29.219rem',
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx
index cb0d908b2..49f76575a 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
 import { Typography } from '@material-ui/core';
+import React, { useEffect } from 'react';
 import useStyles from './styles';
 
 interface StatusProps {
@@ -17,7 +17,8 @@ const CustomStatus: React.FC<StatusProps> = ({ status }) => {
       return setLabel(classes.running);
     }
     return setLabel(classes.failed);
-  }, [status, classes.failed, classes.completed, classes.running]);
+  }, [status]);
+
   return (
     <>
       <div className={label}>
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx
index ea6fa715e..e66191c8f 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import ButtonFilled from '../../../components/Button/ButtonFilled';
 import ButtonOutline from '../../../components/Button/ButtonOutline';
+import InputField from '../../../components/InputField';
 import PredifinedWorkflows from '../../../components/PredifinedWorkflows';
 import workflowsList from '../../../components/PredifinedWorkflows/data';
 import Unimodal from '../../../containers/layouts/Unimodal';
@@ -11,6 +12,7 @@ import useActions from '../../../redux/actions';
 import * as TemplateSelectionActions from '../../../redux/actions/template';
 import * as WorkflowActions from '../../../redux/actions/workflow';
 import { RootState } from '../../../redux/reducers';
+import { validateWorkflowName } from '../../../utils/validate';
 import useStyles, { CssTextField } from './styles';
 
 // import { getWkfRunCount } from "../../utils";
@@ -28,6 +30,7 @@ const ChooseWorkflow: React.FC = () => {
   );
 
   const [open, setOpen] = React.useState(false);
+  const isSuccess = React.useRef<boolean>(false);
   const [workflowDetails, setWorkflowData] = useState({
     workflowName: 'Personal Workflow Name',
     workflowDesc: 'Personal Description',
@@ -52,11 +55,13 @@ const ChooseWorkflow: React.FC = () => {
   };
 
   const handleSave = () => {
-    workflow.setWorkflowDetails({
-      name: workflowDetails.workflowName,
-      description: workflowDetails.workflowDesc,
-    });
-    setOpen(false);
+    if (isSuccess.current) {
+      workflow.setWorkflowDetails({
+        name: workflowDetails.workflowName,
+        description: workflowDetails.workflowDesc,
+      });
+      setOpen(false);
+    }
   };
 
   /*
@@ -65,6 +70,10 @@ const ChooseWorkflow: React.FC = () => {
 	);
   */
 
+  if (validateWorkflowName(workflowDetails.workflowName) === false)
+    isSuccess.current = true;
+  else isSuccess.current = false;
+
   useEffect(() => {
     workflow.setWorkflowDetails({
       name: 'Personal Workflow Name',
@@ -80,9 +89,11 @@ const ChooseWorkflow: React.FC = () => {
   // Sets workflow details based on user clicks
   const selectWorkflow = (index: number) => {
     template.selectTemplate({ selectedTemplateID: index, isDisable: false });
+
     const timeStampBasedWorkflowName: string = `argowf-chaos-${
       workflowsList[index].title
     }-${Math.round(new Date().getTime() / 1000)}`;
+
     workflow.setWorkflowDetails({
       name: timeStampBasedWorkflowName,
       link: workflowsList[index].chaosWkfCRDLink,
@@ -177,23 +188,26 @@ const ChooseWorkflow: React.FC = () => {
         </Typography>
         <div className={classes.modalContainerBody}>
           <div className={classes.inputDiv}>
-            <div className={classes.inputArea}>
-              <CssTextField
-                id="filled-workflowname-input"
-                label="Workflow name"
-                InputProps={{
-                  disableUnderline: true,
-                  classes: {
-                    input: classes.resizeName,
-                  },
-                }}
-                data-cy="inputWorkflow"
-                className={classes.textfieldworkflowname}
-                onChange={WorkflowNameChangeHandler}
-                value={workflowDetails.workflowName}
-                autoFocus
-              />
-            </div>
+            <InputField
+              // id="filled-workflowname-input"
+              label="Workflow name"
+              styles={{
+                width: '100%',
+              }}
+              data-cy="inputWorkflow"
+              helperText={
+                validateWorkflowName(workflowDetails.workflowName)
+                  ? 'Should not contain spaces or upper case letters'
+                  : ''
+              }
+              success={isSuccess.current}
+              validationError={validateWorkflowName(
+                workflowDetails.workflowName
+              )}
+              // className={classes.textfieldworkflowname}
+              handleChange={WorkflowNameChangeHandler}
+              value={workflowDetails.workflowName}
+            />
             <div className={classes.inputAreaDescription}>
               <CssTextField
                 id="filled-workflowdescription-input"
@@ -225,7 +239,7 @@ const ChooseWorkflow: React.FC = () => {
             <div className={classes.saveButton}>
               <ButtonFilled
                 isPrimary={false}
-                isDisabled={false}
+                isDisabled={!isSuccess.current}
                 handleClick={() => handleSave()}
               >
                 <div>Save</div>
diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
index c5d815a39..2944b53a3 100644
--- a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
+++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
@@ -2,8 +2,6 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   container: {
-    marginLeft: theme.spacing(7.5),
-    maxWidth: '63.75rem',
     marginTop: theme.spacing(3.75),
     border: '1px solid ',
     borderColor: theme.palette.customColors.black(0.07),
diff --git a/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx
index d5bc3a2c2..5cd504a06 100644
--- a/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx
@@ -180,7 +180,7 @@ const Invite: React.FC<InviteProps> = ({ handleModal }) => {
                 <div className={classes.body}>
                   <img src="./icons/checkmark.svg" alt="checkmark" />
                   <div className={classes.text}>
-                    <Typography className={classes.typo} align="center">
+                    <Typography className={classes.typo}>
                       Invitation <strong>sent successfully</strong>
                     </Typography>
                   </div>
@@ -238,7 +238,7 @@ const Invite: React.FC<InviteProps> = ({ handleModal }) => {
               <div className={classes.InviteBtn}>
                 <ButtonFilled
                   isPrimary
-                  isDisabled={false}
+                  isDisabled={!selected.length}
                   handleClick={() => {
                     setShowsuccess(true);
                     selected.map(
diff --git a/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/styles.ts
index 03eb979e0..f0bc37211 100644
--- a/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/styles.ts
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/styles.ts
@@ -64,10 +64,8 @@ const useStyles = makeStyles((theme) => ({
   },
 
   text: {
-    width: '23.5rem',
-    height: '5.875rem',
     marginTop: theme.spacing(3.75),
-    marginBottom: theme.spacing(3.75),
+    marginBottom: theme.spacing(2),
   },
   typo: {
     fontSize: '2.25rem',
diff --git a/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/styles.ts
index ee8ad762b..e58b7f9a2 100644
--- a/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/styles.ts
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/styles.ts
@@ -4,7 +4,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   body: {
     display: 'flex',
     flexDirection: 'column',
-    maxWidth: '63.75rem',
     minWidth: '39.0625rem',
     alignItems: 'center',
   },
diff --git a/litmus-portal/frontend/src/views/Settings/TeammingTab/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/styles.ts
index b220ba0fa..c1255d68a 100644
--- a/litmus-portal/frontend/src/views/Settings/TeammingTab/styles.ts
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/styles.ts
@@ -34,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   toolbar: {
     height: '6.125rem',
     border: `1px solid ${theme.palette.customColors.black(0.05)}`,
+    backgroundColor: theme.palette.common.white,
     marginBottom: theme.spacing(1.25),
     display: 'flex',
     justifyContent: 'space-between',
diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
index 1d1553dde..c051237c5 100644
--- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
@@ -144,9 +144,6 @@ const UserManagement: React.FC = () => {
             // for displaying user table
             <div>
               <div className={classes.UMDiv}>
-                <Typography className={classes.headerText}>
-                  <strong>User Management</strong>
-                </Typography>
                 <div className={classes.members}>
                   <img src="./icons/user.svg" alt="members" />
                   <Typography className={classes.memTypo}>
diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/styles.ts
index 27e7802f9..9ebd23d52 100644
--- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/styles.ts
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/styles.ts
@@ -3,7 +3,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 const useStyles = makeStyles((theme: Theme) => ({
   UMDiv: {
     marginTop: theme.spacing(3.75),
-    marginLeft: theme.spacing(7.5),
+    marginLeft: theme.spacing(1),
   },
   headerText: {
     fontSize: '1.5625rem',
@@ -53,6 +53,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     height: '6.125rem',
     border: `1px solid ${theme.palette.customColors.black(0.05)}`,
     marginBottom: theme.spacing(1.25),
+    backgroundColor: theme.palette.common.white,
     display: 'flex',
     justifyContent: 'space-between',
   },