Merge pull request #479 from sirraminyavari/dev-redesign

feat: 💄 improve user profile dropdown menu

public/index.html

@@ -135,7 +135,7 @@
     ></script>
 
     <link rel="shortcut icon" href="/api/rv/fav_icon" />
-    <link rel="stylesheet" type="text/css" href="/api/rv/theme" />
+    <!-- <link rel="stylesheet" type="text/css" href="/api/rv/theme" /> -->
     <link rel="stylesheet" type="text/css" href="/api/rv/css_direction" />
     <script
       type="text/javascript"

src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,13 +1,16 @@
-import { WindowContext } from 'context/WindowProvider';
 import useWindowContext from 'hooks/useWindowContext';
 import { PropsWithChildren, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useThemeSlice } from 'store/slice/theme';
 import { selectTheme } from 'store/slice/theme/selectors';
 
 const ThemeProvider = ({ children }: PropsWithChildren<void>) => {
   const { RV_RTL } = useWindowContext();
   const themeState = useSelector(selectTheme);
+  const dispatch = useDispatch();
+  const { actions: themeActions } = useThemeSlice();
   useEffect(() => {
+    dispatch(themeActions.getCurrentTheme({}));
     const directionState = RV_RTL ? 'direction-rtl' : 'direction-ltr';
 
     document.body.setAttribute('dir', RV_RTL ? 'rtl' : 'ltr');
@@ -24,7 +27,8 @@ const ThemeProvider = ({ children }: PropsWithChildren<void>) => {
         'overflow-enabled',
         directionState,
       ].join(' ');
-  }, [themeState.currentTheme, RV_RTL]);
+  }, [themeState.currentTheme, RV_RTL, dispatch, themeActions]);
+
   return <>{children}</>;
 };
 

src/components/withTheme/withTheme.js

@@ -8,5 +8,5 @@ const withTheme = (Component) => (props) => {
 
   return <Component theme={{ states, actions }} {...props} />;
 };
-
+withTheme.displayName = 'withTheme';
 export default withTheme;

src/layouts/NewSidebar/sidebarContents/sidebarContentsDefault.ts

@@ -30,10 +30,9 @@ const SidebarContentDefault: SidebarContentFunction = ({
         path: `${TEAMS_PATH}`,
       },
       {
-        Icon: SidebarUserAvatar,
+        Icon: () => SidebarUserAvatar({ history }),
         noIndicator: false,
         onClick: () => {
-          history.push(`/${PROFILE_USER}`);
           setIsSubMenuToggled(false);
         },
         path: `/${PROFILE_USER}`,

src/layouts/NewSidebar/sidebarContents/sidebarUserAvatar.module.scss

@@ -13,4 +13,6 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
 }

src/layouts/NewSidebar/sidebarContents/sidebarUserAvatar.tsx

@@ -10,7 +10,6 @@ import Button from 'components/Buttons/Button';
 import { PROFILE_USER } from 'constant/constants';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectAuth } from 'store/slice/auth/selectors';
-import { useHistory } from 'react-router-dom';
 import { useAuthSlice } from 'store/slice/auth';
 import Popover from '@mui/base/PopperUnstyled';
 import { useState } from 'react';
@@ -22,9 +21,8 @@ const AvatarUser = WithAvatar({
   componentURLProp: 'src',
 });
 
-const SidebarUserAvatar = (props: Record<string, any>) => {
+const SidebarUserAvatar = ({ history, ...props }: Record<string, any>) => {
   const { authUser } = useSelector(selectAuth);
-  const history = useHistory();
   const dispatch = useDispatch();
   const [open, setOpen] = useState<boolean>(false);
   const [anchorEl, setAnchorEl] = useState<HTMLDivElement>();
@@ -75,17 +73,20 @@ const SidebarUserAvatar = (props: Record<string, any>) => {
         placement="auto"
       >
         <div
-          className={clsx(RVColorProp.oxford, styles.userAvatarDropdownPanel)}
+          className={clsx(RVColorProp.platinum, styles.userAvatarDropdownPanel)}
         >
           <Button
             onClick={() => {
               history.push(`/${PROFILE_USER}`);
               setOpen((prev) => !prev);
             }}
+            color={RVColorProp.platinum}
           >
-            profile
+            Profile
+          </Button>
+          <Button color={RVColorProp.platinum} onClick={handleLogout}>
+            Logout
           </Button>
-          <Button onClick={handleLogout}>logout</Button>
         </div>
       </Popover>
     </>