From 6abc4201f02c6e6a036c3b24825ddc2155fa5e2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Tue, 3 Oct 2023 11:03:13 +0200
Subject: [PATCH] Fix style for notices (#24636)

* Fix style for notices

* Fix snapshots

* Address feedback

* Update snapshots
---
 .../__snapshots__/system_notice.test.tsx.snap | 26 +++++++++----------
 .../src/components/system_notice/notices.tsx  |  5 ++--
 .../system_notice/system_notice.tsx           |  4 +--
 .../src/sass/components/_system-notice.scss   |  2 +-
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap b/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap
index eac4c99b37..ccf8d5ae0e 100644
--- a/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap
+++ b/webapp/channels/src/components/system_notice/__snapshots__/system_notice.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`components/SystemNotice should match snapshot for admin, admin notice 1
       className="system-notice__footer"
     >
       <button
-        className="btn btn-primary"
+        className="btn btn-sm btn-primary"
         id="systemnotice_remindme"
         onClick={[Function]}
       >
@@ -49,7 +49,7 @@ exports[`components/SystemNotice should match snapshot for admin, admin notice 1
         />
       </button>
       <button
-        className="btn"
+        className="btn btn-sm btn-tertiary"
         id="systemnotice_dontshow"
         onClick={[Function]}
       >
@@ -85,7 +85,7 @@ exports[`components/SystemNotice should match snapshot for admin, regular notice
       className="system-notice__footer"
     >
       <button
-        className="btn btn-primary"
+        className="btn btn-sm btn-primary"
         id="systemnotice_remindme"
         onClick={[Function]}
       >
@@ -95,7 +95,7 @@ exports[`components/SystemNotice should match snapshot for admin, regular notice
         />
       </button>
       <button
-        className="btn"
+        className="btn btn-sm btn-tertiary"
         id="systemnotice_dontshow"
         onClick={[Function]}
       >
@@ -131,7 +131,7 @@ exports[`components/SystemNotice should match snapshot for regular user, admin a
       className="system-notice__footer"
     >
       <button
-        className="btn btn-primary"
+        className="btn btn-sm btn-primary"
         id="systemnotice_remindme"
         onClick={[Function]}
       >
@@ -141,7 +141,7 @@ exports[`components/SystemNotice should match snapshot for regular user, admin a
         />
       </button>
       <button
-        className="btn"
+        className="btn btn-sm btn-tertiary"
         id="systemnotice_dontshow"
         onClick={[Function]}
       >
@@ -185,7 +185,7 @@ exports[`components/SystemNotice should match snapshot for regular user, regular
       className="system-notice__footer"
     >
       <button
-        className="btn btn-primary"
+        className="btn btn-sm btn-primary"
         id="systemnotice_remindme"
         onClick={[Function]}
       >
@@ -195,7 +195,7 @@ exports[`components/SystemNotice should match snapshot for regular user, regular
         />
       </button>
       <button
-        className="btn"
+        className="btn btn-sm btn-tertiary"
         id="systemnotice_dontshow"
         onClick={[Function]}
       >
@@ -233,7 +233,7 @@ exports[`components/SystemNotice should match snapshot for show function returni
       className="system-notice__footer"
     >
       <button
-        className="btn btn-primary"
+        className="btn btn-sm btn-primary"
         id="systemnotice_remindme"
         onClick={[Function]}
       >
@@ -243,7 +243,7 @@ exports[`components/SystemNotice should match snapshot for show function returni
         />
       </button>
       <button
-        className="btn"
+        className="btn btn-sm btn-tertiary"
         id="systemnotice_dontshow"
         onClick={[Function]}
       >
@@ -279,7 +279,7 @@ exports[`components/SystemNotice should match snapshot for with allowForget equa
       className="system-notice__footer"
     >
       <button
-        className="btn btn-primary"
+        className="btn btn-sm btn-primary"
         id="systemnotice_remindme"
         onClick={[Function]}
       >
@@ -317,7 +317,7 @@ exports[`components/SystemNotice should match snapshot when a custom icon is pas
       className="system-notice__footer"
     >
       <button
-        className="btn btn-primary"
+        className="btn btn-sm btn-primary"
         id="systemnotice_remindme"
         onClick={[Function]}
       >
@@ -327,7 +327,7 @@ exports[`components/SystemNotice should match snapshot when a custom icon is pas
         />
       </button>
       <button
-        className="btn"
+        className="btn btn-sm btn-tertiary"
         id="systemnotice_dontshow"
         onClick={[Function]}
       >
diff --git a/webapp/channels/src/components/system_notice/notices.tsx b/webapp/channels/src/components/system_notice/notices.tsx
index a0163ce694..408fe3a06b 100644
--- a/webapp/channels/src/components/system_notice/notices.tsx
+++ b/webapp/channels/src/components/system_notice/notices.tsx
@@ -4,10 +4,11 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {InformationOutlineIcon} from '@mattermost/compass-icons/components';
+
 import ExternalLink from 'components/external_link';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import type {Notice} from 'components/system_notice/types';
-import InfoIcon from 'components/widgets/icons/info_icon';
 
 import {DocLinks} from 'utils/constants';
 import * as ServerVersion from 'utils/server_version';
@@ -193,7 +194,7 @@ const notices: Notice[] = [
                 defaultMessage='Updates to Group Messages'
             />
         ),
-        icon: (<InfoIcon/>),
+        icon: (<InformationOutlineIcon/>),
         body: (
             <FormattedMessage
                 id='system_noticy.body.gm_as_dm'
diff --git a/webapp/channels/src/components/system_notice/system_notice.tsx b/webapp/channels/src/components/system_notice/system_notice.tsx
index 196160b56d..95b3250fab 100644
--- a/webapp/channels/src/components/system_notice/system_notice.tsx
+++ b/webapp/channels/src/components/system_notice/system_notice.tsx
@@ -144,7 +144,7 @@ export default class SystemNotice extends React.PureComponent<Props> {
                     <div className='system-notice__footer'>
                         <button
                             id='systemnotice_remindme'
-                            className='btn btn-primary'
+                            className='btn btn-sm btn-primary'
                             onClick={this.hideAndRemind}
                         >
                             <FormattedMessage
@@ -155,7 +155,7 @@ export default class SystemNotice extends React.PureComponent<Props> {
                         {notice.allowForget &&
                             <button
                                 id='systemnotice_dontshow'
-                                className='btn'
+                                className='btn btn-sm btn-tertiary'
                                 onClick={this.hideAndForget}
                             >
                                 <FormattedMessage
diff --git a/webapp/channels/src/sass/components/_system-notice.scss b/webapp/channels/src/sass/components/_system-notice.scss
index 6340bc26c2..88aceceff8 100644
--- a/webapp/channels/src/sass/components/_system-notice.scss
+++ b/webapp/channels/src/sass/components/_system-notice.scss
@@ -45,7 +45,7 @@
 
 .system-notice__body {
     padding: 0 0 16px 16px;
-    line-height: 16px;
+    line-height: 20px;
 }
 
 .system-notice__footer {