From 91954268ba8e5739af3b3e6e361f9936daa3f197 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 21 Jun 2020 14:41:24 +0800
Subject: [PATCH] feat: update meta bar

---
 src/components/MetaBar.tsx | 20 ++++++++++++++------
 src/content.scss           |  8 +++-----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index d3eabcc..2c70cb3 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -1,4 +1,5 @@
-import { Breadcrumb } from '@primer/components'
+import { BranchName, Breadcrumb, Flex, Grid, Text } from '@primer/components'
+import { GitBranchIcon } from '@primer/octicons-react'
 import * as React from 'react'
 
 type Props = {
@@ -7,14 +8,21 @@ type Props = {
 
 export function MetaBar({ metaData: { userName, repoName, branchName, repoUrl, userUrl } }: Props) {
   return (
-    <div className={'meta-bar'}>
+    <Flex flexDirection="column" justifyContent="space-between" className={'meta-bar'}>
       <Breadcrumb>
         <Breadcrumb.Item href={userUrl}>{userName}</Breadcrumb.Item>
-        <Breadcrumb.Item className={'repo-name'} href={repoUrl}>
-          {repoName}
+        <Breadcrumb.Item href={repoUrl}>
+          <Text fontWeight="bolder">{repoName}</Text>
         </Breadcrumb.Item>
-        <Breadcrumb.Item selected>{branchName}</Breadcrumb.Item>
       </Breadcrumb>
-    </div>
+      <Grid gridTemplateColumns="repeat(2, max-content)">
+        <div className={'octicon-wrapper'}>
+          <GitBranchIcon size="small" />
+        </div>
+        <BranchName as="span" backgroundColor="blue.0">
+          {branchName}
+        </BranchName>
+      </Grid>
+    </Flex>
   )
 }
diff --git a/src/content.scss b/src/content.scss
index e48bae5..b04791c 100644
--- a/src/content.scss
+++ b/src/content.scss
@@ -278,13 +278,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
       .meta-bar {
         position: relative; // prevent overlap by outline of other elements
-        padding: 10px;
+        height: 53px; // GitHub header height if login
+        flex-shrink: 0;
+        padding: 4px 10px;
         padding-right: 30px; // space for toggle button
         background: $bg-blue-light;
-
-        .repo-name {
-          font-weight: bolder;
-        }
       }
 
       .description {