From 5d2ab3d0614a3db1c618ff2929dde3a5e6b08f59 Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Fri, 7 Aug 2020 12:02:46 -0400
Subject: [PATCH] adjust spacing on configure tab on mobile (#3087)

---
 src/core/client/stream/App/TabBar.css            | 5 +++++
 src/core/client/stream/App/TabBar.tsx            | 7 ++-----
 src/core/client/ui/components/v2/Tabs/TabBar.css | 1 +
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/core/client/stream/App/TabBar.css b/src/core/client/stream/App/TabBar.css
index 9e729616a..28793e4b8 100644
--- a/src/core/client/stream/App/TabBar.css
+++ b/src/core/client/stream/App/TabBar.css
@@ -1,6 +1,11 @@
 .smallTab {
   padding-top: var(--spacing-3);
   padding-bottom: var(--spacing-3);
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+}
+
+.configureTab {
   padding-left: var(--spacing-4);
   padding-right: var(--spacing-4);
 }
diff --git a/src/core/client/stream/App/TabBar.tsx b/src/core/client/stream/App/TabBar.tsx
index 1be8b16ae..b7d05af21 100644
--- a/src/core/client/stream/App/TabBar.tsx
+++ b/src/core/client/stream/App/TabBar.tsx
@@ -122,7 +122,7 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
 
           {props.showConfigureTab && (
             <Tab
-              className={cn(CLASSES.tabBar.configure, {
+              className={cn(CLASSES.tabBar.configure, styles.configureTab, {
                 [styles.smallTab]: !matches,
               })}
               tabID="CONFIGURE"
@@ -135,10 +135,7 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
                 </Localized>
               ) : (
                 <div>
-                  <Icon size="lg">settings</Icon>
-                  <Localized id="general-tabBar-configure">
-                    <div className={styles.smallText}>Configure</div>
-                  </Localized>
+                  <Icon size="md">settings</Icon>
                 </div>
               )}
             </Tab>
diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.css b/src/core/client/ui/components/v2/Tabs/TabBar.css
index e786a7bb3..e98175124 100644
--- a/src/core/client/ui/components/v2/Tabs/TabBar.css
+++ b/src/core/client/ui/components/v2/Tabs/TabBar.css
@@ -4,6 +4,7 @@ $moderateCardTabSecondaryColor: var(--palette-divider);
 
 .root {
   display: flex;
+  align-items: flex-end;
   padding: 0;
   margin: 0;
 }