feat: variations of toggle button content

src/components/ToggleShowButton.tsx

@@ -2,6 +2,7 @@ import iconSrc from 'assets/icons/Gitako.png'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
+import { Icon } from './Icon'
 
 type Props = {
   error?: string
@@ -32,6 +33,7 @@ export function ToggleShowButton({ error, onClick }: Props) {
     [distance],
   )
 
+  const toggleIconMode = config.val.toggleButtonContent
   return (
     <div ref={ref} className={'gitako-toggle-show-button-wrapper'}>
       <button
@@ -49,7 +51,11 @@ export function ToggleShowButton({ error, onClick }: Props) {
         }}
         title={'Gitako (draggable)'}
       >
-        <img draggable={false} src={iconSrc} />
+        {toggleIconMode === 'octoface' ? (
+          <Icon className={'octoface-icon'} type={'octoface'} />
+        ) : (
+          <img className={'tentacle'} draggable={false} src={iconSrc} />
+        )}
       </button>
       {error && <span className={'error-message'}>{error}</span>}
     </div>

src/components/settings/SidebarSettings.tsx

@@ -1,7 +1,9 @@
 import { Button, TextInput } from '@primer/components'
+import { Option, SelectInput } from 'components/SelectInput'
 import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
+import { Config } from 'utils/configHelper'
 import { friendlyFormatShortcut } from 'utils/general'
 import { useStates } from 'utils/hooks/useStates'
 import * as keyHelper from 'utils/keyHelper'
@@ -10,6 +12,19 @@ import { SettingsSection } from './SettingsSection'
 
 type Props = {}
 
+const options: Option<Config['toggleButtonContent']>[] = [
+  {
+    key: 'logo',
+    value: 'logo',
+    label: `Gitako Logo`,
+  },
+  {
+    key: 'octoface',
+    value: 'octoface',
+    label: `Octoface`,
+  },
+]
+
 export function SidebarSettings(props: React.PropsWithChildren<Props>) {
   const configContext = useConfigs()
   const useToggleShowSideBarShortcut = useStates(configContext.val.shortcut)
@@ -64,6 +79,18 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
           )}
         </div>
       </Field>
+      <Field id="toggle-button-content" title="Content of the Toggle Button">
+        <SelectInput
+          id="toggle-button-content"
+          options={options}
+          onChange={v => {
+            configContext.set({
+              toggleButtonContent: v,
+            })
+          }}
+          value={configContext.val.toggleButtonContent}
+        ></SelectInput>
+      </Field>
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',

src/content.scss

@@ -140,10 +140,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   visibility: hidden;
 }
 
-@mixin icon-button {
+@mixin flex-center {
   display: inline-flex;
   justify-content: center;
   align-items: center;
+}
+
+@mixin icon-button {
+  @include flex-center();
   cursor: pointer;
   padding: 0;
 }
@@ -163,24 +167,47 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   z-index: $minimal-z-index;
   position: fixed;
   top: 80px;
-  left: -16px;
+  left: 0px;
   display: inline-flex;
   align-items: center;
 
   .#{$name}-toggle-show-button {
     @include icon-button;
-    width: 48px;
-    height: 48px;
     background: transparent;
     border: none;
     padding: 0;
-    transition: left ease 0.5s;
+    .octoface-icon {
+      @include flex-center();
+
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      border: 1px solid $border-gray-dark;
+      background: $bg-black;
+      &:active {
+        background: $bg-black-fade;
+      }
+      color: $text-white;
+      transition: all linear 0.3s;
+      font-size: 16px;
+      transform: translateX(0px);
+      &:active,
+      &:hover {
+        font-size: 20px;
+        transform: translateX(4px);
+      }
+    }
+    .tentacle {
+      width: 40px;
+      height: 40px;
+      transition: transform ease 0.4s;
+      transform: translateX(-16px);
+    }
+    &:active,
     &:hover {
-      left: -12px;
-      img {
+      .tentacle {
+        transform: translateX(-12px);
         filter: drop-shadow(0 0 2px #888888);
-        width: 92%;
-        height: 92%;
       }
     }
 
@@ -345,9 +372,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       .loading-indicator-container {
         width: 100%;
         height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        @include flex-center();
         border-top: 1px solid $border-gray;
 
         .loading-indicator {

src/utils/configHelper.ts

@@ -10,6 +10,7 @@ export type Config = {
   intelligentToggle: boolean | null // `null` stands for intelligent, boolean for sidebar open status
   icons: 'rich' | 'dim' | 'native'
   toggleButtonVerticalDistance: number
+  toggleButtonContent: 'logo' | 'octoface'
   shrinkGitHubHeader: boolean
 }
 
@@ -23,6 +24,7 @@ export enum configKeys {
   intelligentToggle = 'intelligentToggle',
   icons = 'icons',
   toggleButtonVerticalDistance = 'toggleButtonVerticalDistance',
+  toggleButtonContent = 'toggleButtonContent',
   shrinkGitHubHeader = 'shrinkGitHubHeader',
 }
 
@@ -36,6 +38,7 @@ const defaultConfigs: Config = {
   intelligentToggle: null,
   icons: 'rich',
   toggleButtonVerticalDistance: 80,
+  toggleButtonContent: 'logo',
   shrinkGitHubHeader: false,
 }