ui(MButton): updated props

2025-12-10 12:27:45 +00:00 · 2023-07-12 17:54:07 +05:30
parent ab5df928a0
commit 0515d8acab
18 changed files with 191 additions and 152 deletions
--- a/platform/firecamp-platform/src/components/common/GlobalCreate.tsx
+++ b/platform/firecamp-platform/src/components/common/GlobalCreate.tsx
@@ -124,8 +124,8 @@ const GlobalCreateDD = ({}) => {
          <Button
            text={'Create'}
            rightIcon={<VscTriangleDown size={12} className={classnames({'transform rotate-180': isOpen})}/>}
-            withoutBorder
            transparent
+            primary
            compact
            xs
          />
--- a/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx
@@ -71,7 +71,6 @@ const EnvironmentDD: FC<IEnvironmentDD> = ({ onChange = () => {} }) => {
              className={cx({ 'transform rotate-180': isOpen })}
            />
          }
-          withoutBorder
          transparent
          compact
          xs
--- a/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx
@@ -225,11 +225,11 @@ const Globals = () => {
      { id: env.__ref.id, type: ETabEntityTypes.Environment }
    );
  };
-  //TODO: fix height for tree item
+
  return (
    <div className="rct-tree-item-li focus:rct-tree-item-li-focused border-b border-app-border">
      <div className="px-2 mt-5 mb-1 rct-tree-item-title-container focus:rct-tree-item-title-container-focused hover:rct-tree-item-title-container-focused !opacity-100 cursor-pointer">
-        <VscJson className="flex-none" size={18} opacity={1} />
+        <VscJson className="flex-none my-0.5" size={18} opacity={1} />
        <span className="w-full overflow-hidden text-ellipsis items-center block pl-1 text-base">
          {globalEnv?.name}
        </span>
@@ -240,8 +240,8 @@ const Globals = () => {
            classNames={{
              root: 'hover:!bg-focusColor !text-app-foreground-inactive'
            }}
-            compact
            ghost
+            compact
            xs
          />
        </div>
--- a/platform/firecamp-platform/src/components/common/environment/sidebar/tree/itemRenderer.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/sidebar/tree/itemRenderer.tsx
@@ -194,11 +194,13 @@ export default {
                console.log(1234)
              }}/> */}

