Commit c95b0f36 authored by Sheetal Umesh Kumar's avatar Sheetal Umesh Kumar Committed by Nick Stenning

Update visual design of about dialog. (#3305)

* Also remove duplicated variables in css.
parent 53417ebc
.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; width: 100px;
float: left; float: left;
color: $gray-light; color: $grey-4;
} }
.about-this-version__val { .about-this-version-content__val {
margin-left: 100px;
word-wrap: break-word; word-wrap: break-word;
margin-left: 100px;
} }
.about-this-version-feedback { .about-this-version-content-feedback {
margin-top: 10px; // 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 { .about-this-version-content-feedback__link {
text-decoration: underline; color: $grey-6;
color: $dg-4;
&:hover { &:hover {
color: $dg-1; text-decoration: underline;
} }
} }
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
color: $text-color; color: $text-color;
border: 1px solid $gray-lighter; border: 1px solid $gray-lighter;
border-radius: 2px; border-radius: 2px;
background: $lg-3; background: $grey-1;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
...@@ -85,13 +85,13 @@ ...@@ -85,13 +85,13 @@
} }
.annotation-share-dialog-link__btn { .annotation-share-dialog-link__btn {
color: $dg-3; color: $grey-5;
padding: 0px; padding: 0px;
margin-left: 7px; margin-left: 7px;
} }
.annotation-share-dialog-link__btn:hover { .annotation-share-dialog-link__btn:hover {
color: $dg-1; color: $grey-7;
} }
.annotation-share-dialog-target { .annotation-share-dialog-target {
...@@ -108,14 +108,14 @@ ...@@ -108,14 +108,14 @@
} }
.annotation-share-dialog-target__icon { .annotation-share-dialog-target__icon {
color: $dg-3; color: $grey-5;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
} }
.annotation-share-dialog-target__icon:hover { .annotation-share-dialog-target__icon:hover {
color: $dg-1; color: $grey-7;
} }
// Feedback message displayed after the user copies the link to the clipboard // Feedback message displayed after the user copies the link to the clipboard
......
...@@ -45,7 +45,6 @@ $annotation-card-left-padding: 10px; ...@@ -45,7 +45,6 @@ $annotation-card-left-padding: 10px;
.annotation { .annotation {
display: block; display: block;
font-family: $sans-font-family; font-family: $sans-font-family;
font-weight: 400;
position: relative; position: relative;
} }
......
...@@ -2,17 +2,17 @@ ...@@ -2,17 +2,17 @@
margin: 25px auto; margin: 25px auto;
width: 70%; width: 70%;
text-align: center; text-align: center;
color: $dg-3; color: $grey-5;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.loggedout-message__link { .loggedout-message__link {
text-decoration: underline; text-decoration: underline;
color: $dg-3; color: $grey-5;
&:hover { &:hover {
color: $dg-1; color: $grey-7;
} }
} }
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
.loggedout-message-logo__icon { .loggedout-message-logo__icon {
font-size: 30px; font-size: 30px;
color: $dg-4; color: $grey-4;
&:hover { &:hover {
color: $dg-1; color: $grey-7;
} }
} }
...@@ -173,26 +173,16 @@ $score-height: $score-width; ...@@ -173,26 +173,16 @@ $score-height: $score-width;
$top-bar-height: 40px; $top-bar-height: 40px;
$input-border-radius: 2px; $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 // Mixins
// ------ // ------
@mixin font-small { @mixin font-small {
font-size: $small-font-size; font-size: $small-font-size;
line-height: $small-line-height; line-height: $small-line-height;
font-weight: 400;
} }
@mixin font-normal { @mixin font-normal {
font-size: $normal-font-size; font-size: $normal-font-size;
line-height: $normal-line-height; line-height: $normal-line-height;
font-weight: 400;
} }
<div class="sheet"> <div class="about-this-version">
<i class="close h-icon-close" <i class="close h-icon-close"
role="button" role="button"
title="Close" title="Close"
ng-click="vm.onClose()"></i> ng-click="vm.onClose()"></i>
<div class="about-this-version"> <header class="about-this-version-title">
<ul class="nav nav-tabs"> About this version
<li class="active"><a href="">About this version</a></li> </header>
</ul> <dl class="about-this-version-content">
<dl class="tab-content"> <dt class="about-this-version-content__key">Version: </dt>
<dt class="about-this-version__key">Version: </dt> <dd class="about-this-version-content__val">{{ vm.version }}</dd>
<dd class="about-this-version__val">{{ vm.version }}</dd> <dt class="about-this-version-content__key">User agent: </dt>
<dt class="about-this-version__key">User agent: </dt> <dd class="about-this-version-content__val">{{ vm.userAgent }}</dd>
<dd class="about-this-version__val">{{ vm.userAgent }}</dd> <dt class="about-this-version-content__key">URL: </dt>
<dt class="about-this-version__key">URL: </dt> <dd class="about-this-version-content__val">{{ vm.url }}</dd>
<dd class="about-this-version__val">{{ vm.url }}</dd> <div ng-if="vm.documentFingerprint">
<div ng-if="vm.documentFingerprint"> <dt class="about-this-version-content__key">PDF fingerprint: </dt>
<dt class="about-this-version__key">PDF fingerprint: </dt> <dd class="about-this-version-content__val">{{ vm.documentFingerprint }}</dd>
<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>
</div> </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>
</div> </div>
<div class="about-this-version-feedback"> <div class="about-this-version-content-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' }} "> <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 Send us feedback
</a> </a>
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment