fix: settings SVGs on mobile

ONEARMY · Dec 5, 2024 · e69bff2 · e69bff2
1 parent b22d497
commit e69bff2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 18 deletions.
diff --git a/src/pages/UserSettings/content/fields/CustomRadio.field.tsx b/src/pages/UserSettings/content/fields/CustomRadio.field.tsx
@@ -1,15 +1,16 @@
 import React from 'react'
-import { Flex, Image, Input, Label, Text } from 'theme-ui'
+import { MemberBadge } from 'oa-components'
+import { Flex, Input, Label, Text } from 'theme-ui'
 
 import { HiddenInput } from '../elements'
 
+import type { ProfileTypeName } from 'oa-shared'
 import type { FieldRenderProps } from 'react-final-form'
 
 interface IProps {
   value: string
   onChange: (value: string) => void
   isSelected: boolean
-  imageSrc?: string
   textLabel?: string
   subText?: string
   name: string
@@ -43,7 +44,6 @@ const isRequired = (value: any) => (value ? undefined : 'Required')
 export const CustomRadioField = (props: IProps) => {
   const {
     value,
-    imageSrc,
     isSelected,
     textLabel,
     subText,
@@ -98,22 +98,17 @@ export const CustomRadioField = (props: IProps) => {
           props.onChange(v.target.value)
         }}
       />
-      {imageSrc && (
-        <Flex
-          sx={{
-            width: ['130px', '130px', '100%'],
-            height: ['130px', '130px', '100%'],
-            alignItems: 'center',
-          }}
-        >
-          <Image loading="lazy" px={3} src={imageSrc} />
-        </Flex>
-      )}
       <Flex
         sx={{
-          flexDirection: 'column',
+          width: ['130px', '130px', '100%'],
+          height: ['130px', '130px', '100%'],
+          alignContent: 'center',
+          padding: 2,
         }}
       >
+        <MemberBadge size={130} profileType={value as ProfileTypeName} />
+      </Flex>
+      <Flex sx={{ flexDirection: 'column' }}>
         {textLabel && (
           <Text
             sx={{

diff --git a/src/pages/UserSettings/content/sections/Focus.section.tsx b/src/pages/UserSettings/content/sections/Focus.section.tsx
@@ -58,9 +58,6 @@ const ProfileTypes = () => {
                     name="profileType"
                     isSelected={profile.label === props.input.value}
                     onChange={(v) => props.input.onChange(v as ProfileTypeName)}
-                    imageSrc={
-                      theme.badges[profile.label]?.normal || profile.imageSrc
-                    }
                     textLabel={profile.textLabel}
                   />
                 </Box>