fix: title bar centre alignment, beta notice, closes #439

leather-io · Jan 6, 2021 · c0d81d7 · c0d81d7
1 parent b5ddedf
commit c0d81d7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/app/components/beta-notice.tsx b/app/components/beta-notice.tsx
@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import { Flex, Text } from '@blockstack/ui';
-import { openExternalLink } from '@utils/external-links';
 
+import { openExternalLink } from '@utils/external-links';
+import { NETWORK } from '@constants/index';
 import packageJson from '../../package.json';
 
 const sha = process.env.SHA;
@@ -12,12 +13,12 @@ const version = packageJson.version;
 
 const issueParams = new URLSearchParams();
 const issueTitle = `[${String(packageJson.version)}] Bug: <describe issue>`;
-const issueLabels = 'bug,reported-from-ui';
+const issueLabels = `bug,reported-from-ui,4.x,${NETWORK}`;
 const issueBody = `
 <!--
 
   Thanks for creating an issue. Please include as much detail as possible,
-  including screenshots, operating system, and steps to recreate.
+  including screenshots, operating system, and steps to recreate the problem.
 
   If you have any questions, ask @kyranjamie on Github, Discord and Twitter.
 
@@ -43,13 +44,18 @@ export const BetaNotice: FC = () => {
   return (
     <Flex
       textStyle="caption.medium"
+      fontSize="11px"
       color="ink.400"
       position="fixed"
-      right={0}
-      bottom="base"
-      flexDirection={['column', 'row']}
+      right="8px"
+      bottom="8px"
+      border="1px solid #F0F0F0"
+      borderRadius="24px"
+      bg="white"
+      py="4px"
+      px="base-tight"
     >
-      <Text mr="base-tight" onClick={openIssueLink} textDecoration="underline" cursor="pointer">
+      <Text mr="tight" onClick={openIssueLink} textDecoration="underline" cursor="pointer">
         Found a bug? Open an issue
       </Text>
       {pullRequest && branchName && (
@@ -76,7 +82,7 @@ export const BetaNotice: FC = () => {
           </Text>
         </Text>
       )}
-      <Text mr="base">[{packageJson.version}]</Text>
+      <Text>[{packageJson.version}]</Text>
     </Flex>
   );
 };
diff --git a/app/components/title-bar/title-bar.tsx b/app/components/title-bar/title-bar.tsx
@@ -41,7 +41,15 @@ export const TitleBar: FC = () => {
       backgroundColor={winState === 'focused' ? 'white' : '#FAFAFC'}
     >
       <BackButton backUrl={backUrl} hasFocus={winState === 'focused'} onClick={handleHistoryBack} />
-      <Flex justifyContent="space-around" flex={1}>
+      <Flex
+        justifyContent="space-around"
+        flex={1}
+        // Manages absolute centre alignment of content
+        position={['relative', 'absolute']}
+        width={[null, '100%']}
+        left={[null, 0]}
+        height="100%"
+      >
         <Flex>
           {isNewerReleaseAvailable && latestRelease && (
             <UpdateAvailableButton