MOBILE-3814 styles: Renew style of warning cards

src/core/features/login/login.scss

@@ -77,11 +77,6 @@
         }
     }
 
-    .core-login-reconnect-warning ion-item {
-        font-size: 0.9em;
-        --background: var(--core-login-input-background);
-    }
-
     @if ($core-fixed-url) {
         .core-sitename, .core-siteurl {
             display: none;

src/core/features/login/pages/reconnect/reconnect.html

@@ -29,7 +29,9 @@
         <ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
             <ion-item>
                 <ion-icon name="fas-exclamation-circle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label color="danger">{{ 'core.login.reconnectdescription' | translate }}</ion-label>
+                <ion-label>
+                    <p>{{ 'core.login.reconnectdescription' | translate }}</p>
+                </ion-label>
             </ion-item>
         </ion-card>
     </div>

src/theme/components/format-text.scss

@@ -543,6 +543,7 @@ core-rich-text-editor .core-rte-editor {
         padding: .75rem 1.25rem;
         margin-bottom: 1rem;
         border: 0 solid transparent;
+        border-radius: .5rem;
     }
 
     // Headings for larger alerts

src/theme/theme.base.scss

@@ -674,23 +674,37 @@ body.core-iframe-fullscreen ion-router-outlet {
 
     // Message cards.
     ion-card.core-#{$color-name}-card {
-        --color-base: var(--ion-color-#{$color-name});
+        --color-tint: var(--ion-color-#{$color-name}-tint);
+        --color-shade: var(--ion-color-#{$color-name}-shade);
+        --border-width: 0;
 
-        border-bottom: 3px solid var(--color-base);
+        --border-color: var(--color-tint);
+        --background: var(--color-tint);
+        --color: var(--color-shade);
 
         ion-item {
+            --background: var(--color-tint);
+            --color: var(--color-shade);
             --inner-border-width: 0px;
+            --border-width: 0px;
+
+            ion-label, ion-label > p {
+                --color: var(--color-shade);
+            }
         }
+
         ion-label {
             white-space: normal !important;
         }
         ion-icon {
-            color: var(--color-base);
+            color: var(--color-shade);
+            @include margin-horizontal(null, 16px);
         }
     }
 
     .item.core-#{$color-name}-item {
         --color-base: var(--ion-color-#{$color-name});
+        --color-shade: var(--ion-color-#{$color-name}-shade);
 
         --border-width: 0 0 3px 0;
         --border-color: var(--color-base);
@@ -1261,7 +1275,6 @@ ion-item.item-input ion-input.has-focus {
 
 ion-item-divider.item,
 ion-item.item.divider {
-    --inner-padding-end: 8px;
     min-height: var(--min-height);
     border-bottom-width: var(--item-divider-border-width);
     --border-width: var(--item-divider-border-width);