From fa54ea314f333986e550593c76cca91927a8d19c Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 28 May 2020 14:27:02 +0800
Subject: [PATCH] feat: use octoicon v2

---
 package.json                     |  3 +-
 src/components/Icon.tsx          | 52 +++++++++++++++-----------------
 src/components/ResizeHandler.tsx |  2 +-
 src/components/SearchBar.tsx     |  4 +--
 src/content.scss                 | 33 +++++++++++---------
 yarn.lock                        | 12 +++-----
 6 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index 96322c9..9cb218f 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,7 @@
   "dependencies": {
     "@primer/components": "^16.0.0",
     "@primer/css": "^14.2.0",
-    "@primer/octicons": "^9.2.0",
-    "@primer/octicons-react": "^9.2.0",
+    "@primer/octicons-v2-react": "^0.0.0-53e900d",
     "@sentry/browser": "^5.12.1",
     "@types/firefox-webext-browser": "^70.0.1",
     "@types/history": "^4.7.5",
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index ec7ef44..f5e6d4b 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,20 +1,20 @@
-import Octicon, {
-  ChevronDown,
-  ChevronRight,
-  File,
-  FileCode,
-  FileMedia,
-  FilePdf,
-  FileSubmodule as Submodule,
-  FileZip,
-  Gear,
-  Grabber,
+import {
+  ChevronDownIcon as ChevronDown,
+  ChevronRightIcon as ChevronRight,
+  FileCodeIcon as FileCode,
+  FileIcon as File,
+  FileMediaIcon as FileMedia,
+  FileSubmoduleIcon as Submodule,
+  FileZipIcon as FileZip,
+  GearIcon as Gear,
+  GrabberIcon as Grabber,
   Icon as OcticonIcon,
-  Markdown,
-  Octoface,
-  Reply,
-  X,
-} from '@primer/octicons-react'
+  IconProps,
+  MarkdownIcon as Markdown,
+  OctofaceIcon as Octoface,
+  ReplyIcon as Reply,
+  XIcon as X,
+} from '@primer/octicons-v2-react'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 
@@ -65,11 +65,12 @@ function getSVGIconComponent(
         IconComponent: Reply,
         name: 'Reply',
       }
-    case '.pdf':
-      return {
-        IconComponent: FilePdf,
-        name: 'FilePdf',
-      }
+    // not supported in octicon v2 yet
+    // case '.pdf':
+    //   return {
+    //     IconComponent: FilePdf,
+    //     name: 'FilePdf',
+    //   }
     case '.zip':
     case '.rar':
     case '.7z':
@@ -122,18 +123,13 @@ type Props = {
   className?: string
   placeholder?: boolean
   onClick?: (event: React.MouseEvent<HTMLElement>) => void
-}
+} & IconProps
 
 export function Icon({ type, className = undefined, placeholder, ...otherProps }: Props) {
   let children: React.ReactNode = null
   if (!placeholder) {
     const { name, IconComponent } = getSVGIconComponent(type)
-    const mergedClassName = cx('octicon', name)
-    children = React.createElement(Octicon, {
-      icon: IconComponent,
-      className: mergedClassName,
-      verticalAlign: 'text-bottom',
-    })
+    children = <IconComponent className={cx('octicon', name)} {...otherProps} />
   }
   return (
     <div className={cx('octicon-wrapper', className)} {...otherProps}>
diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx
index a3b9fd8..70e983a 100644
--- a/src/components/ResizeHandler.tsx
+++ b/src/components/ResizeHandler.tsx
@@ -47,7 +47,7 @@ export function HorizontalResizeHandler({ onResize, size, style }: Props) {
 
   return (
     <div className={'gitako-resize-handler'} onMouseDown={onPointerDown} style={style}>
-      <Icon type={'grabber'} className={'grabber-icon'} />
+      <Icon type={'grabber'} className={'grabber-icon'} size={20} />
     </div>
   )
 }
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index a8d957a..96462e7 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,5 +1,5 @@
 import { TextInput } from '@primer/components'
-import { Search } from '@primer/octicons-react'
+import { SearchIcon } from '@primer/octicons-v2-react'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 import { isValidRegexpSource } from 'utils/general'
@@ -15,7 +15,7 @@ export function SearchBar({ onSearch, onFocus, searchKey }: Props) {
     <div className={'search-input-wrapper'}>
       <TextInput
         backgroundColor="white"
-        icon={Search as any}
+        icon={SearchIcon as any}
         onFocus={onFocus}
         tabIndex={0}
         className={cx('search-input', {
diff --git a/src/content.scss b/src/content.scss
index 305ba49..4f7da94 100644
--- a/src/content.scss
+++ b/src/content.scss
@@ -87,14 +87,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         width: 100%;
         height: 100%;
         display: block;
-        background-image: url('~@primer/octicons/build/svg/clippy.svg?inline');
+        background-image: url('~@primer/octicons-v2-react/build/svg/clippy-16.svg?inline');
         background-position: center;
         background-repeat: no-repeat;
         &.success {
-          background-image: url('~@primer/octicons/build/svg/check.svg?inline');
+          background-image: url('~@primer/octicons-v2-react/build/svg/check-16.svg?inline');
         }
         &.fail {
-          background-image: url('~@primer/octicons/build/svg/x.svg?inline');
+          background-image: url('~@primer/octicons-v2-react/build/svg/x-16.svg?inline');
         }
       }
     }
@@ -206,18 +206,19 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     user-select: none;
     width: 0;
     background: $bg-gray;
-    border-right: 1px solid $border-gray;
+    border-right: 1px solid $border-gray-dark;
     overflow: hidden;
+    box-sizing: content-box;
     &:hover,
     &:active {
       width: 16px;
       background: $bg-gray-light;
+      border-left: 1px solid $border-gray-dark;
     }
 
-    .octicon {
-      transform: rotate(90deg);
-      width: 14px;
-      height: 22px;
+    .octicon.Grabber {
+      margin-left: -2px;
+      width: 20px;
       font-size: 0;
     }
   }
@@ -227,7 +228,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     display: flex;
     flex-direction: column;
     background: $bg-gray-light;
-    border-right: 1px solid $border-gray-light;
     border-left: 1px solid $border-gray;
     overflow: hidden;
 
@@ -249,7 +249,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     .octicon-wrapper {
       display: inline-block;
       width: 16px;
-      height: 16px;
+      min-width: 16px; // prevent shrink when sidebar is narrow
       text-align: center;
     }
 
@@ -290,7 +290,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           &-icon {
             width: 20px;
             height: 20px;
-            margin-right: 2px;
+            margin-right: 4px;
 
             .octicon {
               width: 20px;
@@ -357,7 +357,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           margin: 0;
           color: $blue;
           line-height: 20px;
-          padding: 6px 10px;
+          padding: 8px 10px;
           cursor: pointer;
           border-top: 1px solid $border-gray-light;
           white-space: nowrap;
@@ -401,6 +401,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           .node-item-label {
             overflow: hidden;
             text-overflow: ellipsis;
+            align-items: center;
           }
 
           .go-to-button {
@@ -467,9 +468,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             }
             select {
               width: 100%;
-              height: 36px; // same height as text inputs
-              background: $bg-white;
               -moz-appearance: menulist-button;
+              // make it look like text inputs
+              height: 36px;
+              background: $bg-white;
+              border: 1px solid $border-color;
+              border-radius: 6px;
+              box-shadow: inset 0px 2px 0px rgba(225, 228, 232, 0.2);
             }
             &.field-checkbox {
               padding-left: 20px;
diff --git a/yarn.lock b/yarn.lock
index ab9918e..9ec6e2f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1013,6 +1013,11 @@
   dependencies:
     prop-types "^15.6.1"
 
+"@primer/octicons-v2-react@^0.0.0-53e900d":
+  version "0.0.0-53e900d"
+  resolved "https://registry.yarnpkg.com/@primer/octicons-v2-react/-/octicons-v2-react-0.0.0-53e900d.tgz#305002484d8612e6a57afda73bb59804f194728c"
+  integrity sha512-WPdeMtK4d8pVcFSapGeTA4ylFyPwo9cjzjzTgxoRnw9vYVvQZbjBGcr6/LKRPOsYPWzAjv6uu/riuGms59WRCg==
+
 "@primer/octicons@^9.1.1":
   version "9.5.0"
   resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-9.5.0.tgz#36e9422a6f790afde6b49a7d2d6daf1402076afd"
@@ -1020,13 +1025,6 @@
   dependencies:
     object-assign "^4.1.1"
 
-"@primer/octicons@^9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-9.2.0.tgz#705783d57335c4ffbde4650e4d22302947208c6e"
-  integrity sha512-3vv7bBqVUHhU7ChpmQhmzz3WmHEKKSk9z/xEK5KnU8Egh96RoqKIim07geRj825ISa+IWj9cPdOA1ShqW5k3Yw==
-  dependencies:
-    object-assign "^4.1.1"
-
 "@reach/component-component@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5"