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 @@
+
+
+
+
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 = ({ children }) => {
key: 'fediverse-followers',
label: Followers,
icon: (
-
+
+ {/* Wrapping the icon in span for consistency with other icons used
+ directly from antd */}
+
+
),
},
{
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);
+}