adjusted margins and padding within alerts

src/components/alerts/alert.css

@@ -11,6 +11,7 @@
     border-radius: $space;
     padding: $space;
     margin-bottom: 7px;
+    min-height: 1.5rem;
 }
 
 .alert.warn {
@@ -26,7 +27,8 @@
 }
 
 .alert-icon {
-    margin: $space;
+    margin-left: .25rem;
+    margin-right: .25rem;
     vertical-align: middle;
 }
 
@@ -38,6 +40,8 @@
     width: 100%;
     display: flex;
     align-items: center;
+    padding-left: .5rem;
+    padding-right: .5rem;
 }
 
 .alert-close-button {
@@ -52,17 +56,18 @@
 }
 
 .connection-button {
+    min-height: 2rem;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
     background: #FF8C1A;
     color: white;
     font-weight: 700;
     font-size: 0.77rem;
-    margin: 0.25rem;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
+    align-self: center;
     margin-right: 13px;
     outline-style:none;
 }

src/components/alerts/alert.jsx

@@ -30,10 +30,10 @@ const AlertComponent = ({
         className={classNames(styles.alert, styles[level])}
     >
         {/* TODO: implement Rtl handling */}
-        {true && (
+        {iconSpinner && (
             <Spinner className={styles.alertSpinner} />
         )}
-        {false && (
+        {iconURL && (
             <img
                 className={styles.alertIcon}
                 src={iconURL}