Make `Cell.Label` a stateless component

4 files changed, 29 insertions, 22 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Cell.js b/gui/packages/desktop/src/renderer/components/Cell.js
index 89853fc39c..0e03546637 100644
--- a/gui/packages/desktop/src/renderer/components/Cell.js
+++ b/gui/packages/desktop/src/renderer/components/Cell.js
@@ -8,8 +8,6 @@ import { colors } from '../../config';
 const styles = {
   cell: Styles.createViewStyle({
     backgroundColor: colors.blue,
-    paddingTop: 14,
-    paddingBottom: 14,
     paddingLeft: 16,
     paddingRight: 16,
     marginBottom: 1,
@@ -44,6 +42,22 @@ const styles = {
     }),
   },
 
+  label: {
+    container: Styles.createViewStyle({
+      marginTop: 14,
+      marginBottom: 14,
+      flexGrow: 1,
+    }),
+    text: Styles.createTextStyle({
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      letterSpacing: -0.2,
+      color: colors.white,
+    }),
+  },
+
   cellHover: Styles.createViewStyle({
     backgroundColor: colors.blue80,
   }),
@@ -73,7 +87,6 @@ const styles = {
 };
 
 export class SubText extends Text {}
-export class Label extends Text {}
 export class Img extends PlainImg {}
 
 type CellButtonProps = {
@@ -152,6 +165,14 @@ export function Container({ children }: ContainerProps) {
   return <View style={styles.cellContainer}>{children}</View>;
 }
 
+export function Label({ children }: ContainerProps) {
+  return (
+    <View style={styles.label.container}>
+      <Text style={styles.label.text}>{children}</Text>
+    </View>
+  );
+}
+
 export function Footer({ children }: ContainerProps) {
   return (
     <View style={styles.footer.container}>
diff --git a/gui/packages/desktop/src/renderer/components/Login.js b/gui/packages/desktop/src/renderer/components/Login.js
index 021cccf23c..dfbac93ea1 100644
--- a/gui/packages/desktop/src/renderer/components/Login.js
+++ b/gui/packages/desktop/src/renderer/components/Login.js
@@ -447,12 +447,12 @@ class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
         <Cell.CellButton
           style={styles.account_dropdown__item}
           cellHoverStyle={styles.account_dropdown__item_hover}>
-          <Cell.Label
+          <Text
             style={styles.account_dropdown__label}
             cellHoverStyle={styles.account_dropdown__label_hover}
             onPress={() => this.props.onSelect(this.props.value)}>
             {this.props.label}
-          </Cell.Label>
+          </Text>
           <Img
             style={styles.account_dropdown__remove}
             cellHoverStyle={styles.account_dropdown__remove_cell_hover}
diff --git a/gui/packages/desktop/src/renderer/components/Preferences.js b/gui/packages/desktop/src/renderer/components/Preferences.js
index faac5e16c0..d0681f7e5e 100644
--- a/gui/packages/desktop/src/renderer/components/Preferences.js
+++ b/gui/packages/desktop/src/renderer/components/Preferences.js
@@ -49,21 +49,19 @@ export default class Preferences extends Component<PreferencesProps, State> {
 
               <View style={styles.preferences__content}>
                 <Cell.Container>
-                  <Cell.Label style={styles.preferences__cell_label}>Auto-connect</Cell.Label>
+                  <Cell.Label>Auto-connect</Cell.Label>
                   <Switch isOn={this.props.autoConnect} onChange={this.props.setAutoConnect} />
                 </Cell.Container>
                 <Cell.Footer>Automatically connect the VPN when the computer starts.</Cell.Footer>
 
                 <Cell.Container>
-                  <Cell.Label style={styles.preferences__cell_label}>Auto-start</Cell.Label>
+                  <Cell.Label>Auto-start</Cell.Label>
                   <Switch isOn={this.state.autoStart} onChange={this._onChangeAutoStart} />
                 </Cell.Container>
                 <Cell.Footer>Automatically open Mullvad VPN at login to the system.</Cell.Footer>
 
                 <Cell.Container>
-                  <Cell.Label style={styles.preferences__cell_label}>
-                    Local network sharing
-                  </Cell.Label>
+                  <Cell.Label>Local network sharing</Cell.Label>
                   <Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
                 </Cell.Container>
                 <Cell.Footer>
diff --git a/gui/packages/desktop/src/renderer/components/PreferencesStyles.js b/gui/packages/desktop/src/renderer/components/PreferencesStyles.js
index ebe0b41955..1754142805 100644
--- a/gui/packages/desktop/src/renderer/components/PreferencesStyles.js
+++ b/gui/packages/desktop/src/renderer/components/PreferencesStyles.js
@@ -19,16 +19,4 @@ export default {
     flexShrink: 1,
     flexBasis: 'auto',
   }),
-
-  preferences__cell_label: Styles.createTextStyle({
-    fontFamily: 'DINPro',
-    fontSize: 20,
-    fontWeight: '900',
-    lineHeight: 26,
-    letterSpacing: -0.2,
-    color: colors.white,
-    paddingTop: 14,
-    paddingBottom: 14,
-    flexGrow: 1,
-  }),
 };