ui(MButton): updated props

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
           />

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

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>

platform/firecamp-platform/src/components/common/environment/sidebar/tree/itemRenderer.tsx

@@ -194,11 +194,13 @@ export default {
                 console.log(1234)
               }}/> */}
 
-            {/* //TODO: find & check usage */}
+            {/* TODO: check preview */}
-            {item.data.__ref.isEnvironment ? (
+            { 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
               />
             ) : (
               <></>

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="Save" primary xs /> */}
-              {/* <Button text="Delete" secondary sm disabled={false} /> */}
+              {/* <Button text="Delete" secondary xs disabled={false} /> */}
             </TabHeader.Right>
           </TabHeader>
         </Container.Header>

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>

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} />}
+        leftIcon={<GrGoogle size={18} />}
-        className="!w-full mb-5"
+        className="mb-5"
         onClick={_googleOAuth}
+        fullWidth
         transparent
-        iconLeft
+        sm
-        md
       /> */}
       <Button
         text="Continue with Github"
-        icon={<VscGithub size={18} />}
+        leftIcon={<VscGithub size={18} />}
-        className="!w-full mb-5"
+        classNames={{ root: 'mb-5' }}
         onClick={_githubOAuth}
-        iconLeft
+        outline
-        md
+        fullWidth
+        sm
       />
       {/* <a
         href="#"

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>

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>

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} />}
+            leftIcon={<VscAccount size={18} />}
-            className="!w-full mb-5"
+            className="mb-5"
             onClick={() => platformContext.app.modals.openSignInWithEmail()}
-            transparent
+            outline
-            iconLeft
+            fullWidth
-            md
+            sm
           />
         </div>
         {/* <div className="mb-8 mt-8 flex justify-center items-center">

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>

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>

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
+        <RootContainer
-        flex={1}
+          flex={1}
-        overflow="auto"
+          overflow="auto"
-        className="h-screen w-screen bg-app-background text-app-foreground"
+          className="h-screen w-screen bg-app-background text-app-foreground"
-      >
+        >
-        <Row flex={1}>
+          <Row flex={1}>
-          <SidebarContainer />
+            <SidebarContainer />
-          <TabsContainer />
+            <TabsContainer />
-        </Row>
+          </Row>
+          <FirecampThemeSelector
+            theme={theme}
+            updateCurrentTheme={updateTheme}
+          />
 
-        <RealtimeEventManager />
+          <RealtimeEventManager />
-        <ModalContainer />
+          <ModalContainer />
-        <EnvSidebarContainer />
+          <EnvSidebarContainer />
-        <StatusBarContainer className="border-t focus-outer2" />
+
-      </RootContainer>
+          <StatusBarContainer className="border-t focus-outer2" />
+        </RootContainer>
       </FirecampThemeProvider>
       <Crisp />
       <Analytics />

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 */
+  outline?: boolean;
-  withoutBorder?: boolean;
 
   /** extra small size */
   xs?: boolean;

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>

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) => ({
+const useStyles = createStyles((theme, { variant, color }: IButton) => ({
-  dangerVariant: {
+  root: {
-    color: theme.white,
+    display: 'flex',
-    backgroundColor: theme.colors.red[theme.colorScheme === 'light' ? 6 : 8],
+    ...(variant === 'outline'
-    ':hover': {
+      ? {
-      backgroundColor: theme.colors.red[theme.colorScheme === 'light' ? 7 : 9],
+          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: {
+  transparent: {
-    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',
     ':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',
+  outline = 'outline',
-  transparent = '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) ||
+    ((danger || secondary) && EVariant.primary) ||
-    (ghost && EVariant.ghost) ||
+    ((ghost || transparent) && EVariant.ghost) ||
-    (primary && EVariant.primary) ||
+    (outline && EVariant.outline) ||
-    (secondary && EVariant.secondary) ||
-    (transparent && EVariant.transparent) ||
     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.root,
-          { [classes.dangerVariant]: danger },
+          { [classes.transparent]: transparent },
-          { [classes.secondaryVariant]: customVariant === EVariant.secondary }
+          { '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"

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'
+  '#2b2c3d', // same color for both light & dark theme variant 
-  '#2d2c2c', //body background color
+  '#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' ",

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;