crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 23:16:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Requested style changes

Browse Source
This commit is contained in:
cond0r 2022-11-30 08:12:26 +02:00
parent 49d713512a
commit e222a52585
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/components/common/I18nWidget/I18nWidget.module.css
View File

@ -3,7 +3,7 @@
} }
.button { .button {
@apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear; @apply h-10 pl-2 pr-0.5 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear;
} }
.button:hover { .button:hover {

13
site/components/ui/ThemeSwitcher/ThemeSwitcher.tsx
View File

@ -18,12 +18,21 @@ const ThemeSwitcher = () => {
> >
<button <button
className={ className={
'h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear hover:border-accent-3 hover:shadow-sm' 'w-[110px] h-10 pl-2 pr-0.5 rounded-md border border-accent-2 flex items-center justify-between transition-colors ease-linear hover:border-accent-3 hover:shadow-sm'
} }
aria-label="Theme Switcher" aria-label="Theme Switcher"
> >
<span className="flex items-center">
<ThemeIcon width={20} height={20} theme={theme} /> <ThemeIcon width={20} height={20} theme={theme} />
<span className="capitalize leading-none ml-2">{theme}</span> <span
className={cn('capitalize leading-none', {
'text-sm ml-1.5': theme === 'system',
'ml-2': theme !== 'system',
})}
>
{theme}
</span>
</span>
<span className="cursor-pointer"> <span className="cursor-pointer">
<ChevronRight <ChevronRight
className={cn('transition duration-300', { className={cn('transition duration-300', {

3
site/lib/hooks/useToggleTheme.ts
View File

@ -3,7 +3,8 @@ import { useEffect, useState } from 'react'
export const useToggleTheme = () => { export const useToggleTheme = () => {
const { theme, themes, setTheme } = useTheme() const { theme, themes, setTheme } = useTheme()
const [themeValue, setThemeValue] = useState<string>() const [themeValue, setThemeValue] = useState<string>('system')
useEffect(() => setThemeValue(theme), [theme]) useEffect(() => setThemeValue(theme), [theme])
return { theme: themeValue, setTheme, themes } return { theme: themeValue, setTheme, themes }