Fix preferences warnings

web/src/components/Pref.jsx

@@ -11,14 +11,14 @@ const PrefRow = styled("div")`
   display: flex;
   flex-direction: row;
 
-  > :first-child {
+  > div:first-of-type {
     flex: 1 0 40%;
     display: flex;
     flex-direction: column;
     justify-content: ${(props) => (props.alignTop ? "normal" : "center")};
   }
 
-  > :last-child {
+  > div:last-of-type {
     flex: 1 0 calc(60% - 50px);
     display: flex;
     flex-direction: column;
@@ -29,12 +29,12 @@ const PrefRow = styled("div")`
     flex-direction: column;
     gap: 10px;
 
-    > :first-child,
-    > :last-child {
+    > :div:first-of-type,
+    > :div:last-of-type {
       flex: unset;
     }
 
-    > :last-child {
+    > div:last-of-type {
       .MuiFormControl-root {
         margin: 0;
       }

web/src/components/Preferences.jsx

@@ -241,7 +241,7 @@ const DeleteAfter = () => {
 const Theme = () => {
   const { t } = useTranslation();
   const labelId = "prefTheme";
-  const enabled = useLiveQuery(async () => prefs.theme());
+  const theme = useLiveQuery(async () => prefs.theme());
   const handleChange = async (ev) => {
     await prefs.setTheme(ev.target.value);
   };
@@ -249,7 +249,7 @@ const Theme = () => {
   return (
     <Pref labelId={labelId} title={t("prefs_appearance_theme_title")}>
       <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
-        <Select value={enabled ?? false} onChange={handleChange} aria-labelledby={labelId}>
+        <Select value={theme ?? THEME.SYSTEM} onChange={handleChange} aria-labelledby={labelId}>
           <MenuItem value={THEME.SYSTEM}>{t("prefs_appearance_theme_system")}</MenuItem>
           <MenuItem value={THEME.DARK}>{t("prefs_appearance_theme_dark")}</MenuItem>
           <MenuItem value={THEME.LIGHT}>{t("prefs_appearance_theme_light")}</MenuItem>