Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 03:35:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make settings tabbable

Browse Source
This commit is contained in:
Jip Fr 2023-11-21 19:24:45 +01:00
parent ab167d565a
commit 9f41228a0c
4 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Button.tsx
View File

@ -37,7 +37,7 @@ export function Button(props: Props) {
colorClasses = "bg-buttons-danger hover:bg-buttons-dangerHover text-white";
let classes = classNames(
"cursor-pointer inline-flex items-center justify-center rounded-lg font-medium transition-[transform,background-color] duration-100 active:scale-105 md:px-8",
"tabbable cursor-pointer inline-flex items-center justify-center rounded-lg font-medium transition-[transform,background-color] duration-100 active:scale-105 md:px-8",
props.padding ?? "px-4 py-3",
props.className,
colorClasses,

7
src/components/layout/Sidebar.tsx
View File

@ -24,10 +24,11 @@ export function SidebarLink(props: {
onClick?: () => void;
}) {
return (
<div
<button
type="button"
onClick={props.onClick}
className={classNames(
"w-full px-3 py-2 flex items-center space-x-3 cursor-pointer rounded my-2",
"tabbable w-full px-3 py-2 flex items-center space-x-3 cursor-pointer rounded my-2",
props.active
? "bg-settings-sidebar-activeLink text-settings-sidebar-type-activated"
: null
@ -41,6 +42,6 @@ export function SidebarLink(props: {
icon={props.icon}
/>
<span>{props.children}</span>
</div>
</button>
);
}

7
src/pages/settings/CaptionsPart.tsx
View File

@ -35,12 +35,13 @@ export function CaptionPreview(props: {
"radial-gradient(102.95% 87.07% at 100% 100%, #EEAA45 0%, rgba(165, 186, 151, 0.56) 54.69%, rgba(74, 207, 254, 0.00) 100%), linear-gradient(180deg, #48D3FF 0%, #3B27B2 100%)",
}}
>
<div
className="bg-black absolute right-3 top-3 text-white bg-opacity-25 duration-100 transition-[background-color,transform] active:scale-110 hover:bg-opacity-50 p-2 rounded-md cursor-pointer"
<button
type="button"
className="tabbable bg-black absolute right-3 top-3 text-white bg-opacity-25 duration-100 transition-[background-color,transform] active:scale-110 hover:bg-opacity-50 p-2 rounded-md cursor-pointer"
onClick={props.onToggle}
>
<Icon icon={props.fullscreen ? Icons.X : Icons.EXPAND} />
</div>
</button>
<div className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] bottom-0 p-4">
<div

5
src/pages/settings/ThemePart.tsx
View File

@ -30,13 +30,14 @@ function ThemePreview(props: {
}) {
return (
<div
className={classNames(props.selector, "cursor-pointer group")}
className={classNames(props.selector, "cursor-pointer group tabbable")}
onClick={props.onClick}
>
{/* Little card thing */}
<div
tabIndex={0}
className={classNames(
"w-full h-32 relative rounded-lg border bg-gradient-to-br from-themePreview-primary/20 to-themePreview-secondary/10 bg-clip-content transition-colors duration-150",
"tabbable scroll-mt-32 w-full h-32 relative rounded-lg border bg-gradient-to-br from-themePreview-primary/20 to-themePreview-secondary/10 bg-clip-content transition-colors duration-150",
props.active
? "border-themePreview-primary"
: "border-transparent group-hover:border-white/20"