fix text centering in a bunch of places (#16203)

* fix text centering in a bunch of places * make it a team? notice on mobile
keybase · Feb 22, 2019 · b9fdb82 · b9fdb82
1 parent 6a11a23
commit b9fdb82
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 37 deletions.
diff --git a/shared/chat/conversation/messages/message-popup/exploding/index.js b/shared/chat/conversation/messages/message-popup/exploding/index.js
@@ -101,13 +101,19 @@ class ExplodingPopupHeader extends React.Component<PropsWithTimer<Props>, State>
             </Box2>
           </Box2>
           <Box2 direction="horizontal">
-            <Text type="BodySmall">from device {deviceName}</Text>
+            <Text center={true} type="BodySmall">
+              from device {deviceName}
+            </Text>
           </Box2>
           <Box2 direction="horizontal">
-            <Text type="BodySmall">using exploding key</Text>
+            <Text center={true} type="BodySmall">
+              using exploding key
+            </Text>
           </Box2>
           <Box2 direction="horizontal">
-            <Text type="BodySmall">{formatTimeForPopup(timestamp)}</Text>
+            <Text center={true} type="BodySmall">
+              {formatTimeForPopup(timestamp)}
+            </Text>
           </Box2>
         </Box2>
         {!!deviceRevokedAt && (
@@ -129,9 +135,7 @@ class ExplodingPopupHeader extends React.Component<PropsWithTimer<Props>, State>
             styles.timerBox,
             {
               backgroundColor:
-                this.state.secondsLeft < oneMinuteInS
-                  ? Styles.globalColors.red
-                  : Styles.globalColors.black,
+                this.state.secondsLeft < oneMinuteInS ? Styles.globalColors.red : Styles.globalColors.black,
             },
           ])}
         >

diff --git a/shared/chat/conversation/messages/message-popup/header.js b/shared/chat/conversation/messages/message-popup/header.js
@@ -79,12 +79,14 @@ const MessagePopupHeader = (props: {
         </Kb.Box2>
       </Kb.Box2>
       <Kb.Box style={styles.headerDetailsContainer}>
-        <Kb.Text type="BodySmall">
+        <Kb.Text center={true} type="BodySmall">
           from device&nbsp;
           <Kb.Text type="BodySmallSemibold">{deviceName}</Kb.Text>
         </Kb.Text>
       </Kb.Box>
-      <Kb.Text type="BodySmall">{formatTimeForPopup(timestamp)}</Kb.Text>
+      <Kb.Text center={true} type="BodySmall">
+        {formatTimeForPopup(timestamp)}
+      </Kb.Text>
       {!!deviceRevokedAt && (
         <Kb.Box2
           gap="small"

diff --git a/shared/chat/conversation/messages/system-create-team-notice/index.js b/shared/chat/conversation/messages/system-create-team-notice/index.js
@@ -2,15 +2,15 @@
 import React from 'react'
 import {Text} from '../../../../common-adapters'
 import UserNotice from '../user-notice'
-import {globalColors, isMobile} from '../../../../styles'
+import {globalColors} from '../../../../styles'
 
 type Props = {
   onShowNewTeamDialog: () => void,
 }
 
 const CreateTeamNotice = ({onShowNewTeamDialog}: Props) => (
   <UserNotice username="" bgColor={globalColors.blue4}>
-    <Text type="BodySmallSemibold" style={isMobile ? {alignItems: 'center'} : {textAlign: 'center'}}>
+    <Text type="BodySmallSemibold" center={true}>
       Make it a team? You'll be able to add and delete members as you wish.{' '}
       <Text
         type="BodySmallPrimaryLink"

diff --git a/shared/profile/user/teams/index.js b/shared/profile/user/teams/index.js
@@ -63,11 +63,11 @@ const TeamInfo = p => (
               onClick={() => p.onJoinTeam(p.name)}
             />
           )}
-          <Kb.Text type="BodySmall">
+          <Kb.Text center={true} type="BodySmall">
             Public admins:{' '}
             {
               <Kb.ConnectedUsernames
-                type="BodySmall"
+                type="BodySmallSemibold"
                 colorFollowing={true}
                 colorBroken={true}
                 onUsernameClicked="profile"

diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
diff --git a/shared/teams/really-leave-team/index.js b/shared/teams/really-leave-team/index.js
@@ -44,7 +44,11 @@ const _ReallyLeaveTeam = (props: Props) => (
     >
       <Avatar teamname={props.name} size={64} />
       <Icon type="icon-team-leave-28" style={{marginRight: -60, marginTop: -20, zIndex: 1}} />
-      <Text type="Header" style={{marginBottom: globalMargins.large, marginTop: globalMargins.large}}>
+      <Text
+        center={true}
+        type="Header"
+        style={{marginBottom: globalMargins.large, marginTop: globalMargins.large}}
+      >
         Are you sure you want to leave {props.name}?
       </Text>
       <Text center={true} type="Body" style={{maxWidth: 430}}>

diff --git a/shared/teams/team/really-remove-member/index.js b/shared/teams/team/really-remove-member/index.js
@@ -28,7 +28,11 @@ const ReallyRemoveMember = (props: Props) => (
     <Box style={{...globalStyles.flexBoxColumn, alignItems: 'center', flex: 1, padding: globalMargins.large}}>
       <Avatar username={props.member} size={64} />
       <Icon type="icon-team-leave-28" style={{marginRight: -60, marginTop: -20, zIndex: 1}} />
-      <Text type="Header" style={{marginBottom: globalMargins.large, marginTop: globalMargins.large}}>
+      <Text
+        type="Header"
+        center={true}
+        style={{marginBottom: globalMargins.large, marginTop: globalMargins.large}}
+      >
         Are you sure you want to remove {props.member} from {props.name}?
       </Text>
       <Text center={true} type="Body" style={{maxWidth: 450}}>