From f6a2e8d3a2dd9ab207bb3f8d4c9ce0bdd5abfaea Mon Sep 17 00:00:00 2001
From: Pranav Joglekar <pranav2000joglekar@gmail.com>
Date: Mon, 6 Mar 2023 10:16:31 +0530
Subject: [PATCH] UI: Make the Admin menu sidebar colors on hover consistent
 (#2778)

* ui: overwrite default antd menu-item hover colors for consistency

* ui fix: make the hover color of icon and text consistent in admin sidebar

* fix: make the 'followers'  menuitem icon consistent with other sidebar icons
---
 web/assets/images/icons/fediverse.svg | 11 +++++++++++
 web/components/admin/MainLayout.tsx   | 19 +++++++++++++------
 web/styles/ant-overrides.scss         | 19 +++++++++++++++++++
 3 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 web/assets/images/icons/fediverse.svg

diff --git a/web/assets/images/icons/fediverse.svg b/web/assets/images/icons/fediverse.svg
new file mode 100644
index 000000000..38ccb22b6
--- /dev/null
+++ b/web/assets/images/icons/fediverse.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="64 64 896 896" focusable="false" data-icon="fediverse" width="1em" height="1em" fill="currentColor" aria-hidden="true"> 
+   <path
+d="M539 176q-32 0 -55 22t-25 55t20.5 58t56 27t58.5 -20.5t27 -56t-20.5 -59t-56.5 -26.5h-5zM452 271l-232 118q20 20 25 48l231 -118q-19 -20 -24 -48zM619 298q-13 25 -38 38l183 184q13 -25 39 -38zM477 320l-135 265l40 40l143 -280q-28 -5 -48 -25zM581 336
+q-22 11 -46 10l-8 -1l21 132l56 9zM155 370q-32 0 -55 22.5t-25 55t20.5 58t56.5 27t59 -21t26.5 -56t-21 -58.5t-55.5 -27h-6zM245 438q1 9 1 18q-1 19 -10 35l132 21l26 -50zM470 474l-26 51l311 49q-1 -8 -1 -17q1 -19 10 -36zM842 480q-32 1 -55 23t-24.5 55t21 58
+t56 27t58.5 -20.5t27 -56.5t-20.5 -59t-56.5 -27h-6zM236 493q-13 25 -39 38l210 210l51 -25zM196 531q-21 11 -44 10l-9 -1l40 256q21 -10 45 -9l8 1zM560 553l48 311q21 -10 44 -9l10 1l-46 -294zM755 576l-118 60l8 56l135 -68q-20 -20 -25 -48zM781 625l-119 231
+q28 5 48 25l119 -231q-28 -5 -48 -25zM306 654l-68 134q28 5 48 25l60 -119zM568 671l-281 143q19 20 24 48l265 -135zM513 771l-51 25l106 107q13 -25 39 -38zM222 795q-32 0 -55.5 22.5t-25 55t21 57.5t56 27t58.5 -20.5t27 -56t-20.5 -58.5t-56.5 -27h-5zM311 863
+q2 9 1 18q-1 19 -9 35l256 41q-1 -9 -1 -18q1 -18 10 -35zM646 863q-32 0 -55 22.5t-24.5 55t20.5 58t56 27t59 -21t27 -56t-20.5 -58.5t-56.5 -27h-6z" />
+</svg>
diff --git a/web/components/admin/MainLayout.tsx b/web/components/admin/MainLayout.tsx
index 367974f56..05d8f5fe8 100644
--- a/web/components/admin/MainLayout.tsx
+++ b/web/components/admin/MainLayout.tsx
@@ -61,6 +61,10 @@ const EditOutlined = dynamic(() => import('@ant-design/icons/EditOutlined'), {
   ssr: false,
 });
 
+const FediverseOutlined = dynamic(() => import('../../assets/images/icons/fediverse.svg'), {
+  ssr: false,
+});
+
 export type MainLayoutProps = {
   children: ReactNode;
 };
@@ -232,12 +236,15 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
       key: 'fediverse-followers',
       label: <Link href="/admin/federation/followers">Followers</Link>,
       icon: (
-        <img
-          alt="fediverse icon"
-          src="/img/fediverse-black.png"
-          width="17rem"
-          style={{ opacity: 0.6, position: 'relative', top: '-1px' }}
-        />
+        <span
+          role="img"
+          aria-label="message"
+          className="anticon anticon-message ant-menu-item-icon"
+        >
+          {/* Wrapping the icon in span for consistency with other icons used
+            directly from antd */}
+          <FediverseOutlined />
+        </span>
       ),
     },
     {
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 020c6bb3b..2f6fb3afd 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -218,3 +218,22 @@ th {
 .ant-popover {
   z-index: 800; // Lower the z-index so it renders under modals.
 }
+
+/* ------------------------- //
+ * SIDER MENUITEM
+// ------------------------- */
+.ant-menu-light .ant-menu-submenu-title:active {
+  background: var(--theme-color-palette-12);
+}
+
+.ant-menu-light .ant-menu-submenu-title:hover {
+  color: var(--theme-color-palette-12);
+}
+
+.ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
+  color: var(--theme-color-palette-12);
+}
+
+.ant-menu-light .ant-menu-item:hover {
+  color: var(--theme-color-palette-12);
+}