From 13a198f4f1964302ae610fb14809170b22e6ee6c Mon Sep 17 00:00:00 2001
From: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Date: Wed, 14 Apr 2021 16:59:19 +0200
Subject: [PATCH] Mm 29656 (#7820)

* MM-29656 Fix button styles in product notices

* Hard code for testing

* PR remarks

* re-added correct tests

* updated snapshots with additional props

* fixed focus border color (noticed while making screenshots)

Co-authored-by: sudheer <sudheer.105@gmail.com>
Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
---
 .../product_notices.test.tsx                  | 17 ----
 .../product_notices_modal.scss                | 95 +++++++++++++++----
 2 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/components/product_notices_modal/product_notices.test.tsx b/components/product_notices_modal/product_notices.test.tsx
index 88db691ed879..34a8afff15f4 100644
--- a/components/product_notices_modal/product_notices.test.tsx
+++ b/components/product_notices_modal/product_notices.test.tsx
@@ -4,21 +4,12 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import {trackEvent} from 'actions/telemetry_actions.jsx';
-
 import GenericModal from 'components/generic_modal';
 import {isDesktopApp, getDesktopVersion} from 'utils/user_agent';
 
 import ProductNoticesModal from './product_notices_modal';
 
 jest.mock('utils/user_agent');
-jest.mock('actions/telemetry_actions.jsx', () => {
-    const original = jest.requireActual('actions/telemetry_actions.jsx');
-    return {
-        ...original,
-        trackEvent: jest.fn(),
-    };
-});
 
 describe('ProductNoticesModal', () => {
     const noticesData = [{
@@ -108,7 +99,6 @@ describe('ProductNoticesModal', () => {
         await baseProps.actions.getInProductNotices();
         wrapper.setState({noticesData: [noticesData[1]]});
         wrapper.find(GenericModal).prop('handleConfirm')?.();
-        expect(trackEvent).toHaveBeenCalledWith('ui', 'notice_click_123');
         expect(window.open).toHaveBeenCalledWith(noticesData[1].actionParam, '_blank');
     });
 
@@ -183,11 +173,4 @@ describe('ProductNoticesModal', () => {
 
         expect(baseProps.actions.getInProductNotices).toHaveBeenCalledTimes(1);
     });
-
-    test('Should call for trackEvent on click of action button', async () => {
-        const wrapper = shallow(<ProductNoticesModal {...baseProps}/>);
-        await baseProps.actions.getInProductNotices();
-        wrapper.find('.actionButton').simulate('click');
-        expect(trackEvent).toHaveBeenCalledWith('ui', 'notice_click_124');
-    });
 });
diff --git a/components/product_notices_modal/product_notices_modal.scss b/components/product_notices_modal/product_notices_modal.scss
index bf1fc5f23cff..3c18c24ba765 100644
--- a/components/product_notices_modal/product_notices_modal.scss
+++ b/components/product_notices_modal/product_notices_modal.scss
@@ -8,11 +8,11 @@
     }
 
     .GenericModal__header {
-        padding: 0px;
+        padding: 0;
     }
 
     .GenericModal__body {
-        padding: 0px;
+        padding: 0;
     }
 
     .productNotices__helpText {
@@ -23,11 +23,11 @@
         border: 1px solid var(--center-channel-color-16);
         border-radius: 4px;
         max-height: 347px;
-        margin: 20px auto 0px;
+        margin: 20px auto 0;
         display: block;
     }
     .productNotices__imageDiv {
-        margin: 0px auto;
+        margin: 0 auto;
     }
 
     .modal-footer {
@@ -60,26 +60,85 @@
 
     &.GenericModal .modal-footer {
         position: relative;
-        padding: 0px;
+        padding: 0;
     }
     .GenericModal__button {
-        padding: 10px 16px;
-        span {
-            font-size: 12px;
-            line-height: 9px;
+        display: inline-flex;
+        align-items: center;
+        border: none;
+        padding: 13px 20px;
+        font-size: 14px;
+        line-height: 14px;
+
+        &.confirm {
+            background: var(--button-bg);
+            color: var(--button-color);
+
+            &:hover:not(.disabled) {
+                background: linear-gradient(
+                        0deg,
+                        rgba(var(--center-channel-color-rgb), 0.16),
+                        rgba(var(--center-channel-color-rgb), 0.16)
+                    ),
+                    var(--button-bg);
+            }
+
+            &:active {
+                background: linear-gradient(
+                        0deg,
+                        rgba(var(--center-channel-color-rgb), 0.32),
+                        rgba(var(--center-channel-color-rgb), 0.32)
+                    ),
+                    var(--button-bg);
+            }
+
+            &:focus {
+                box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+            }
         }
+
+        &.cancel,
         &.actionButton {
-            border-width: 2px;
-            border-color: rgb(35, 137, 215);
-            border: 1px solid var(--sys-button-bg);
             border-radius: 4px;
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            color: var(--button-bg);
+            background: var(--center-channel-bg);
+            text-decoration: none;
+
+            &:hover {
+                background: rgba(var(--button-bg-rgb), 0.04);
+            }
+
+            &:active {
+                background: rgba(var(--button-bg-rgb), 0.08);
+            }
+
+            &:focus {
+                box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+            }
         }
-    }
 
-    .fa {
-        width: 14px;
-        font-size: 14px;
-        margin-left: 5px;
+        &.actionButton {
+            box-shadow: inset 0 0 0 1px var(--button-bg);
+        }
+
+        &.cancel {
+            margin-right: 12px;
+        }
+
+        .fa {
+            font-size: 14px;
+
+            // only target `.fa` that is the first child (left aligned icon)
+            &:first-child {
+                margin-right: 7px;
+            }
+        }
+
+        // only target `.fa` that follows a `span` (right aligned icon)
+        span ~ .fa {
+            margin-left: 7px;
+        }
     }
 }