mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 12:18:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

UI: Make the Admin menu sidebar colors on hover consistent (#2778)

Browse source 
* 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
This commit is contained in:
Pranav Joglekar 2023-03-06 10:16:31 +05:30 committed by GitHub
parent febfa0917f
commit f6a2e8d3a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/assets/images/icons/fediverse.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

19
web/components/admin/MainLayout.tsx
View file

@ -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>
),
},
{

19
web/styles/ant-overrides.scss
View file

@ -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);
}