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;
}
[data-tooltip]:hover::after {
:where(body:not(.noHover)) [data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
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>
);
};

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

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