aljaz/sendstr-web
1
0
Fork 0
mirror of https://github.com/aljazceru/sendstr-web.git synced 2025-12-17 06:24:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix switch color bug, add consistent styles, add focus-visible.

Browse Source
This commit is contained in:
Arne Pedersen
2023-01-03 11:18:59 +01:00
parent 67ee28efad
commit 8740bf51f0
2 changed files with 5 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/toggle/index.tsx
View File

@@ -5,20 +5,15 @@ type ToggleProps = {
export const Toggle = ({ checked, onChange }: ToggleProps) => { export const Toggle = ({ checked, onChange }: ToggleProps) => {
return ( return (
<label> <label className="inline-flex relative items-center cursor-pointer">
<input <input
type="checkbox" type="checkbox"
className="absolute overflow-hidden whitespace-nowrap h-[1px] w-[1px]" className="sr-only peer"
checked={checked} checked={checked}
onChange={onChange} onChange={onChange}
readOnly
/> />
<span className="bg-white border-2 border-custom-black rounded-3xl flex h-8 mr-[10px] relative w-16 cursor-pointer"> <div className="w-11 h-6 bg-gray-300 focus:outline-none peer-focus-visible:ring-2 rounded-full dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
<span
className={`flex absolute left-[2px] bottom-[2px] justify-center h-6 w-6 rounded-full items-center transition ${
checked ? "bg-custom-black" : "translate-x-8 bg-custom-black/50"
}`}
></span>
</span>
</label> </label>
) )
} }

2
src/pages/settings/index.tsx
View File

@@ -53,7 +53,7 @@ export default function Settings() {
checked={isDark} checked={isDark}
readOnly readOnly
/> />
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div> <div className="w-11 h-6 bg-gray-300 rounded-full dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary focus:outline-none peer-focus-visible:ring-2"></div>
</div> </div>
</div> </div>
</div> </div>