Adjust torrent details pane

client/source/sass/components/_icons.scss

@@ -0,0 +1,12 @@
+.icon {
+
+  &--eta {
+
+    .icon {
+
+      &__ring {
+        opacity: 0.5;
+      }
+    }
+  }
+}

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

@@ -41,6 +41,7 @@
         &--tertiary {
           color: $torrent-details--header--tertiary--foreground;
           font-size: 1em;
+          margin-bottom: $spacing-unit * 1/2;
         }
 
         &--download,
@@ -50,10 +51,21 @@
 
           .icon {
             height: 12px;
+            margin-right: 3px;
+            margin-top: -3px;
+            vertical-align: middle;
             width: 12px;
           }
         }
 
+        &--ratio,
+        &--eta {
+
+          .icon {
+            fill: $torrent-details--header--icon--default--fill;
+          }
+        }
+
         &--eta {
           opacity: 1;
           visibility: visible;
@@ -97,6 +109,10 @@
     padding: $spacing-unit * 1/2 $spacing-unit;
   }
 
+  &__heading {
+    padding: $spacing-unit * 1/2 $spacing-unit $spacing-unit * 2/3 $spacing-unit;
+  }
+
   &__content {
     background: $torrent-details--content--background;
     flex: 1;

client/source/sass/tools/_colors.scss

@@ -142,6 +142,8 @@ $torrent-details--table--foreground: #567285;
 $torrent-details--table--header: #c0cad3;
 $torrent-details--table--header--count: #778c9e;
 
+$torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
+
 // tansfer data
 $transfer-data--download: $green;
 $transfer-data--upload: $blue;

client/source/scripts/components/icons/BaseIcon.js

@@ -17,6 +17,7 @@ export default class BaseIcon extends React.Component {
 }
 
 BaseIcon.defaultProps = {
+  className: '',
   what: 'hello',
   viewBox: '0 0 60 60'
 };

client/source/scripts/components/icons/ETA.js

@@ -7,9 +7,8 @@ export default class ETA extends BaseIcon {
     return (
       <svg className={`icon icon--eta ${this.props.className}`}
         xmlns={this.getXmlns()} viewBox={this.getViewBox()}>
-        <circle cx="0.9" cy="4" r="0.9"/>
-        <circle cx="4" cy="4" r="0.9"/>
-        <circle cx="7.1" cy="4" r="0.9"/>
+        <path class="icon__ring" d="M44.28,54.77a28.56,28.56,0,1,1,10.45-39A28.56,28.56,0,0,1,44.28,54.77Zm6-36.41a23.36,23.36,0,1,0-8.55,31.92A23.36,23.36,0,0,0,50.23,18.36Z"/>
+        <polygon class="icon__hands" points="30 17.06 35.19 17.06 35.19 32.64 35.19 37.83 30 37.83 19.62 37.83 19.62 32.64 30 32.64 30 17.06"/>
       </svg>
     );
   }

client/source/scripts/components/icons/Ratio.js

@@ -5,9 +5,9 @@ import BaseIcon from './BaseIcon';
 export default class Ratio extends BaseIcon {
   render() {
     return (
-      <svg className={`icon icon--start ${this.props.className}`}
+      <svg className={`icon icon--ratio ${this.props.className}`}
         xmlns={this.getXmlns()} viewBox={this.getViewBox()}>
-        <path d="M11.9 11.9H48v36.2H11.9V11.9z"/>
+        <path d="M54.57,15.76a28.56,28.56,0,1,0-10.45,39A28.56,28.56,0,0,0,54.57,15.76ZM9.68,41.86a23.36,23.36,0,1,1,40.39-23.5C40.72,29.74,24.32,39.36,9.68,41.86Z"/>
       </svg>
     );
   }

server/assets/style.css

@@ -1354,10 +1354,16 @@ body {
       font-weight: 300; }
     .torrent-details__heading .torrent__details--tertiary {
       color: #7b9cb4;
-      font-size: 1em; }
+      font-size: 1em;
+      margin-bottom: 12.5px; }
     .torrent-details__heading .torrent__details--download .icon, .torrent-details__heading .torrent__details--upload .icon, .torrent-details__heading .torrent__details--eta .icon, .torrent-details__heading .torrent__details--ratio .icon {
       height: 12px;
+      margin-right: 3px;
+      margin-top: -3px;
+      vertical-align: middle;
       width: 12px; }
+    .torrent-details__heading .torrent__details--ratio .icon, .torrent-details__heading .torrent__details--eta .icon {
+      fill: rgba(77, 111, 135, 0.5); }
     .torrent-details__heading .torrent__details--eta {
       opacity: 1;
       visibility: visible; }
@@ -1379,6 +1385,8 @@ body {
         margin-left: 5px; }
   .torrent-details__heading, .torrent-details__content, .torrent-details__navigation {
     padding: 12.5px 25px; }
+  .torrent-details__heading {
+    padding: 12.5px 25px 16.66667px 25px; }
   .torrent-details__content {
     background: rgba(12, 27, 38, 0.2);
     -webkit-box-flex: 1;