Update visual design of about dialog. (#3305)

* Also remove duplicated variables in css.

h/static/styles/about-this-version-dialog.scss

-.about-this-version__key {
+.about-this-version {
+  @include font-normal;
+  background: $grey-3;
+  margin-bottom: .72em;
+  padding: $layout-h-margin;
+  border-radius: 2px;
+}
+
+.about-this-version-title {
+  color: $grey-6;
+  font-weight: bold;
+  // Margin between top of the dialog and
+  // top of x-height of title should be ~15px.
+  margin-top: -5px;
+}
+
+.about-this-version-content {
+  // Margin between bottom of ascent of title and
+  // top of x-height of content should be 20px.
+  margin-top: 11px;
+}
+
+.about-this-version-content__key {
   width: 100px;
   float: left;
-  color: $gray-light;
+  color: $grey-4;
 }
 
-.about-this-version__val {
-  margin-left: 100px;
+.about-this-version-content__val {
   word-wrap: break-word;
+  margin-left: 100px;
 }
 
-.about-this-version-feedback {
-  margin-top: 10px;
+.about-this-version-content-feedback {
+  // Margin between bottom of x-height of about content and
+  // top of x-height of about this version feedback has to be
+  // ~20px.
+  margin-top: $layout-h-margin - 4px;
+  // Margin between bottom of x-height of about this version link
+  // and bottom of the dialog should be ~20px.
+  margin-bottom: -$layout-h-margin + 5px;
 }
 
-.about-this-version-feedback__link {
-  text-decoration: underline;
-  color: $dg-4;
-
+.about-this-version-content-feedback__link {
+  color: $grey-6;
   &:hover {
-    color: $dg-1;
+    text-decoration: underline;
   }
 }

h/static/styles/annotation-share-dialog.scss

@@ -65,7 +65,7 @@
   color: $text-color;
   border: 1px solid $gray-lighter;
   border-radius: 2px;
-  background: $lg-3;
+  background: $grey-1;
   white-space: nowrap;
   overflow: hidden;
   display: flex;
@@ -85,13 +85,13 @@
 }
 
 .annotation-share-dialog-link__btn {
-  color: $dg-3;
+  color: $grey-5;
   padding: 0px;
   margin-left: 7px;
 }
 
 .annotation-share-dialog-link__btn:hover {
-  color: $dg-1;
+  color: $grey-7;
 }
 
 .annotation-share-dialog-target {
@@ -108,14 +108,14 @@
 }
 
 .annotation-share-dialog-target__icon {
-  color: $dg-3;
+  color: $grey-5;
   text-decoration: none;
   font-size: 20px;
   cursor: pointer;
 }
 
 .annotation-share-dialog-target__icon:hover {
-  color: $dg-1;
+  color: $grey-7;
 }
 
 // Feedback message displayed after the user copies the link to the clipboard

h/static/styles/annotation.scss

@@ -45,7 +45,6 @@ $annotation-card-left-padding: 10px;
 .annotation {
   display: block;
   font-family: $sans-font-family;
-  font-weight: 400;
   position: relative;
 }
 

h/static/styles/loggedout-message.scss

@@ -2,17 +2,17 @@
   margin: 25px auto;
   width: 70%;
   text-align: center;
-  color: $dg-3;
+  color: $grey-5;
   display: flex;
   flex-direction: column;
 }
 
 .loggedout-message__link {
   text-decoration: underline;
-  color: $dg-3;
+  color: $grey-5;
 
   &:hover {
-    color: $dg-1;
+    color: $grey-7;
   }
 }
 
@@ -22,9 +22,9 @@
 
 .loggedout-message-logo__icon {
   font-size: 30px;
-  color: $dg-4;
+  color: $grey-4;
 
   &:hover {
-    color: $dg-1;
+    color: $grey-7;
   }
 }

h/static/styles/variables.scss

@@ -173,26 +173,16 @@ $score-height: $score-width;
 $top-bar-height: 40px;
 $input-border-radius: 2px;
 
-// Variables for the new color palette
-// ------------------------------------
-$dg-1: #202020;
-$dg-2: #3F3F3F;
-$dg-3: #7A7A7A;
-$dg-4: #A6A6A6;
-$lg-1: #DBDBDB;
-$lg-2: #ECECEC;
-$lg-3: #F2F2F2;
-$primary: #BD1C2B;
-$highlight: #58CEF4;
-
 // Mixins
 // ------
 @mixin font-small {
   font-size: $small-font-size;
   line-height: $small-line-height;
+  font-weight: 400;
 }
 
 @mixin font-normal {
   font-size: $normal-font-size;
   line-height: $normal-line-height;
+  font-weight: 400;
 }

h/templates/client/about_this_version_dialog.html

-<div class="sheet">
+<div class="about-this-version">
   <i class="close h-icon-close"
     role="button"
     title="Close"
     ng-click="vm.onClose()"></i>
-  <div class="about-this-version">
-    <ul class="nav nav-tabs">
-      <li class="active"><a href="">About this version</a></li>
-    </ul>
-    <dl class="tab-content">
-      <dt class="about-this-version__key">Version: </dt>
-      <dd class="about-this-version__val">{{ vm.version }}</dd>
-      <dt class="about-this-version__key">User agent: </dt>
-      <dd class="about-this-version__val">{{ vm.userAgent }}</dd>
-      <dt class="about-this-version__key">URL: </dt>
-      <dd class="about-this-version__val">{{ vm.url }}</dd>
-      <div ng-if="vm.documentFingerprint">
-        <dt class="about-this-version__key">PDF fingerprint: </dt>
-        <dd class="about-this-version__val">{{ vm.documentFingerprint }}</dd>
-      </div>
-      <div ng-if="vm.auth.userid">
-        <dt class="about-this-version__key">Username: </dt>
-        <dd class="about-this-version__val">{{ vm.auth.username }}</dd>
-      </div>
-      <dt class="about-this-version__key">Date: </dt>
-      <dd class="about-this-version__val">{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }}</dd>
-      <feedback-link
-        version="vm.version"
-        user-agent="vm.userAgent"
-        url="vm.url"
-        document-fingerprint="vm.documentFingerprint"
-        auth="vm.auth"
-        date-time="vm.dateTime">
-      </feedback-link>
+  <header class="about-this-version-title">
+    About this version
+  </header>
+  <dl class="about-this-version-content">
+    <dt class="about-this-version-content__key">Version: </dt>
+    <dd class="about-this-version-content__val">{{ vm.version }}</dd>
+    <dt class="about-this-version-content__key">User agent: </dt>
+    <dd class="about-this-version-content__val">{{ vm.userAgent }}</dd>
+    <dt class="about-this-version-content__key">URL: </dt>
+    <dd class="about-this-version-content__val">{{ vm.url }}</dd>
+    <div ng-if="vm.documentFingerprint">
+      <dt class="about-this-version-content__key">PDF fingerprint: </dt>
+      <dd class="about-this-version-content__val">{{ vm.documentFingerprint }}</dd>
     </div>
+    <div ng-if="vm.auth.userid">
+      <dt class="about-this-version-content__key">Username: </dt>
+      <dd class="about-this-version-content__val">{{ vm.auth.username }}</dd>
+    </div>
+    <dt class="about-this-version-content__key">Date: </dt>
+    <dd class="about-this-version-content__val">{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }}</dd>
+    <feedback-link
+      version="vm.version"
+      user-agent="vm.userAgent"
+      url="vm.url"
+      document-fingerprint="vm.documentFingerprint"
+      auth="vm.auth"
+      date-time="vm.dateTime">
+    </feedback-link>
   </div>
 </div>

h/templates/client/feedback_link.html

-<div class="about-this-version-feedback">
-  <a class="about-this-version-feedback__link" href="mailto:support@hypothes.is?subject=Hypothesis%20feedback&amp;body=Version:%20{{ vm.version }}%0D%0AUser%20Agent:%20{{vm.userAgent}}%0D%0AURL:%20{{ vm.url }}%0D%0APDF%20fingerprint:%20{{ vm.documentFingerprint ? vm.documentFingerprint : '-' }}%0D%0AUsername:%20{{ vm.auth.username ? vm.auth.username : '-' }}%0D%0ADate:%20{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }} ">
+<div class="about-this-version-content-feedback">
+  <a class="about-this-version-content-feedback__link" href="mailto:support@hypothes.is?subject=Hypothesis%20feedback&amp;body=Version:%20{{ vm.version }}%0D%0AUser%20Agent:%20{{vm.userAgent}}%0D%0AURL:%20{{ vm.url }}%0D%0APDF%20fingerprint:%20{{ vm.documentFingerprint ? vm.documentFingerprint : '-' }}%0D%0AUsername:%20{{ vm.auth.username ? vm.auth.username : '-' }}%0D%0ADate:%20{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }} ">
     Send us feedback
   </a>
 </div>