FreakU
/
canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Dark mode] Fix transparent buttons & dissapearing borders on palette

This commit is contained in:
Ategon Dev 2024-07-15 16:29:28 +00:00 committed by Grant
parent 7f7930761c
commit e4c7327b5e
6 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/Chat/OpenChatButton.tsx
View File

@ -19,7 +19,7 @@ const OpenChatButton = () => {
config?.chat?.element_host && config?.chat?.element_host &&
<Button <Button
onPress={doLogin} onPress={doLogin}
variant="ghost" variant="faded"
> >
<FontAwesomeIcon icon={faComments} /> <FontAwesomeIcon icon={faComments} />
<p>Chat</p> <p>Chat</p>

4
packages/client/src/components/Header/HeaderLeft.tsx
View File

@ -13,7 +13,7 @@ export const HeaderLeft = () => {
<AccountStanding /> <AccountStanding />
<Button <Button
onPress={() => setInfoSidebar(true)} onPress={() => setInfoSidebar(true)}
variant="ghost" variant="faded"
> >
<FontAwesomeIcon icon={faInfoCircle} /> <FontAwesomeIcon icon={faInfoCircle} />
<p>Info</p> <p>Info</p>
@ -21,7 +21,7 @@ export const HeaderLeft = () => {
{import.meta.env.DEV && ( {import.meta.env.DEV && (
<Button <Button
onPress={() => Debug.openDebugTools()} onPress={() => Debug.openDebugTools()}
variant="ghost" variant="faded"
> >
<FontAwesomeIcon icon={faTools} /> <FontAwesomeIcon icon={faTools} />
<p>Debug Tools</p> <p>Debug Tools</p>

4
packages/client/src/components/Header/HeaderRight.tsx
View File

@ -23,14 +23,14 @@ export const HeaderRight = () => {
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
onClick={() => setSettingsSidebar(true)} onClick={() => setSettingsSidebar(true)}
variant="ghost" variant="faded"
> >
<FontAwesomeIcon icon={faGear} /> <FontAwesomeIcon icon={faGear} />
<p>Settings</p> <p>Settings</p>
</Button> </Button>
<ThemeSwitcher /> <ThemeSwitcher />
{hasAdmin && ( {hasAdmin && (
<Button href="/admin" target="_blank" as={Link} variant="ghost" > <Button href="/admin" target="_blank" as={Link} variant="faded" >
<FontAwesomeIcon icon={faHammer} /> <FontAwesomeIcon icon={faHammer} />
<p>Admin</p> <p>Admin</p>
</Button> </Button>

2
packages/client/src/components/Header/ThemeSwitcher.tsx
View File

@ -26,7 +26,7 @@ export function ThemeSwitcher() {
if(!mounted) return null if(!mounted) return null
return ( return (
<Button onClick={() => { setToggle(!isToggled) }} variant="ghost"> <Button onClick={() => { setToggle(!isToggled) }} variant="faded">
<Classic toggled={isToggled} placeholder={undefined} /> <Classic toggled={isToggled} placeholder={undefined} />
<p>{theme === 'dark' ? "Dark" : "Light"}</p> <p>{theme === 'dark' ? "Dark" : "Light"}</p>
</Button> </Button>

4
packages/client/src/components/PixelWhoisSidebar.tsx
View File

@ -77,7 +77,7 @@ export const PixelWhoisSidebar = () => {
return ( return (
<div <div
className="sidebar sidebar-right" className="sidebar sidebar-right bg-white dark:bg-black text-black dark:text-white"
style={{ ...(pixelWhois ? {} : { display: "none" }) }} style={{ ...(pixelWhois ? {} : { display: "none" }) }}
> >
{loading && ( {loading && (
@ -95,7 +95,7 @@ export const PixelWhoisSidebar = () => {
<FontAwesomeIcon icon={faXmark} /> <FontAwesomeIcon icon={faXmark} />
</Button> </Button>
</header> </header>
<div className="w-full h-52 bg-gray-200 flex justify-center items-center"> <div className="w-full h-52 bg-gray-200 dark:bg-gray-800 flex justify-center items-center">
<div className="w-[128px] h-[128px] bg-white"> <div className="w-[128px] h-[128px] bg-white">
<SmallCanvas <SmallCanvas
surrounding={pixelWhois?.surrounding} surrounding={pixelWhois?.surrounding}

3
packages/client/src/components/Toolbar/Palette.scss
View File

@ -40,7 +40,6 @@
vertical-align: top; vertical-align: top;
font-size: 2rem; font-size: 2rem;
line-height: 1; line-height: 1;
color: #000;
border: 0; border: 0;
background: transparent; background: transparent;
@ -49,7 +48,7 @@
.pallete-color { .pallete-color {
width: 36px; width: 36px;
height: 36px; height: 36px;
border: 2px solid #000; border: 2px solid;
border-radius: 3px; border-radius: 3px;
transition: transform 0.25s; transition: transform 0.25s;
cursor: pointer; cursor: pointer;