Update status styling

js/src/Requests/requests.css

@@ -21,7 +21,7 @@ $borderColor: rgba(0, 0, 0, 0.15);
 
 .requests {
   align-items: flex-end;
-  bottom: 2em;
+  bottom: 2.75em;
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -37,23 +37,32 @@ $borderColor: rgba(0, 0, 0, 0.15);
 .request {
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-  background-color: rgba($baseColor, $baseColor, $baseColor, $baseOpacity);
+  background: white;
+  background: linear-gradient(white, #fcfcfc);
   border: 4px solid $borderColor;
   cursor: pointer;
   margin-top: 0.25em;
   opacity: 1;
   width: 100%;
 
+  &:hover {
+    background: white;
+  }
+
   &.hide {
     animation-duration: 0.5s;
     animation-name: fadeout;
   }
 
+  .progress {
+    margin: 0 0.25em 0.5em;
+  }
+
   .status {
-    padding: 0.5em;
+    padding: 0.75em;
 
     &.error {
-      background-color: rgba(200, 40, 40, 0.95);
+      background: rgba(200, 40, 40, 0.95);
       color: white;
     }
   }
@@ -64,10 +73,6 @@ $borderColor: rgba(0, 0, 0, 0.15);
     padding: 1em 1em 0.5em;
   }
 
-  &:hover .container {
-    background-color: rgba($baseColor, $baseColor, $baseColor, 1);
-  }
-
   p {
     margin: 0;
   }

js/src/Requests/requests.js

@@ -110,6 +110,7 @@ class Requests extends Component {
             ? null
             : (
               <Progress
+                className={ styles.progress }
                 max={ 6 }
                 isDeterminate={ state.type !== WAITING_STATE }
                 value={