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;
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;
}
}
......@@ -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
......
......@@ -45,7 +45,6 @@ $annotation-card-left-padding: 10px;
.annotation {
display: block;
font-family: $sans-font-family;
font-weight: 400;
position: relative;
}
......
......@@ -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;
}
}
......@@ -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;
}
<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>
<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__key">PDF fingerprint: </dt>
<dd class="about-this-version__val">{{ vm.documentFingerprint }}</dd>
<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__key">Username: </dt>
<dd class="about-this-version__val">{{ vm.auth.username }}</dd>
<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__key">Date: </dt>
<dd class="about-this-version__val">{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }}</dd>
<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"
......@@ -33,5 +32,4 @@
date-time="vm.dateTime">
</feedback-link>
</div>
</div>
</div>
<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>
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