Make GM behave as DM (#24289)

* Make GM behave as DM

* Fix lint

* Add desktop notification special behavior

* Change notification preferences menu

* Make changes to the GM channel intro

* Fix tests

* Fix i18n and style lint

* Add system notice and update style

* Fix style and fix tests

* Fix tests

* Handle push notifications as desktop notifications

* Fix tests

* Add test and default GMs to none when user level config is none

* Fix test

* Update only for mentions text

* Add tests

* Fix lint

* Fix lint

webapp/channels/src/sass/components/_system-notice.scss

@@ -5,7 +5,8 @@
     z-index: 9999;
     right: 12px;
     bottom: 12px;
-    width: 280px;
+    display: flex;
+    width: 386px;
     padding: 18px 20px 0;
     border: 1px solid alpha-color($black, 0.15);
     background-color: var(--center-channel-bg);
@@ -13,33 +14,27 @@
     box-shadow: 0 20px 30px alpha-color($black, 0.07), 0 14px 20px alpha-color($black, 0.07);
 }
 
-.system-notice__header {
-    display: flex;
-    align-items: flex-start;
-}
-
 .system-notice__logo {
-    height: 36px;
+    height: 20px;
 
     svg {
-        width: 36px;
-        height: 36px;
-        fill: rgb(22, 109, 224);
+        width: 20px;
+        height: 20px;
+        fill: var(--button-bg);
     }
 }
 
 .system-notice__title {
     overflow: hidden;
-    flex: 10 1 auto;
-    padding: 3px 0 0 8px;
+    padding-bottom: 10px;
+    font-weight: bold;
     line-height: 16px;
-    opacity: 0.7;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .system-notice__info {
-    margin-bottom: 12px;
+    margin-top: 12px;
     font-size: 12px;
     opacity: 0.5;
 
@@ -49,33 +44,22 @@
 }
 
 .system-notice__body {
-    padding: 18px 0 16px;
+    padding: 0 0 16px 16px;
     line-height: 16px;
-    opacity: 0.7;
 }
 
 .system-notice__footer {
     display: flex;
-    border-top: 1px solid alpha-color($black, 0.2);
-    margin: 0 -20px;
+    margin-top: 16px;
 
     .btn {
         overflow: hidden;
         flex: 1;
+        font-weight: bold;
         text-overflow: ellipsis;
 
-        &:hover {
-            background: rgb(22, 109, 224);
-            color: $white;
-        }
-
-        &:first-child {
-            border-radius: 0 0 0 4px;
-        }
-
         &:last-child {
-            border-left: 1px solid alpha-color($black, 0.2);
-            border-radius: 0 0 4px 0;
+            margin-left: 5px;
         }
     }
 }

webapp/channels/src/sass/layout/_headers.scss

@@ -524,6 +524,7 @@
         margin-bottom: 10px;
 
         .fa,
+        svg,
         i {
             margin-right: 5px;
         }