From 4e76edb9a6aa5746ca4803be25669736918ed21e Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Sat, 21 Nov 2015 15:28:11 -0800
Subject: [PATCH] Style torrent details table

---
 .../sass/objects/_torrent-details-panel.scss  | 24 ++++++++++++++++---
 client/source/sass/style.scss                 |  7 +++---
 client/source/sass/tools/_colors.scss         | 10 +++++---
 client/source/sass/tools/_reset.scss          |  4 ++++
 4 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 client/source/sass/tools/_reset.scss

diff --git a/client/source/sass/objects/_torrent-details-panel.scss b/client/source/sass/objects/_torrent-details-panel.scss
index 1cc1c649..2a72bca8 100644
--- a/client/source/sass/objects/_torrent-details-panel.scss
+++ b/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;
+      }
     }
   }
 }
diff --git a/client/source/sass/style.scss b/client/source/sass/style.scss
index 86b99d90..fa5ed51c 100644
--- a/client/source/sass/style.scss
+++ b/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";
diff --git a/client/source/sass/tools/_colors.scss b/client/source/sass/tools/_colors.scss
index 25387b43..7409823e 100644
--- a/client/source/sass/tools/_colors.scss
+++ b/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;
diff --git a/client/source/sass/tools/_reset.scss b/client/source/sass/tools/_reset.scss
new file mode 100644
index 00000000..a060afbf
--- /dev/null
+++ b/client/source/sass/tools/_reset.scss
@@ -0,0 +1,4 @@
+th {
+  font-weight: inherit;
+  text-align: left;
+}