dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

REFACTOR: Update style of shortcut tooltips

Browse Source
This commit is contained in:
Chris-1010
2025-02-27 21:11:50 +00:00
parent 82e6074d23
commit 9f6a4a2d87
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Navigation/Navbar.tsx
View File

@@ -40,7 +40,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
const handleQuickSettings = () => { const handleQuickSettings = () => {
setShowQuickSettings(!showQuickSettings); setShowQuickSettings(!showQuickSettings);
setJustToggled(true); setJustToggled(true);
setTimeout(() => setJustToggled(false), 750); setTimeout(() => setJustToggled(false), 200);
}; };
// Keyboard shortcut to toggle sidebar // Keyboard shortcut to toggle sidebar
@@ -99,7 +99,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
> >
<SettingsIcon className="h-[2vw] w-[2vw]" /> <SettingsIcon className="h-[2vw] w-[2vw]" />
{!showQuickSettings && !justToggled && ( {!showQuickSettings && !justToggled && (
<small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200"> <small className="absolute flex items-center top-0 mr-2 right-0 h-full w-fit text-nowrap font-bold my-auto group-hover:right-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
Press Q Press Q
</small> </small>
)} )}

4
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -48,7 +48,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
const handleSideBar = () => { const handleSideBar = () => {
setShowSideBar(!showSideBar); setShowSideBar(!showSideBar);
setJustToggled(true); setJustToggled(true);
setTimeout(() => setJustToggled(false), 750); setTimeout(() => setJustToggled(false), 200);
}; };
// Keyboard shortcut to toggle sidebar // Keyboard shortcut to toggle sidebar
@@ -102,7 +102,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
<SidebarIcon className="h-[2vw] w-[2vw]" /> <SidebarIcon className="h-[2vw] w-[2vw]" />
{!showSideBar && !justToggled && ( {!showSideBar && !justToggled && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200"> <small className="absolute flex items-center top-0 ml-2 left-0 h-full my-auto w-fit text-nowrap font-bold my-auto group-hover:left-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
Press S Press S
</small> </small>
)} )}

4
frontend/src/components/Stream/ChatPanel.tsx
View File

@@ -116,7 +116,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
const toggleChat = () => { const toggleChat = () => {
setShowChat(!showChat); setShowChat(!showChat);
setJustToggled(true); setJustToggled(true);
setTimeout(() => setJustToggled(false), 750); setTimeout(() => setJustToggled(false), 200);
}; };
const sendChat = () => { const sendChat = () => {
@@ -154,7 +154,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
> >
{showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />} {showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
<small className={`absolute ${showChat ? justToggled ? "left-0 group-hover:-left-[4vw] group-hover:bg-white/10" : "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : justToggled ? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : "left-0 group-hover:-left-[4vw] group-hover:bg-white/10"} p-1 rounded-md w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}> <small className={`absolute ${showChat ? justToggled ? "left-0 group-hover:-left-[5vw] group-hover:bg-white/10" : "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : justToggled ? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"} p-1 rounded-md w-fit text-nowrap font-bold opacity-0 group-hover:opacity-100 text-white transition-all`}>
Press C Press C
</small> </small>
</button> </button>