From 32e584cbc5c16f8752524408d1481fa6ef6b19c2 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Mon, 8 Aug 2022 21:03:01 +0500
Subject: [PATCH] Various UI fixes (#3581)

* 2952 - Adding boards icon for templates
* 3574 - Updating link modal css
* 2484 - Improving table fonts
---
 .../__snapshots__/boardSelector.test.tsx.snap | 84 ++++++++++++-------
 .../boardSelectorItem.test.tsx.snap           | 84 ++++++++++++-------
 .../src/components/boardSelectorItem.scss     | 11 +++
 .../src/components/boardSelectorItem.tsx      | 13 +--
 .../boardTemplateSelectorItem.scss            |  5 ++
 .../boardTemplateSelectorItem.tsx             | 11 +--
 webapp/src/components/table/table.scss        | 24 ++++--
 7 files changed, 153 insertions(+), 79 deletions(-)

diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
index 7c294bcef..7431c34b2 100644
--- a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
+++ b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
@@ -181,20 +181,28 @@ exports[`components/boardSelector renders with some results 1`] = `
               <div
                 class="BoardSelectorItem"
               >
-                <span
-                  class="icon"
-                />
                 <div
-                  class="resultLine"
+                  class="BoardSelectorItem-info"
                 >
-                  <div
-                    class="resultTitle"
+                  <span
+                    class="icon"
                   >
-                    Untitled board
-                  </div>
+                    <i
+                      class="CompassIcon icon-product-boards undefined"
+                    />
+                  </span>
                   <div
-                    class="resultDescription"
-                  />
+                    class="resultLine"
+                  >
+                    <div
+                      class="resultTitle"
+                    >
+                      Untitled board
+                    </div>
+                    <div
+                      class="resultDescription"
+                    />
+                  </div>
                 </div>
                 <div
                   class="linkUnlinkButton"
@@ -212,20 +220,28 @@ exports[`components/boardSelector renders with some results 1`] = `
               <div
                 class="BoardSelectorItem"
               >
-                <span
-                  class="icon"
-                />
                 <div
-                  class="resultLine"
+                  class="BoardSelectorItem-info"
                 >
-                  <div
-                    class="resultTitle"
+                  <span
+                    class="icon"
                   >
-                    Untitled board
-                  </div>
+                    <i
+                      class="CompassIcon icon-product-boards undefined"
+                    />
+                  </span>
                   <div
-                    class="resultDescription"
-                  />
+                    class="resultLine"
+                  >
+                    <div
+                      class="resultTitle"
+                    >
+                      Untitled board
+                    </div>
+                    <div
+                      class="resultDescription"
+                    />
+                  </div>
                 </div>
                 <div
                   class="linkUnlinkButton"
@@ -243,20 +259,28 @@ exports[`components/boardSelector renders with some results 1`] = `
               <div
                 class="BoardSelectorItem"
               >
-                <span
-                  class="icon"
-                />
                 <div
-                  class="resultLine"
+                  class="BoardSelectorItem-info"
                 >
-                  <div
-                    class="resultTitle"
+                  <span
+                    class="icon"
                   >
-                    Untitled board
-                  </div>
+                    <i
+                      class="CompassIcon icon-product-boards undefined"
+                    />
+                  </span>
                   <div
-                    class="resultDescription"
-                  />
+                    class="resultLine"
+                  >
+                    <div
+                      class="resultTitle"
+                    >
+                      Untitled board
+                    </div>
+                    <div
+                      class="resultDescription"
+                    />
+                  </div>
                 </div>
                 <div
                   class="linkUnlinkButton"
diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
index af26f2489..833b04063 100644
--- a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
+++ b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
@@ -5,20 +5,28 @@ exports[`components/boardSelectorItem renders board without title 1`] = `
   <div
     class="BoardSelectorItem"
   >
-    <span
-      class="icon"
-    />
     <div
-      class="resultLine"
+      class="BoardSelectorItem-info"
     >
-      <div
-        class="resultTitle"
+      <span
+        class="icon"
       >
-        Untitled board
-      </div>
+        <i
+          class="CompassIcon icon-product-boards undefined"
+        />
+      </span>
       <div
-        class="resultDescription"
-      />
+        class="resultLine"
+      >
+        <div
+          class="resultTitle"
+        >
+          Untitled board
+        </div>
+        <div
+          class="resultDescription"
+        />
+      </div>
     </div>
     <div
       class="linkUnlinkButton"
@@ -41,20 +49,28 @@ exports[`components/boardSelectorItem renders linked board 1`] = `
   <div
     class="BoardSelectorItem"
   >
-    <span
-      class="icon"
-    />
     <div
-      class="resultLine"
+      class="BoardSelectorItem-info"
     >
-      <div
-        class="resultTitle"
+      <span
+        class="icon"
       >
-        Test title
-      </div>
+        <i
+          class="CompassIcon icon-product-boards undefined"
+        />
+      </span>
       <div
-        class="resultDescription"
-      />
+        class="resultLine"
+      >
+        <div
+          class="resultTitle"
+        >
+          Test title
+        </div>
+        <div
+          class="resultDescription"
+        />
+      </div>
     </div>
     <div
       class="linkUnlinkButton"
@@ -77,20 +93,28 @@ exports[`components/boardSelectorItem renders not linked board 1`] = `
   <div
     class="BoardSelectorItem"
   >
-    <span
-      class="icon"
-    />
     <div
-      class="resultLine"
+      class="BoardSelectorItem-info"
     >
-      <div
-        class="resultTitle"
+      <span
+        class="icon"
       >
-        Test title
-      </div>
+        <i
+          class="CompassIcon icon-product-boards undefined"
+        />
+      </span>
       <div
-        class="resultDescription"
-      />
+        class="resultLine"
+      >
+        <div
+          class="resultTitle"
+        >
+          Test title
+        </div>
+        <div
+          class="resultDescription"
+        />
+      </div>
     </div>
     <div
       class="linkUnlinkButton"
diff --git a/mattermost-plugin/webapp/src/components/boardSelectorItem.scss b/mattermost-plugin/webapp/src/components/boardSelectorItem.scss
index 260b6afd5..ecdf44892 100644
--- a/mattermost-plugin/webapp/src/components/boardSelectorItem.scss
+++ b/mattermost-plugin/webapp/src/components/boardSelectorItem.scss
@@ -5,10 +5,21 @@
     padding: 10px 0;
     margin: 0 35px;
 
+    .BoardSelectorItem-info {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+    }
+
     .icon {
+        width: 18px;
         align-items: flex-start;
         margin-right: 10px;
 
+        i {
+            font-size: 20px;
+        }
+
         &:empty {
             display: none;
         }
diff --git a/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx b/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx
index 5da6f2241..3eff5bb94 100644
--- a/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx
+++ b/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx
@@ -6,6 +6,7 @@ import {useIntl, FormattedMessage} from 'react-intl'
 
 import {Board} from '../../../../webapp/src/blocks/board'
 import Button from '../../../../webapp/src/widgets/buttons/button'
+import CompassIcon from '../../../../webapp/src/widgets/icons/compassIcon'
 
 import './boardSelectorItem.scss'
 
@@ -23,10 +24,12 @@ const BoardSelectorItem = (props: Props) => {
     const resultTitle = item.title || untitledBoardTitle
     return (
         <div className='BoardSelectorItem'>
-            <span className='icon'>{item.icon}</span>
-            <div className='resultLine'>
-                <div className='resultTitle'>{resultTitle}</div>
-                <div className='resultDescription'>{item.description}</div>
+            <div className='BoardSelectorItem-info'>
+                <span className='icon'>{item.icon || <CompassIcon icon='product-boards'/>}</span>
+                <div className='resultLine'>
+                    <div className='resultTitle'>{resultTitle}</div>
+                    <div className='resultDescription'>{item.description}</div>
+                </div>
             </div>
             <div className='linkUnlinkButton'>
                 {item.channelId === currentChannel &&
@@ -44,7 +47,7 @@ const BoardSelectorItem = (props: Props) => {
                         onClick={() => props.linkBoard(item)}
                         emphasis='primary'
                     >
-                        <FormattedMessage 
+                        <FormattedMessage
                             id='boardSelector.link'
                             defaultMessage='Link'
                         />
diff --git a/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.scss b/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.scss
index 265e3e49e..b6cec7462 100644
--- a/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.scss
+++ b/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.scss
@@ -20,6 +20,11 @@
 
     .template-icon {
         margin-right: 10px;
+
+        i {
+            font-size: 16px;
+            margin: 0 -5px 0 -4px;
+        }
     }
 
     &:hover {
diff --git a/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.tsx b/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.tsx
index 74b514363..c569c3440 100644
--- a/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.tsx
+++ b/webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.tsx
@@ -4,6 +4,7 @@ import React, {useCallback, useState} from 'react'
 import {useIntl} from 'react-intl'
 
 import {Board} from '../../blocks/board'
+import CompassIcon from '../../widgets/icons/compassIcon'
 import IconButton from '../../widgets/buttons/iconButton'
 import DeleteIcon from '../../widgets/icons/delete'
 import EditIcon from '../../widgets/icons/edit'
@@ -39,17 +40,17 @@ const BoardTemplateSelectorItem = (props: Props) => {
             className={isActive ? 'BoardTemplateSelectorItem active' : 'BoardTemplateSelectorItem'}
             onClick={onClickHandler}
         >
-            <span className='template-icon'>{template.icon}</span>
+            <span className='template-icon'>{template.icon || <CompassIcon icon='product-boards'/>}</span>
             <span className='template-name'>{template.title}</span>
 
             {/* don't show template menu options for default templates */}
             {template.teamId !== Constants.globalTeamId &&
                 <div className='actions'>
-                    <BoardPermissionGate 
+                    <BoardPermissionGate
                         boardId={template.id}
                         teamId={template.teamId}
                         permissions={[Permission.DeleteBoard]}
-                    >            
+                    >
                         <IconButton
                             icon={<DeleteIcon/>}
                             title={intl.formatMessage({id: 'BoardTemplateSelector.delete-template', defaultMessage: 'Delete'})}
@@ -59,11 +60,11 @@ const BoardTemplateSelectorItem = (props: Props) => {
                             }}
                         />
                     </BoardPermissionGate>
-                    <BoardPermissionGate 
+                    <BoardPermissionGate
                         boardId={template.id}
                         teamId={template.teamId}
                         permissions={[Permission.ManageBoardCards, Permission.ManageBoardProperties]}
-                    >            
+                    >
                         <IconButton
                             icon={<EditIcon/>}
                             title={intl.formatMessage({id: 'BoardTemplateSelector.edit-template', defaultMessage: 'Edit'})}
diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss
index 37cbbcdd6..44f51a89c 100644
--- a/webapp/src/components/table/table.scss
+++ b/webapp/src/components/table/table.scss
@@ -2,9 +2,8 @@
 
 .Table {
     margin-top: 16px;
-    padding-bottom: 0 !important;
     margin-left: 20px !important;
-    padding-left: 0 !important;
+    padding: 0 32px 0 0 !important;
     overflow: auto;
     position: relative;
     flex: 1;
@@ -48,22 +47,21 @@
             padding: 2px 8px;
             border-radius: 3px;
             line-height: 20px;
-            margin-right: 5px;
+            margin: 0 4px 0 0;
             color: rgba(var(--center-channel-color-rgb), 1);
             white-space: nowrap;
             text-transform: none;
-            font-weight: normal;
-            font-size: 16px;
+            font-weight: 600;
+            font-size: 14px;
             width: 100%;
 
             input {
                 background: transparent;
                 width: 100%;
                 text-transform: none;
-                font-weight: normal;
-                font-size: 16px;
-                //     line-height: 20px;
-                color: rgba(var(--center-channel-color-rgb), 1);
+                font-size: inherit;
+                color: inherit;
+                padding: 0;
             }
         }
 
@@ -108,6 +106,7 @@
 
         .octo-icontitle {
             flex: 1 1 auto;
+            font-weight: 600;
 
             .octo-icon {
                 min-width: 20px;
@@ -215,6 +214,13 @@
 
         .octo-table-cell {
             align-items: center;
+
+            button,
+            .octo-propertyvalue {
+                font-size: inherit;
+                font-weight: normal;
+            }
+
         }
     }