-            {/* //TODO: find & check usage */}
-            {item.data.__ref.isEnvironment ? (
+            {/* TODO: check preview */}
+            { item.data.__ref.isEnvironment ? (
              <Button
                text={'Clone'}
-                className="hover:!bg-focus2 ml-1 !text-app-foreground-inactive !py-0"
+                classNames={{
+                  root:'hover:!bg-focus2 ml-1 !text-app-foreground-inactive !py-0'
+                }}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
@@ -210,10 +212,8 @@ export default {
                        item.data.__ref.id
                      );
                }}
-                transparent
-                secondary
                ghost
-                sm
+                xs
              />
            ) : (
              <></>
--- a/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx
@@ -178,8 +178,8 @@ const EnvironmentTab = ({ tab, platformContext: context }) => {
              <VscEdit size={12} onClick={rename} className="pointer" />
            </TabHeader.Left>
            <TabHeader.Right>
-              {/* <Button text="Save" primary sm /> */}
-              {/* <Button text="Delete" secondary sm disabled={false} /> */}
+              {/* <Button text="Save" primary xs /> */}
+              {/* <Button text="Delete" secondary xs disabled={false} /> */}
            </TabHeader.Right>
          </TabHeader>
        </Container.Header>
--- a/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx
+++ b/platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx
@@ -83,9 +83,9 @@ const ForgotPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
            <Button
              text={isRequesting ? `Sending...` : `Send`}
              onClick={handleSubmit(_onSubmit)}
-              fullWidth={true}
+              fullWidth
              primary
-              md
+              sm
            />
          </form>
        </div>
--- a/platform/firecamp-platform/src/components/modals/auth/GithubGoogleAuth.tsx
+++ b/platform/firecamp-platform/src/components/modals/auth/GithubGoogleAuth.tsx
@@ -105,20 +105,21 @@ const GithubGoogleAuth: FC<IGithubGoogleAuth> = ({ onClose }) => {
    <div className="">
      {/* <Button
        text="Continue with Google"
-        icon={<GrGoogle size={18} />}
-        className="!w-full mb-5"
+        leftIcon={<GrGoogle size={18} />}
+        className="mb-5"
        onClick={_googleOAuth}
+        fullWidth
        transparent
-        iconLeft
-        md
+        sm
      /> */}
      <Button
        text="Continue with Github"
-        icon={<VscGithub size={18} />}
-        className="!w-full mb-5"
+        leftIcon={<VscGithub size={18} />}
+        classNames={{ root: 'mb-5' }}
        onClick={_githubOAuth}
-        iconLeft
-        md
+        outline
+        fullWidth
+        sm
      />
      {/* <a
        href="#"
--- a/platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx
+++ b/platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx
@@ -136,12 +136,12 @@ const Body: FC<any> = ({ onClose = () => {} }) => {
            />
          </div>

+          {/* TODO: check preview */}
          <Button
-            color="primary"
            text="Sign in"
-            fullWidth={true}
-            size="md"
            onClick={handleSubmit(_onSubmit)}
+            fullWidth
+            sm
          />
        </form>
      </div>
--- a/platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx
+++ b/platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx
@@ -129,12 +129,13 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
                  : ''
              }
            />
+            {/* TODO: check preview */}
            <Button
              text={isRequesting ? `Resetting password...` : 'Reset Password'}
              onClick={handleSubmit(_onSubmit)}
-              fullWidth={true}
+              fullWidth
              primary
-              md
+              sm
            />
          </form>
        </div>
--- a/platform/firecamp-platform/src/components/modals/auth/SignIn.tsx
+++ b/platform/firecamp-platform/src/components/modals/auth/SignIn.tsx
@@ -24,12 +24,12 @@ const SignIn: FC<IModal> = () => {
          <GithubGoogleAuth />
          <Button
            text="Continue with Email"
-            icon={<VscAccount size={18} />}
-            className="!w-full mb-5"
+            leftIcon={<VscAccount size={18} />}
+            className="mb-5"
            onClick={() => platformContext.app.modals.openSignInWithEmail()}
-            transparent
-            iconLeft
-            md
+            outline
+            fullWidth
+            sm
          />
        </div>
        {/* <div className="mb-8 mt-8 flex justify-center items-center">
--- a/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx
+++ b/platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx
@@ -154,11 +154,12 @@ const SignInWithEmail: FC<IModal> = () => {
              </a>
            </div>
            <Button
+              type="submit"
              text={isRequesting ? `Singing...` : `Sign in`}
              onClick={handleSubmit(_onSignIn)}
-              fullWidth={true}
+              fullWidth
              primary
-              md
+              sm
            />
          </form>
        </div>
--- a/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx
+++ b/platform/firecamp-platform/src/components/modals/auth/SignUp.tsx
@@ -164,11 +164,12 @@ const SignUp: FC<IModal> = () => {
            />

            <Button
+              type="submit"
              text={isRequesting ? 'Signing up...' : 'Sign up'}
              onClick={handleSubmit(_onSignUp)}
-              fullWidth={true}
+              fullWidth
              primary
-              md
+              sm
            />
          </form>
        </div>
--- a/platform/firecamp-platform/src/containers/App.tsx
+++ b/platform/firecamp-platform/src/containers/App.tsx
@@ -8,7 +8,12 @@ import '../sass/_index.sass';

 import { FC, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Row, RootContainer, EditorApi, FirecampThemeProvider } from '@firecamp/ui';
+import {
+  Row,
+  RootContainer,
+  EditorApi,
+  FirecampThemeProvider,
+} from '@firecamp/ui';
 import { EFirecampAgent } from '@firecamp/types';
 import { _misc } from '@firecamp/utils';

@@ -23,6 +28,7 @@ import ErrorPopup from '../components/common/error-boundary/ErrorPopup';
 import RealtimeEventManager from '../components/common/realtime/Realtime';
 import platformContext from '../services/platform-context';
 import { EFirecampThemeVariant } from '@firecamp/ui/src/components/theme/FirecampThemeProvider.interfaces';
+import FirecampThemeSelector from '@firecamp/ui/src/components/theme/FirecampThemeSelector';

 // Initialise Firecamp languages settings
 EditorApi.init();
@@ -45,7 +51,7 @@ const App: FC<any> = () => {
      else alert('I am unmounting');
    };
  }, []);
-  const [theme, updateTheme] = useState(EFirecampThemeVariant.LightSecondary);
+  const [theme, updateTheme] = useState(EFirecampThemeVariant.LightPrimary);

  return (
    <ErrorBoundary
@@ -55,21 +61,26 @@ const App: FC<any> = () => {
      }}
    >
      <FirecampThemeProvider themeVariant={theme}>
-      <RootContainer
-        flex={1}
-        overflow="auto"
-        className="h-screen w-screen bg-app-background text-app-foreground"
-      >
-        <Row flex={1}>
-          <SidebarContainer />
-          <TabsContainer />
-        </Row>
+        <RootContainer
+          flex={1}
+          overflow="auto"
+          className="h-screen w-screen bg-app-background text-app-foreground"
+        >
+          <Row flex={1}>
+            <SidebarContainer />
+            <TabsContainer />
+          </Row>
+          <FirecampThemeSelector
+            theme={theme}
+            updateCurrentTheme={updateTheme}
+          />

-        <RealtimeEventManager />
-        <ModalContainer />
-        <EnvSidebarContainer />
-        <StatusBarContainer className="border-t focus-outer2" />
-      </RootContainer>
+          <RealtimeEventManager />
+          <ModalContainer />
+          <EnvSidebarContainer />
+
+          <StatusBarContainer className="border-t focus-outer2" />
+        </RootContainer>
      </FirecampThemeProvider>
      <Crisp />
      <Analytics />
--- a/platform/firecamp-ui/src/components/buttons/MButton.interfaces.ts
+++ b/platform/firecamp-ui/src/components/buttons/MButton.interfaces.ts
@@ -4,9 +4,6 @@ export interface IButton extends ButtonProps {
  /** button text to show */
  text?: string;

-  /** text uppercase*/
-  uppercase?: boolean;
-
  /** primary button */
  primary?: boolean;
  /** ghost button */
@@ -17,8 +14,7 @@ export interface IButton extends ButtonProps {
  danger?: boolean;
  /**  transparent button */
  transparent?: boolean;
-  /** to create a transparent button without border & background transparent on hover */
-  withoutBorder?: boolean;
+  outline?: boolean;

  /** extra small size */
  xs?: boolean;
--- a/platform/firecamp-ui/src/components/buttons/MButton.stories.tsx
+++ b/platform/firecamp-ui/src/components/buttons/MButton.stories.tsx
@@ -41,7 +41,7 @@ const TemplateWithVariant = ({ variant }: { variant: btnType[] }) => (
 export const PrimaryButton = Template.bind({});
 PrimaryButton.args = {
  text: 'Primary Button',
-  md: true,
+  sm: true,
  previewBtn: (
    <ButtonStories.PrimaryButton {...ButtonStories.PrimaryButton.args} />
  ),
@@ -51,7 +51,7 @@ export const SecondaryButton = Template.bind({});
 SecondaryButton.args = {
  text: 'Secondary Button',
  secondary: true,
-  md: true,
+  sm: true,
  previewBtn: (
    <ButtonStories.SecondaryButton {...ButtonStories.SecondaryButton.args} />
  ),
@@ -61,7 +61,7 @@ export const DangerButton = Template.bind({});
 DangerButton.args = {
  text: 'Danger Button',
  danger: true,
-  md: true,
+  sm: true,
  previewBtn: (
    <ButtonStories.DangerButton {...ButtonStories.DangerButton.args} />
  ),
@@ -71,7 +71,7 @@ export const FullWidthButton = Template.bind({});
 FullWidthButton.args = {
  text: 'FullWidth Button',
  primary: true,
-  md: true,
+  sm: true,
  fullWidth: true,
  previewBtn: (
    <ButtonStories.FullWidthButton {...ButtonStories.FullWidthButton.args} />
@@ -93,7 +93,7 @@ export const GhostButton = Template.bind({});
 GhostButton.args = {
  text: 'Ghost Button',
  primary: true,
-  md: true,
+  sm: true,
  ghost: true,
  previewBtn: <ButtonStories.GhostButton {...ButtonStories.GhostButton.args} />,
 };
@@ -112,7 +112,7 @@ export const ButtonIcon = Template.bind({});
 ButtonIcon.args = {
  text: 'Sample Button...',
  primary: true,
-  md: true,
+  sm: true,
  leftIcon: <VscMenu title="Account" size={16} className="z-20" />,
  previewBtn: <ButtonStories.ButtonIcon {...ButtonStories.ButtonIcon.args} />,
 };
@@ -121,7 +121,7 @@ export const CaretButton = Template.bind({});
 CaretButton.args = {
  text: 'Button with caret icon',
  primary: true,
-  md: true,
+  sm: true,
  rightIcon: <VscTriangleDown size={12} />,
  previewBtn: <ButtonStories.CaretButton {...ButtonStories.CaretButton.args} />,
 };
@@ -130,7 +130,7 @@ export const ButtonWithToolTip = Template.bind({});
 ButtonWithToolTip.args = {
  text: 'Button with tooltip',
  primary: true,
-  md: true,
+  sm: true,
  title: 'tooltiptext',
  previewBtn: (
    <ButtonStories.ButtonWithToolTip
@@ -143,7 +143,7 @@ export const ButtonWithAdditionalDomProp = Template.bind({});
 ButtonWithAdditionalDomProp.args = {
  text: 'Additional Button Prop',
  primary: true,
-  md: true,
+  sm: true,
  'test-id': 'testing-mantine-btn',
  previewBtn: (
    <ButtonStories.ButtonWithAdditionalDomProp
@@ -156,7 +156,7 @@ export const ButtonWithUpperCaseText = Template.bind({});
 ButtonWithUpperCaseText.args = {
  text: 'Button with uppercase text',
  primary: true,
-  md: true,
+  sm: true,
  uppercase: true,
  previewBtn: (
    <ButtonStories.ButtonWithUpperCaseText
@@ -175,6 +175,8 @@ export const ButtonVariant = () => {
          { text: 'Danger Button', danger: true, md: true },
          { text: 'Ghost Button', ghost: true, md: true },
          { text: 'Transparent Button', transparent: true, md: true },
+          { text: 'Outlined Button', outline: true, primary: true,sm: true },
+          { text: 'Outlined Button', outline: true, sm: true },
        ]}
      />
      <TemplateWithVariant
@@ -194,6 +196,8 @@ export const ButtonVariant = () => {
            md: true,
            disabled: true,
          },
+          { text: 'Outlined Button', outline: true, primary: true, sm: true, disabled: true, },
+          { text: 'Outlined Button', outline: true, sm: true, disabled: true, },
        ]}
      />
    </div>
--- a/platform/firecamp-ui/src/components/buttons/MButton.tsx
+++ b/platform/firecamp-ui/src/components/buttons/MButton.tsx
@@ -3,45 +3,61 @@ import { Button as MantineButton, createStyles } from '@mantine/core';
 import { IButton } from './MButton.interfaces';

 // custom styles for variants
-const useStyles = createStyles((theme) => ({
-  dangerVariant: {
-    color: theme.white,
-    backgroundColor: theme.colors.red[theme.colorScheme === 'light' ? 6 : 8],
-    ':hover': {
-      backgroundColor: theme.colors.red[theme.colorScheme === 'light' ? 7 : 9],
+const useStyles = createStyles((theme, { variant, color }: IButton) => ({
+  root: {
+    display: 'flex',
+    ...(variant === 'outline'
+      ? {
+          color:
+            color === 'primaryColor'
+              ? theme.colors[theme.primaryColor][
+                  theme.colorScheme === 'light' ? 6 : 8
+                ]
+              : theme.colors[color][theme.colorScheme === 'light' ? 6 : 0],
+          borderColor:
+            color === 'primaryColor'
+              ? theme.colors[theme.primaryColor][
+                  theme.colorScheme === 'light' ? 6 : 8
+                ]
+              : theme.colors[color][theme.colorScheme === 'light' ? 6 : 0],
+        }
+      : {}),
+    '&:disabled, &[data-disabled]': {
+      color:
+        variant === 'filled'
+          ? theme.white
+          : color === 'primaryColor'
+          ? theme.colors[theme.primaryColor][
+              theme.colorScheme === 'light' ? 6 : 8
+            ]
+          : theme.colors[color][theme.colorScheme === 'light' ? 6 : 8],
+      backgroundColor:
+        variant === 'filled'
+          ? color === 'primaryColor'
+            ? theme.colors[theme.primaryColor][
+                theme.colorScheme === 'light' ? 6 : 8
+              ]
+            : theme.colors[color][theme.colorScheme === 'light' ? 6 : 8]
+          : 'transparent',
+      ...(variant === 'outline'
+        ? {
+            color:
+              color === 'primaryColor'
+                ? theme.colors[theme.primaryColor][
+                    theme.colorScheme === 'light' ? 6 : 8
+                  ]
+                : theme.colors[color][theme.colorScheme === 'light' ? 6 : 0],
+            borderColor:
+              color === 'primaryColor'
+                ? theme.colors[theme.primaryColor][
+                    theme.colorScheme === 'light' ? 6 : 8
+                  ]
+                : theme.colors[color][theme.colorScheme === 'light' ? 6 : 0],
+          }
+        : {}),
    },
  },
-  dangerButton: {
-    color: theme.white,
-    backgroundColor: theme.colors.red[6],
-  },
-  ghostButton: {
-    color: theme.colors[theme.primaryColor][6],
-    backgroundColor: 'transparent',
-  },
-  primaryButton: {
-    color: theme.white,
-    backgroundColor: theme.colors[theme.primaryColor][6],
-  },
-  secondaryVariant: {
-    backgroundColor: theme.colors.dark[6],
-    color: theme.colors.dark[0],
-    ':hover': {
-      backgroundColor: theme.colors.dark[7],
-    },
-  },
-  secondaryButton: {
-    color: theme.colors.dark[0],
-    backgroundColor: theme.colors.dark[6],
-  },
-  transparentButton: {
-    color: theme.colors[theme.primaryColor][6],
-    backgroundColor: 'transparent',
-    borderColor: theme.colors[theme.primaryColor][6],
-  },
-  withoutBorderVariant: {
-    backgroundColor: 'transparent',
-    borderColor: 'transparent',
+  transparent: {
    ':hover': {
      backgroundColor: 'transparent',
    },
@@ -53,13 +69,11 @@ const useStyles = createStyles((theme) => ({
 // TODO: update tooltip prop usage by providing title={tooltip}
 // TODO: update iconLeft,iconRight,icon prop usage by providing leftIcon={<Icon/> & rightIcon={<Icon/>
 // TODO: update all sizes props [xs, sm, md, lg] according to mantine props - adding compact prop for xs
-// TODO: should keep primary prompt ??
+// TODO: discuss should keep primary prompt ?? currently used with outline prop
 enum EVariant {
-  danger = 'danger', //custom variant
  primary = 'filled',
  ghost = 'subtle',
-  secondary = 'white',
-  transparent = 'outline',
+  outline = 'outline',
 }
 enum ESize {
  xs = 'xs',
@@ -79,7 +93,7 @@ const Button: FC<IButton> = ({
  secondary = false,
  danger = false,
  transparent = false,
-  withoutBorder = false,
+  outline = false,

  xs = false,
  sm = false,
@@ -87,19 +101,13 @@ const Button: FC<IButton> = ({
  lg = false,

  text,
-  uppercase = false,
-
  ...props
 }) => {
-  const { classes, cx } = useStyles();
-
  // default variant if not passed is primary
  const customVariant =
-    (danger && EVariant.primary) ||
-    (ghost && EVariant.ghost) ||
-    (primary && EVariant.primary) ||
-    (secondary && EVariant.secondary) ||
-    (transparent && EVariant.transparent) ||
+    ((danger || secondary) && EVariant.primary) ||
+    ((ghost || transparent) && EVariant.ghost) ||
+    (outline && EVariant.outline) ||
    variant;

  // default size if not passed is sm
@@ -110,42 +118,30 @@ const Button: FC<IButton> = ({
    (lg && ESize.lg) ||
    size;

+  // default size if not passed is sm
+  const customColor = danger
+    ? 'red'
+    : secondary || (outline && !primary)
+    ? 'gray'
+    : 'primaryColor';
+  const { classes, cx } = useStyles({
+    variant: customVariant ?? 'filled',
+    color: customColor,
+  });
+
  return (
    <MantineButton
      size={customSize}
      variant={customVariant}
+      color={customColor}
      classNames={{
        ...classNames,
        root: cx(
-          'flex',
          classNames.root,
-          { [classes.withoutBorderVariant]: withoutBorder },
-          { [classes.dangerVariant]: danger },
-          { [classes.secondaryVariant]: customVariant === EVariant.secondary }
+          classes.root,
+          { [classes.transparent]: transparent },
+          { 'justify-center': props.fullWidth }
        ),
-        label: cx(classNames.label, { uppercase: uppercase }),
-      }}
-      styles={{
-        root: {
-          '&:disabled, &[data-disabled]': cx(
-            {
-              [classes.dangerButton]: danger,
-            },
-            {
-              [classes.ghostButton]: customVariant === EVariant.ghost,
-            },
-            {
-              [classes.primaryButton]: customVariant === EVariant.primary,
-            },
-            {
-              [classes.secondaryButton]: customVariant === EVariant.secondary,
-            },
-            {
-              [classes.transparentButton]:
-                customVariant === EVariant.transparent,
-            }
-          ),
-        },
      }}
      {...props}
    >
@@ -154,3 +150,8 @@ const Button: FC<IButton> = ({
  );
 };
 export default Button;
+
+// possible variants
+// root: '!text-info',
+// root: 'hover:!bg-focusColor !text-app-foreground-inactive'
+// className="hover:!bg-focus2 ml-1 !text-app-foreground-inactive !py-0"
--- a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx
+++ b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx
@@ -9,11 +9,11 @@ import {
 const primaryColor: ColorType = [
  '#EEE8E2',
  '#E1D3C5',
-  '#D6C0A9',
+  '#D6C0A9', // dark mode color index [in ghost variant]
  '#D0AE8D',
  '#CD9F70',
  '#CE9052',
-  '#D48332', // light theme color index
+  '#D48332', // light theme bgcolor index
  '#B87634',
  '#9D6A37', // dark theme color index
  '#875F38',
@@ -22,7 +22,7 @@ const primaryColor: ColorType = [
 const secondaryColor: ColorType = [
  '#B4D1BE',
  '#9CC7A9',
-  '#83BF96',
+  '#83BF96', // dark mode color index [in ghost variant]
  '#6ABB84',
  '#50BA72',
  '#3CB663',
@@ -33,18 +33,31 @@ const secondaryColor: ColorType = [
 ];

 const darkModeColor: ColorType = [
-  '#fff', //text color
+  '#d5d7e0',
  '#acaebf',
  '#8c8fa3',
  '#666980',
  '#4d4f66', // for disabled value
  '#34354a',
-  '#3c3c3c', // same color for both light & dark theme variant //'#2b2c3d'
-  '#2d2c2c', //body background color
+  '#2b2c3d', // same color for both light & dark theme variant 
+  '#1d1e30', //body background color
  '#0c0d21',
  '#01010a',
 ];

+const grayColor: ColorType = [
+  '#CCCCCC',
+  '#616161',
+  '#585858',
+  '#505050',
+  '#494949',
+  '#424242', //outline-dark
+  '#3C3C3C', //outline-light
+  '#363636',
+  '#313131',
+  '#2C2C2C',
+];
+
 const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
  themeVariant,
  children,
@@ -85,6 +98,7 @@ const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
        colors: {
          'primary-color': themeColor,
          dark: darkModeColor,
+          gray: grayColor,
        },
        primaryColor: 'primary-color',
        fontFamily: " 'Lato', 'sans-serif' ",
--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -510,6 +510,16 @@
   margin-left: auto;
   margin-right: auto;

+}
+.my-0{
+   margin-top: 0px;
+   margin-bottom: 0px;
+
+}
+.my-0\.5{
+   margin-top: 0.125rem;
+   margin-bottom: 0.125rem;
+
 }
 .my-1{
   margin-top: 0.25rem;