From fb46097e7267d63e2e1ba40d341e8e1eaf6c95ff Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 5 May 2022 00:53:46 +0500
Subject: [PATCH] 2889 - Hiding images on share modal on personal (#2925)

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
---
 mattermost-plugin/webapp/src/plugin.scss      |  2 +-
 .../__snapshots__/shareBoard.test.tsx.snap    | 27 -------
 .../src/components/shareBoard/shareBoard.scss |  5 +-
 .../shareBoard/teamPermissionsRow.tsx         | 11 ++-
 .../shareBoard/userPermissionsRow.tsx         | 10 ++-
 webapp/src/styles/_modifiers.scss             | 78 +++++++++++++++++++
 webapp/src/styles/main.scss                   |  3 +-
 webapp/src/theme.ts                           |  2 +-
 8 files changed, 98 insertions(+), 40 deletions(-)
 create mode 100644 webapp/src/styles/_modifiers.scss

diff --git a/mattermost-plugin/webapp/src/plugin.scss b/mattermost-plugin/webapp/src/plugin.scss
index ae96c8c59..94e9e918f 100644
--- a/mattermost-plugin/webapp/src/plugin.scss
+++ b/mattermost-plugin/webapp/src/plugin.scss
@@ -13,7 +13,7 @@
                 background: rgba(var(--center-channel-color-rgb), 0.08);
 
                 div {
-                    color: var(--link-color-rgb);
+                    color: rgb(var(--link-color-rgb));
                 }
             }
         }
diff --git a/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap b/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap
index 3fcc4424b..df10d3010 100644
--- a/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap
+++ b/webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap
@@ -126,9 +126,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -352,9 +349,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -578,9 +572,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -1859,9 +1850,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -2108,9 +2096,6 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -2357,9 +2342,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -2583,9 +2565,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -2809,9 +2788,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
@@ -3035,9 +3011,6 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
             <div
               class="user-item__content"
             >
-              <i
-                class="CompassIcon icon-mattermost user-item__img"
-              />
               <div
                 class="ml-3"
               >
