Align switch with label when there's a label subtitle. (keybase#20513)

SaltineChips · Oct 23, 2019 · 61168f1 · 61168f1
1 parent fbbac5d
commit 61168f1
Show file tree

Hide file tree

Showing 6 changed files with 2,704 additions and 2,626 deletions.
diff --git a/shared/common-adapters/checkbox.d.ts b/shared/common-adapters/checkbox.d.ts
@@ -6,6 +6,7 @@ export type Props = {
   key?: string
   label?: string
   labelComponent?: React.ReactNode
+  labelSubtitle?: string
   onCheck: ((newCheckedValue: boolean) => void) | null
   checked: boolean
   style?: StylesCrossPlatform

diff --git a/shared/common-adapters/checkbox.desktop.tsx b/shared/common-adapters/checkbox.desktop.tsx
@@ -1,12 +1,13 @@
 import React, {Component} from 'react'
-import Box from './box'
+import Box, {Box2} from './box'
 import Icon from './icon'
 import Text from './text'
 import {Props} from './checkbox'
 import * as Styles from '../styles'
 
 const Kb = {
   Box,
+  Box2,
   Icon,
   Text,
 }
@@ -44,12 +45,13 @@ class Checkbox extends Component<Props> {
           color={Styles.globalColors.white}
           fontSize={9}
         />
-        <Kb.Text
-          type="Body"
-          style={Styles.collapseStyles([styles.text, this.props.disabled && styles.semiLessTransparent])}
+        <Kb.Box2
+          direction="vertical"
+          style={Styles.collapseStyles([this.props.disabled && styles.semiLessTransparent])}
         >
-          {this.props.labelComponent || this.props.label}
-        </Kb.Text>
+          <Kb.Text type="Body">{this.props.labelComponent || this.props.label}</Kb.Text>
+          {!!this.props.labelSubtitle && <Kb.Text type="BodySmall">{this.props.labelSubtitle}</Kb.Text>}
+        </Kb.Box2>
       </Kb.Box>
     )
   }
@@ -97,9 +99,6 @@ const styles = Styles.styleSheetCreate(() => ({
   semiTransparent: {
     opacity: 0.4,
   },
-  text: {
-    color: Styles.globalColors.black,
-  },
   transparent: {
     opacity: 0,
   },

diff --git a/shared/common-adapters/checkbox.native.tsx b/shared/common-adapters/checkbox.native.tsx
@@ -14,6 +14,7 @@ const Checkbox = (props: Props) => (
       props.onCheck && props.onCheck(!props.checked)
     }}
     style={Styles.collapseStyles([styles.container, props.style])}
+    labelSubtitle={props.labelSubtitle}
   />
 )
 

diff --git a/shared/common-adapters/switch.tsx b/shared/common-adapters/switch.tsx
@@ -55,6 +55,7 @@ const getContent = (props, ref) => (
         style={Styles.collapseStyles([
           props.align === 'left' && styles.switchLeft,
           props.align === 'right' && styles.switchRight,
+          !!props.labelSubtitle && styles.switch,
         ])}
       />
     </Kb.ClickableBox>
@@ -63,7 +64,7 @@ const getContent = (props, ref) => (
     {typeof props.label === 'string' ? (
       <LabelContainer {...props}>
         <Kb.Text type="BodySemibold">{props.label}</Kb.Text>
-        {!!props.labelSubtitle && <Kb.Text type="BodyTiny">{props.labelSubtitle}</Kb.Text>}
+        {!!props.labelSubtitle && <Kb.Text type="BodySmall">{props.labelSubtitle}</Kb.Text>}
       </LabelContainer>
     ) : (
       props.label
@@ -97,13 +98,13 @@ export default Switch
 
 const styles = Styles.styleSheetCreate(() => ({
   container: Styles.platformStyles({
-    common: {
-      alignItems: 'center',
-    },
     isElectron: {
+      alignItems: 'center',
       minHeight: 24,
     },
     isMobile: {
+      alignItems: 'flex-start',
+      flexShrink: 1,
       minHeight: 32,
     },
   }),
@@ -116,6 +117,12 @@ const styles = Styles.styleSheetCreate(() => ({
   labelContainer: {
     flexShrink: 1,
   },
+  switch: Styles.platformStyles({
+    isMobile: {
+      bottom: Styles.globalMargins.xtiny,
+      position: 'relative',
+    },
+  }),
   switchLeft: Styles.platformStyles({
     isElectron: {
       marginRight: 10,

diff --git a/shared/settings/feedback/index.tsx b/shared/settings/feedback/index.tsx
@@ -120,14 +120,12 @@ class Feedback extends React.Component<Props, State> {
               </Kb.Banner>
             )}
             <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}>
-              <Kb.Checkbox label="" checked={this.state.sendLogs} onCheck={this._onChangeSendLogs} />
-              <Kb.Box2 direction="vertical" style={styles.textBox}>
-                <Kb.Text type="Body">Include your logs</Kb.Text>
-                <Kb.Text type="BodySmall" onClick={this._onLabelClick} style={styles.text}>
-                  This includes some private metadata info (e.g., file sizes, but not names or contents) but
-                  it will help the developers fix bugs more quickly.
-                </Kb.Text>
-              </Kb.Box2>
+              <Kb.Checkbox
+                label="Include your logs"
+                labelSubtitle="This includes some private metadata info (e.g., file sizes, but not names or contents) but it will help the developers fix bugs more quickly."
+                checked={this.state.sendLogs}
+                onCheck={this._onChangeSendLogs}
+              />
             </Kb.Box2>
             {this.props.loggedOut && (
               <Kb.Box2 direction="horizontal" fullWidth={true}>
@@ -171,9 +169,5 @@ const styles = Styles.styleSheetCreate(
       mainBox: {padding: Styles.globalMargins.small},
       outerStyle: {backgroundColor: Styles.globalColors.white},
       smallLabel: {color: Styles.globalColors.black},
-      text: Styles.platformStyles({
-        isElectron: {cursor: 'default'},
-      }),
-      textBox: {flex: 1},
     } as const)
 )
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ const Checkbox = (props: Props) => ( @@
           props.onCheck && props.onCheck(!props.checked)
         }}
         style={Styles.collapseStyles([styles.container, props.style])}
+        labelSubtitle={props.labelSubtitle}
       />
     )
@@ Expand Down @@