feat: color of file tree text

src/components/Node.tsx

@@ -62,11 +62,11 @@ export function Node({
       <div className={'node-item-label'}>
         <NodeItemIcon node={node} open={expanded} loading={loading} />
         {name.includes('/') ? (
-          name.split('/').map((chunk, index) => (
-            <React.Fragment key={chunk}>
-              {index > 0 && '/'}
+          name.split('/').map((chunk, index, arr) => (
+            <span key={chunk} className={cx({ prefix: index + 1 !== arr.length })}>
               <Highlight match={regex} text={chunk} />
-            </React.Fragment>
+              {index + 1 !== arr.length && '/'}
+            </span>
           ))
         ) : (
           <Highlight match={regex} text={name} />

src/styles/dark/export.scss

@@ -568,7 +568,7 @@
 }
 
 // How to merge the selectors?
-// Is it possible to not have two copy of dark theme variables?
+// Is it possible to not have two copies of dark theme variables?
 @media (prefers-color-scheme: dark) {
   :root[data-color-mode='auto'] {
     @include assign();

src/styles/index.scss

@@ -478,22 +478,23 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           }
 
           &.disabled {
-            .node-item {
               pointer-events: none;
               color: var(--gitako-text-disabled);
             }
-          }
           display: flex;
           justify-content: space-between;
+          align-items: center;
           margin: 0;
-          color: var(--gitako-text-link);
           line-height: 20px;
-          padding: 8px 10px;
           cursor: pointer;
           border-bottom: 1px solid var(--gitako-border-secondary);
           white-space: nowrap;
           transition: padding 0.3s ease; // on toggle expansion in search results
 
+          &:not(:hover) {
+            color: var(--gitako-text-primary);
+          }
+
           @mixin icon-size() {
             width: 16px;
             height: 16px;
@@ -536,11 +537,22 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             align-items: center;
           }
 
+          &:not(:hover) {
+            .node-item-label .prefix {
+              color: var(--gitako-text-tertiary);
+            }
+          }
+
           .go-to-button {
+            @include icon-button();
+            @include button-color();
+            width: 28px;
+            height: 28px;
+            border-radius: 28px;
             white-space: nowrap;
-            background: transparent;
-            border: none;
-            padding: 0;
+            .octicon-wrapper {
+              margin-right: 0;
+            }
           }
           &:not(:hover) {
             .go-to-button {