diff --git a/webapp/src/components/shareBoard/shareBoard.scss b/webapp/src/components/shareBoard/shareBoard.scss
index fccad18ac..9395a5c62 100644
--- a/webapp/src/components/shareBoard/shareBoard.scss
+++ b/webapp/src/components/shareBoard/shareBoard.scss
@@ -139,7 +139,7 @@
 
     .share-input {
         height: 48px;
-        padding: 0 12px;
+        padding: 0 16px;
         display: flex;
         align-items: center;
         position: relative;
@@ -160,7 +160,8 @@
             height: 100%;
             border-radius: 4px;
             border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-            padding-left: 40px;
+            padding-left: 35px;
+            font-size: 16px;
 
             &:focus {
                 border: 2px solid var(--button-bg);
diff --git a/webapp/src/components/shareBoard/teamPermissionsRow.tsx b/webapp/src/components/shareBoard/teamPermissionsRow.tsx
index f523624bd..60089b42c 100644
--- a/webapp/src/components/shareBoard/teamPermissionsRow.tsx
+++ b/webapp/src/components/shareBoard/teamPermissionsRow.tsx
@@ -15,6 +15,7 @@ import {useAppSelector} from '../../store/hooks'
 import {getCurrentTeam} from '../../store/teams'
 import {getCurrentBoard} from '../../store/boards'
 import {Permission} from '../../constants'
+import {Utils} from '../../utils'
 
 import BoardPermissionGate from '../permissions/boardPermissionGate'
 
@@ -41,10 +42,12 @@ const TeamPermissionsRow = (): JSX.Element => {
     return (
         <div className='user-item'>
             <div className='user-item__content'>
-                <CompassIcon
-                    icon='mattermost'
-                    className='user-item__img'
-                />
+                {Utils.isFocalboardPlugin() &&
+                    <CompassIcon
+                        icon='mattermost'
+                        className='user-item__img'
+                    />
+                }
                 <div className='ml-3'><strong>{intl.formatMessage({id: 'ShareBoard.teamPermissionsText', defaultMessage: 'Everyone at {teamName} Team'}, {teamName: team?.title})}</strong></div>
             </div>
             <div>
diff --git a/webapp/src/components/shareBoard/userPermissionsRow.tsx b/webapp/src/components/shareBoard/userPermissionsRow.tsx
index cf05bd54f..f63e30f4c 100644
--- a/webapp/src/components/shareBoard/userPermissionsRow.tsx
+++ b/webapp/src/components/shareBoard/userPermissionsRow.tsx
@@ -40,10 +40,12 @@ const UserPermissionsRow = (props: Props): JSX.Element => {
     return (
         <div className='user-item'>
             <div className='user-item__content'>
-                <img
-                    src={Utils.getProfilePicture(user.id)}
-                    className='user-item__img'
-                />
+                {Utils.isFocalboardPlugin() &&
+                    <img
+                        src={Utils.getProfilePicture(user.id)}
+                        className='user-item__img'
+                    />
+                }
                 <div className='ml-3'>
                     <strong>{user.username}</strong>
                     <strong className='ml-2 text-light'>{`@${user.username}`}</strong>
diff --git a/webapp/src/styles/_modifiers.scss b/webapp/src/styles/_modifiers.scss
new file mode 100644
index 000000000..883341d5a
--- /dev/null
+++ b/webapp/src/styles/_modifiers.scss
@@ -0,0 +1,78 @@
+@charset 'UTF-8';
+$positions: 't b l r';
+
+$positions: 't'top,
+    'b'bottom,
+    'l'left,
+    'r'right;
+
+@for $i from 0 through 20 {
+    @each $label,
+        $position in $positions {
+        .p#{$label}-#{$i} {
+            padding-#{$position}: #{$i*4}px !important;
+        }
+    }
+
+    @each $label,
+        $position in $positions {
+        .m#{$label}-#{$i} {
+            margin-#{$position}: #{$i*4}px !important;
+        }
+    }
+
+    .m-#{$i} {
+        margin: #{$i*4}px !important;
+    }
+
+    .p-#{$i} {
+        padding: #{$i*4}px !important;
+    }
+
+    .px-#{$i} {
+        padding: 0 #{$i*4}px 0 #{$i*4}px !important;
+    }
+
+    .py-#{$i} {
+        padding: #{$i*4}px 0 #{$i*4}px 0 !important;
+    }
+
+    .h-#{$i} {
+        height: #{$i*4}px !important;
+    }
+}
+
+.d-block {
+    display: block;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.a11y--focused {
+    border-radius: 4px;
+    box-shadow: 0 0 1px 3px rgba(var(--link-color-rgb), 0.5), 0 0 0 1px var(--link-color);
+}
+
+.pos-relative {
+    position: relative;
+}
+
+.hidden-label {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    margin: -1px;
+}
+
+.overflow--visible {
+    overflow: visible;
+}
+
+.bg--white {
+    background: var(--center-channel-bg);
+}
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index b21bfe37f..2e8d7d067 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -1,4 +1,5 @@
 @import 'typography';
+@import 'modifiers';
 
 html {
     height: 100%;
@@ -59,7 +60,7 @@ html {
 
     a {
         text-decoration: none;
-        color: var(--link-color-rgb);
+        color: rgb(var(--link-color-rgb));
     }
 
     hr {
diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts
index c3b98966b..ee228e67c 100644
--- a/webapp/src/theme.ts
+++ b/webapp/src/theme.ts
@@ -50,7 +50,7 @@ export const defaultTheme = {
     sidebarTextActiveBorder: '93, 137, 243',
     sidebarWhiteLogo: 'true',
 
-    link: '#0000ee',
+    link: '93, 137, 234',
     linkVisited: '#551a8b',
 
     propDefault: '#fff',