From 30979cb84395bde539ad121fde7fd6930ab36700 Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Fri, 25 Aug 2023 17:19:51 +0530
Subject: [PATCH 1/8] ui: design updated for fcagentselector & input field
 focus

---
 .../status-bar/items/FcAgentSelector.tsx      | 29 ++++++++++++-------
 .../src/components/checkbox/Checkbox.tsx      | 21 ++++++++++++--
 platform/firecamp-ui/src/scss/base.scss       |  8 ++---
 platform/firecamp-ui/src/scss/tailwind.scss   | 11 ++++---
 4 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/platform/firecamp-platform/src/components/status-bar/items/FcAgentSelector.tsx b/platform/firecamp-platform/src/components/status-bar/items/FcAgentSelector.tsx
index 47492a066..a5dfaca4e 100644
--- a/platform/firecamp-platform/src/components/status-bar/items/FcAgentSelector.tsx
+++ b/platform/firecamp-platform/src/components/status-bar/items/FcAgentSelector.tsx
@@ -39,6 +39,7 @@ const FcAgentSelector: FC<any> = () => {
 
   return (
     <Popover
+      className="border border-app-border"
       content={
         <div className="p-6 w-96">
           <div className="text-base text-app-foreground mb-4">
@@ -64,6 +65,13 @@ const FcAgentSelector: FC<any> = () => {
             onSelect={() => _onSelectAgent(EFirecampAgent.Cloud)}
           />
 
+          <AgentItem
+            name={agentNamesMap[EFirecampAgent.Web]}
+            isSelected={agent == EFirecampAgent.Web}
+            description={`Sending your requests through your browser comes with <a href="#">limitations</a>`}
+            onSelect={() => _onSelectAgent(EFirecampAgent.Web)}
+          />
+
           <AgentItem
             name={`${agentNamesMap[EFirecampAgent.Extension]} (Coming Soon...)`}
             className={`mb-2`}
@@ -84,19 +92,12 @@ const FcAgentSelector: FC<any> = () => {
                 ) : <></>
             } */}
           </AgentItem>
-
-          <AgentItem
-            name={agentNamesMap[EFirecampAgent.Web]}
-            isSelected={agent == EFirecampAgent.Web}
-            description={`Sending your requests through your browser comes with <a href="#">limitations</a>`}
-            onSelect={() => _onSelectAgent(EFirecampAgent.Web)}
-          />
         </div>
       }
     >
       <Popover.Handler>
         <div
-          className="flex items-center"
+          className="flex items-center w-28	"
           onClick={() => checkExtAgentInstalled()}
         >
           <Info size={14} className="mr-1 text-primaryColor" />
@@ -120,10 +121,18 @@ const AgentItem: FC<IAgentItem> = ({
 }) => {
   return (
     <div
-      className={cx(className, 'text-base text-app-foreground flex items-start')}
+      className={cx(
+        className,
+        'text-base text-app-foreground flex items-start'
+      )}
     >
       <div className="pt-half" onClick={onSelect}>
-        <Checkbox checked={isSelected} id={name} disabled={disabled} classNames={{root: 'mr-2'}}/>
+        <Checkbox
+          checked={isSelected}
+          id={name}
+          disabled={disabled}
+          classNames={{ root: 'mr-2' }}
+        />
       </div>
       <div className="font-semibold ml-2">
         <label className="cursor-pointer" htmlFor={name}>
diff --git a/platform/firecamp-ui/src/components/checkbox/Checkbox.tsx b/platform/firecamp-ui/src/components/checkbox/Checkbox.tsx
index 5d46acda7..3589926ba 100644
--- a/platform/firecamp-ui/src/components/checkbox/Checkbox.tsx
+++ b/platform/firecamp-ui/src/components/checkbox/Checkbox.tsx
@@ -24,7 +24,7 @@ export interface ICheckbox extends CheckboxProps {
 }
 
 const useStyles = createStyles(
-  (theme, { primary, labelPosition }: Partial<ICheckbox>) => ({
+  (theme, { primary, checked, labelPosition }: Partial<ICheckbox>) => ({
     disabled: {
       opacity: '50% !important',
       '&:checked': {
@@ -43,6 +43,23 @@ const useStyles = createStyles(
           ? theme.colors.gray[4]
           : theme.colors.dark[5],
       backgroundColor: 'transparent !important',
+      '&:focus': {
+        ...(checked && primary
+          ? {
+              borderColor: `${
+                theme.colors[theme.primaryColor][
+                  theme.colorScheme === 'dark' ? 8 : 6
+                ]
+              } !important`,
+            }
+          : {
+              borderColor: `${
+                theme.colorScheme === 'dark'
+                  ? theme.colors.gray[4]
+                  : theme.colors.dark[5]
+              } !important`,
+            }),
+      },
     },
     icon: {
       ...(primary
@@ -90,7 +107,7 @@ const Checkbox: FC<ICheckbox> = ({
   labelPosition,
   ...props
 }) => {
-  const { classes, cx, theme } = useStyles({ primary, labelPosition });
+  const { classes, cx, theme } = useStyles({ primary, checked, labelPosition });
   const customColor = primary
     ? 'primaryColor'
     : theme.colorScheme === 'dark'
diff --git a/platform/firecamp-ui/src/scss/base.scss b/platform/firecamp-ui/src/scss/base.scss
index 82edc226d..585c70311 100644
--- a/platform/firecamp-ui/src/scss/base.scss
+++ b/platform/firecamp-ui/src/scss/base.scss
@@ -74,7 +74,7 @@
     --popover-background: var(--mantine-color-dark-5); /* .2 */
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
-    --popover-shadow: var(--mantine-color-dark-9) 0px 0px 8px 2px;
+    --popover-shadow: var(--mantine-color-dark-9) 0px 8px 6px -6px;
 
     --focus-border: var(--mantine-color-blue-8);
 
@@ -157,7 +157,7 @@
     --popover-background: var(--mantine-color-white);
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
-    --popover-shadow: var(--mantine-color-dark-9) 0px 0px 8px 2px;
+    --popover-shadow: var(--mantine-color-dark-9) 0px 8px 6px -6px;
 
     --focus-border: var(--mantine-color-blue-8);
 
@@ -248,8 +248,8 @@ hr {
   color: var(--input-placeholder) !important;
   opacity: 1;
 }
-input:not([type="checkbox"]):focus,
-input:not([type="checkbox"]):focus-visible textarea:focus,
+input:focus,
+input:focus-visible textarea:focus,
 textarea:focus-visible {
   box-shadow: none !important;
   border: 1px solid var(--focus-border) !important;
diff --git a/platform/firecamp-ui/src/scss/tailwind.scss b/platform/firecamp-ui/src/scss/tailwind.scss
index bad6abb6a..9a461c0a7 100644
--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -62,7 +62,7 @@
     --popover-background: var(--mantine-color-dark-5); /* .2 */
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
-    --popover-shadow: var(--mantine-color-dark-9) 0px 0px 8px 2px;
+    --popover-shadow: var(--mantine-color-dark-9) 0px 8px 6px -6px;
 
     --focus-border: var(--mantine-color-blue-8);
 
@@ -145,7 +145,7 @@
     --popover-background: var(--mantine-color-white);
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
-    --popover-shadow: var(--mantine-color-dark-9) 0px 0px 8px 2px;
+    --popover-shadow: var(--mantine-color-dark-9) 0px 8px 6px -6px;
 
     --focus-border: var(--mantine-color-blue-8);
 
@@ -800,6 +800,9 @@
 .w-20 {
     width: 5rem;
 }
+.w-28 {
+    width: 7rem;
+}
 .w-32 {
     width: 8rem;
 }
@@ -2215,8 +2218,8 @@ hr {
   color: var(--input-placeholder) !important;
   opacity: 1;
 }
-input:not([type="checkbox"]):focus,
-input:not([type="checkbox"]):focus-visible textarea:focus,
+input:focus,
+input:focus-visible textarea:focus,
 textarea:focus-visible {
   box-shadow: none !important;
   border: 1px solid var(--focus-border) !important;

From a4a83a8edde6fef3e4df017ea37e22f3c35a83cb Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Fri, 25 Aug 2023 18:08:24 +0530
Subject: [PATCH 2/8] ui: added heading color with text lighter shade

---
 .../table/bulk-edit-table/BulkEditTable.tsx         |  2 +-
 platform/firecamp-ui/src/scss/base.scss             | 10 ++++++++--
 platform/firecamp-ui/src/scss/tailwind.scss         | 13 +++++++++++--
 platform/firecamp-ui/tailwind.config.js             |  1 +
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx b/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx
index 791131392..9e4be40aa 100644
--- a/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx
+++ b/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx
@@ -75,7 +75,7 @@ const BulkEditTable: FC<IBulkEditTable> = ({
       <TabHeader className="-mb-2">
         {title && (
           <TabHeader.Left>
-            <span className="" data-testid="table-title">{title}</span>
+            <span className="text-heading-color" data-testid="table-title">{title}</span>
           </TabHeader.Left>
         )}
 
diff --git a/platform/firecamp-ui/src/scss/base.scss b/platform/firecamp-ui/src/scss/base.scss
index 585c70311..dd5219f52 100644
--- a/platform/firecamp-ui/src/scss/base.scss
+++ b/platform/firecamp-ui/src/scss/base.scss
@@ -71,6 +71,8 @@
     --input-background-focus: var(--mantine-color-dark-7); /* .1 */
     --input-background: var(--app-background);
 
+    --heading-color: var(--mantine-color-gray-5);
+
     --popover-background: var(--mantine-color-dark-5); /* .2 */
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
@@ -148,6 +150,8 @@
     --statusBar-border: var(--app-border);
     --statusBar-background-active: var(--mantine-color-gray-2);
 
+    --heading-color: var(--mantine-color-dark-4);
+
     --input-border: var(--app-border);
     --input-placeholder: var(--mantine-color-gray-6);
     --input-text: var(--mantine-color-gray-9);
@@ -849,10 +853,12 @@ tr:focus-visible {
 /*--------table temporary css starts ------------*/
 
 /*--------table 2 css starts------------*/
-.primary-table .mtk1,
-.primary-table th {
+.primary-table .mtk1 {
   color: var(--tab-foreground-inactive) !important;
 }
+.primary-table th {
+  color: var(--heading-color) !important;
+}
 
 .table-cell .table-action {
   visibility: hidden;
diff --git a/platform/firecamp-ui/src/scss/tailwind.scss b/platform/firecamp-ui/src/scss/tailwind.scss
index 9a461c0a7..ae5ee0600 100644
--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -59,6 +59,8 @@
     --input-background-focus: var(--mantine-color-dark-7); /* .1 */
     --input-background: var(--app-background);
 
+    --heading-color: var(--mantine-color-gray-5);
+
     --popover-background: var(--mantine-color-dark-5); /* .2 */
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
@@ -136,6 +138,8 @@
     --statusBar-border: var(--app-border);
     --statusBar-background-active: var(--mantine-color-gray-2);
 
+    --heading-color: var(--mantine-color-dark-4);
+
     --input-border: var(--app-border);
     --input-placeholder: var(--mantine-color-gray-6);
     --input-text: var(--mantine-color-gray-9);
@@ -1734,6 +1738,9 @@
 .text-graphql {
     color: var(--req-graphql);
 }
+.text-heading-color {
+    color: var(--heading-color);
+}
 .text-info {
     color: var(--info);
 }
@@ -2827,10 +2834,12 @@ tr:focus-visible {
 /*--------table temporary css starts ------------*/
 
 /*--------table 2 css starts------------*/
-.primary-table .mtk1,
-.primary-table th {
+.primary-table .mtk1 {
   color: var(--tab-foreground-inactive) !important;
 }
+.primary-table th {
+  color: var(--heading-color) !important;
+}
 
 .table-cell .table-action {
   visibility: hidden;
diff --git a/platform/firecamp-ui/tailwind.config.js b/platform/firecamp-ui/tailwind.config.js
index c6b455c98..f7eb830c3 100644
--- a/platform/firecamp-ui/tailwind.config.js
+++ b/platform/firecamp-ui/tailwind.config.js
@@ -75,6 +75,7 @@ module.exports = {
       focusBorder: 'var(--focus-border)',
       focusColor: '#ffffff1a',
 
+      'heading-color': 'var(--heading-color)',
       primaryColor: 'var(--app-primary)',
       'primaryColor-text': '#ffffff',
       secondaryColor: 'var(--app-secondary)',

From cc5d913671bdf0692db6bef693e6a9dcb0e81658 Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Mon, 28 Aug 2023 17:57:51 +0530
Subject: [PATCH 3/8] ui: updated current layout components using mantine flex,
 container components

---
 .../src/components/grid/ContainerLayout.tsx   |  32 ++
 .../src/components/grid/FlexLayout.tsx        |  27 ++
 .../components/grid/GridLayout.stories.tsx    | 325 ++++++++++++++++++
 .../src/components/grid/GridLayout.tsx        |  29 ++
 .../grid/GridLayoutOverview.stories.mdx       | 103 ++++++
 5 files changed, 516 insertions(+)
 create mode 100644 platform/firecamp-ui/src/components/grid/ContainerLayout.tsx
 create mode 100644 platform/firecamp-ui/src/components/grid/FlexLayout.tsx
 create mode 100644 platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx
 create mode 100644 platform/firecamp-ui/src/components/grid/GridLayout.tsx
 create mode 100644 platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx

diff --git a/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx b/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx
new file mode 100644
index 000000000..60b31feb3
--- /dev/null
+++ b/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { Container, ContainerProps, createStyles } from '@mantine/core';
+
+const useStyles = createStyles(() => ({
+  root: {
+    padding: '0px',
+  },
+}));
+export interface IContainerLayout extends ContainerProps {
+  /**
+   * to use the container wrapped in flex layout
+   */
+  flex?: boolean;
+}
+const ContainerLayout: FC<IContainerLayout> = ({
+  flex = false,
+  children = <></>,
+  className = '',
+  ...props
+}) => {
+  const { classes, cx } = useStyles();
+  return (
+    <Container
+      className={cx({ 'flex-1': flex }, classes.root, className)}
+      fluid
+      {...props}
+    >
+      {children}
+    </Container>
+  );
+};
+export default ContainerLayout;
diff --git a/platform/firecamp-ui/src/components/grid/FlexLayout.tsx b/platform/firecamp-ui/src/components/grid/FlexLayout.tsx
new file mode 100644
index 000000000..f3615bfc0
--- /dev/null
+++ b/platform/firecamp-ui/src/components/grid/FlexLayout.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import cx from 'classnames';
+import { Flex, FlexProps } from '@mantine/core';
+
+export interface IFlexLayout extends FlexProps {
+  /**
+   * to use the flex layout filling all available space
+   */
+  flex?: boolean;
+}
+const FlexLayout: FC<IFlexLayout> = ({
+  flex = false,
+  children = <></>,
+  className = '',
+  ...props
+}) => {
+  return (
+    <Flex
+      direction={'row'}
+      className={cx({ 'flex-1': flex }, className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+};
+export default FlexLayout;
diff --git a/platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx b/platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx
new file mode 100644
index 000000000..fd6485c57
--- /dev/null
+++ b/platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx
@@ -0,0 +1,325 @@
+// import Row from './Row';
+// import Column from './Column';
+// import RootContainer from './RootContainer';
+
+import GridLayout, { IGridLayout } from './GridLayout';
+import FlexLayout from './FlexLayout';
+import ContainerLayout from './ContainerLayout';
+
+export default {
+  title: 'UI-Kit/GridLayout',
+  component: GridLayout,
+};
+
+const OverflowDivWithDummyText = () => {
+  return (
+    <div className="pr-4">
+      <br />
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem Ipsum
+    </div>
+  );
+};
+
+export const LayoutWithSingleColumn = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4" flex>
+      <ContainerLayout className="bg-focus4">
+        1st Row - 1st Column
+        <hr />
+        <br />
+        * Solid border represents the RootContainer <br />
+        * Dashed border represents the Row
+        <br />
+        * RootContainer classnames gets updated based on usage
+        <br />- "h-screen w-screen" updated to "h-full w-full" when nested * Row
+        should have overflow-auto classname when its column has overflow value
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+export const LayoutWithMultipleColumn = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4" gap={16} flex>
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+
+export const LayoutWithMultipleRowOverflowCol = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed overflow-auto" flex>
+      <ContainerLayout
+        className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+        flex
+      >
+        1st Row - 1st Column
+        <OverflowDivWithDummyText />
+      </ContainerLayout>
+    </FlexLayout>
+    <FlexLayout className="bg-focus1 border border-dashed" flex>
+      <ContainerLayout className="bg-focus4 mx-2 my-3" flex>
+        2nd Row - 1st Column
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+export const LayoutWithMultipleRowColumn = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4" gap={16} flex>
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 2nd Column
+      </ContainerLayout>
+    </FlexLayout>
+    <FlexLayout className="bg-focus1 border border-dashed p-4" gap={16} flex>
+      <ContainerLayout className="bg-focus4" flex>
+        2nd Row - 1st Column
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        2nd Row - 2nd Column
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+export const LayoutWithNestedColumn = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4" gap={16} flex>
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        <GridLayout
+          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid `}
+        >
+          <FlexLayout
+            className="bg-focus1 border border-dashed p-4"
+            gap={16}
+            flex
+          >
+            <ContainerLayout className="bg-focus4" flex>
+              1st Row - 2nd Column - 1
+            </ContainerLayout>
+          </FlexLayout>
+          <FlexLayout
+            className="bg-focus1 border border-dashed p-4"
+            gap={16}
+            flex
+          >
+            <ContainerLayout className="bg-focus4" flex>
+              1st Row - 2nd Column -2
+            </ContainerLayout>
+          </FlexLayout>
+        </GridLayout>
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+
+export const Layout_App = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4" flex>
+      <ContainerLayout className="bg-focus4" flex>
+        App Layout
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+export const Layout_Graph_QL = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4" flex>
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column (Header)
+      </ContainerLayout>
+    </FlexLayout>
+    <FlexLayout className="bg-focus1 border border-dashed p-4" flex gap={16}>
+      <ContainerLayout className="bg-focus4" flex>
+        {' '}
+        2nd Row - 1st Column
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        {' '}
+        2nd Row - 2nd Column
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        {' '}
+        2nd Row - 3rd Column
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+export const Layout_HTTP = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4">
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column (Header)
+      </ContainerLayout>
+    </FlexLayout>
+    <FlexLayout className="bg-focus1 border border-dashed p-4" flex gap={16}>
+      <ContainerLayout className="bg-focus4 overflow-auto" flex>
+        {' '}
+        <GridLayout
+          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid overflow-auto`}
+        >
+          <FlexLayout
+            className="bg-focus1 border border-dashed overflow-auto"
+            flex
+          >
+            <ContainerLayout
+              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              flex
+            >
+              2nd Row - 1st Column
+              {/* TODO CHECK OVERFLOWING CONTENT */}
+              {/* <OverflowDivWithDummyText /> */}
+            </ContainerLayout>
+          </FlexLayout>
+          <FlexLayout className="bg-focus1 border border-dashed" flex>
+            <ContainerLayout className="bg-focus4 mx-2 my-3" flex>
+              2nd Row - 1st Column
+            </ContainerLayout>
+          </FlexLayout>
+        </GridLayout>
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        {' '}
+        2nd Row - 2nd Column
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+export const Layout_Web_Socket = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4">
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column (Header)
+      </ContainerLayout>
+    </FlexLayout>
+    <FlexLayout className="bg-focus1 border border-dashed p-4" flex gap={16}>
+      <ContainerLayout className="bg-focus4 overflow-auto" flex>
+        {' '}
+        <GridLayout
+          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid overflow-auto`}
+        >
+          <FlexLayout
+            className="bg-focus1 border border-dashed overflow-auto"
+            flex
+          >
+            <ContainerLayout
+              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              flex
+            >
+              2nd Row - 1st Column - 1
+            </ContainerLayout>
+            <ContainerLayout
+              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              flex
+            >
+              2nd Row - 1st Column - 2
+            </ContainerLayout>
+          </FlexLayout>
+        </GridLayout>
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4" flex>
+        {' '}
+        2nd Row - 2nd Column
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
+export const Layout_Socket_IO = () => (
+  <GridLayout
+    className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid p-4`}
+  >
+    <FlexLayout className="bg-focus1 border border-dashed p-4">
+      <ContainerLayout className="bg-focus4" flex>
+        1st Row - 1st Column (Header)
+      </ContainerLayout>
+    </FlexLayout>
+    <FlexLayout className="bg-focus1 border border-dashed p-4" flex gap={16}>
+      <ContainerLayout className="bg-focus4" flex>
+        {' '}
+        2nd Row - 1st Column
+      </ContainerLayout>
+      <ContainerLayout className="bg-focus4 overflow-auto" flex>
+        {' '}
+        <GridLayout
+          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid overflow-auto`}
+        >
+          <FlexLayout
+            className="bg-focus1 border border-dashed overflow-auto"
+            flex
+          >
+            <ContainerLayout
+              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              flex
+            >
+              2nd Row - 2nd Column - 1
+            </ContainerLayout>
+            <ContainerLayout
+              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              flex
+            >
+              2nd Row - 2nd Column - 2
+            </ContainerLayout>
+          </FlexLayout>
+        </GridLayout>
+      </ContainerLayout>
+    </FlexLayout>
+  </GridLayout>
+);
diff --git a/platform/firecamp-ui/src/components/grid/GridLayout.tsx b/platform/firecamp-ui/src/components/grid/GridLayout.tsx
new file mode 100644
index 000000000..e7efc6e28
--- /dev/null
+++ b/platform/firecamp-ui/src/components/grid/GridLayout.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { createStyles } from '@mantine/core';
+import FlexLayout, { IFlexLayout } from './FlexLayout';
+
+const useStyles = createStyles(() => ({
+  root: {
+    margin: '0px',
+    paddingLeft: '0px',
+    paddingRight: '0px',
+    width: '100%',
+    maxWidth: '100%',
+  },
+}));
+export interface IGridLayout extends IFlexLayout {}
+const GridLayout: FC<IGridLayout> = ({
+  children = <></>,
+  className = '',
+  ...props
+}) => {
+  const { cx, classes } = useStyles();
+  // return <SimpleGrid className={cx(classes.root, className)} {...props}>{children}</SimpleGrid>;
+  return (
+    <FlexLayout direction={'column'} className={cx(classes.root, className)} {...props}>
+      {children}
+    </FlexLayout>
+  );
+};
+
+export default GridLayout;
diff --git a/platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx b/platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx
new file mode 100644
index 000000000..f8bfffcad
--- /dev/null
+++ b/platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx
@@ -0,0 +1,103 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="UI-Kit/GridLayout/Overview" />
+
+## **Grid Layout**
+
+To create the layout for page in proper structure for easy maintenance.
+
+#### **Component Usage**:
+
+We are using flex based Row [FlexLayout] - Columns [ContainerLayout] layout. <br/>
+
+| (Row) Classname | Usage                                   |
+| --------------- | --------------------------------------- |
+| flex            | for row fill all available parent space |
+
+| (Column) Prop | Usage                                             |
+| ------------- | ------------------------------------------------- |
+| flex          | for column to fill all available parent row space |
+
+#### **Component Related**:
+
+> Layout is created with : GridLayout, FlexLayout, ContainerLayout.
+
+#### **Component Dependencies**:
+
+- Use tailwind classes for flex to generate any layout you want.
+
+#### **Best Practices**:
+
+- Always nest `<ContainerLayout></ContainerLayout>` in `<FlexLayout></FlexLayout>`
+
+Do:
+
+```
+<GridLayout>
+	<FlexLayout>
+		<ContainerLayout>
+		Loream ipsum unde omnis iste natus error sit voluptatem accusantium.
+		</ContainerLayout>
+		<ContainerLayout>
+			<FlexLayout>
+				<ContainerLayout>
+					Loream ipsum unde omnis iste natus error sit.
+				</ContainerLayout>
+      			<ContainerLayout>
+					Loream ipsum unde omnis iste natus error sit.
+				</ContainerLayout>
+			</FlexLayout>
+		</ContainerLayout>
+	</FlexLayout>
+</GridLayout>
+```
+
+Avoid:
+
+```
+<FlexLayout>
+  <FlexLayout>
+    Do not nest unnecessary Rows
+  </FlexLayout>
+</FlexLayout>
+```
+
+```
+<FlexLayout>
+	<ContainerLayout>
+		<ContainerLayout>
+			Do not nest unnecessary Rows
+		</ContainerLayout>
+	<ContainerLayout>
+</FlexLayout>
+```
+
+```
+<FlexLayout>
+	Do not place any component directly in Row, use Column inside a Row.
+</FlexLayout>
+```
+
+#### **Examples**:
+
+- <LinkTo
+    kind="ui-kit-grid--layout-with-nested-column"
+    className="!text-primaryColor"
+  >
+    Nested Column Example
+  </LinkTo>
+
+#### **References**:
+
+- <a
+    className="!text-primaryColor"
+    href="https://tailwindcss.com/docs/flex"
+    target="_blank"
+  >
+    Tailwind Flex
+  </a>
+
+#### **Future Improvements:**
+
+- Can add prop scrollbar for visibility

From 587f4a5f17d8cdeaeca84dbc8710f822710df3a1 Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Mon, 28 Aug 2023 19:27:22 +0530
Subject: [PATCH 4/8] ui: updated props & doc for gridlayout

---
 .../src/components/grid/ContainerLayout.tsx   |   7 +-
 .../src/components/grid/FlexLayout.tsx        |   7 +-
 .../components/grid/GridLayout.stories.tsx    | 125 +++++++++++-------
 .../grid/GridLayoutOverview.stories.mdx       |  15 ++-
 platform/firecamp-ui/src/scss/tailwind.scss   |   3 +
 5 files changed, 101 insertions(+), 56 deletions(-)

diff --git a/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx b/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx
index 60b31feb3..5e2e136bc 100644
--- a/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx
+++ b/platform/firecamp-ui/src/components/grid/ContainerLayout.tsx
@@ -11,9 +11,14 @@ export interface IContainerLayout extends ContainerProps {
    * to use the container wrapped in flex layout
    */
   flex?: boolean;
+  /**
+   * When the child content overflows, this will add the necessary scrollbar and prevent the row from getting larger
+   */
+  overflow?: boolean;
 }
 const ContainerLayout: FC<IContainerLayout> = ({
   flex = false,
+  overflow = false,
   children = <></>,
   className = '',
   ...props
@@ -21,7 +26,7 @@ const ContainerLayout: FC<IContainerLayout> = ({
   const { classes, cx } = useStyles();
   return (
     <Container
-      className={cx({ 'flex-1': flex }, classes.root, className)}
+      className={cx('invisible-scrollbar', { 'flex-1': flex }, {'overflow-auto': overflow}, classes.root, className)}
       fluid
       {...props}
     >
diff --git a/platform/firecamp-ui/src/components/grid/FlexLayout.tsx b/platform/firecamp-ui/src/components/grid/FlexLayout.tsx
index f3615bfc0..da7fdc5be 100644
--- a/platform/firecamp-ui/src/components/grid/FlexLayout.tsx
+++ b/platform/firecamp-ui/src/components/grid/FlexLayout.tsx
@@ -7,9 +7,14 @@ export interface IFlexLayout extends FlexProps {
    * to use the flex layout filling all available space
    */
   flex?: boolean;
+  /**
+   * When the child content overflows, this will add the necessary scrollbar and prevent the row from getting larger
+   */
+  overflow?: boolean;
 }
 const FlexLayout: FC<IFlexLayout> = ({
   flex = false,
+  overflow = false,
   children = <></>,
   className = '',
   ...props
@@ -17,7 +22,7 @@ const FlexLayout: FC<IFlexLayout> = ({
   return (
     <Flex
       direction={'row'}
-      className={cx({ 'flex-1': flex }, className)}
+      className={cx({ 'flex-1': flex }, {'overflow-auto': overflow}, className)}
       {...props}
     >
       {children}
diff --git a/platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx b/platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx
index fd6485c57..87a21c242 100644
--- a/platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx
+++ b/platform/firecamp-ui/src/components/grid/GridLayout.stories.tsx
@@ -1,10 +1,7 @@
-// import Row from './Row';
-// import Column from './Column';
-// import RootContainer from './RootContainer';
-
-import GridLayout, { IGridLayout } from './GridLayout';
+import GridLayout from './GridLayout';
 import FlexLayout from './FlexLayout';
 import ContainerLayout from './ContainerLayout';
+import ScrollArea from '../scroll-area/ScrollArea';
 
 export default {
   title: 'UI-Kit/GridLayout',
@@ -89,13 +86,54 @@ export const LayoutWithMultipleRowOverflowCol = () => (
   <GridLayout
     className={`h-screen w-screen bg-app-background-secondary text-app-foreground border border-solid`}
   >
-    <FlexLayout className="bg-focus1 border border-dashed overflow-auto" flex>
-      <ContainerLayout
-        className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
-        flex
-      >
+    <FlexLayout className="bg-focus1 border border-dashed" overflow flex>
+      <ContainerLayout className="bg-focus2 mx-2 my-3" overflow flex>
         1st Row - 1st Column
-        <OverflowDivWithDummyText />
+        <ScrollArea
+          classNames={{
+            root: 'whitespace-normal',
+          }}
+        >
+          <OverflowDivWithDummyText />
+          <br />
+          <hr />
+          <br />
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with
+          the release of Letraset sheets containing Lorem Ipsum passages, and
+          more recently with desktop publishing software like Aldus PageMaker
+          including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of
+          the printing and typesetting industry. Lorem Ipsum has been the
+          industry's standard dummy text ever since the 1500s, when an unknown
+          printer took a galley of type and scrambled it to make a type specimen
+          book. It has survived not only five centuries, but also the leap into
+          electronic typesetting, remaining essentially unchanged. It was
+          popularised in the 1960s with the release of Letraset sheets
+          containing Lorem Ipsum passages, and more recently with desktop
+          publishing software like Aldus PageMaker including versions of Lorem
+          Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with
+          the release of Letraset sheets containing Lorem Ipsum passages, and
+          more recently with desktop publishing software like Aldus PageMaker
+          including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of
+          the printing and typesetting industry. Lorem Ipsum has been the
+          industry's standard dummy text ever since the 1500s, when an unknown
+          printer took a galley of type and scrambled it to make a type specimen
+          book. It has survived not only five centuries, but also the leap into
+          electronic typesetting, remaining essentially unchanged. It was
+          popularised in the 1960s with the release of Letraset sheets
+          containing Lorem Ipsum passages, and more recently with desktop
+          publishing software like Aldus PageMaker including versions of Lorem
+          Ipsum
+        </ScrollArea>
       </ContainerLayout>
     </FlexLayout>
     <FlexLayout className="bg-focus1 border border-dashed" flex>
@@ -117,7 +155,12 @@ export const LayoutWithMultipleRowColumn = () => (
         1st Row - 2nd Column
       </ContainerLayout>
     </FlexLayout>
-    <FlexLayout className="bg-focus1 border border-dashed p-4" gap={16} flex>
+    <FlexLayout
+      className="bg-focus1 border border-dashed p-4 "
+      gap={16}
+      overflow
+      flex
+    >
       <ContainerLayout className="bg-focus4" flex>
         2nd Row - 1st Column
       </ContainerLayout>
@@ -208,23 +251,25 @@ export const Layout_HTTP = () => (
         1st Row - 1st Column (Header)
       </ContainerLayout>
     </FlexLayout>
-    <FlexLayout className="bg-focus1 border border-dashed p-4" flex gap={16}>
-      <ContainerLayout className="bg-focus4 overflow-auto" flex>
+    <FlexLayout
+      className="bg-focus1 border border-dashed p-4"
+      overflow
+      flex
+      gap={16}
+    >
+      <ContainerLayout className="bg-focus4" flex>
         {' '}
         <GridLayout
-          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid overflow-auto`}
+          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid `}
         >
-          <FlexLayout
-            className="bg-focus1 border border-dashed overflow-auto"
-            flex
-          >
+          <FlexLayout className="bg-focus1 border border-dashed" overflow flex>
             <ContainerLayout
-              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              className="bg-focus2 mx-2 my-3 visible-scrollbar "
+              overflow
               flex
             >
               2nd Row - 1st Column
-              {/* TODO CHECK OVERFLOWING CONTENT */}
-              {/* <OverflowDivWithDummyText /> */}
+              <OverflowDivWithDummyText />
             </ContainerLayout>
           </FlexLayout>
           <FlexLayout className="bg-focus1 border border-dashed" flex>
@@ -251,32 +296,21 @@ export const Layout_Web_Socket = () => (
       </ContainerLayout>
     </FlexLayout>
     <FlexLayout className="bg-focus1 border border-dashed p-4" flex gap={16}>
-      <ContainerLayout className="bg-focus4 overflow-auto" flex>
-        {' '}
+      <ContainerLayout className="bg-focus4" flex>
         <GridLayout
-          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid overflow-auto`}
+          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid`}
         >
-          <FlexLayout
-            className="bg-focus1 border border-dashed overflow-auto"
-            flex
-          >
-            <ContainerLayout
-              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
-              flex
-            >
+          <FlexLayout className="bg-focus1 border border-dashed " flex>
+            <ContainerLayout className="bg-focus2 mx-2 my-3" flex>
               2nd Row - 1st Column - 1
             </ContainerLayout>
-            <ContainerLayout
-              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
-              flex
-            >
+            <ContainerLayout className="bg-focus2 mx-2 my-3" flex>
               2nd Row - 1st Column - 2
             </ContainerLayout>
           </FlexLayout>
         </GridLayout>
       </ContainerLayout>
       <ContainerLayout className="bg-focus4" flex>
-        {' '}
         2nd Row - 2nd Column
       </ContainerLayout>
     </FlexLayout>
@@ -293,26 +327,21 @@ export const Layout_Socket_IO = () => (
     </FlexLayout>
     <FlexLayout className="bg-focus1 border border-dashed p-4" flex gap={16}>
       <ContainerLayout className="bg-focus4" flex>
-        {' '}
         2nd Row - 1st Column
       </ContainerLayout>
-      <ContainerLayout className="bg-focus4 overflow-auto" flex>
-        {' '}
+      <ContainerLayout className="bg-focus4" flex>
         <GridLayout
-          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid overflow-auto`}
+          className={`h-full w-full bg-app-background-secondary text-app-foreground border border-solid`}
         >
-          <FlexLayout
-            className="bg-focus1 border border-dashed overflow-auto"
-            flex
-          >
+          <FlexLayout className="bg-focus1 border border-dashed" flex>
             <ContainerLayout
-              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              className="bg-focus2 mx-2 my-3 visible-scrollbar"
               flex
             >
               2nd Row - 2nd Column - 1
             </ContainerLayout>
             <ContainerLayout
-              className="bg-focus2 mx-2 my-3 visible-scrollbar overflow-auto"
+              className="bg-focus2 mx-2 my-3 visible-scrollbar "
               flex
             >
               2nd Row - 2nd Column - 2
diff --git a/platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx b/platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx
index f8bfffcad..c4de89768 100644
--- a/platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx
+++ b/platform/firecamp-ui/src/components/grid/GridLayoutOverview.stories.mdx
@@ -11,13 +11,15 @@ To create the layout for page in proper structure for easy maintenance.
 
 We are using flex based Row [FlexLayout] - Columns [ContainerLayout] layout. <br/>
 
-| (Row) Classname | Usage                                   |
-| --------------- | --------------------------------------- |
-| flex            | for row fill all available parent space |
+| (Row) Classname | Usage                                                                       |
+| --------------- | --------------------------------------------------------------------------- |
+| flex            | [true] the row expand to occupy all the available space within its parent.  |
+|                 | [false - default] to adjust its own size based on the size of its contents. |
 
-| (Column) Prop | Usage                                             |
-| ------------- | ------------------------------------------------- |
-| flex          | for column to fill all available parent row space |
+| (Column) Prop | Usage                                                                                     |
+| ------------- | ----------------------------------------------------------------------------------------- |
+| flex          | [true] to occupy all the available space within its parent (when used within FlexLayout). |
+|               | [false - default] to adjust its own size based on its contents.                           |
 
 #### **Component Related**:
 
@@ -29,6 +31,7 @@ We are using flex based Row [FlexLayout] - Columns [ContainerLayout] layout. <br
 
 #### **Best Practices**:
 
+- Use `<GridLayout></GridLayout>` as wrapper
 - Always nest `<ContainerLayout></ContainerLayout>` in `<FlexLayout></FlexLayout>`
 
 Do:
diff --git a/platform/firecamp-ui/src/scss/tailwind.scss b/platform/firecamp-ui/src/scss/tailwind.scss
index ae5ee0600..2e0912481 100644
--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -1043,6 +1043,9 @@
 .text-ellipsis {
     text-overflow: ellipsis;
 }
+.whitespace-normal {
+    white-space: normal;
+}
 .whitespace-nowrap {
     white-space: nowrap;
 }

From ff0f3945931fdb44ca220b9cbfce2bf8fe8a2b27 Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Fri, 1 Sep 2023 11:45:36 +0530
Subject: [PATCH 5/8] ui(FirecampThemeProvider): initialise method for mantine
 color scheme

---
 .../theme/FirecampThemeProvider.interfaces.ts |  4 +--
 .../theme/FirecampThemeProvider.tsx           | 34 ++++++++++++-------
 .../theme/FirecampThemeSelector.tsx           |  3 +-
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.interfaces.ts b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.interfaces.ts
index 2738e7a6f..fff11a9d6 100644
--- a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.interfaces.ts
+++ b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.interfaces.ts
@@ -18,6 +18,4 @@ export enum EFirecampThemeVariant {
   DarkSecondary = 'dark-secondary',
 }
 export type ColorType = Tuple<string, 10>;
-export interface IFirecampThemeProvider extends MantineProviderProps {
-  themeVariant?: EFirecampThemeVariant;
-}
+export interface IFirecampThemeProvider extends MantineProviderProps {}
diff --git a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx
index 3dc549ae6..be2ed5a48 100644
--- a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx
+++ b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx
@@ -75,26 +75,38 @@ export const useFirecampStyle = createStyles((theme) => ({
 }));
 
 const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
-  themeVariant,
   children,
   ...props
 }) => {
-
   const _initialize = () => {
     // on first time load set theme from local storage, if not found then set default
     let themeStored = localStorage.getItem('theme') as EFirecampThemeVariant;
     if (!Object.values(EFirecampThemeVariant).includes(themeStored)) {
-      themeStored = EFirecampThemeVariant.LightPrimary
+      themeStored = EFirecampThemeVariant.LightPrimary;
     }
     return themeStored;
-  }
+  };
+  const _initializeColorScheme = () => {
+    // on first time load set theme from local storage, if not found then set default
+    let themeColor = (
+      [
+        EFirecampThemeVariant.DarkPrimary,
+        EFirecampThemeVariant.DarkSecondary,
+      ].includes(localStorage.getItem('theme') as EFirecampThemeVariant)
+        ? 'dark'
+        : 'light'
+    ) as ColorScheme;
+
+    return themeColor;
+  };
 
-  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(
+    _initializeColorScheme
+  );
   const [theme, setTheme] = useState<EFirecampThemeVariant>(_initialize);
 
   // update theme
   const updateTheme = (theme: EFirecampThemeVariant) => {
-
     // update the color schema
     setColorScheme(
       [
@@ -106,12 +118,12 @@ const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
     );
 
     // save in local storage
-    localStorage.setItem("theme", theme);
+    localStorage.setItem('theme', theme);
 
     // update theme
     setTheme(theme);
 
-    updateMonacoEditorTheme(theme)
+    updateMonacoEditorTheme(theme);
   };
 
   const updateMonacoEditorTheme = (theme: EFirecampThemeVariant) => {
@@ -125,7 +137,7 @@ const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
 
     localStorage.setItem('editorTheme', editorTheme);
     EditorApi.setEditorTheme(editorTheme);
-  }
+  };
 
   return (
     //@ts-ignore
@@ -464,9 +476,7 @@ const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
         withNormalizeCSS
         {...props}
       >
-        <ModalsProvider>
-          {children}
-        </ModalsProvider>
+        <ModalsProvider>{children}</ModalsProvider>
       </MantineProvider>
     </ColorSchemeProvider>
   );
diff --git a/platform/firecamp-ui/src/components/theme/FirecampThemeSelector.tsx b/platform/firecamp-ui/src/components/theme/FirecampThemeSelector.tsx
index 60ed9002b..9b693f192 100644
--- a/platform/firecamp-ui/src/components/theme/FirecampThemeSelector.tsx
+++ b/platform/firecamp-ui/src/components/theme/FirecampThemeSelector.tsx
@@ -41,7 +41,6 @@ const FirecampThemeSelector = () => {
     } catch (error) {
       console.log({ error });
     }
-    toggleColorScheme(t);
   };
 
   const activeTheme = ThemeOptions.find(
@@ -70,7 +69,7 @@ const FirecampThemeSelector = () => {
         />
       )}
       options={ThemeOptions}
-      onSelect={(t) => _setTheme(t.value)}
+      onSelect={(t) => toggleColorScheme(t.value)}
       width={220}
       classNames={{
         dropdown: 'mt-2',

From 028fbc3c2c57a9d46f9bc20b868fe76aabfcfae9 Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Fri, 1 Sep 2023 17:12:20 +0530
Subject: [PATCH 6/8] ui: added user select class in monaco editor

---
 .../src/components/editors/monaco-v2/SingleLineEditor.tsx    | 4 ++--
 platform/firecamp-ui/src/scss/tailwind.scss                  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/platform/firecamp-ui/src/components/editors/monaco-v2/SingleLineEditor.tsx b/platform/firecamp-ui/src/components/editors/monaco-v2/SingleLineEditor.tsx
index 638b92ada..cd7c1cdfe 100644
--- a/platform/firecamp-ui/src/components/editors/monaco-v2/SingleLineEditor.tsx
+++ b/platform/firecamp-ui/src/components/editors/monaco-v2/SingleLineEditor.tsx
@@ -370,13 +370,13 @@ const SingleLineEditor: FC<IEditor & TSLEditor> = ({
   return (
     <>
       {placeholder && !value ? (
-        <div className="absolute top-0 left-0 text-input-placeholder text-lg leading-5	">
+        <div className="select-auto absolute top-0 left-0 text-input-placeholder text-lg leading-5	">
           {placeholder}
         </div>
       ) : (
         <></>
       )}
-      <div className={cx(className, { 'opacity-50': disabled })} style={style}>
+      <div className={cx('select-auto', className, { 'opacity-50': disabled })} style={style}>
         <MonacoEditor
           language={language}
           defaultValue={value}
diff --git a/platform/firecamp-ui/src/scss/tailwind.scss b/platform/firecamp-ui/src/scss/tailwind.scss
index 2e0912481..fc4aaee35 100644
--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -963,6 +963,11 @@
        -moz-user-select: text;
             user-select: text;
 }
+.select-auto {
+    -webkit-user-select: auto;
+       -moz-user-select: auto;
+            user-select: auto;
+}
 .resize {
     resize: both;
 }

From 6f232a164dc2407bc38f748d7ea898e0afc1f619 Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Mon, 4 Sep 2023 17:28:16 +0530
Subject: [PATCH 7/8] ui(InviteOrgMembers): members names visibility fixed

---
 .../modals/workspace/invite-members/tabs/InviteOrgMembers.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/firecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx b/platform/firecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx
index 9e16f48cd..534f60d4e 100644
--- a/platform/firecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx
+++ b/platform/firecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx
@@ -87,7 +87,7 @@ const InviteOrgMembers: FC<IProps> = ({
             classNames={{
               trigger: 'block',
               dropdown: '-mt-2 overflow-y-scroll invisible-scrollbar max-h-[200px]',
-              item: '!px-4',
+              item: '!px-4 whitespace-nowrap',
               itemRightSection: 'w-full'
             }}
             width={512}

From b329ffd0fab0244c6c49d15dbf383599c6705d51 Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Fri, 8 Sep 2023 17:16:50 +0530
Subject: [PATCH 8/8] ui: updated sidebar width & socket pane border prop added

---
 .../src/components/containers/SidebarContainer.tsx     |  4 ++--
 platform/firecamp-ui/src/components/pane/Pane.tsx      |  9 +++++++--
 .../src/components/pane/interfaces/Pane.interfaces.ts  | 10 ++++++++++
 .../sidebar-panel/panes/listeners/ListenerPane.tsx     |  1 +
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
index e74bb2007..889b6768f 100644
--- a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
+++ b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
@@ -281,10 +281,10 @@ const SidebarContainer: FC<any> = () => {
       </ActivityBar>
       {activeItem ? (
         <Resizable
-          width={'250'}
+          width={'265'}
           height="100%"
           right={true}
-          minWidth={'250'}
+          minWidth={'265'}
           maxWidth={'600'}
           className={cx({ closed: false })}
         >
diff --git a/platform/firecamp-ui/src/components/pane/Pane.tsx b/platform/firecamp-ui/src/components/pane/Pane.tsx
index 2f8a37b85..b5934ac99 100644
--- a/platform/firecamp-ui/src/components/pane/Pane.tsx
+++ b/platform/firecamp-ui/src/components/pane/Pane.tsx
@@ -11,6 +11,7 @@ const Pane: FC<IPane> & {
 } = ({
     expanded = false,
     className,
+    hideBorder = false,
     headerClassName,
     bodyClassName,
     height = '',
@@ -28,6 +29,7 @@ const Pane: FC<IPane> & {
                 expanded={_expanded}
                 titleRenderer={headerTitleRenderer}
                 actionRenderer={headerActionRenderer}
+                hideBorder={hideBorder}
             />
             {
                 _expanded
@@ -39,7 +41,7 @@ const Pane: FC<IPane> & {
         </div>);
     };
 
-const Header: FC<IHeader> = ({ titleRenderer, actionRenderer, className, expanded, toggle }) => {
+const Header: FC<IHeader> = ({ titleRenderer, actionRenderer, className, expanded, toggle, hideBorder }) => {
 
     const actionDomRef = useRef<HTMLDivElement>();
     const onToggle = (e: any) => {
@@ -47,7 +49,10 @@ const Header: FC<IHeader> = ({ titleRenderer, actionRenderer, className, expande
         toggle()
     }
     return (
-        <div className={cx("pane-header cursor-pointer border-y border-app-border px-2 py-1", className)}
+        <div className={cx("pane-header cursor-pointer border-app-border px-2 py-1", 
+        { 'border-y': !hideBorder }, 
+        { 'border-b': hideBorder && expanded }, 
+        className)}
             tabIndex={1}
             onClick={onToggle}>
             {expanded ? <ChevronDown size={16} className="mr-1" /> : <ChevronRight size={16} className="mr-1" />}
diff --git a/platform/firecamp-ui/src/components/pane/interfaces/Pane.interfaces.ts b/platform/firecamp-ui/src/components/pane/interfaces/Pane.interfaces.ts
index 3f9a999ee..517b88e39 100644
--- a/platform/firecamp-ui/src/components/pane/interfaces/Pane.interfaces.ts
+++ b/platform/firecamp-ui/src/components/pane/interfaces/Pane.interfaces.ts
@@ -39,6 +39,11 @@ export interface IPane {
    * to apply any custom height to the container component
    */
   height?: string;
+
+  /**
+   * to hide the border at bottom of header
+   */
+  hideBorder?: boolean;
 }
 
 export interface IHeader {
@@ -62,6 +67,11 @@ export interface IHeader {
   }) => JSX.Element;
 
   className?: string;
+
+  /**
+   * to hide the border at bottom of header
+   */
+  hideBorder?: boolean;
 }
 
 export interface IBody {
diff --git a/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/listeners/ListenerPane.tsx b/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/listeners/ListenerPane.tsx
index eb42b5c26..e9b160f1e 100644
--- a/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/listeners/ListenerPane.tsx
+++ b/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/listeners/ListenerPane.tsx
@@ -6,6 +6,7 @@ const ListenerPane = () => {
   return (
     <Pane
       expanded={true}
+      hideBorder={true}
       bodyClassName={'!p-0'}
       headerTitleRenderer={() => {
         return <span>LISTENERS</span>;