From 7150c386b89d6a93a7a70992d7f26f4053a5377e Mon Sep 17 00:00:00 2001
From: chrisnojima <cnojima@keyba.se>
Date: Wed, 18 Feb 2026 18:29:58 -0500
Subject: [PATCH] more gap

---
 shared/chat/conversation/error.tsx            | 10 +++-----
 .../chat/conversation/messages/reset-user.tsx |  6 ++---
 shared/common-adapters/box.css                | 24 +++++++++----------
 shared/fs/banner/reset-banner.tsx             |  7 +++---
 shared/teams/join-team/container.tsx          |  5 ++--
 shared/teams/team/team-info.tsx               |  1 -
 6 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/shared/chat/conversation/error.tsx b/shared/chat/conversation/error.tsx
index e098c723b111..4bb646a822d1 100644
--- a/shared/chat/conversation/error.tsx
+++ b/shared/chat/conversation/error.tsx
@@ -4,12 +4,12 @@ import * as Kb from '@/common-adapters'
 const ConversationError = () => {
   const text = Chat.useChatContext(s => s.meta.snippet ?? '')
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container} gap="small">
       <Kb.Text type="Header">There was an error loading this conversation.</Kb.Text>
-      <Kb.Text style={styles.body} type="Body">
+      <Kb.Text type="Body">
         The error is:
       </Kb.Text>
-      <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.errorBox}>
+      <Kb.Box2 direction="horizontal" fullWidth={true}>
         <Kb.CopyableText style={styles.errorText} value={text} />
       </Kb.Box2>
     </Kb.Box2>
@@ -19,13 +19,9 @@ const ConversationError = () => {
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      body: {marginTop: Kb.Styles.globalMargins.small},
       container: {
         padding: Kb.Styles.globalMargins.medium,
       },
-      errorBox: {
-        marginTop: Kb.Styles.globalMargins.small,
-      },
       errorText: {flexGrow: 1},
     }) as const
 )
diff --git a/shared/chat/conversation/messages/reset-user.tsx b/shared/chat/conversation/messages/reset-user.tsx
index 23e0f1923e9c..5f1b93dffc40 100644
--- a/shared/chat/conversation/messages/reset-user.tsx
+++ b/shared/chat/conversation/messages/reset-user.tsx
@@ -33,11 +33,11 @@ const ResetUser = () => {
             }
           </Kb.Text>
         </Kb.Text>
-        <Kb.Box2 direction="vertical" style={styles.bullet}>
-          <Kb.Text type="BodySemibold" negative={true} style={{marginTop: Kb.Styles.globalMargins.tiny}}>
+        <Kb.Box2 direction="vertical" style={styles.bullet} gap="tiny" gapStart={true}>
+          <Kb.Text type="BodySemibold" negative={true}>
             1. Be satisfied with their new proofs, or
           </Kb.Text>
-          <Kb.Text type="BodySemibold" negative={true} style={{marginTop: Kb.Styles.globalMargins.tiny}}>
+          <Kb.Text type="BodySemibold" negative={true}>
             2. Know them outside Keybase and have gotten a thumbs up from them.
           </Kb.Text>
         </Kb.Box2>
diff --git a/shared/common-adapters/box.css b/shared/common-adapters/box.css
index 0720dff82b0c..950dc857b930 100644
--- a/shared/common-adapters/box.css
+++ b/shared/common-adapters/box.css
@@ -26,8 +26,8 @@
   &.box2_gap_medium {
     row-gap: var(--size-medium);
   }
