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: ( - fediverse 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); +}