replaced critial-notice() sass mixin with equivalent class and subclasses for instances where it is used

Author: michaelchadwick

packages/frontend/app/components/connection-status.gjs

@@ -87,7 +87,10 @@ export default class ConnectionStatusComponent extends Component {
     this.reconnect.perform();
   });
   <template>
-    <div class="connection-status{{unless this.isOnline ' offline'}}" aria-hidden={{this.isOnline}}>
+    <div
+      class="connection-status critical-notice{{unless this.isOnline ' offline'}}"
+      aria-hidden={{this.isOnline}}
+    >
       {{#unless this.isOnline}}
         {{#if this.unableToReconnect}}
           <p class="unable-to-reconnect">

packages/frontend/app/components/update-notification.gjs

@@ -25,7 +25,7 @@ export default class UpdateNotificationComponent extends Component {
   });
   <template>
     {{#if this.newVersion.isNewVersionAvailable}}
-      <div class="update-notification" data-test-update-notification>
+      <div class="update-notification critical-notice" data-test-update-notification>
         <button type="button" {{on "click" (perform this.click)}}>
           {{t "general.iliosUpdatePending"}}
         </button>

packages/frontend/app/styles/components/connection-status.scss

@@ -1,8 +1,6 @@
 @use "../ilios-common/mixins" as m;
 
 .connection-status {
-  @include m.critical-notice(var(--dark-yellow), var(--black), 2.5rem);
-
   display: none;
   justify-content: space-between;
   align-items: center;

packages/frontend/app/styles/components/update-notification.scss

@@ -2,7 +2,6 @@
 
 .update-notification {
   button {
-    @include m.critical-notice(var(--blue), var(--white), 3rem);
     @include m.font-size("large");
   }
 }

packages/ilios-common/addon/components/api-version-notice.gjs

@@ -66,7 +66,7 @@ export default class ApiVersionNoticeComponent extends Component {
   });
   <template>
     <div
-      class="api-version-notice{{if this.mismatched ' mismatch'}}"
+      class="api-version-notice critical-notice{{if this.mismatched ' mismatch'}}"
       hidden={{not this.mismatched}}
       role={{if this.mismatched "alert" false}}
       data-test-load-finished={{this.check.lastSuccessful.value}}

packages/ilios-common/app/styles/ilios-common/components/api-version-notice.scss

@@ -1,8 +1,6 @@
 @use "../mixins" as m;
 
 .api-version-notice {
-  @include m.critical-notice(var(--dark-yellow), var(--black), 1rem);
-
   display: none;
   padding: 0.25rem 1rem;
 

packages/ilios-common/app/styles/ilios-common/mixins.scss

@@ -1,6 +1,5 @@
 @forward "mixins/media";
 @forward "mixins/collapsed-container";
-@forward "mixins/critical-notice";
 @forward "mixins/detail-container";
 @forward "mixins/font-size";
 @forward "mixins/graph-with-data-table";

packages/ilios-common/app/styles/ilios-common/mixins/critical-notice.scss

@@ -1,3 +1,4 @@
+@forward "shared/critical-notice";
 @forward "shared/data-visualization";
 @forward "shared/ilios-zebra-table";
 @forward "shared/loading-box";

packages/ilios-common/app/styles/ilios-common/shared.scss

@@ -0,0 +1,27 @@
+.critical-notice {
+  display: block;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  width: 100%;
+
+  &.connection-notice {
+    background-color: --var(--dark-yellow);
+    color: var(--black);
+    min-height: 2.5rem;
+  }
+
+  &.update-notice {
+    button {
+      background-color: var(--blue);
+      color: var(--white);
+      min-height: 3rem;
+    }
+  }
+
+  &.api-version-notice {
+    background-color: (--dark-yellow);
+    color: var(--black);
+    min-height: 1rem;
+  }
+}