From 67193e168ea79ad0677f7bb71e3edaa322ae189d Mon Sep 17 00:00:00 2001
From: kitajchuk <bk@kitajchuk.com>
Date: Thu, 29 Sep 2022 07:54:42 -0700
Subject: [PATCH] Better UI styling for global error message

---
 src/components/forms/message/index.tsx   |  2 +-
 src/components/forms/message/styles.scss | 20 +++++++-------------
 src/containers/login/styles.scss         |  5 +++++
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/forms/message/index.tsx b/src/components/forms/message/index.tsx
index 200d9ae..bddd40e 100644
--- a/src/components/forms/message/index.tsx
+++ b/src/components/forms/message/index.tsx
@@ -14,7 +14,7 @@ export const Message = ({ message }: MsgProps) => {
   return (
     <div className="msg">
       <Icons.AlertCircle />
-      {message}
+      <span>{message}</span>
     </div>
   );
 };
diff --git a/src/components/forms/message/styles.scss b/src/components/forms/message/styles.scss
index 6371d9c..bf7e9e8 100644
--- a/src/components/forms/message/styles.scss
+++ b/src/components/forms/message/styles.scss
@@ -5,29 +5,23 @@
 
 .msg {
   @include ui-mixins.ms();
-  padding: ui-vars.$px01 ui-vars.$px02 ui-vars.$px01 56px;
+  padding: ui-vars.$px01 ui-vars.$px03 ui-vars.$px01 ui-vars.$px02;
   border-radius: ui-vars.$px01;
   border: 2px solid ui-vars.$jambonz;
   background-color: ui-vars.$pink;
   color: ui-vars.$jambonz;
-  text-align: center;
+  text-align: left;
   position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: max-content;
 
   @include mixins.mobile() {
     text-align: left;
   }
 
   > svg {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  > svg:first-child {
-    left: ui-vars.$px02;
-  }
-
-  > svg:last-child {
-    right: ui-vars.$px02;
+    margin-right: ui-vars.$px02;
   }
 }
diff --git a/src/containers/login/styles.scss b/src/containers/login/styles.scss
index 8cc8bf2..52b9e08 100644
--- a/src/containers/login/styles.scss
+++ b/src/containers/login/styles.scss
@@ -75,4 +75,9 @@
       width: 100%;
     }
   }
+
+  .msg {
+    width: 100%;
+    justify-content: center;
+  }
 }