style helpers. style skill

shared/app/global-errors.tsx

@@ -304,9 +304,8 @@ const styles = Kb.Styles.styleSheetCreate(() => {
       flexGrow: 0,
     },
     mobileSummaryRow: {
-      alignItems: 'center',
+      ...Kb.Styles.centered(),
       flexShrink: 0,
-      justifyContent: 'center',
       ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall),
     },
     overlayFill: {

shared/chat/audio/audio-player.tsx

@@ -119,11 +119,8 @@ const AudioPlayer = (props: Props) => {
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: {
     ...Kb.Styles.padding(Kb.Styles.globalMargins.xxtiny, Kb.Styles.globalMargins.tiny),
+    ...Kb.Styles.border(Kb.Styles.globalColors.grey, 1, Kb.Styles.borderRadius),
     backgroundColor: Kb.Styles.globalColors.white,
-    borderColor: Kb.Styles.globalColors.grey,
-    borderRadius: Kb.Styles.borderRadius,
-    borderStyle: 'solid',
-    borderWidth: 1,
   },
   visContainer: {
     alignItems: 'flex-start',

shared/chat/audio/audio-recorder.native.tsx

@@ -853,16 +853,14 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   iconStyle: {padding: Kb.Styles.globalMargins.tiny},
   innerCircleStyle: {
     ...circleAroundIcon(84),
-    alignItems: 'center',
-    justifyContent: 'center',
+    ...Kb.Styles.centered(),
   },
   lockHintStyle: {
     ...centerAroundIcon(32),
   },
   sendRecordingButtonStyle: {
     ...circleAroundIcon(32),
-    alignItems: 'center',
-    justifyContent: 'center',
+    ...Kb.Styles.centered(),
   },
   tooltipContainer: {
     backgroundColor: Kb.Styles.globalColors.black,

shared/chat/audio/audio-send.native.tsx

@@ -59,18 +59,15 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     borderStyle: 'solid',
     borderTopColor: Kb.Styles.globalColors.black_10,
     borderTopWidth: 1,
-    paddingLeft: Kb.Styles.globalMargins.tiny,
-    paddingRight: Kb.Styles.globalMargins.tiny,
+    ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny),
   },
   icon: {
-    height: 32,
+    ...Kb.Styles.size(32),
     marginRight: Kb.Styles.globalMargins.tiny,
-    width: 32,
   },
   send: {
     alignSelf: 'flex-end',
-    marginBottom: Kb.Styles.globalMargins.tiny,
-    marginTop: Kb.Styles.globalMargins.tiny,
+    ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny),
   },
 }))
 

shared/chat/blocking/block-modal.tsx

