Fix style for notices (#24636)

* Fix style for notices

* Fix snapshots

* Address feedback

* Update snapshots

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]}
       >

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'

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

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 {