Style torrent details table

client/source/sass/objects/_torrent-details-panel.scss

@@ -1,8 +1,8 @@
 .torrent-details {
   background: $torrent-details--background;
   box-shadow: -1px 0 0 $torrent-details--border;
+  font-size: 0.85em;
   height: 100%;
-  width: 40%;
   overflow: auto;
   padding: $spacing-unit;
   position: absolute;
@@ -10,6 +10,7 @@
   top: 0;
   transform: translateX(0);
   transition: transform 0.5s;
+  width: 40%;
   z-index: 2;
 
   &.torrent-details-enter {
@@ -24,6 +25,10 @@
     transform: translateX(100%);
   }
 
+}
+
+.torrent-details {
+
   &__transfer-data {
 
     .transfer-data {
@@ -44,8 +49,21 @@
   &__table {
     width: 100%;
 
-    thead {
-      text-align: left;
+    &__heading {
+      color: $torrent-details--table--header;
+      font-size: 0.7em;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+
+      th {
+        font-weight: 500;
+      }
+
+      &__count {
+        color: $torrent-details--table--header--count;
+        display: inline-block;
+        margin-left: 5px;
+      }
     }
   }
 }

client/source/sass/style.scss

@@ -7,12 +7,13 @@
 @import "../../../node_modules/inuit-page/base.page";
 
 @import "tools/variables";
+@import "tools/reset";
 
-@import "base/main";
-@import "base/layout";
-@import "base/typography";
 @import "base/animations";
 @import "base/form-elements";
+@import "base/layout";
+@import "base/main";
+@import "base/typography";
 
 @import "objects/action-bar";
 @import "objects/client-stats";

client/source/sass/tools/_colors.scss

@@ -102,9 +102,6 @@ $torrent--tertiary--foreground--selected--stopped: rgba(#fff, 0.5);
 $torrent--background--hover: #f6f8fa;
 $torrent--background--selected: $blue;
 
-$torrent-details--background: #f7fafc;
-$torrent-details--border: rgba($background, 0.1);
-
 $progress-bar--background: #e3e5e5;
 $progress-bar--background--selected: rgba(#fff, 0.5);
 $progress-bar--background--selected--stopped: rgba(#fff, 0.5);
@@ -114,6 +111,13 @@ $progress-bar--fill--stopped: #e3e5e5;
 $progress-bar--fill--completed: $blue;
 $progress-bar--fill--selected: #fff;
 
+// torrent details
+$torrent-details--background: #f7fafc;
+$torrent-details--border: rgba($background, 0.1);
+
+$torrent-details--table--header: #c0cad3;
+$torrent-details--table--header--count: #778c9e;
+
 // tansfer data
 $transfer-data--download: $green;
 $transfer-data--upload: $blue;

client/source/sass/tools/_reset.scss

@@ -0,0 +1,4 @@
+th {
+  font-weight: inherit;
+  text-align: left;
+}