crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 15:06: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 {
@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 {

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

@ -18,12 +18,21 @@ const ThemeSwitcher = () => {
>
<button
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"
>
<ThemeIcon width={20} height={20} theme={theme} />
<span className="capitalize leading-none ml-2">{theme}</span>
<span className="flex items-center">
<ThemeIcon width={20} height={20} theme={theme} />
<span
className={cn('capitalize leading-none', {
'text-sm ml-1.5': theme === 'system',
'ml-2': theme !== 'system',
})}
>
{theme}
</span>
</span>
<span className="cursor-pointer">
<ChevronRight
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 = () => {
const { theme, themes, setTheme } = useTheme()
const [themeValue, setThemeValue] = useState<string>()
const [themeValue, setThemeValue] = useState<string>('system')
useEffect(() => setThemeValue(theme), [theme])
return { theme: themeValue, setTheme, themes }