From 99e18504aa42f09fc681ccf8bbee01db6f2e1c89 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 12 Jun 2021 13:02:50 +0800
Subject: [PATCH] chore: align header content

---
 src/components/MetaBar.tsx |   6 +--
 src/components/SideBar.tsx |  63 +++++++++++-----------
 src/styles/index.scss      | 108 ++++++++++++++++++-------------------
 3 files changed, 89 insertions(+), 88 deletions(-)

diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index a210444..7696872 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -11,14 +11,14 @@ export function MetaBar({ metaData }: Props) {
   const { userName, repoName, branchName } = metaData
   const { repoUrl, userUrl } = platform.resolveUrlFromMetaData(metaData)
   return (
-    <Flex flexDirection="column" justifyContent="space-between" className={'meta-bar'}>
+    <>
       <Breadcrumb className={'user-and-repo'}>
         <Breadcrumb.Item href={userUrl}>{userName}</Breadcrumb.Item>
         <Breadcrumb.Item href={repoUrl}>
           <Text fontWeight="bolder">{repoName}</Text>
         </Breadcrumb.Item>
       </Breadcrumb>
-      <Flex flexWrap="nowrap">
+      <Flex paddingTop={1} flexWrap="nowrap" alignItems="flex-start">
         <div className={'octicon-wrapper'}>
           <GitBranchIcon size="small" />
         </div>
@@ -26,6 +26,6 @@ export function MetaBar({ metaData }: Props) {
           {branchName || '...'}
         </BranchName>
       </Flex>
-    </Flex>
+    </>
   )
 }
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index c3d0427..e0d4380 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -130,50 +130,51 @@ export function SideBar() {
           onLeave={sidebarToggleMode === 'float' ? () => setShowSideBar(false) : undefined}
         >
           <div className={'gitako-side-bar-body'}>
-            <div className={'close-side-bar-button-position'}>
-              {sidebarToggleMode === 'persistent' && (
-                <button
-                  title={'Collapse sidebar'}
-                  className={'close-side-bar-button'}
-                  onClick={toggleShowSideBar}
-                >
-                  <Icon className={'action-icon'} type={'tab'} />
-                </button>
-              )}
-              <button
-                title={'Toggle sidebar dock mode between float and persistent'}
-                className={cx('close-side-bar-button', {
-                  active: sidebarToggleMode === 'persistent',
-                })}
-                onClick={() =>
-                  configContext.onChange({
-                    sidebarToggleMode: sidebarToggleMode === 'float' ? 'persistent' : 'float',
-                  })
-                }
-              >
-                <Icon className={'action-icon'} type={'pin'} />
-              </button>
-            </div>
             <div
               className={'gitako-side-bar-content'}
               onClick={showSettings ? toggleShowSettings : undefined}
             >
+              <div className={'header'}>
+                <div className={'close-side-bar-button-position'}>
+                  {sidebarToggleMode === 'persistent' && (
+                    <button
+                      title={'Collapse sidebar'}
+                      className={'close-side-bar-button'}
+                      onClick={toggleShowSideBar}
+                    >
+                      <Icon className={'action-icon'} type={'tab'} />
+                    </button>
+                  )}
+                  <button
+                    title={'Toggle sidebar dock mode between float and persistent'}
+                    className={cx('close-side-bar-button', {
+                      active: sidebarToggleMode === 'persistent',
+                    })}
+                    onClick={() =>
+                      configContext.onChange({
+                        sidebarToggleMode: sidebarToggleMode === 'float' ? 'persistent' : 'float',
+                      })
+                    }
+                  >
+                    <Icon className={'action-icon'} type={'pin'} />
+                  </button>
+                </div>
+                {metaData && <MetaBar metaData={metaData} />}
+              </div>
               {run(() => {
                 switch (state) {
                   case 'disabled':
                     return null
                   case 'getting-access-token':
                     return <LoadingIndicator text={'Getting access token...'} />
+                  case 'after-getting-access-token':
                   case 'meta-loading':
                     return <LoadingIndicator text={'Fetching repo meta...'} />
                   case 'error-due-to-auth':
                     return <AccessDeniedDescription />
                   default:
-                    return metaData ? (
-                      <>
-                        <div className={'header'}>
-                          <MetaBar metaData={metaData} />
-                        </div>
+                    return (
+                      metaData && (
                         <IIFC>
                           {() => (
                             <FileExplorer
@@ -186,8 +187,8 @@ export function SideBar() {
                             />
                           )}
                         </IIFC>
-                      </>
-                    ) : null
+                      )
+                    )
                 }
               })}
             </div>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e7971d1..d155b4a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -449,48 +449,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       text-align: center;
     }
 
-    .close-side-bar-button-position {
-      position: absolute;
-      right: 6px;
-      top: 6px;
-      z-index: 1; // prevent being covered by following elements
-
-      .close-side-bar-button {
-        @include icon-button;
-        width: $button-size;
-        height: $button-size;
-        border-radius: $button-size;
-
-        // feedback to click should be instant
-        &:not(:active) {
-          transition: background linear 0.3s;
-        }
-
-        &.active .octicon {
-          color: var(--gitako-icon-primary);
-        }
-
-        .action-icon {
-          color: var(--gitako-icon-tertiary);
-          width: 20px;
-          height: 20px;
-          text-align: center;
-          .octicon {
-            width: 100%;
-            height: 100%;
-          }
-          .Pin,
-          .Tab {
-            transform: rotateY(180deg);
-          }
-        }
-      }
-
-      .close-side-bar-button + .close-side-bar-button {
-        margin-left: 4px;
-      }
-    }
-
     .#{$name}-side-bar-content {
       display: flex;
       flex: 1;
@@ -499,24 +457,66 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
       .header {
         position: relative;
+        min-height: 62px; // GitHub header height if login
+        background: var(--gitako-bg-tertiary);
+        padding: 6px 10px;
+        flex-shrink: 0;
+        position: relative; // prevent overlap by outline of other elements
 
-        .meta-bar {
-          position: relative; // prevent overlap by outline of other elements
-          min-height: 62px; // GitHub header height if login
-          flex-shrink: 0;
-          padding: 8px 10px;
-          padding-right: $button-size * 2 + 8px; // space for toggle buttons
-          background: var(--gitako-bg-tertiary);
+        .user-and-repo {
+          display: inline; // would be override by CSS rule of section from @primer/css
+          line-height: 32px;
 
-          .user-and-repo a {
+          a {
             color: var(--gitako-text-link);
+            white-space: normal;
+          }
+        }
+
+        .branch-name {
+          margin-left: 4px;
+          padding: 4px 6px; // did not align well for some reason :/
+          color: var(--gitako-branch-name-text);
+          background-color: var(--gitako-branch-name-bg);
+        }
+
+        .close-side-bar-button-position {
+          float: right;
+          z-index: 1; // prevent being covered by following elements
+
+          .close-side-bar-button {
+            @include icon-button;
+            width: $button-size;
+            height: $button-size;
+            border-radius: $button-size;
+
+            // feedback to click should be instant
+            &:not(:active) {
+              transition: background linear 0.3s;
+            }
+
+            &.active .octicon {
+              color: var(--gitako-icon-primary);
+            }
+
+            .action-icon {
+              color: var(--gitako-icon-tertiary);
+              width: 20px;
+              height: 20px;
+              text-align: center;
+              .octicon {
+                width: 100%;
+                height: 100%;
+              }
+              .Pin,
+              .Tab {
+                transform: rotateY(180deg);
+              }
+            }
           }
 
-          .branch-name {
+          .close-side-bar-button + .close-side-bar-button {
             margin-left: 4px;
-            padding: 4px 6px; // did not align well for some reason :/
-            color: var(--gitako-branch-name-text);
-            background-color: var(--gitako-branch-name-bg);
           }
         }
       }