[expand button]: change expand icon

src/assets/icons.js

@@ -50,6 +50,11 @@ const icons = {
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" class="icon-info">
             <path d="M1024,64c530,0,960,430,960,960s-430,960.00006-960,960.00006S64,1554,64,1024,494,64,1024,64Zm64,768H960.00006v640H1088V832Zm0-256H960.00006V704H1088V576Z" />
         </svg>
+    `,
+    expandArrow: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" class="icon icon-arrow">
+            <path d="M1024,1639.39437 L1154.61733,1518.74783 L2048,689.177567 L1786.76534,409 L1024,1116.92504 C1024,1116.92504 356.140625,497.736328 261.234664,409 C229.199219,443.951172 0,689.177567 0,689.177567 L893.382668,1518.74783 L1024,1639.39437 Z"></path>
+        </svg>
     `
 };
 

src/index.scss

@@ -457,16 +457,18 @@ $collapseHoverColor: #353535;
     position: relative !important;
     padding: 0 8px !important;
 
-    $arrowSize: 4px;
-    &::after {
-        content: "" !important;
+    $iconSize: 8px;
+    .icon-arrow {
+        width: $iconSize !important;
+        height: $iconSize !important;
+        margin-left: -$iconSize/2 !important;
+        margin-top: -$iconSize/2 !important;
         position: absolute !important;
-        left: 50% !important;
         top: 50% !important;
-        border: $arrowSize solid transparent !important;
-        margin-top: -$arrowSize !important;
-        margin-left: -$arrowSize/4 !important;
-        border-left-color: white !important;
+        left: 50% !important;
+        display: block !important;
+        transform: rotate(180deg) !important;
+        fill: white !important;
     }
 
     &:hover {
@@ -478,8 +480,8 @@ $collapseHoverColor: #353535;
 .glimpse-hud-popup-section--arrow {
     background-color: $expandHoverColor !important;
 
-    &::after {
-        transform: rotate(45deg) translateX(-1px) !important;
+    .icon-arrow {
+        transform: rotate(0) !important;
     }
 
     &:hover {

src/views/expand-button-view.js

@@ -1,13 +1,17 @@
+const icons = require('../assets/icons').default;
+
 module.exports = {
     render: function() {
         return `
             <div class="glimpse-section glimpse-expand-button" id="js-glimpse-expand-button" title="expand">
+              ${icons.expandArrow}
             </div>
         `;
     },
     renderPopup: function() {
         return `
-            <div class="glimpse-hud-popup-section glimpse-hud-popup-section--arrow" id="js-glimpse-collapse-button" title="collapse">
+            <div class="glimpse-hud-popup-section glimpse-hud-popup-section--expandArrow" id="js-glimpse-collapse-button" title="collapse">
+              ${icons.expandArrow}
             </div>
         `;
     }