Base search/skin icon size on fontSize

tunoltd · Jan 10, 2022 · 26920d1 · 26920d1
1 parent 36ad7d9
commit 26920d1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/components/search.js b/src/components/search.js
@@ -143,6 +143,7 @@ export default class Search extends React.PureComponent {
       theme,
       fontSize,
     } = this.props
+    const iconSize = Math.round(fontSize * 1.6)
     const {searchTerm} = this.state
 
     let background
@@ -176,7 +177,10 @@ export default class Search extends React.PureComponent {
             style={[styles.closeButton]}
           >
             <Image
-              style={styles.closeButtonIcon}
+              style={[
+                styles.closeButtonIcon,
+                {width: iconSize, height: iconSize},
+              ]}
               source={
                 theme === 'light' ? arrowBackIconLight : arrowBackIconDark
               }
@@ -206,7 +210,10 @@ export default class Search extends React.PureComponent {
             style={[styles.closeButton]}
           >
             <Image
-              style={styles.closeButtonIcon}
+              style={[
+                styles.closeButtonIcon,
+                {width: iconSize, height: iconSize},
+              ]}
               source={theme === 'light' ? clearIconLight : clearIconDark}
             />
           </Touchable>
@@ -220,7 +227,7 @@ export default class Search extends React.PureComponent {
                 {...skinsProps}
               />
             ) : (
-              <Skins theme={theme} {...skinsProps} />
+              <Skins theme={theme} iconSize={iconSize} {...skinsProps} />
             )}
           </View>
         )}

diff --git a/src/components/skins.js b/src/components/skins.js
@@ -23,17 +23,11 @@ const styles = StyleSheet.create({
     paddingRight: 2,
   },
   skin: {
-    width: 16,
-    height: 16,
-    borderRadius: 32,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
   },
   skinSelected: {
-    width: 6,
-    height: 6,
-    borderRadius: 12,
     backgroundColor: 'rgba(255, 255, 255, 0.75)',
   },
   skinTone1: {
@@ -79,11 +73,14 @@ export default class Skins extends React.PureComponent {
   }
 
   render() {
-    const {skin, theme} = this.props
+    const {skin, theme, iconSize} = this.props
     const {opened} = this.state
 
     const skinToneNodes = []
 
+    const skinSize = Math.round(iconSize * 0.6666666666666666)
+    const skinSelectedSize = skinSize / 2
+
     for (let skinTone = 1; skinTone <= 6; skinTone++) {
       const selected = skinTone === skin
 
@@ -94,9 +91,28 @@ export default class Skins extends React.PureComponent {
               onPress={this.handlePress.bind(this, skinTone)}
               style={[styles.skin, styles[`skinTone${skinTone}`]]}
             >
-              <View style={[styles.skin, styles[`skinTone${skinTone}`]]}>
+              <View
+                style={[
+                  styles.skin,
+                  {
+                    width: skinSize,
+                    height: skinSize,
+                    borderRadius: skinSize / 2,
+                  },
+                  styles[`skinTone${skinTone}`],
+                ]}
+              >
                 {selected && opened ? (
-                  <View style={styles.skinSelected} />
+                  <View
+                    style={[
+                      styles.skinSelected,
+                      {
+                        width: skinSelectedSize,
+                        height: skinSelectedSize,
+                        borderRadius: skinSelectedSize / 2,
+                      },
+                    ]}
+                  />
                 ) : null}
               </View>
             </TouchableWithoutFeedback>