UX improvements to source interface

freedomofpress · Feb 1, 2017 · c95e9e6 · c95e9e6
1 parent c6db6e8
commit c95e9e6
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 18 deletions.
diff --git a/securedrop/sass/_base.sass b/securedrop/sass/_base.sass
@@ -184,7 +184,7 @@
       color: white
 
   #warning-close
-    cursor: pointer
+    cursor: pointer    
 
   .confirm-prompt
     visibility: hidden

diff --git a/securedrop/sass/_button-rules.sass b/securedrop/sass/_button-rules.sass
@@ -55,8 +55,15 @@
 
     &.primary
       display: block
-      width: 50%
       margin: 0 auto
+      width: 35%
+      display: inline-block
+
+    &.secondary
+      @extend .primary
+      background: white
+      color: $color_blue_medium
+      border: 1px solid $color_blue_medium
 
   button.block, a.btn.block
     text-decoration: none

diff --git a/securedrop/sass/_variables.sass b/securedrop/sass/_variables.sass
@@ -3,6 +3,9 @@ $color_warning_red_pale: #d55c5c
 
 $color_purple_medium: #7985aa
 
+$color_grey_dark: #626161
 $color_grey_medium: #9e9e9e
 $color_grey_light:  #f0f0f0
 $color_grey_xlight: #f3f3f3
+
+$color_blue_medium: #004080
diff --git a/securedrop/sass/source.sass b/securedrop/sass/source.sass
@@ -194,6 +194,13 @@ p#codename
 p#no-replies
   text-align: center
 
+p.explanation
+  text-align: left
+  color: $color_grey_dark
+
+path.icon
+  fill: $color_grey_dark
+
 #replies blockquote
   margin: 1em 1em
 

diff --git a/securedrop/source_templates/base.html b/securedrop/source_templates/base.html
@@ -26,7 +26,7 @@
 
       <div class="panel selected">
       {% if 'logged_in' in session %}
-        <a href="{{ url_for('logout') }}" class="btn pull-right" id="logout">Log Out</a>
+        <a href="{{ url_for('logout') }}" class="btn pull-right" id="logout">Exit</a>
       {% endif %}
         <hr class="no-line" />
 
@@ -42,4 +42,3 @@
     </div>
   </body>
 </html>
-
diff --git a/securedrop/source_templates/login.html b/securedrop/source_templates/login.html
@@ -1,13 +1,16 @@
 {% extends "base.html" %}
 {% block body %}
 
-<h2>Login to check for responses</h2>
+<h2>Enter Codename</h2>
 
 {% include 'flashed.html' %}
 
 <form method="post" action="/login" autocomplete="off">
 <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
 <p class="center"><input type="password" name="codename" class="codename" autocomplete="off" placeholder="Enter your codename" autofocus /></p>
-<p class="center"><button type="submit" class="btn block"><img src="{{ url_for('static', filename='i/font-awesome/white/arrow-circle-o-right.svg') }}" width="20px" height="20px">Continue</button></p>
+<p class="center">
+    <a href="{{ url_for('index') }}" class="btn secondary">Cancel</a>
+    <button type="submit" class="btn primary">Continue</button>
+</p>
 </form>
 {% endblock %}
diff --git a/securedrop/source_templates/lookup.html b/securedrop/source_templates/lookup.html
@@ -8,8 +8,8 @@
   <p class="notification"> <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/black/info-circle.svg') }}" width="20px" height="20px">A journalist has been waiting for you to log in again so SecureDrop can generate a crypto key for you. Now that you have logged in, they are able to write you a reply. Check back later for replies.</p>
   {% endif %}
 
-  <h2 class="headline">Submit documents and messages</h2>
-  <p>You can send a file, a message, or both.</p>
+  <h2 class="headline">Submit Materials</h2>
+  <p class="explanation">If you are already familiar with GPG, you can optionally encrypt your files and messages with our <a href="/journalist-key" class="text-link">public key</a> before submission. Files are encrypted as they are received by SecureDrop. <a href="/why-journalist-key" class="text-link">Learn more</a>.</p>
 
   <hr class="no-line">
 </div>