-  &.box2_gap_mediumlarge {
-    row-gap: var(--size-mediumlarge);
+  &.box2_gap_mediumLarge {
+    row-gap: var(--size-mediumLarge);
   }
   &.box2_gap_large {
     row-gap: var(--size-large);
@@ -54,8 +54,8 @@
   &.box2_gapStart_medium {
     padding-top: var(--size-medium);
   }
-  &.box2_gapStart_mediumlarge {
-    padding-top: var(--size-mediumlarge);
+  &.box2_gapStart_mediumLarge {
+    padding-top: var(--size-mediumLarge);
   }
   &.box2_gapStart_large {
     padding-top: var(--size-large);
@@ -82,8 +82,8 @@
   &.box2_gapEnd_medium {
     padding-bottom: var(--size-medium);
   }
-  &.box2_gapEnd_mediumlarge {
-    padding-bottom: var(--size-mediumlarge);
+  &.box2_gapEnd_mediumLarge {
+    padding-bottom: var(--size-mediumLarge);
   }
   &.box2_gapEnd_large {
     padding-bottom: var(--size-large);
@@ -120,8 +120,8 @@
   &.box2_gap_medium {
     column-gap: var(--size-medium);
   }
-  &.box2_gap_mediumlarge {
-    column-gap: var(--size-mediumlarge);
+  &.box2_gap_mediumLarge {
+    column-gap: var(--size-mediumLarge);
   }
   &.box2_gap_large {
     column-gap: var(--size-large);
@@ -148,8 +148,8 @@
   &.box2_gapStart_medium {
     padding-left: var(--size-medium);
   }
-  &.box2_gapStart_mediumlarge {
-    padding-left: var(--size-mediumlarge);
+  &.box2_gapStart_mediumLarge {
+    padding-left: var(--size-mediumLarge);
   }
   &.box2_gapStart_large {
     padding-left: var(--size-large);
@@ -176,8 +176,8 @@
   &.box2_gapEnd_medium {
     padding-right: var(--size-medium);
   }
-  &.box2_gapEnd_mediumlarge {
-    padding-right: var(--size-mediumlarge);
+  &.box2_gapEnd_mediumLarge {
+    padding-right: var(--size-mediumLarge);
   }
   &.box2_gapEnd_large {
     padding-right: var(--size-large);
diff --git a/shared/fs/banner/reset-banner.tsx b/shared/fs/banner/reset-banner.tsx
index 3606d16b8f2c..4cc95c49acc4 100644
--- a/shared/fs/banner/reset-banner.tsx
+++ b/shared/fs/banner/reset-banner.tsx
@@ -92,11 +92,11 @@ const ConnectedBanner = (ownProps: OwnProps) => {
           If you want to let them into this folder and the matching chat, you should either:
         </Kb.Text>
       </Kb.Box2>
-      <Kb.Box2 direction="vertical" style={styles.listTextContainer}>
-        <Kb.Text type="BodySemibold" negative={true} style={styles.listTextContent}>
+      <Kb.Box2 direction="vertical" style={styles.listTextContainer} gap="tiny" gapStart={true}>
+        <Kb.Text type="BodySemibold" negative={true}>
           1. Be satisfied with their new proofs, or
         </Kb.Text>
-        <Kb.Text type="BodySemibold" negative={true} style={styles.listTextContent}>
+        <Kb.Text type="BodySemibold" negative={true}>
           2. Know them outside Keybase and have gotten a thumbs up from them.
         </Kb.Text>
       </Kb.Box2>
@@ -188,7 +188,6 @@ const styles = Kb.Styles.styleSheetCreate(
         justifyContent: 'center',
         maxWidth: C.isMobile ? 280 : 400,
       },
-      listTextContent: {marginTop: Kb.Styles.globalMargins.tiny},
       textDontLetThemIn: {
         ...fixedHeight(Kb.Styles.globalMargins.mediumLarge),
         marginBottom: Kb.Styles.globalMargins.tiny,
diff --git a/shared/teams/join-team/container.tsx b/shared/teams/join-team/container.tsx
index a745a5655594..1c04a8822663 100644
--- a/shared/teams/join-team/container.tsx
+++ b/shared/teams/join-team/container.tsx
@@ -84,8 +84,8 @@ const Container = (ownProps: OwnProps) => {
           )}
         </Kb.Box2>
       ) : (
-        <Kb.Box2 direction="vertical" style={styles.container}>
-          <Kb.RoundedBox style={styles.roundedBox}>
+        <Kb.Box2 direction="vertical" style={styles.container} gap="tiny">
+          <Kb.RoundedBox>
             <Kb.PlainInput
               autoFocus={true}
               onChangeText={setName}
@@ -124,7 +124,6 @@ const styles = Kb.Styles.styleSheetCreate(
         padding: Kb.Styles.globalMargins.small,
         width: '100%',
       },
-      roundedBox: {marginBottom: Kb.Styles.globalMargins.tiny},
     }) as const
 )
 
diff --git a/shared/teams/team/team-info.tsx b/shared/teams/team/team-info.tsx
index e120e0acf17f..74c8ae6a1a9e 100644
--- a/shared/teams/team/team-info.tsx
+++ b/shared/teams/team/team-info.tsx
@@ -132,7 +132,6 @@ const TeamInfo = (props: Props) => {
 const styles = Kb.Styles.styleSheetCreate(() => ({
   avatar: {
     alignSelf: 'center',
-    marginBottom: Kb.Styles.globalMargins.tiny,
     marginRight: Kb.Styles.globalMargins.tiny,
   },
   bg: {backgroundColor: Kb.Styles.globalColors.blueGrey},