Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Theme the focus ring

Browse Source
This commit is contained in:
Zoe Roux 2022-12-06 15:13:24 +09:00
parent 869c1fbe51
commit 1f049952cc
2 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
front/packages/primitives/src/tooltip.tsx
View File

@ -60,10 +60,22 @@ export const WebTooltip = ({ theme }: { theme: Theme }) => {
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
} }
[data-tooltip]:hover::after { :where(body:not(.noHover)) [data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: none;
transition: box-shadow 0.15s ease-in-out;
box-shadow: 0 0 0 2px ${theme.colors.black};
/* box-shadow: ${theme.accent} 1px; */
}
`}</style> `}</style>
); );
}; };

50
front/packages/ui/src/navbar/index.tsx
View File

@ -21,35 +21,46 @@
import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models"; import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models";
import { IconButton, Header, Avatar, A, Skeleton, tooltip, ts } from "@kyoo/primitives"; import { IconButton, Header, Avatar, A, Skeleton, tooltip, ts } from "@kyoo/primitives";
import { View } from "react-native"; import { View } from "react-native";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { rem, useYoshiki } from "yoshiki/native"; import { rem, Stylable, useYoshiki } from "yoshiki/native";
import { Fetch } from "../fetch"; import { Fetch } from "../fetch";
import { KyooLongLogo } from "./icon"; import { KyooLongLogo } from "./icon";
export const NavbarTitle = KyooLongLogo; export const NavbarTitle = (props: Stylable) => {
const { t } = useTranslation();
export const Navbar = () => { return (
<A href="/" {...tooltip(t("navbar.home"))} {...props}>
<KyooLongLogo />
</A>
);
};
export const Navbar = (props: Stylable) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Header <Header
{...css({ {...css(
backgroundColor: (theme) => theme.appbar, {
paddingX: ts(2), backgroundColor: (theme) => theme.appbar,
height: { xs: 48, sm: 64 }, paddingX: ts(2),
flexDirection: "row", height: { xs: 48, sm: 64 },
justifyContent: { xs: "space-between", sm: "flex-start" }, flexDirection: "row",
alignItems: "center", justifyContent: { xs: "space-between", sm: "flex-start" },
shadowColor: "#000", alignItems: "center",
shadowOffset: { shadowColor: "#000",
width: 0, shadowOffset: {
height: 4, width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
}, },
shadowOpacity: 0.3, props,
shadowRadius: 4.65, )}
elevation: 8,
})}
> >
<IconButton <IconButton
icon="menu" icon="menu"
@ -92,7 +103,6 @@ export const Navbar = () => {
<A href="/auth/login" {...tooltip(t("navbar.login"))}> <A href="/auth/login" {...tooltip(t("navbar.login"))}>
<Avatar alt={t("navbar.login")} size={30} /> <Avatar alt={t("navbar.login")} size={30} />
</A> </A>
{/* {isError && <ErrorSnackbar error={error} />} */}
</Header> </Header>
); );
}; };