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 <[email protected]> Co-authored-by: Mattermod <[email protected]>
mattermost · Apr 14, 2021 · 13a198f · 13a198f
1 parent 843ab09
commit 13a198f
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 35 deletions.
diff --git 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
@@ -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;
+ }
  }
 }