Merge pull request #477 from sirraminyavari/dev-redesign

feat(re-design): ✨ update redisign
sirraminyavari · May 31, 2023 · 5c02af9 · 5c02af9
2 parents 941b885 + 2551fdb
commit 5c02af9
Show file tree

Hide file tree

Showing 34 changed files with 240 additions and 373 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@atlaskit/tree": "^8.6.0",
     "@cliqmind/react-table": "^7.8.0-dev.1",
-    "@cliqmind/rv-components": "^0.4.1-dev",
+    "@cliqmind/rv-components": "^0.4.1-dev-1",
     "@draft-js-plugins/editor": "^4.1.0",
     "@draft-js-plugins/mention": "^4.5.1",
     "@lottiefiles/react-lottie-player": "^3.4.1",

diff --git a/public/index.html b/public/index.html
@@ -274,7 +274,7 @@
     </script>
     <title>Raaivan</title>
   </head>
-  <body class="Direction TextAlign default" style="font-size: unset !important">
+  <body class="Direction TextAlign" style="font-size: unset !important">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="block-editor-portal"></div>

diff --git a/src/App.js b/src/App.js
@@ -17,6 +17,7 @@ import { CV_WHITE } from 'constant/CssVariables';
 import { avatarIconURL } from 'helpers/helpers';
 import consoleLogger from 'utils/console/consoleLogger';
 import 'scss/global.scss';
+import ThemeProvider from 'components/ThemeProvider/ThemeProvider';
 
 const { RV_RTL, GlobalUtilities } = window;
 
@@ -44,24 +45,26 @@ const App = () => {
         bodyClassName="rv-font-default"
       />
       <StoreProvider>
-        <Suspense fallback={<LogoLoader />}>
-          <Router>
-            <ScrollToTop />
-            <Switch>
-              <Route
-                path={AUTH_PATH}
-                render={(props) => (
-                  <CheckRoute
-                    props={props}
-                    name={LOGIN_NAME}
-                    component={AuthView}
-                  />
-                )}
-              />
-              <PrivateRoute path={ROOT_PATH} component={MainLayout} />
-            </Switch>
-          </Router>
-        </Suspense>
+        <ThemeProvider>
+          <Suspense fallback={<LogoLoader />}>
+            <Router>
+              <ScrollToTop />
+              <Switch>
+                <Route
+                  path={AUTH_PATH}
+                  render={(props) => (
+                    <CheckRoute
+                      props={props}
+                      name={LOGIN_NAME}
+                      component={AuthView}
+                    />
+                  )}
+                />
+                <PrivateRoute path={ROOT_PATH} component={MainLayout} />
+              </Switch>
+            </Router>
+          </Suspense>
+        </ThemeProvider>
       </StoreProvider>
     </ErrorBoundry>
   );

diff --git a/src/components/Buttons/Toggle/Toggle.js b/src/components/Buttons/Toggle/Toggle.js
diff --git a/src/components/Buttons/Toggle/Toggle.styles.js b/src/components/Buttons/Toggle/Toggle.styles.js
diff --git a/src/components/Buttons/Toggle/Toggle.tsx b/src/components/Buttons/Toggle/Toggle.tsx
@@ -0,0 +1,26 @@
+/**
+ * Renders a toggle button.
+ */
+import { RVSwitch, Switch } from '@cliqmind/rv-components';
+
+/**
+ *  @description Renders a Toggle component.
+ * @component
+ */
+const ToggleButton = ({ children, disabled, title, ...rest }: RVSwitch) => {
+  return (
+    <>
+      <Switch label={title} disabled={disabled} {...rest} />
+      {children}
+    </>
+  );
+};
+
+ToggleButton.defaultProps = {
+  value: false,
+  disabled: false,
+};
+
+ToggleButton.displayName = 'ToggleButtonComponent';
+
+export default ToggleButton;
diff --git a/src/components/ItemSelection/items/SideItemSelection.js b/src/components/ItemSelection/items/SideItemSelection.js
@@ -13,7 +13,7 @@ import DimensionHelper from 'utils/DimensionHelper/DimensionHelper';
 import ClassItem from './ClassItem';
 import ScrollBarProvider from 'components/ScrollBarProvider/ScrollBarProvider';
 import { decodeBase64 } from 'helpers/helpers';
