[dashboard] Update theme preference selector

Author: jankeromnes

components/dashboard/src/settings/Preferences.tsx

@@ -59,11 +59,23 @@ export default function Preferences() {
                 </SelectableCard>
             </div>
             <h3 className="mt-12">Theme</h3>
-            <p className="text-base text-gray-500">Light or dark?</p>
+            <p className="text-base text-gray-500">Early bird or night owl? Choose your side.</p>
             <div className="mt-4 space-x-4 flex">
-                <label><input type="radio" name="theme" value="system" checked={theme === 'system'} onChange={() => actuallySetTheme('system')}></input> System</label>
-                <label><input type="radio" name="theme" value="dark" checked={theme === 'dark'} onChange={() => actuallySetTheme('dark')}></input> Dark</label>
-                <label><input type="radio" name="theme" value="light" checked={theme === 'light'} onChange={() => actuallySetTheme('light')}></input> Light</label>
+                <SelectableCard className="w-36 h-40" title="Light" selected={theme === 'light'} onClick={() => actuallySetTheme('light')}>
+                    <div className="flex-grow flex justify-center align-center">
+                        <svg className="h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 108 64"><rect width="68" height="40" x="40" fill="#C4C4C4" rx="8"/><rect width="32" height="16" fill="#C4C4C4" rx="8"/><rect width="32" height="16" y="24" fill="#C4C4C4" rx="8"/><rect width="32" height="16" y="48" fill="#C4C4C4" rx="8"/></svg>
+                    </div>
+                </SelectableCard>
+                <SelectableCard className="w-36 h-40" title="Dark" selected={theme === 'dark'} onClick={() => actuallySetTheme('dark')}>
+                    <div className="flex-grow flex justify-center align-center">
+                        <svg className="h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 108 64"><rect width="68" height="40" x="40" fill="#737373" rx="8"/><rect width="32" height="16" fill="#737373" rx="8"/><rect width="32" height="16" y="24" fill="#737373" rx="8"/><rect width="32" height="16" y="48" fill="#737373" rx="8"/></svg>
+                    </div>
+                </SelectableCard>
+                <SelectableCard className="w-36 h-40" title="System" selected={theme === 'system'} onClick={() => actuallySetTheme('system')}>
+                    <div className="flex-grow flex justify-center align-center">
+                        <svg className="h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 108 64"><rect width="68" height="40" x="40" fill="#C4C4C4" rx="8"/><path fill="#737373" d="M74.111 3.412A8 8 0 0180.665 0H100a8 8 0 018 8v24a8 8 0 01-8 8H48.5L74.111 3.412z"/><rect width="32" height="16" fill="#C4C4C4" rx="8"/><rect width="32" height="16" y="24" fill="#737373" rx="8"/><rect width="32" height="16" y="48" fill="#C4C4C4" rx="8"/></svg>
+                    </div>
+                </SelectableCard>
             </div>
         </PageWithSubMenu>
     </div>;