From 401062d1284a010cf52563f1a0bf1f362979ec1a Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 20 Dec 2022 18:36:02 +0500
Subject: [PATCH] GH-4278 - Updating card modal attach btn (#4361)

* GH-4278 - Updating card modal attach btn

* Updating flex

* Updating test

* Updating test
---
 .../__snapshots__/boardSelector.test.tsx.snap | 16 ++++++++---
 .../__snapshots__/cardDialog.test.tsx.snap    | 24 ++++++++++++----
 webapp/src/components/cardDialog.scss         | 16 ++---------
 webapp/src/components/cardDialog.tsx          |  5 +++-
 webapp/src/components/dialog.tsx              |  2 +-
 webapp/src/widgets/buttons/button.scss        | 28 +++++++++++++++++++
 6 files changed, 65 insertions(+), 26 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 0b7fb50e6..c601e4124 100644
--- a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
+++ b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
@@ -31,7 +31,9 @@ exports[`components/boardSelector escape button should unmount the component 1`]
             <div
               class="toolbar--right"
             >
-              <div>
+              <div
+                class="d-flex"
+              >
                 <button
                   class="Button emphasis--secondary"
                   type="button"
@@ -134,7 +136,9 @@ exports[`components/boardSelector renders with no results 1`] = `
             <div
               class="toolbar--right"
             >
-              <div>
+              <div
+                class="d-flex"
+              >
                 <button
                   class="Button emphasis--secondary"
                   type="button"
@@ -238,7 +242,9 @@ exports[`components/boardSelector renders with some results 1`] = `
             <div
               class="toolbar--right"
             >
-              <div>
+              <div
+                class="d-flex"
+              >
                 <button
                   class="Button emphasis--secondary"
                   type="button"
@@ -440,7 +446,9 @@ exports[`components/boardSelector renders without start searching 1`] = `
             <div
               class="toolbar--right"
             >
-              <div>
+              <div
+                class="d-flex"
+              >
                 <button
                   class="Button emphasis--secondary"
                   type="button"
diff --git a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
index 09e1eab15..29b94a6cc 100644
--- a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
@@ -28,7 +28,9 @@ exports[`components/cardDialog already following card 1`] = `
           <div
             class="toolbar--right"
           >
-            <div>
+            <div
+              class="d-flex"
+            >
               <button
                 type="button"
               >
@@ -470,7 +472,9 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
           <div
             class="toolbar--right"
           >
-            <div>
+            <div
+              class="d-flex"
+            >
               <button
                 type="button"
               >
@@ -599,7 +603,9 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
           <div
             class="toolbar--right"
           >
-            <div>
+            <div
+              class="d-flex"
+            >
               <button
                 type="button"
               >
@@ -946,7 +952,9 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
           <div
             class="toolbar--right"
           >
-            <div>
+            <div
+              class="d-flex"
+            >
               <button
                 type="button"
               >
@@ -1156,7 +1164,9 @@ exports[`components/cardDialog should match snapshot 1`] = `
           <div
             class="toolbar--right"
           >
-            <div>
+            <div
+              class="d-flex"
+            >
               <button
                 type="button"
               >
@@ -1366,7 +1376,9 @@ exports[`components/cardDialog should match snapshot without permissions 1`] = `
           <div
             class="toolbar--right"
           >
-            <div>
+            <div
+              class="d-flex"
+            >
               <button
                 type="button"
               >
diff --git a/webapp/src/components/cardDialog.scss b/webapp/src/components/cardDialog.scss
index e371d3060..3b1b917fc 100644
--- a/webapp/src/components/cardDialog.scss
+++ b/webapp/src/components/cardDialog.scss
@@ -12,19 +12,7 @@
 .cardFollowBtn {
     display: inline-flex;
 
-    &.attach {
-        margin-right: 20px;
-        color: rgba(var(--center-channel-color-rgb), 0.64);
-        background-color: rgba(var(--center-channel-color-rgb), 0.08);
-    }
-
-    &.follow {
-        color: rgba(var(--center-channel-color-rgb), 0.64);
-        background-color: rgba(var(--center-channel-color-rgb), 0.08);
-    }
-
-    &.unfollow {
-        color: rgb(var(--button-bg-rgb));
-        background-color: rgba(var(--button-bg-rgb), 0.08);
+    &--attach {
+        margin-right: 8px;
     }
 }
diff --git a/webapp/src/components/cardDialog.tsx b/webapp/src/components/cardDialog.tsx
index abba8bc05..dec64e98a 100644
--- a/webapp/src/components/cardDialog.tsx
+++ b/webapp/src/components/cardDialog.tsx
@@ -223,7 +223,8 @@ const CardDialog = (props: Props): JSX.Element => {
             <BoardPermissionGate permissions={[Permission.ManageBoardCards]}>
                 <Button
                     icon={<CompassIcon icon='paperclip'/>}
-                    className='cardFollowBtn attach'
+                    className='cardFollowBtn cardFollowBtn--attach'
+                    emphasis='gray'
                     size='medium'
                     onClick={addElement}
                 >
@@ -238,6 +239,7 @@ const CardDialog = (props: Props): JSX.Element => {
             <>
                 <Button
                     className='cardFollowBtn follow'
+                    emphasis='gray'
                     size='medium'
                     onClick={() => mutator.followBlock(props.cardId, 'card', me!.id)}
                 >
@@ -250,6 +252,7 @@ const CardDialog = (props: Props): JSX.Element => {
             <>
                 <Button
                     className='cardFollowBtn unfollow'
+                    emphasis='tertiary'
                     size='medium'
                     onClick={() => mutator.unfollowBlock(props.cardId, 'card', me!.id)}
                 >
diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx
index d2e6e93d9..7eb28ec50 100644
--- a/webapp/src/components/dialog.tsx
+++ b/webapp/src/components/dialog.tsx
@@ -63,7 +63,7 @@ const Dialog = (props: Props) => {
                             {subtitle && <h5 className='dialog-subtitle'>{subtitle}</h5>}
                         </div>
                         <div className='toolbar--right'>
-                            {toolbar && <div>{toolbar}</div>}
+                            {toolbar && <div className='d-flex'>{toolbar}</div>}
                             {toolsMenu && <MenuWrapper>
                                 <IconButton
                                     size='medium'
diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss
index bb3cf1026..f5be6ecb7 100644
--- a/webapp/src/widgets/buttons/button.scss
+++ b/webapp/src/widgets/buttons/button.scss
@@ -89,6 +89,34 @@
         }
     }
 
+    &.emphasis--quaternary {
+        background: transparent;
+        color: rgb(var(--button-bg-rgb));
+
+        &:hover {
+            background: rgba(var(--button-bg-rgb), 0.08);
+        }
+
+        &:active {
+            background-color: rgb(var(--button-bg-rgb), 0.12);
+        }
+    }
+
+    &.emphasis--gray {
+        background: transparent;
+        color: rgba(var(--center-channel-color-rgb), 0.64);
+
+        &:hover {
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+        }
+
+        &:active {
+            color: rgb(var(--button-bg-rgb));
+            background-color: rgb(var(--button-bg-rgb), 0.12);
+        }
+    }
+
     &.emphasis--danger {
         color: rgb(var(--button-danger-color-rgb));
         background-color: rgb(var(--button-danger-bg-rgb));