Use the Checkbox component to change theme

Fix #114

packages/components/src/components/widgets/ThemePreference.tsx

@@ -5,13 +5,13 @@ import { Theme } from '@devhub/core'
 import { useCSSVariablesOrSpringAnimatedTheme } from '../../hooks/use-css-variables-or-spring--animated-theme'
 import { useReduxAction } from '../../hooks/use-redux-action'
 import { useReduxState } from '../../hooks/use-redux-state'
-import { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import * as selectors from '../../redux/selectors'
 import { darkThemesArr, lightThemesArr } from '../../styles/themes'
 import { defaultTheme } from '../../styles/utils'
 import { contentPadding } from '../../styles/variables'
 import { SpringAnimatedText } from '../animated/spring/SpringAnimatedText'
+import { SpringAnimatedCheckbox } from '../common/Checkbox'
 import { H3 } from '../common/H3'
 import { Spacer } from '../common/Spacer'
 import { SubHeader } from '../common/SubHeader'
@@ -52,84 +52,28 @@ export const ThemePreference = React.memo(() => {
           : theme.id === preferredLightThemeId))
 
     return (
-      <TouchableOpacity
+      <SpringAnimatedCheckbox
         analyticsLabel={undefined}
-        key={`theme-button-${theme.id}`}
-        onPress={() => {
-          setTheme({
-            id: theme.id,
-            color: theme.backgroundColor,
-          })
-        }}
-        style={{
+        key={`theme-item-checkbox-${theme.id}`}
+        checked={selected ? (currentThemeId === 'auto' ? null : true) : false}
+        circle
+        containerStyle={{
           marginBottom: contentPadding / 2,
         }}
-      >
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <View
-            style={{
-              alignItems: 'center',
-              alignContent: 'center',
-              justifyContent: 'center',
-              marginRight: contentPadding / 2,
-              width: 20,
-              height: 20,
-              borderRadius: 20 / 2,
-              borderWidth: 0,
-              borderColor: 'transparent',
-            }}
-          >
-            <SpringAnimatedText
-              key={`theme-item-icon-${theme.id}`}
-              style={{
-                alignSelf: 'center',
-                margin: 0,
-                padding: 0,
-                fontWeight: '500',
-                ...Platform.select({
-                  android: {
-                    height: 20,
-                    marginTop: -1,
-                    fontFamily: 'monospace',
-                    fontSize: 30,
-                    lineHeight: 30,
-                  },
-                  default: {
-                    fontSize: 20,
-                    lineHeight: 20,
-                  },
-                }),
-                color: springAnimatedTheme.foregroundColor,
-                textAlign: 'center',
-              }}
-            >
-              {selected
-                ? currentThemeId === 'auto'
-                  ? theme.isDark
-                    ? '◒'
-                    : '◓'
-                  : '◉'
-                : '○'}
-            </SpringAnimatedText>
-          </View>
-
-          <SpringAnimatedText
-            key={`theme-item-name-${theme.id}`}
-            style={{
-              alignSelf: 'center',
-              lineHeight: 20,
-              color: springAnimatedTheme.foregroundColor,
-            }}
-          >
-            {theme.displayName}
-          </SpringAnimatedText>
-        </View>
-      </TouchableOpacity>
+        enableIndeterminateState={currentThemeId === 'auto'}
+        label={theme.displayName}
+        onChange={checked => {
+          if (
+            checked === true ||
+            (currentThemeId === 'auto' && checked === null)
+          ) {
+            setTheme({
+              id: theme.id,
+              color: theme.backgroundColor,
+            })
+          }
+        }}
+      />
     )
   }