@@ -527,12 +527,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   iconBox: {paddingLeft: Kb.Styles.globalMargins.tiny},
   loadingAnimation: Kb.Styles.platformStyles({
     isElectron: {
-      height: 32,
-      width: 32,
+      ...Kb.Styles.size(32),
     },
     isMobile: {
-      height: 48,
-      width: 48,
+      ...Kb.Styles.size(48),
     },
   }),
   loadingAnimationBox: {
@@ -542,15 +540,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   modalFooter: Kb.Styles.platformStyles({
     common: {
       ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
-      borderStyle: 'solid' as const,
-      borderTopColor: Kb.Styles.globalColors.black_10,
-      borderTopWidth: 1,
-      minHeight: 56,
+      ...Kb.Styles.topDivider(),
     },
     isElectron: {
-      borderBottomLeftRadius: Kb.Styles.borderRadius,
-      borderBottomRightRadius: Kb.Styles.borderRadius,
-      overflow: 'hidden',
+      ...Kb.Styles.roundedBottom(),
     },
   }),
   radioButton: {marginLeft: Kb.Styles.globalMargins.large},

shared/chat/conversation/attachment-fullscreen/index.tsx

@@ -414,15 +414,13 @@ const styles = Kb.Styles.styleSheetCreate(
       circle: Kb.Styles.platformStyles({
         isElectron: {
           ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'center',
+          ...Kb.Styles.centered(),
           alignSelf: 'center',
           borderRadius: 36,
           cursor: 'pointer',
           flexShrink: 0,
-          height: 36,
-          justifyContent: 'center',
+          ...Kb.Styles.size(36),
           margin: Kb.Styles.globalMargins.small,
-          width: 36,
         },
       }),
       close: Kb.Styles.platformStyles({
@@ -434,8 +432,7 @@ const styles = Kb.Styles.styleSheetCreate(
       contentsFit: {
         ...Kb.Styles.globalStyles.flexBoxRow,
         flex: 1,
-        height: '100%',
-        width: '100%',
+        ...Kb.Styles.size('100%'),
       },
       disabled: {opacity: 0.3},
       ellipsisContainer: Kb.Styles.platformStyles({
@@ -444,8 +441,7 @@ const styles = Kb.Styles.styleSheetCreate(
       error: {color: Kb.Styles.globalColors.redDark},
       headerFooter: Kb.Styles.platformStyles({
         common: {
-          paddingLeft: Kb.Styles.globalMargins.tiny,
-          paddingRight: Kb.Styles.globalMargins.tiny,
+          ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny),
         },
         isElectron: {
           alignItems: 'center',
@@ -457,10 +453,9 @@ const styles = Kb.Styles.styleSheetCreate(
           backgroundColor: Kb.Styles.globalColors.blackOrBlack,
           bottom: Kb.Styles.globalMargins.small,
           flexShrink: 0,
-          height: 34,
+          ...Kb.Styles.size(34),
           left: Kb.Styles.globalMargins.small,
           position: 'absolute',
-          width: 34,
           zIndex: 3,
         },
       }),
@@ -480,26 +475,22 @@ const styles = Kb.Styles.styleSheetCreate(
         isElectron: {
           cursor: 'normal',
           display: 'block',
-          height: '100%',
+          ...Kb.Styles.size('100%'),
           objectFit: 'scale-down' as const,
-          width: '100%',
         },
       }),
       videoWrapper: Kb.Styles.platformStyles({
         isMobile: {
-          alignItems: 'center',
-          height: '100%',
-          justifyContent: 'center',
+          ...Kb.Styles.centered(),
+          ...Kb.Styles.size('100%'),
           position: 'relative',
-          width: '100%',
         },
       }),
       zoomableBox: Kb.Styles.platformStyles({
         isMobile: {
           backgroundColor: Kb.Styles.globalColors.blackOrBlack,
-          height: '100%',
+          ...Kb.Styles.size('100%'),
           position: 'relative',
-          width: '100%',
         },
       }),
     }) as const

shared/chat/conversation/attachment-get-titles.tsx

@@ -267,8 +267,7 @@ const styles = Kb.Styles.styleSheetCreate(
         common: {
           alignItems: 'center',
           flexGrow: 1,
-          paddingLeft: Kb.Styles.globalMargins.small,
-          paddingRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small),
           width: '100%',
         },
         isMobile: {flexShrink: 1},
@@ -299,10 +298,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       input: Kb.Styles.platformStyles({
         common: {
-          borderColor: Kb.Styles.globalColors.blue,
-          borderRadius: Kb.Styles.borderRadius,
-          borderStyle: 'solid',
-          borderWidth: 1,
+          ...Kb.Styles.border(Kb.Styles.globalColors.blue, 1, Kb.Styles.borderRadius),
           maxHeight: 42,
           minHeight: 42,
           padding: Kb.Styles.globalMargins.tiny,
@@ -321,8 +317,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       inputContainer: Kb.Styles.platformStyles({
         isElectron: {
-          paddingLeft: Kb.Styles.globalMargins.small,
-          paddingRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small),
         },
       }),
     }) as const

shared/chat/conversation/bot/channel-picker.tsx

@@ -167,8 +167,7 @@ const styles = Kb.Styles.styleSheetCreate(
           marginTop: Kb.Styles.globalMargins.tiny,
         },
         isElectron: {
-          marginLeft: Kb.Styles.globalMargins.small,
-          marginRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
         },
       }),
     }) as const

shared/chat/conversation/bot/install.tsx

@@ -816,15 +816,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   modalFooter: Kb.Styles.platformStyles({
     common: {
       ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
-      borderStyle: 'solid' as const,
-      borderTopColor: Kb.Styles.globalColors.black_10,
-      borderTopWidth: 1,
-      minHeight: 56,
+      ...Kb.Styles.topDivider(),
     },
     isElectron: {
-      borderBottomLeftRadius: Kb.Styles.borderRadius,
-      borderBottomRightRadius: Kb.Styles.borderRadius,
-      overflow: 'hidden',
+      ...Kb.Styles.roundedBottom(),
     },
   }),
   outerContainer: Kb.Styles.platformStyles({

shared/chat/conversation/bot/team-picker.tsx

@@ -102,8 +102,7 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       results: Kb.Styles.platformStyles({
         common: {
-          paddingLeft: Kb.Styles.globalMargins.tiny,
-          paddingRight: Kb.Styles.globalMargins.tiny,
+          ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny),
         },
         isMobile: {
           paddingBottom: Kb.Styles.globalMargins.tiny,
@@ -115,8 +114,7 @@ const styles = Kb.Styles.styleSheetCreate(
           marginTop: Kb.Styles.globalMargins.tiny,
         },
         isElectron: {
-          marginLeft: Kb.Styles.globalMargins.small,
-          marginRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
         },
       }),
     }) as const

shared/chat/conversation/bottom-banner.tsx

@@ -173,14 +173,10 @@ const styles = Kb.Styles.styleSheetCreate(
       bannerStyle: Kb.Styles.platformStyles({
         common: {
           ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'center',
+          ...Kb.Styles.centered(),
           backgroundColor: Kb.Styles.globalColors.red,
           flexWrap: 'wrap',
-          justifyContent: 'center',
-          paddingBottom: 8,
-          paddingLeft: 24,
-          paddingRight: 24,
-          paddingTop: 8,
+          ...Kb.Styles.padding(8, 24),
         },
         isElectron: {
           marginBottom: Kb.Styles.globalMargins.tiny,

shared/chat/conversation/fwd-msg.tsx

@@ -285,14 +285,12 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       inputContainer: Kb.Styles.platformStyles({
         isElectron: {
-          paddingLeft: Kb.Styles.globalMargins.small,
-          paddingRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small),
         },
       }),
       results: Kb.Styles.platformStyles({
         common: {
-          paddingLeft: Kb.Styles.globalMargins.tiny,
-          paddingRight: Kb.Styles.globalMargins.tiny,
+          ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny),
         },
         isMobile: {paddingBottom: Kb.Styles.globalMargins.tiny},
       }),
@@ -302,8 +300,7 @@ const styles = Kb.Styles.styleSheetCreate(
           marginTop: Kb.Styles.globalMargins.tiny,
         },
         isElectron: {
-          marginLeft: Kb.Styles.globalMargins.small,
-          marginRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
         },
       }),
     }) as const

