add NavigationResizeHexagon

packages/app/src/components/Sidebar.tsx

@@ -15,6 +15,7 @@ import DrawerToggler from './Navbar/DrawerToggler';
 import SidebarNav from './Sidebar/SidebarNav';
 import SidebarContents from './Sidebar/SidebarContents';
 import { scheduleToPutUserUISettings } from '~/services/user-ui-settings';
+import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 
 const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;
@@ -315,9 +316,8 @@ const Sidebar: FC<Props> = (props: Props) => {
                 disabled={isDrawerMode}
                 onClick={toggleNavigationBtnClickHandler}
               >
-                <span className="background" role="presentation"></span>
-                <span className="icon-container" role="presentation">
-                  <i className="fa fa-fw fa-angle-left text-white" role="presentation"></i>
+                <span className="hexagon-container" role="presentation">
+                  <NavigationResizeHexagon />
                 </span>
                 <span className="hitarea" role="presentation"></span>
               </button>

packages/app/src/components/Sidebar/NavigationResizeHexagon.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+type Props = {
+
+};
+
+export const NavigationResizeHexagon: FC<Props> = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 27.691 23.999"
+  >
+    <g className="background" transform="translate(0 0)">
+      <path d="M20.768,0l6.923,12L20.768,24H6.923L0,12,6.923,0Z" transform="translate(0)"></path>
+    </g>
+    <g className="icon" transform="translate(10 6)">
+      { /* eslint-disable-next-line max-len */ }
+      <path d="M2.124,9.114l5.28,5.34a.647.647,0,0,0,.922,0l.616-.623a.665.665,0,0,0,0-.932L4.759,8.648,8.943,4.4a.665.665,0,0,0,0-.932l-.616-.623a.647.647,0,0,0-.922,0l-5.28,5.34A.665.665,0,0,0,2.124,9.114Z" transform="translate(-1.933 -2.648)"></path>
+    </g>
+  </svg>
+);

packages/app/src/styles/_sidebar.scss

@@ -25,29 +25,40 @@
   .grw-navigation-resize-button {
     position: fixed;
 
-    $size: 24px;
+    $width: 27.691px;
+    $height: 23.999px;
 
     // locate to the center of screen
-    top: calc(50vh - 20px);
+    top: calc(50vh - $height/2);
 
-    width: $size;
-    height: $size;
     padding: 0px;
+    background-color: transparent;
     border: 0;
     opacity: 0;
-    transition: background-color 100ms linear 0s, color 100ms linear 0s, opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
+    transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
     transform: translateX(-50%);
 
-    .background {
-      $box-shadow: 0 0 0 0 rgba(96, 96, 96, 0.75);
+    .hexagon-container {
+      // set transform
+      svg * {
+        transition: fill 100ms linear;
+      }
+      svg {
+        width: $width + 2px; // add 1px for drop-shadow
+        height: $height + 2px; // add 1px for drop-shadow
+        .background {
+          filter: drop-shadow(0px 1px 0px rgba(#999, 60%));
+        }
+      }
     }
     .hitarea {
       @extend .rounded-pill;
 
-      $size-hitarea: $size * 2.5;
+      $size-hitarea: 80px;
+
       position: absolute;
-      top: ($size - $size-hitarea) / 2;
-      left: ($size - $size-hitarea) / 2;
+      top: ($width - $size-hitarea) / 2;
+      left: ($height - $size-hitarea) / 2;
       width: $size-hitarea;
       height: $size-hitarea;
     }
@@ -55,13 +66,15 @@
     // reverse and center icon at the time of collapsed
     &.collapsed {
       opacity: 1;
-      .icon-container {
+      .hexagon-container svg {
         transform: rotate(180deg);
       }
     }
   }
-  &:hover .grw-navigation-resize-button {
-    opacity: 1;
+  &:hover {
+    .grw-navigation-resize-button {
+      opacity: 1;
+    }
   }
 
   // override @atlaskit/navigation-next styles

packages/app/src/styles/theme/_apply-colors.scss

@@ -223,7 +223,22 @@ ul.pagination {
     $color-resize-button-hover: $color-reversal !default;
     $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
 
-    // TODO fill color
+    .hexagon-container svg {
+      .background {
+        fill: $bgcolor-resize-button;
+      }
+      .icon {
+        fill: $color-resize-button;
+      }
+    }
+    &:hover .hexagon-container svg {
+      .background {
+        fill: $bgcolor-resize-button-hover;
+      }
+      .icon {
+        fill: $color-resize-button-hover;
+      }
+    }
   }
   div.grw-global-navigation {
     > div {