Centered DisclosureTriangleIcon

webapp/src/components/sidebar.scss

@@ -99,11 +99,11 @@
         }
 
         &.expanded {
-            .SubmenuTriangleIcon {
+            .DisclosureTriangleIcon {
                 transform: rotate(90deg);
             }
         }
-        .SubmenuTriangleIcon {
+        .DisclosureTriangleIcon {
             transition: 200ms ease-in-out;
             transform: rotate(0deg);
         }
@@ -117,7 +117,7 @@
         text-overflow: ellipsis;
     }
 
-    .OptionsIcon, .SubmenuTriangleIcon, .DotIcon {
+    .OptionsIcon, .DisclosureTriangleIcon, .DotIcon {
         fill: rgba(var(--sidebar-fg), 0.5);
         flex-shrink: 0;
     }

webapp/src/components/sidebar.tsx

@@ -18,7 +18,7 @@ import HamburgerIcon from '../widgets/icons/hamburger'
 import HideSidebarIcon from '../widgets/icons/hideSidebar'
 import OptionsIcon from '../widgets/icons/options'
 import ShowSidebarIcon from '../widgets/icons/showSidebar'
-import SubmenuTriangleIcon from '../widgets/icons/submenuTriangle'
+import DisclosureTriangle from '../widgets/icons/disclosureTriangle'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
 import './sidebar.scss'
@@ -95,7 +95,7 @@ class Sidebar extends React.Component<Props, State> {
                             <div key={board.id}>
                                 <div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
                                     <IconButton
-                                        icon={<SubmenuTriangleIcon/>}
+                                        icon={<DisclosureTriangle/>}
                                         onClick={() => {
                                             const newCollapsedBoards = {...this.state.collapsedBoards}
                                             newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]

webapp/src/widgets/icons/disclosureTriangle.scss

@@ -0,0 +1,6 @@
+.DisclosureTriangleIcon {
+    fill: rgba(var(--main-fg), 0.7);
+    stroke: none;
+	width: 24px;
+	height: 24px;
+}

webapp/src/widgets/icons/disclosureTriangle.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import './disclosureTriangle.scss'
+
+export default function DisclosureTriangle(): JSX.Element {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='DisclosureTriangleIcon Icon'
+            viewBox='0 0 100 100'
+        >
+            <polygon points='37,35 37,65 63,50'/>
+        </svg>
+    )
+}