style: add margin into profile popover

src/index.css

@@ -63,6 +63,7 @@ code {
 .ant-menu-submenu-arrow{
     padding-right: 40px !important;
 }
+
 .ant-breadcrumb {
     margin-bottom: 10px !important;
 }
@@ -71,3 +72,7 @@ code {
     color: #ed1f24 !important;
     border-color: #ed1f24 !important;
 }
+
+.profile-container .ant-popover-inner-content {
+    padding: 0 !important;
+}

src/pages/App/DesktopLayout.js

@@ -1,32 +1,32 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
-import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
+import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
-import { MenuList } from "./MenuList";
+import {MenuList} from "./MenuList";
-import { Link, useHistory } from "react-router-dom";
+import {Link, useHistory} from "react-router-dom";
 import {
-  HomeOutlined,
+    AlipayOutlined,
-  MenuOutlined,
-  UserOutlined,
-  ProfileOutlined,
     DatabaseOutlined,
     FileAddOutlined,
-  FileSyncOutlined,
     FileProtectOutlined,
+    FileSyncOutlined,
+    HomeOutlined,
+    MenuOutlined,
+    PayCircleOutlined,
+    ProfileOutlined,
     ShoppingCartOutlined,
-  AlipayOutlined,
+    UserOutlined
-  PayCircleOutlined
 } from "@ant-design/icons";
-import { AppRoute, LINKS } from "../../routes/app";
+import {AppRoute, LINKS} from "../../routes/app";
-import { useStore } from "../../utils/useStore";
+import {useStore} from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { useMediaQuery } from "react-responsive";
+import {useMediaQuery} from "react-responsive";
 
-const { Text, Paragraph } = Typography;
+const {Text, Paragraph} = Typography;
-const { Header, Content, Sider } = Layout;
+const {Header, Content, Sider} = Layout;
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 
 export const DesktopLayout = observer(() => {
     let history = useHistory();
-  const xl = useMediaQuery({ minWidth: 1024 });
+    const xl = useMediaQuery({minWidth: 1024});
     const store = useStore();
     const [clicked, setClicked] = useState(false);
 
@@ -460,11 +460,14 @@ export const DesktopLayout = observer(() => {
                         }}
                         mode="inline"
                     >
-                    <Menu.Item key={"profile"}>
+                        {store.authentication.userData.role !== "Admin" && (
+                            <Menu.Item key="profile">
                                 <Link to={LINKS.PROFILE}>
+                                    <UserOutlined/>
                                     <span>Profile</span>
                                 </Link>
                             </Menu.Item>
+                        )}
                         <Menu.Item
                             key={"logout"}
                             onClick={() => {
@@ -478,10 +481,10 @@ export const DesktopLayout = observer(() => {
                 }
                 title={
                   <Text>
-                    {store.user.data.email}{" "}
                       <Paragraph
-                      style={{ fontWeight: 400 }}
+                          style={{fontWeight: 400, marginTop: '0.5rem'}}
                           type={"secondary-dark"}
+                          strong
                       >
                           {store.authentication.userData.username}
                       </Paragraph>