Issue #2100 - removing button is now a cross on top right

Author: magsout

webcompat/static/css/src/form.css

@@ -258,15 +258,16 @@
 }
 
 .form-upload .label-remove:not(.is-hidden) {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  left: 0;
+  background-color: #fff;
+  border: 1px solid rgba(255, 201, 0, 1);
+  border-radius: 50%;
+  cursor: pointer;
+  left: auto;
+  padding: .8em;
+  position: absolute;
+  right: 0;
   top: 0;
-  transform: none;
-  width: 100%;
+  transform: translate(50%, -50%);
 }
 
 .icon-remove,

webcompat/templates/home-page/form.html

@@ -95,13 +95,11 @@ <h1 class="headline-1">Report Site Issue</h1>
         </div>
 
         <div class="label-icon label-remove is-hidden js-remove-upload">
-          <svg class="icon icon-big" role="presentation" title="Remove Screenshot">
+          <svg class="icon" role="presentation" title="Remove Screenshot">
             <use class="icon-remove" xlink:href="#svg-x">Remove Screenshot</use>
           </svg>
-          <small class="label-icon-message">Remove screenshot</small>
         </div>
 
-
         <div class="label-icon label-error is-hidden js-error-upload">
           <svg class="icon icon-big" role="presentation" title="An error occoured">
             <use class="icon-error" xlink:href="#svg-warning">An error occoured</use>