Merge pull request #798 from maykinmedia/fix/1754-warningbanner-icon-…

…styling [#1754] Style icon in warning-banner
maykinmedia · Oct 3, 2023 · dcf6aef · dcf6aef
2 parents 138c673 + 8443dcc
commit dcf6aef
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/src/open_inwoner/components/templates/components/Header/WarningHeader.html b/src/open_inwoner/components/templates/components/Header/WarningHeader.html
@@ -1,15 +1,15 @@
 {% load i18n icon_tags link_tags static %}
 
-<style nonce="{{ request.csp_nonce }}"> 
-	.warning-header {
-		background-color: {{ warning_banner_background_color }};
-    color: {{ warning_banner_font_color }};
-	}
+<style nonce="{{ request.csp_nonce }}">
+    .warning-header {
+        background-color: {{ warning_banner_background_color }};
+        color: {{ warning_banner_font_color }};
+    }
 </style>
 
 <div class="warning-header">
-	<div class="warning-header__container">
-    <span class="warning-header__icon">{% icon icon="error_outlined" icon_position="after" outlined=True %}</span>
-		<span class="warning-header__text">{{ warning_banner_text }}</span>
-	</div>
+    <div class="warning-header__container">
+        <span class="warning-header__icon">{% icon icon="error_outlined" icon_position="after" outlined=True %}</span>
+        <span class="warning-header__text">{{ warning_banner_text }}</span>
+    </div>
 </div>
diff --git a/src/open_inwoner/scss/components/WarningHeader/WarningHeader.scss b/src/open_inwoner/scss/components/WarningHeader/WarningHeader.scss
@@ -5,20 +5,21 @@
 
   .warning-header__container {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     padding: 0;
     margin: 0 auto;
 
     @media (min-width: 768px) {
-      max-width: 90%;
+      max-width: var(--container-width);
     }
 
-    .warning-header__icon,
     .warning-header__text {
       padding: var(--spacing-small);
     }
-    .warning-header__icon {
-      width: 20px;
+
+    *[class*='icon'],
+    *[class*='Icon'] {
+      max-width: var(--spacing-giant);
     }
   }
 }