Restyle integration alert bar (#23579)

sass/custom/_paulus.scss

@@ -41,15 +41,37 @@ $primary-color: #049cdb;
   }
 }
 
-.integration-alert {
+.integration-alert-container {
   margin: -1em 0;
-  background-color: wheat;
-  padding: 4px;
-
-  a {
-    text-decoration: none !important;
 }
 
+a.integration-alert {
+  margin: 1em 0;
+  background-color: wheat;
+  padding: 8px;
+  text-decoration: none !important;
+  display: flex;
+  align-items: center;
+  color: black;
+
+  svg {
+    width: 24px;
+    margin-right: 8px;
+  }
+
+  .content {
+    flex: 1;
+  }
+
+  .learn-more {
+    padding: 4px 6px;
+    border-radius: 2px;
+    font-size: .8em;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .12);
+    }
+  }
 }
 
 @media only screen and (max-width: $menu-collapse) {
@@ -136,6 +158,7 @@ $primary-color: #049cdb;
   box-shadow: none;
   border: 1px solid rgba(0, 0, 0, .12);
   border-radius: 4px;
+
   h4 {
     margin: 0 0 8px !important;
 
@@ -144,6 +167,7 @@ $primary-color: #049cdb;
       color: #000;
     }
   }
+
   .links a {
     font-weight: 400;
     text-transform: none;
@@ -186,6 +210,7 @@ $primary-color: #049cdb;
       background-color: lighten(#038fc7, 10%);
     }
   }
+
   .events {
     padding: 16px;
 
@@ -448,8 +473,7 @@ article.listing {
     }
   }
 
-  h1 {
-  }
+  h1 {}
 
   h2 {
     font-size: 1.5em;
@@ -562,10 +586,12 @@ div.note {
 
       li.toc-entry {
         list-style-type: none;
+
         li {
           list-style-type: circle;
           margin-left: 1em;
         }
+
         ul {
           margin-left: 1em;
         }
@@ -610,7 +636,8 @@ lite-youtube::before {
 // https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
 .videoWrapper {
   position: relative;
-  padding-bottom: 56.25%; /* 16:9 */
+  padding-bottom: 56.25%;
+  /* 16:9 */
   height: 0;
   margin-bottom: 25px;
   background: #000;
@@ -773,10 +800,8 @@ code {
   hyphens: none;
 
   background-color: #fdfdfd;
-  background-image: linear-gradient(
-    transparent 50%,
-    rgba(69, 142, 209, 0.04) 50%
-  );
+  background-image: linear-gradient(transparent 50%,
+      rgba(69, 142, 209, 0.04) 50%);
   background-size: 3em 3em;
   background-origin: content-box;
   background-attachment: local;
@@ -812,6 +837,7 @@ code {
         }
       }
     }
+
     footer {
       position: absolute;
       bottom: 0;

source/_integrations/nest.markdown

@@ -26,9 +26,14 @@ ha_platforms:
 ha_integration_type: integration
 ---
 
-<div class="integration-alert" style='margin-bottom: 16px'>
-<a href="/more-info/nest-auth-deprecation">⚠️ Nest authentication is changing. Existing users click here to learn more</a>
-</div>
+<a class="integration-alert" href="/more-info/nest-auth-deprecation">
+  <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" color="currentColor">
+    <g><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></g>
+  </svg>
+  <div class="content">Existing users: Nest authentication is changing.</div>
+  <div class="learn-more">LEARN MORE</div>
+</a>
+
 
 The `nest` integration allows you to integrate your [Google Nest](https://store.google.com/us/category/connected_home?) devices in Home Assistant. This integration uses the [Smart Device Management](https://developers.google.com/nest/device-access/api) API and Google's Cloud Pubsub to efficiently listen for changes in device state or other events. See [Supported Devices](https://developers.google.com/nest/device-access/supported-devices) for all devices supported by the SDM API.
 

source/_layouts/page.html

@@ -20,8 +20,14 @@ layout: default
       {% endfor %}
     {% endfor %}
     {% if active_alert != "" %}
-      <div class="integration-alert">
-        <a href="{{active_alert}}" target="_blank">⚠️ There is an active alert for this integration!</a>
+      <div class="integration-alert-container">
+        <a class="integration-alert" href="{{active_alert}}" target="_blank">
+          <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" color="currentColor">
+            <g><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></g>
+          </svg>
+          <div class="content">There is an active alert for this integration!</div>
+          <div class="learn-more">LEARN MORE</div>
+        </a>
       </div>
     {% endif %}
   {% endif %}