Fix column header content vertical alignment

packages/components/src/components/columns/ColumnHeaderItem.tsx

@@ -13,7 +13,6 @@ import { useAnimatedTheme } from '../../hooks/use-animated-theme'
 import { useReduxState } from '../../redux/hooks/use-redux-state'
 import * as selectors from '../../redux/selectors'
 import {
-  columnHeaderItemContentBiggerSize,
   columnHeaderItemContentSize,
   contentPadding,
 } from '../../styles/variables'
@@ -110,14 +109,18 @@ export function ColumnHeaderItem(props: ColumnHeaderItemProps) {
 
     icon: {
       height: size,
+      lineHeight: size,
       fontSize: size,
     } as TextStyle,
 
     title: {
+      marginRight: contentPadding / 2,
+      lineHeight: size,
       fontSize: size - 2,
     } as TextStyle,
 
     subtitle: {
+      marginRight: contentPadding / 2,
       fontSize: size - 7,
     } as TextStyle,
 
@@ -172,6 +175,7 @@ export function ColumnHeaderItem(props: ColumnHeaderItemProps) {
             <View
               style={{
                 position: 'relative',
+                alignSelf: 'center',
                 alignContent: 'center',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -210,47 +214,44 @@ export function ColumnHeaderItem(props: ColumnHeaderItemProps) {
               )}
             </View>
           )}
-          {hasText && (
+
+          <View style={{ flexDirection: 'row', maxWidth: 170 }}>
+            {!!title && (
+              <Animated.Text
+                numberOfLines={1}
+                selectable={selectable}
+                style={[
+                  styles.title,
+                  { color: theme.foregroundColor },
+                  titleStyle,
+                ]}
+              >
+                {title.toLowerCase()}
+              </Animated.Text>
+            )}
+          </View>
+
+          {!!subtitle && (
             <Animated.Text
               numberOfLines={1}
               selectable={selectable}
-              style={[{ color: theme.foregroundColorMuted50 }]}
+              style={[
+                styles.subtitle,
+                { color: theme.foregroundColorMuted50 },
+                subtitleStyle,
+              ]}
             >
-              {!!title && (
-                <Animated.Text
-                  selectable={selectable}
-                  style={[
-                    styles.title,
-                    { color: theme.foregroundColor },
-                    titleStyle,
-                  ]}
-                >
-                  {title.toLowerCase()}
-                  {!!subtitle && '  '}
-                </Animated.Text>
-              )}
+              {subtitle.toLowerCase()}
+            </Animated.Text>
+          )}
 
-              {!!subtitle && (
-                <Animated.Text
-                  selectable={selectable}
-                  style={[
-                    styles.subtitle,
-                    { color: theme.foregroundColorMuted50 },
-                    subtitleStyle,
-                  ]}
-                >
-                  {subtitle.toLowerCase()}
-                </Animated.Text>
-              )}
-
-              {!!text && (
-                <Animated.Text
-                  selectable={selectable}
-                  style={[styles.text, { color: theme.foregroundColor }]}
-                >
-                  {text}
-                </Animated.Text>
-              )}
+          {!!text && (
+            <Animated.Text
+              numberOfLines={1}
+              selectable={selectable}
+              style={[styles.text, { color: theme.foregroundColor }]}
+            >
+              {text}
             </Animated.Text>
           )}
         </View>

packages/components/src/components/columns/ModalColumn.tsx

@@ -64,7 +64,7 @@ export const ModalColumn = React.memo((props: ModalColumnProps) => {
         )}
 
         {right && (
-          <ColumnHeaderItem analyticsLabel={undefined}>
+          <ColumnHeaderItem analyticsLabel={undefined} noPadding>
             {right}
           </ColumnHeaderItem>
         )}

packages/components/src/components/modals/SettingsModal.tsx

@@ -1,16 +1,12 @@
-import React, { useState } from 'react'
-import { Dimensions, ScrollView, View } from 'react-native'
+import React from 'react'
+import { ScrollView, View } from 'react-native'
 
 import { useAnimatedTheme } from '../../hooks/use-animated-theme'
 import * as actions from '../../redux/actions'
 import { useReduxAction } from '../../redux/hooks/use-redux-action'
 import { useReduxState } from '../../redux/hooks/use-redux-state'
 import * as selectors from '../../redux/selectors'
-import {
-  columnHeaderHeight,
-  contentPadding,
-  sidebarSize,
-} from '../../styles/variables'
+import { contentPadding } from '../../styles/variables'
 import { ModalColumn } from '../columns/ModalColumn'
 import { AppVersion } from '../common/AppVersion'
 import { Avatar } from '../common/Avatar'