dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make settings tabbable

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"; colorClasses = "bg-buttons-danger hover:bg-buttons-dangerHover text-white";
let classes = classNames( 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.padding ?? "px-4 py-3",
props.className, props.className,
colorClasses, colorClasses,

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

@ -24,10 +24,11 @@ export function SidebarLink(props: {
onClick?: () => void; onClick?: () => void;
}) { }) {
return ( return (
<div <button
type="button"
onClick={props.onClick} onClick={props.onClick}
className={classNames( 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 props.active
? "bg-settings-sidebar-activeLink text-settings-sidebar-type-activated" ? "bg-settings-sidebar-activeLink text-settings-sidebar-type-activated"
: null : null
@ -41,6 +42,6 @@ export function SidebarLink(props: {
icon={props.icon} icon={props.icon}
/> />
<span>{props.children}</span> <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%)", "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 <button
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" 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} onClick={props.onToggle}
> >
<Icon icon={props.fullscreen ? Icons.X : Icons.EXPAND} /> <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 className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] bottom-0 p-4">
<div <div

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

@ -30,13 +30,14 @@ function ThemePreview(props: {
}) { }) {
return ( return (
<div <div
className={classNames(props.selector, "cursor-pointer group")} className={classNames(props.selector, "cursor-pointer group tabbable")}
onClick={props.onClick} onClick={props.onClick}
> >
{/* Little card thing */} {/* Little card thing */}
<div <div
tabIndex={0}
className={classNames( 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 props.active
? "border-themePreview-primary" ? "border-themePreview-primary"
: "border-transparent group-hover:border-white/20" : "border-transparent group-hover:border-white/20"