From 412eb6f1cb75953cf933419cc9e7bdeba8d11973 Mon Sep 17 00:00:00 2001
From: Ryan Rehman <ryanrehman99@gmail.com>
Date: Sat, 28 Mar 2020 11:00:13 +0530
Subject: [PATCH] css: Refactor `.alert-notification`.

Since each element containing the `.alert-notification`
class has a predefined area that wont overlap with any
other element, we make changes to the CSS so that it
just stays hidden until the text appears.
---
 static/styles/settings.scss | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 6b994c5741..e91b44d0f3 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -620,20 +620,21 @@ input[type=checkbox].inline-block {
 }
 
 .alert-notification {
-    &:not(:empty) {
-        display: inline-block !important;
-        vertical-align: top;
-        height: auto !important;
-        width: auto !important;
+    display: inline-block !important;
+    vertical-align: top;
+    height: auto !important;
+    width: auto !important;
 
-        background-color: transparent;
-        border-radius: 4px;
-        margin-top: 14px;
-        margin-left: 10px;
+    background-color: transparent;
+    border-radius: 4px;
+    margin-top: 14px;
+    margin-left: 10px;
+    color: hsl(156, 30%, 50%);
+    padding: 3px 10px;
+    font-size: 15px;
+
+    &:not(:empty) {
         border: 1px solid hsl(156, 30%, 50%);
-        color: hsl(156, 30%, 50%);
-        padding: 3px 10px;
-        font-size: 15px;
     }
 
     .alert-error {