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 {
+a.integration-alert {
-    text-decoration: none !important;
+  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;
 
@@ -282,7 +307,7 @@ $primary-color: #049cdb;
   }
 
   .sponsors-and-press {
-    margin-top:24px;
+    margin-top: 24px;
   }
 
   .sponsored-by {
@@ -324,10 +349,10 @@ $primary-color: #049cdb;
     }
 
     img {
-       width: 100%;
+      width: 100%;
-   }
+    }
   }
- }
+}
 
 
 // https://fortawesome.github.io/Font-Awesome/3.2.1/icons/
@@ -365,7 +390,7 @@ dt:hover a.title-link {
     margin-right: 10px;
   }
 
-  a > * {
+  a>* {
     vertical-align: middle;
   }
 }
@@ -408,8 +433,8 @@ article.listing {
     box-shadow: none;
   }
 
-  & > table,
+  &>table,
-  & > .entry-content > table {
+  &>.entry-content>table {
     background-color: #f3fcf5;
   }
 
@@ -431,7 +456,7 @@ article.listing {
   li {
     margin-bottom: 10px;
 
-    & > p:last-child {
+    &>p:last-child {
       margin-bottom: 0;
     }
 
@@ -448,8 +473,7 @@ article.listing {
     }
   }
 
-  h1 {
+  h1 {}
-  }
 
   h2 {
     font-size: 1.5em;
@@ -562,17 +586,19 @@ div.note {
 
       li.toc-entry {
         list-style-type: none;
+
         li {
           list-style-type: circle;
           margin-left: 1em;
         }
+
         ul {
           margin-left: 1em;
         }
       }
     }
 
- }
+  }
 
   .brand-logo-container {
     text-align: center;
@@ -594,7 +620,7 @@ lite-youtube {
   position: relative;
   display: block;
   padding-bottom: calc(100% / (16 / 9));
-  background-color: rgba(0,0,0,.1);
+  background-color: rgba(0, 0, 0, .1);
 }
 
 lite-youtube::before {
@@ -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(
+  background-image: linear-gradient(transparent 50%,
-    transparent 50%,
+      rgba(69, 142, 209, 0.04) 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 class="integration-alert" href="/more-info/nest-auth-deprecation">
-<a href="/more-info/nest-auth-deprecation">⚠️ Nest authentication is changing. Existing users click here to learn more</a>
+  <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" color="currentColor">
-</div>
+    <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">
+      <div class="integration-alert-container">
-        <a href="{{active_alert}}" target="_blank">⚠️ There is an active alert for this integration!</a>
+        <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 %}