checkbox styles and Dashboard tweaks

src/scss/_dashboard.scss

@@ -514,7 +514,8 @@
   // border-radius: 3px;
 
   .UppyDashboard--wide & {
-    box-shadow: 0 0 2px 0 rgba(175, 175, 175, 0.7);
+    // box-shadow: 0 0 2px 0 rgba(175, 175, 175, 0.7);
+    box-shadow: 0 1px 3px rgba(0,0,0,.2);
     border-radius: 3px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;

src/scss/_provider.scss

@@ -268,11 +268,22 @@
   //   flex: auto;
   // }
 
+  .BrowserTable-row {
+    position: relative;
+  }
+
   .BrowserTable-column {
     // width: 100px;
     // padding: 15px 12px;
     padding: 14px 10px;
   }
+
+  .BrowserTable-checkbox {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    margin-right: 0;
+  }
 }
 
 .BrowserTable tbody {
@@ -280,9 +291,67 @@
 }
 
 
-// .BrowserTable-checkbox {
+.BrowserTable-checkbox input {
+  opacity: 0;
+}
 
-// }
+// https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3
+.BrowserTable-checkbox {
+  position: relative;
+  display: inline-block;
+  top: -3px;
+  margin-right: 15px;
+}
+
+.BrowserTable-checkbox label::before,
+.BrowserTable-checkbox label::after {
+  position: absolute;
+  cursor: pointer;
+}
+
+// Outer circle
+.BrowserTable-checkbox label:before {
+  content: "";
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  top: 0;
+  border: 1px solid $color-cornflower-blue; 
+  background-color: $color-white;
+  border-radius: 50%; 
+}
+
+// Inner checkbox
+.BrowserTable-checkbox label:after {
+  content: "";
+  display: inline-block;
+  height: 5px;
+  width: 8px;
+  left: 6px;
+  top: 7px;
+  border-left: 2px solid $color-white;
+  border-bottom: 2px solid $color-white;
+  transform: rotate(-45deg);
+}
+
+// Hide the checkmark by default
+.BrowserTable-checkbox input + label::after {
+  content: none;
+}
+
+// Unhide the checkmark on the checked state
+.BrowserTable-checkbox input:checked + label::after {
+  content: "";
+}
+
+.BrowserTable-checkbox input:checked + label::before {
+  background-color: $color-cornflower-blue;
+}
+
+// Adding focus styles on the outer-box of the fake checkbox*/
+.BrowserTable-checkbox input:focus + label::before {
+  outline: rgb(59, 153, 252) auto 5px;
+}
 
 .BrowserTable-row {
   // border-bottom: 1px solid #eee;
@@ -316,10 +385,11 @@
   cursor: pointer;
 }
 
-// .BrowserTable-itemButton {
-//   @include reset-button();
-//   cursor: pointer;
-// }
+.BrowserTable-item {
+  @include reset-button();
+  cursor: pointer;
+  font-weight: 600;
+}
 
 .BrowserTable-headerColumn {
   cursor: pointer;

src/scss/_utils.scss

@@ -21,7 +21,6 @@
   padding: 0;
   margin: 0;
   border: 0;
-  // outline: none;
   color: inherit;
 }