From 9460935e0a56126deeb8a8613274064bd282f439 Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Wed, 22 Dec 2021 16:58:24 +0700
Subject: [PATCH] style: add margin into profile popover

---
 src/index.css                  |   7 +-
 src/pages/App/DesktopLayout.js | 173 +++++++++++++++++----------------
 2 files changed, 94 insertions(+), 86 deletions(-)

diff --git a/src/index.css b/src/index.css
index 3c1a8ed..18d9f14 100644
--- a/src/index.css
+++ b/src/index.css
@@ -61,8 +61,9 @@ code {
     background-color: #e3e8ee !important;
 }
 .ant-menu-submenu-arrow{
-    padding-right: 40px !important; 
+    padding-right: 40px !important;
 }
+
 .ant-breadcrumb {
     margin-bottom: 10px !important;
 }
@@ -70,4 +71,8 @@ code {
 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
     color: #ed1f24 !important;
     border-color: #ed1f24 !important;
+}
+
+.profile-container .ant-popover-inner-content {
+    padding: 0 !important;
 }
\ No newline at end of file
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index ffe6524..047bd99 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -1,64 +1,64 @@
-import React, { useState } from "react";
-import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
-import { MenuList } from "./MenuList";
-import { Link, useHistory } from "react-router-dom";
+import React, {useState} from "react";
+import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
+import {MenuList} from "./MenuList";
+import {Link, useHistory} from "react-router-dom";
 import {
-  HomeOutlined,
-  MenuOutlined,
-  UserOutlined,
-  ProfileOutlined,
-  DatabaseOutlined,
-  FileAddOutlined,
-  FileSyncOutlined,
-  FileProtectOutlined,
-  ShoppingCartOutlined,
-  AlipayOutlined,
-  PayCircleOutlined
+    AlipayOutlined,
+    DatabaseOutlined,
+    FileAddOutlined,
+    FileProtectOutlined,
+    FileSyncOutlined,
+    HomeOutlined,
+    MenuOutlined,
+    PayCircleOutlined,
+    ProfileOutlined,
+    ShoppingCartOutlined,
+    UserOutlined
 } from "@ant-design/icons";
-import { AppRoute, LINKS } from "../../routes/app";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { useMediaQuery } from "react-responsive";
+import {AppRoute, LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {useMediaQuery} from "react-responsive";
 
-const { Text, Paragraph } = Typography;
-const { Header, Content, Sider } = Layout;
-const { SubMenu } = Menu;
+const {Text, Paragraph} = Typography;
+const {Header, Content, Sider} = Layout;
+const {SubMenu} = Menu;
 
 export const DesktopLayout = observer(() => {
-  let history = useHistory();
-  const xl = useMediaQuery({ minWidth: 1024 });
-  const store = useStore();
-  const [clicked, setClicked] = useState(false);
+    let history = useHistory();
+    const xl = useMediaQuery({minWidth: 1024});
+    const store = useStore();
+    const [clicked, setClicked] = useState(false);
 
-  return (
-    <Layout
-      theme={"light"}
-      className={"transparent"}
-      hasSider={store.ui.mediaQuery.isDesktop}
-      style={{
-        paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
-        display: "flex",
-        // minWidth: 1024,
-        width: "100%",
-        height: "100%",
-        position: "relative",
-      }}
-    >
-      {store.ui.mediaQuery.isDesktop && (
-        <Sider
-          className={"transparent"}
-          width={240}
-          style={{
-            overflowX: "hidden",
-            bottom: 0,
-            justifyContent: "flex-start",
-            paddingTop: 20,
-            paddingLeft: 20,
-            position: "fixed",
-            top: 0,
-            zIndex: 10,
-          }}
+    return (
+        <Layout
+            theme={"light"}
+            className={"transparent"}
+            hasSider={store.ui.mediaQuery.isDesktop}
+            style={{
+                paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
+                display: "flex",
+                // minWidth: 1024,
+                width: "100%",
+                height: "100%",
+                position: "relative",
+            }}
         >
+            {store.ui.mediaQuery.isDesktop && (
+                <Sider
+                    className={"transparent"}
+                    width={240}
+                    style={{
+                        overflowX: "hidden",
+                        bottom: 0,
+                        justifyContent: "flex-start",
+                        paddingTop: 20,
+                        paddingLeft: 20,
+                        position: "fixed",
+                        top: 0,
+                        zIndex: 10,
+                    }}
+                >
           <div
             style={{
               paddingLeft: 20,
@@ -450,41 +450,44 @@ export const DesktopLayout = observer(() => {
                 autoAdjustOverflow={true}
                 placement="bottomRight"
                 content={
-                  <Menu
-                    type={"line"}
-                    inlineIndent={0}
-                    theme="light"
-                    style={{
-                      backgroundColor: "transparent",
-                      borderRightWidth: 0,
-                    }}
-                    mode="inline"
-                  >
-                    <Menu.Item key={"profile"}>
-                      <Link to={LINKS.PROFILE}>
-                        <span>Profile</span>
-                      </Link>
-                    </Menu.Item>
-                    <Menu.Item
-                      key={"logout"}
-                      onClick={() => {
-                        store.authentication.logout();
-                        history.push("/login");
-                      }}
+                    <Menu
+                        type={"line"}
+                        inlineIndent={0}
+                        theme="light"
+                        style={{
+                            backgroundColor: "transparent",
+                            borderRightWidth: 0,
+                        }}
+                        mode="inline"
                     >
-                      <span>Sign out</span>
-                    </Menu.Item>
-                  </Menu>
+                        {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={() => {
+                                store.authentication.logout();
+                                history.push("/login");
+                            }}
+                        >
+                            <span>Sign out</span>
+                        </Menu.Item>
+                    </Menu>
                 }
                 title={
                   <Text>
-                    {store.user.data.email}{" "}
-                    <Paragraph
-                      style={{ fontWeight: 400 }}
-                      type={"secondary-dark"}
-                    >
-                      {store.authentication.userData.username}
-                    </Paragraph>
+                      <Paragraph
+                          style={{fontWeight: 400, marginTop: '0.5rem'}}
+                          type={"secondary-dark"}
+                          strong
+                      >
+                          {store.authentication.userData.username}
+                      </Paragraph>
                   </Text>
                 }
                 trigger="click"