Replace toggle with icon button so it is more clear what the toggle does without adding a label

This commit is contained in:
Gabriel Brown 2024-07-23 13:21:19 -05:00
parent 4dc580bfa2
commit 2835681e2a
5 changed files with 17 additions and 17 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -15,10 +15,8 @@ export default function Sign_Out() {
className="rounded-full border-2 border-white m-auto mr-1 md:mr-2 className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
max-w-[25px] md:max-w-[35px]" max-w-[25px] md:max-w-[35px]"
/> />
<Button onClick={() => signOut()} <Button onClick={() => signOut()} variant="secondary"
className="w-full p-2 rounded-xl text-sm md:text-lg" className="w-full p-2 rounded-xl text-sm md:text-lg"
//bg-gradient-to-tl from-[#35363F] to=[#24191A]
//hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]"
> >
Sign Out Sign Out
</Button> </Button>
@ -26,5 +24,3 @@ export default function Sign_Out() {
); );
} }
}; };
//<User_Avatar session={session} />

View File

@ -8,11 +8,11 @@ export default function Header() {
const { tvMode } = useTVMode(); const { tvMode } = useTVMode();
if (tvMode) { if (tvMode) {
return ( return (
<div className="absolute top-4 right-2"> <div className="absolute top-4 right-2">
<div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4"> <div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4">
< TV_Toggle /> < TV_Toggle />
</div>
</div> </div>
</div>
); );
} else { } else {
return ( return (

View File

@ -1,5 +1,5 @@
"use client"; "use client";
import { Switch } from "~/components/ui/shadcn/switch"; import Image from "next/image";
import { useTVMode } from "~/components/context/TVModeContext"; import { useTVMode } from "~/components/context/TVModeContext";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
@ -8,12 +8,16 @@ export default function TV_Toggle() {
const { data: session } = useSession(); const { data: session } = useSession();
if (!session) return <div/>; if (!session) return <div/>;
return ( return (
<Switch <button onClick={toggleTVMode} className="mr-4 mt-1">
checked={tvMode} {tvMode ? (
onCheckedChange={toggleTVMode} <Image src="/images/exit_fullscreen.png" alt="Exit TV Mode"
className="bg-gradient-to-br from-[#595959] to-[#444444] width={25} height={25}
hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333] />
mx-4 mt-2" ) : (
/> <Image src="/images/fullscreen.png" alt="Enter TV Mode"
width={25} height={25}
/>
)}
</button>
); );
} }