shared/chat/conversation/giphy/index.tsx

@@ -151,8 +151,7 @@ const styles = Kb.Styles.styleSheetCreate(
       instructions: Kb.Styles.platformStyles({
         common: {
           alignSelf: 'center',
-          paddingBottom: Kb.Styles.globalMargins.tiny,
-          paddingTop: Kb.Styles.globalMargins.tiny,
+          ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny),
         },
         isElectron: {
           lineHeight: 17,

shared/chat/conversation/header-area/index.tsx

@@ -319,6 +319,6 @@ const styles = Kb.Styles.styleSheetCreate(
         alignItems: 'center',
       },
       shhIcon: {marginLeft: Kb.Styles.globalMargins.xtiny},
-      usernameHeaderContainer: {alignItems: 'center', justifyContent: 'center'},
+      usernameHeaderContainer: Kb.Styles.centered(),
     }) as const
 )

shared/chat/conversation/info-panel/add-to-channel.tsx

@@ -183,15 +183,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   modalFooter: Kb.Styles.platformStyles({
     common: {
       ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
-      borderStyle: 'solid' as const,
-      borderTopColor: Kb.Styles.globalColors.black_10,
-      borderTopWidth: 1,
-      minHeight: 56,
+      ...Kb.Styles.topDivider(),
     },
     isElectron: {
-      borderBottomLeftRadius: Kb.Styles.borderRadius,
-      borderBottomRightRadius: Kb.Styles.borderRadius,
-      overflow: 'hidden',
+      ...Kb.Styles.roundedBottom(),
     },
   }),
 }))

shared/chat/conversation/info-panel/header.tsx

@@ -192,8 +192,7 @@ const styles = Kb.Styles.styleSheetCreate(
       gear: Kb.Styles.platformStyles({
         common: {
           height: gearIconSize,
-          paddingLeft: 16,
-          paddingRight: 16,
+          ...Kb.Styles.paddingH(16),
         },
         isMobile: {width: gearIconSize + 32},
       }),