GH-1872 - Updating octo-icon font weight (#1978)

* GH-1872 - Updating octo-icon font weight

* update unit tests

* update cypress tests

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>

webapp/cypress/integration/createBoard.ts

@@ -129,7 +129,7 @@ describe('Create and delete board / card', () => {
         cy.log('**Delete board**')
         cy.get('.Sidebar .octo-sidebar-list').
             contains(boardTitle).
-            first().
+            parent().
             next().
             find('.Button.IconButton').
             click({force: true})

webapp/src/components/__snapshots__/workspace.test.tsx.snap

@@ -140,7 +140,16 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
               class="octo-sidebar-title"
               title="board title"
             >
-              i board title
+              <div
+                class="octo-icon"
+              >
+                i
+              </div>
+              <span
+                class="octo-sidebar-name"
+              >
+                board title
+              </span>
             </div>
             <div
               aria-label="menuwrapper"
@@ -1278,7 +1287,16 @@ exports[`src/components/workspace should match snapshot 1`] = `
               class="octo-sidebar-title"
               title="board title"
             >
-              i board title
+              <div
+                class="octo-icon"
+              >
+                i
+              </div>
+              <span
+                class="octo-sidebar-name"
+              >
+                board title
+              </span>
             </div>
             <div
               aria-label="menuwrapper"

webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap

@@ -26,7 +26,16 @@ exports[`components/sidebarBoardItem sidebar call hideSidebar 1`] = `
         class="octo-sidebar-title"
         title="board title"
       >
-        i board title
+        <div
+          class="octo-icon"
+        >
+          i
+        </div>
+        <span
+          class="octo-sidebar-name"
+        >
+          board title
+        </span>
       </div>
       <div
         aria-label="menuwrapper"

webapp/src/components/sidebar/sidebarBoardItem.scss

@@ -90,5 +90,18 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        display: flex;
+        align-items: baseline;
+
+        .octo-icon {
+            margin-right: 6px;
+        }
+
+        .octo-sidebar-name {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 }

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -124,7 +124,8 @@ const SidebarBoardItem = React.memo((props: Props) => {
                     className='octo-sidebar-title'
                     title={displayTitle}
                 >
-                    {board.fields.icon ? `${board.fields.icon} ${displayTitle}` : displayTitle}
+                    {board.fields.icon ? <div className='octo-icon'>{board.fields.icon}</div> : undefined}
+                    <span className='octo-sidebar-name'>{displayTitle}</span>
                 </div>
                 <MenuWrapper stopPropagationOnToggle={true}>
                     <IconButton icon={<OptionsIcon/>}/>

webapp/src/styles/main.scss

@@ -125,6 +125,7 @@ html {
         line-height: 1.2;
         align-self: baseline;
         overflow: visible;
+        font-weight: normal;
     }
 
     .octo-icontitle {