@@ -18,7 +18,13 @@ <h2 class="headline">Submit documents and messages</h2>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
   <div class="snippet">
     <div class="attachment grid-item center">
-      <img class="center" src="{{ url_for('static', filename='i/font-awesome/upload.png') }}">
+      <svg width="73" height="62" viewBox="0 0 73 61.8">
+        <path d="M47.6 8.6c0 3.7-9.4 6.7-21 6.7 -11.6 0-21-3-21-6.7 0-3.7 9.4-6.7 21-6.7C38.2 2 47.6 4.9 47.6 8.6" class="icon"/>
+        <path d="M47.8 18.1c0 3.7-9.5 6.7-21.1 6.7 -11.7 0-21.1-3-21.1-6.7l0.1-5.6c2.5 2.8 11 4.9 21 4.9 10.1 0 18.6-2.1 21.1-5L47.8 18.1z" class="icon"/>
+        <path d="M30.7 34.4c-1.2 0.1-2.5 0.1-3.8 0.1 -11.7 0-21.1-3-21.1-6.7l0.1-5.6c2.5 2.8 11 4.9 21 4.9 3.5 0 6.8-0.2 9.7-0.7C34 28.5 31.9 31.3 30.7 34.4z" class="icon"/>
+        <path d="M29.3 43.9c-0.8 0-1.6 0-2.5 0 -11.7 0-21.1-3-21.1-6.7l0.1-5.6c2.5 2.8 11 4.9 21 4.9 1.1 0 2.1 0 3.1-0.1 -0.5 1.8-0.8 3.6-0.8 5.5C29.2 42.6 29.3 43.2 29.3 43.9z" class="icon"/>
+        <path d="M49.2 23.9c-9.9 0-17.9 8-17.9 17.9s8 17.9 17.9 17.9c9.9 0 17.9-8 17.9-17.9S59.1 23.9 49.2 23.9zM49.2 30.4c0.7-0.7 1.4 0.1 1.4 0.1s8.1 8.2 9.2 9.3c1.6 1.5-0.2 1.9-0.2 1.9h-6v10.5h-7.5v-10.6h-5.9c-1.3 0-0.4-1.7-0.4-1.7L49.2 30.4" class="icon"/>
+      </svg>
       <input type="file" name="fh" autocomplete="off">
       <p class="center" id="max-file-size">Maximum upload size: 500 MB</p>
     </div>
@@ -28,17 +34,17 @@ <h2 class="headline">Submit documents and messages</h2>
   </div>
 
   <hr class="no-line">
-
-  <button type="submit" class="btn primary">
-  <img src="{{ url_for('static', filename='i/font-awesome/white/cloud-upload.svg') }}" width="17px" height="17px">
-  Submit</button>
-</form>
-
-<p><strong>Tip:</strong> If you are already familiar with GPG, you can optionally encrypt your files and messages with our <a href="/journalist-key" class="text-link">public key</a> before submission. Files are encrypted as they are received by SecureDrop; encrypting before submission provides an extra layer of security before your data reaches SecureDrop. <a href="/why-journalist-key" class="text-link">Learn more</a>.</p>
+  <div class="center">
+    <a href="{{ url_for('lookup') }}" class="btn secondary">Cancel</a>
+    <button type="submit" class="btn primary">
+    <img src="{{ url_for('static', filename='i/font-awesome/white/cloud-upload.svg') }}" width="17px" height="17px">
+    Submit</button>
+    </form>
+  </div>
 
 <hr class="no-line"/>
 
-<h2 class="headline">Replies</h2>
+<h2 class="headline">Get Replies</h2>
 
 <div id="replies">
   {% if replies %}
@@ -59,7 +65,7 @@ <h2 class="headline">Replies</h2>
               </p>
           </div>
         </form>
-        <blockquote>{{ reply.decrypted | nl2br }}</blockquote>
+        <blockquote><h5>From: {{ reply.journalist.username|title }}</h5> {{ reply.decrypted | nl2br }}</blockquote>
         <div class="clearfix"></div>
       </div>
     {% endfor %}