restored close button styling; make close button appear on alert errors

src/components/alerts/alert.css

@@ -45,7 +45,7 @@
 }
 
 .alert-close-button-container {
-    outline-style:none;
+    outline-style: none;
     width: 30px;
     height: 30px;
     align-self: center;

src/components/close-button/close-button.css

@@ -7,6 +7,7 @@
     justify-content: center;
 
     overflow: hidden;  /* Mask the icon animation */
+    background-color: $ui-black-transparent;
     border-radius: 50%;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     user-select: none;
@@ -16,21 +17,29 @@
 
 .close-button.large:hover {
     transform: scale(1.1, 1.1);
+    box-shadow: 0 0 0 4px $ui-black-transparent;
 }
 
 .close-button.large.orange:hover {
     transform: scale(1.1, 1.1);
+    box-shadow: 0px 0px 0px 4px hsla(29, 100%, 54%, 0.2);
 }
 
 .small {
     width: 0.825rem;
     height: 0.825rem;
+    background-color: $motion-primary;
     color: $ui-white;
 }
 
 .large {
     width: 1.75rem;
     height: 1.75rem;
+    box-shadow: 0 0 0 2px $ui-black-transparent;
+}
+ .large.orange {
+    background-color: hsla(29, 100%, 54%, 0.2);
+    box-shadow: 0px 0px 0px 2px hsla(29, 100%, 54%, 0.2);
 }
 
 .close-icon {

src/lib/alerts/index.jsx

@@ -49,6 +49,7 @@ const alerts = [
     {
         alertId: 'creatingError',
         clearList: ['creating', 'createSuccess'],
+        closeButton: true,
         content: (
             <FormattedMessage
                 defaultMessage="Could not create the project. Please try again!"
@@ -61,6 +62,7 @@ const alerts = [
     {
         alertId: 'savingError',
         clearList: ['saving', 'saveSuccess'],
+        closeButton: true,
         content: (
             <FormattedMessage
                 defaultMessage="Could not save the project. Please try again!"