Replace toggle with icon button so it is more clear what the toggle does without adding a label
This commit is contained in:
parent
4dc580bfa2
commit
2835681e2a
BIN
public/images/exit_fullscreen.png
Normal file
BIN
public/images/exit_fullscreen.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
BIN
public/images/fullscreen.png
Normal file
BIN
public/images/fullscreen.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
@ -15,10 +15,8 @@ export default function Sign_Out() {
|
||||
className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
|
||||
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"
|
||||
//bg-gradient-to-tl from-[#35363F] to=[#24191A]
|
||||
//hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]"
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
@ -26,5 +24,3 @@ export default function Sign_Out() {
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
//<User_Avatar session={session} />
|
||||
|
@ -8,11 +8,11 @@ export default function Header() {
|
||||
const { tvMode } = useTVMode();
|
||||
if (tvMode) {
|
||||
return (
|
||||
<div className="absolute top-4 right-2">
|
||||
<div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4">
|
||||
< TV_Toggle />
|
||||
</div>
|
||||
<div className="absolute top-4 right-2">
|
||||
<div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4">
|
||||
< TV_Toggle />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
|
@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { Switch } from "~/components/ui/shadcn/switch";
|
||||
import Image from "next/image";
|
||||
import { useTVMode } from "~/components/context/TVModeContext";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
@ -8,12 +8,16 @@ export default function TV_Toggle() {
|
||||
const { data: session } = useSession();
|
||||
if (!session) return <div/>;
|
||||
return (
|
||||
<Switch
|
||||
checked={tvMode}
|
||||
onCheckedChange={toggleTVMode}
|
||||
className="bg-gradient-to-br from-[#595959] to-[#444444]
|
||||
hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
|
||||
mx-4 mt-2"
|
||||
/>
|
||||
<button onClick={toggleTVMode} className="mr-4 mt-1">
|
||||
{tvMode ? (
|
||||
<Image src="/images/exit_fullscreen.png" alt="Exit TV Mode"
|
||||
width={25} height={25}
|
||||
/>
|
||||
) : (
|
||||
<Image src="/images/fullscreen.png" alt="Enter TV Mode"
|
||||
width={25} height={25}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user