-import Toggle from 'components/Toggle/Toggle';
+import Toggle from 'components/Buttons/Toggle/Toggle';
 
 const { RV_RTL, RVDic } = window || {};
 

diff --git a/src/components/Modal/Messages/DeleteConfirmMessage.js b/src/components/Modal/Messages/DeleteConfirmMessage.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { TC_DEFAULT } from 'constant/Colors';
-import { CV_GRAY_DARK, CV_RED } from 'constant/CssVariables';
+import { CV_GRAY_DARK, CV_RED, TCV_DEFAULT } from 'constant/CssVariables';
+import { RVColorProp } from '@cliqmind/rv-components';
 
 /**
  *
@@ -19,10 +19,9 @@ import { CV_GRAY_DARK, CV_RED } from 'constant/CssVariables';
 const DeleteConfirmMSG = ({ title, Icon, question, warning }) => {
   return (
     <>
-      <TextContainer bottomMargin="1.8rem">
+      <TextContainer bottomMargin="1.8rem" className={RVColorProp.distant}>
         <Icon
-          className={TC_DEFAULT}
-          style={{ marginInlineEnd: '0.3rem' }}
+          style={{ marginInlineEnd: '0.3rem', color: TCV_DEFAULT }}
           size="1.2rem"
         />
         {title}

diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import usePrevious from 'hooks/usePrevious';
 import useWindow from 'hooks/useWindowContext';
 import CloseButton from 'components/Buttons/CloseButton';
+import { RVColorProp } from '@cliqmind/rv-components';
 
 const Modal = ({
   title,
@@ -84,7 +85,9 @@ const Modal = ({
                 >
                   {!stick && <EmptyTitleSide />}
                   <TitleArea
-                    className={`${titleClass ? titleClass : 'WarmColor'}`}
+                    className={`${
+                      titleClass ? titleClass : RVColorProp.distant
+                    }`}
                   >
                     {title}
                   </TitleArea>
@@ -165,7 +168,7 @@ const TitleArea = styled.div`
   font-weight: 600;
   font-size: 0.9rem;
   text-align: center;
-
+color:
   &:first-letter {
     text-transform: uppercase;
   }

diff --git a/src/components/PeoplePicker/PeoplePicker.js b/src/components/PeoplePicker/PeoplePicker.js
@@ -6,7 +6,7 @@ import UndoIcon from 'components/Icons/UndoIcon/Undo';
 import LogoLoader from 'components/Loaders/LogoLoader/LogoLoader';
 import ScrollBarProvider from 'components/ScrollBarProvider/ScrollBarProvider';
 import SimpleListViewer from 'components/SimpleListViewer/SimpleListViewer';
-import Toggle from 'components/Toggle/Toggle';
+import Toggle from 'components/Buttons/Toggle/Toggle';
 import { C_DISTANT } from 'constant/Colors';
 import { CV_DISTANT, CV_FREEZED, CV_RED } from 'constant/CssVariables';
 import { decodeBase64, encodeBase64 } from 'helpers/helpers';

diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -0,0 +1,31 @@
+import { WindowContext } from 'context/WindowProvider';
+import useWindowContext from 'hooks/useWindowContext';
+import { PropsWithChildren, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { selectTheme } from 'store/slice/theme/selectors';
+
+const ThemeProvider = ({ children }: PropsWithChildren<void>) => {
+  const { RV_RTL } = useWindowContext();
+  const themeState = useSelector(selectTheme);
+  useEffect(() => {
+    const directionState = RV_RTL ? 'direction-rtl' : 'direction-ltr';
+
+    document.body.setAttribute('dir', RV_RTL ? 'rtl' : 'ltr');
+
+    if (themeState.currentTheme)
+      document.documentElement.className = [
+        themeState.currentTheme,
+        'overflow-enabled',
+        directionState,
+      ].join(' ');
+    else
+      document.documentElement.className = [
+        'default',
+        'overflow-enabled',
+        directionState,
+      ].join(' ');
+  }, [themeState.currentTheme, RV_RTL]);
+  return <>{children}</>;
+};
+
+export default ThemeProvider;