src/app/features/settings/general/General.tsx

@@ -33,6 +33,7 @@ import {
   Switch,
   Text,
   toRem,
+  RadioButton,
 } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
 import { HexColorPicker } from 'react-colorful';
@@ -1692,11 +1693,12 @@ export function Privacy() {
               key={value}
               style={{ display: 'flex', gap: config.space.S200, cursor: 'pointer' }}
             >
-              <input
-                type="radio"
+              <RadioButton
                 name="activity-privacy"
+                variant="Primary"
+                size="300"
                 checked={activity === value}
-                onChange={() => chooseActivity(value)}
+                onClick={() => chooseActivity(value)}
               />
               <Box direction="Column">
                 <Text size="T300">{label}</Text>

src/app/features/settings/general/YourData.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { useAtom } from 'jotai';
 import { Method } from 'matrix-js-sdk';
-import { Box, Button, Text, color } from 'folds';
+import { Box, Button, RadioButton, Text, color } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -224,22 +224,24 @@ export function YourDataSection() {
                   here:
                 </Text>
                 <label>
-                  <input
-                    type="radio"
+                  <RadioButton
                     name="your-data-conflicts"
+                    variant="Primary"
+                    size="300"
                     checked={!preferFile}
-                    onChange={() => setPreferFile(false)}
+                    onClick={() => setPreferFile(false)}
                   />{' '}
                   <Text as="span" size="T200">
                     Keep mine
                   </Text>
                 </label>
                 <label>
-                  <input
-                    type="radio"
+                  <RadioButton
                     name="your-data-conflicts"
+                    variant="Primary"
+                    size="300"
                     checked={preferFile}
-                    onChange={() => setPreferFile(true)}
+                    onClick={() => setPreferFile(true)}
                   />{' '}
                   <Text as="span" size="T200">
                     Use the file&apos;s