Merge pull request #1538 from heartsucker/ui-fixes

Ui fixes

install_files/ansible-base/group_vars/development.yml

@@ -23,7 +23,7 @@ securedrop_header_image: ""
 securedrop_app_gpg_public_key: "test_journalist_key.pub"
 securedrop_app_gpg_fingerprint: "65A1B5FF195B56353CC63DFFCC40EF1228271441"
 # Custom text that will appear on the source interface
-custom_notification_text: "This is a SecureDrop Development VM for testing ONLY"
+custom_notification_text: "This is an insecure SecureDrop Development server for testing ONLY. Do NOT submit documents here."
 
 ### Used by the mon role ###
 # The OSSEC alert GPG public key has to be in the install_files/ansible-base/ or

securedrop/journalist_templates/account_edit_hotp_secret.html

@@ -6,6 +6,6 @@
     <label for="otp_secret">Change Secret</label>
     <input name="otp_secret" type="text" placeholder="HOTP Secret"><br />
   </p>
-  <button type="submit">Continue</button>
+  <button class="sd-button" type="submit">CONTINUE</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/account_new_two_factor.html

@@ -21,6 +21,6 @@ <h1>Enable Yubikey (OATH-HOTP)</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
   <label for="token">Verification code</label>
   <input name="token" id="token" type="text" placeholder="123456" />
-  <button type="submit">Submit</button>
+  <button type="submit" class="sd-button">SUBMIT</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/admin.html

@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% block body %}
-<h2>Admin Interface</h2>
+<h1>Admin Interface</h1>
 
 <form action="{{ url_for('admin_add_user') }}">
-  <button type="submit" class="btn" id="add-user"><i class="fa fa-plus"></i> Add user</button>
+  <button class="sd-button" type="submit" class="btn" id="add-user">ADD USER</button>
 </form>
 
 <hr class="no-line" />

securedrop/journalist_templates/admin_add_user.html

@@ -18,6 +18,6 @@
     <label for="is_hotp">I'm using a Yubikey </label>
     <input name="otp_secret" type="text" placeholder="HOTP Secret" size="60"><br />
   </p>
-  <button type="submit">Add user</button>
+  <button type="submit" class="sd-button">ADD USER</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/admin_edit_hotp_secret.html

@@ -7,6 +7,6 @@
     <label for="otp_secret">Change Secret</label>
     <input name="otp_secret" type="text" placeholder="HOTP Secret"><br />
   </p>
-  <button type="submit">Continue</button>
+  <button class="sd-button" type="submit">CONTINUE</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/admin_edit_user.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block body %}
-<h2>Edit user "{{ user.username }}"</h2>
+<h1>Edit user "{{ user.username }}"</h1>
 <p><a href="/admin">&laquo; Back to admin interface</a></p>
 
 <form method="post">
@@ -22,7 +22,7 @@ <h2>Edit user "{{ user.username }}"</h2>
     <input name="is_admin" id="is_admin" type="checkbox" {% if user.is_admin %}checked{% endif %} />
     <label for="is_admin">Is Administrator</label>
   </p>
-  <button type="submit" id="update-user">Update user</button>
+  <button class="sd-button" type="submit" id="update-user">UPDATE USER</button>
 </form>
 
 <hr class="no-line">
@@ -32,12 +32,12 @@ <h2>Reset Two Factor Authentication</h2>
 <form method="post" action="{{ url_for('admin_reset_two_factor_totp') }}" id="reset-two-factor-totp">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
   <input name="uid" type="hidden" value="{{ user.id }}"/>
-  <button type="submit" class="center"><i class="fa fa-refresh"></i> Reset two factor authentication (Google Authenticator)</button>
+  <button type="submit" class="pull-right">RESET TWO FACTOR AUTHENTICATION (GOOGLE AUTHENTICATOR)</button>
 </form>
 <br />
 <form method="post" action="{{ url_for('admin_reset_two_factor_hotp') }}" id="reset-two-factor-hotp">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
   <input name="uid" type="hidden" value="{{ user.id }}"/>
-  <button type="submit" class="center"><i class="fa fa-refresh"></i> Reset two factor authentication (HOTP Yubikey)</button>
+  <button class="sd-button" type="submit" class="pull-right">RESET TWO FACTOR AUTHENTICATION (HOTP YUBIKEY)</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/admin_new_user_two_factor.html

@@ -20,6 +20,6 @@ <h1>Enable Yubikey (OATH-HOTP)</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
   <label for="token">Verification code</label>
   <input name="token" id="token" type="text" placeholder="123456" />
-  <button type="submit">Submit</button>
+  <button class "sd-button" type="submit">SUBMIT</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/col.html

@@ -10,10 +10,10 @@
       <a href="/">All Sources</a>
       <i class="fa fa-chevron-right"></i>
       <strong>{{ source.journalist_designation }}</strong>
-      <a href="#change-codename-{{ source.journalist_designation }}" title="Generate a new random codename for this source. We recommend doing this if the first random codename is difficult to say or remember. You can generate new random codenames as many times as you like." class="plain" id="regenerate-codename-btn"><i class="fa fa-refresh"></i> <span id="regenerate-codename-btn-label">Change codename</span></a>
+      <a href="#change-codename-{{ source.journalist_designation }}" title="Generate a new random codename for this source. We recommend doing this if the first random codename is difficult to say or remember. You can generate new random codenames as many times as you like." class="plain" id="regenerate-codename-btn"><span id="regenerate-codename-btn-label">Change codename</span></a>
       <div id="change-codename-{{ source.journalist_designation }}" class="confirm-prompt">Are you sure you want to generate a new codename?
         <a href="#regenerate-code">Cancel</a>
-        <button type="submit">Confirm</button>
+        <button class="sd-button" type="submit">CONFIRM</button>
       </div>
     </p>
   </form>
@@ -23,8 +23,8 @@
     <form action="/bulk" method="post">
       <div class="document-actions">
         <div id='select-container'></div>
-        <button type="submit" name="action" value="download"><i class="fa fa-download"></i> Download</button>
-        <button type="submit" name="action" value="confirm_delete" class="danger" id="delete_selected"><i class="fa fa-trash-o"></i> Delete</button>
+        <button class="sd-button" type="submit" name="action" value="download"></i> DOWNLOAD</button>
+        <button class="sd-button" type="submit" name="action" value="confirm_delete" class="danger" id="delete_selected">DELETE</button>
       </div>
       <ul id="submissions" class="plain submissions">
         {% for doc in source.collection %}
@@ -76,7 +76,7 @@ <h3><i class="fa fa-reply"></i> Reply</h3>
       <input type="hidden" name="sid" value="{{ sid }}"/>
       <textarea name="msg" cols="72" rows="10"></textarea>
       <hr class="no-line" />
-      <button id="reply-button" class="button-custom" type="submit">Submit</button>
+      <button id="reply-button" class="sd-button" type="submit">SUBMIT</button>
     </form>
   {% elif source.flagged %}
     <p class="notification">You've flagged this source for reply.</p>
@@ -86,7 +86,7 @@ <h3><i class="fa fa-reply"></i> Reply</h3>
     <form action="/flag" method="post">
       <input type="hidden" name="sid" value="{{ sid }}"/>
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-      <button id="flag-button" class="button-custom" type="submit"><i class="fa fa-flag"></i> Flag this source for reply</button>
+      <button id="flag-button" class="sd-button" type="submit">FLAG THIS SOURCE FOR REPLY</button>
     </form>
   {% endif %}
   <hr class="no-line" />
@@ -97,7 +97,7 @@ <h3><i class="fa fa-reply"></i> Reply</h3>
     <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
     <input type="hidden" name="sid" value="{{ sid }}"/>
     <input type="hidden" name="col_name" value="{{ source.journalist_designation }}"/>
-    <button type="submit" class="danger"><i class="fa fa-trash-o"></i> Delete Collection</button>
+    <button type="submit" class="sd-button danger">DELETE COLLECTION</button>
   </form>
 
 </div>

securedrop/journalist_templates/delete.html

@@ -17,7 +17,7 @@
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
   <input type="hidden" name="sid" value="{{ sid }}" autocomplete="off"/>
   <input type="hidden" name="confirm_delete" value="true" />
-  <p><button type="submit" name="action" value="delete"><i class="fa fa-trash-o"></i> Permanently delete files</button></p>
+  <p><button class="sd-button" type="submit" name="action" value="delete">PERMANENTLY DELETE FILES</button></p>
 </form>
 
 <p><a href="/col/{{ sid }}">Return to the list of documents for {{ source.journalist_designation }}...</a></p>

securedrop/journalist_templates/edit_account.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block body %}
-<h2>Edit your account</h2>
+<h1>Edit your account</h1>
 
 <form method="post">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
@@ -12,7 +12,7 @@ <h2>Edit your account</h2>
     <label for="password_again">Change password (confirm)</label>
     <input name="password_again" id="password_again" type="password" />
   </p>
-  <button type="submit" id="update">Update</button>
+  <button class="sd-button" type="submit" id="update">UPDATE</button>
 </form>
 
 <hr class="no-line">
@@ -21,11 +21,11 @@ <h2>Reset Two Factor Authentication</h2>
 <p>If your two factor authentication credentials have been lost or compromised, or you got a new device, you can reset your credentials here. <em>If you do this, make sure you are ready to set up your new device, otherwise you will be locked out of your account.</em></p>
 <form method="post" action="{{ url_for('account_reset_two_factor_totp') }}" id="reset-two-factor-totp">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
-  <button type="submit" class="center"><i class="fa fa-refresh"></i> Reset two factor authentication (Google Authenticator)</button>
+  <button class="sd-button" type="submit" class="pull-right">RESET TWO FACTOR AUTHENTICATION (GOOGLE AUTHENTICATOR)</button>
 </form>
 <br />
 <form method="post" action="{{ url_for('account_reset_two_factor_hotp') }}" id="reset-two-factor-hotp">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
-  <button type="submit" class="center"><i class="fa fa-refresh"></i> Reset two factor authentication (HOTP Yubikey)</button>
+  <button class="sd-button" type="submit" class="pull-right">RESET TWO FACTOR AUTHENTICATION (HOTP YUBIKEY)</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block body %}
 <div id="content" class="journalist-view-all">
-  <h2><span class="headline">Sources</span></h2>
+  <h1><span class="headline">Sources</span></h1>
   {% if unstarred or starred %}
     <div id='filter-container'></div>
     <form id="process_collections" action="/col/process" method="post">

securedrop/journalist_templates/login.html

@@ -1,14 +1,14 @@
 {% extends "base.html" %}
 {% block body %}
 
-<h2>Login to access the journalist interface</h2>
+<h1>Login to access the journalist interface</h1>
 
 <form method="post" action="/login" autocomplete="off">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <p class="center"><input type="text" name="username" autocomplete="off" placeholder="Username" autofocus></p>
   <p class="center"><input type="password" name="password" placeholder="Password"></p>
   <p class="center"><input name="token" id="token" type="text" placeholder="Two-factor Code"></p>
-  <p class="center"><button type="submit">Log in <i class="fa fa-arrow-circle-o-right"></i></button></p>
+  <p class="pull-right"><button class="sd-button" type="submit">LOG IN</i></button></p>
 </form>
 
 {% endblock %}

securedrop/sass/_base.sass

@@ -20,14 +20,24 @@
 
   h1, h2, h3
     font-weight: bold
-    text-align: center
+
+  h1, h2
+    color: #7985aa
 
   h1
+    text-align: left
     font-size: 30px
 
   h2
     font-size: 25px
 
+    &.welcome-text
+      color: inherit
+      text-align: center
+
+  h3
+    text-align: center
+
   .content
     position: relative
     margin: 15px auto
@@ -52,6 +62,10 @@
   a.text-link
     color: $color_purple_medium
 
+  .sd-button
+    font-weight: normal
+    letter-spacing: 0.15em
+
   .select
     border: 1px #C4C2C2 solid
     padding: 3px 10px
@@ -226,14 +240,6 @@
       .file-options
         padding-top: 8px
 
-      .upload-icon
-        display: inline-block
-        width: 100%
-        text-align: center
-        font-size: 52pt
-        color: rgba(0, 0, 0, 0.5)
-        margin-bottom: 8px
-
       input[type="file"]
         background-color: rgba(0, 0, 0, 0.05)
         padding: 10px
@@ -281,32 +287,47 @@
     display: block
     margin: 0 auto
 
-  .flash
+  $color_error_border: #F68E8E
+  $color_error_background: #FCE3E3
+
+  aside, .flash, .banner-warning
+    border-radius: 10px
+
+    i
+      font-size: 18pt
+
+  aside
+    background-color: #fffbe6
+    color: #82572d
+
+  aside, .flash
     padding: 10px
     margin: 10px
     text-align: left
     font-size: medium
 
-  .notification
-    border: 1px solid #8ed9f6
-    background-color: #e3f7fc
-    border-radius: 10px
-    padding: 9px
-    font-size: medium
-    font-weight: normal
+    &.notification
+      border: 1px solid #8ed9f6
+      background-color: #e3f7fc
+      font-size: medium
+      font-weight: normal
 
-    i
-      color: #4f7685
-      font-size: 18pt
+      i
+        color: #4f7685
 
-  .error, .banner-warning
-    border: 1px solid #F68E8E
-    background-color: #FCE3E3
-    border-radius: 10px
+    &.error
+      border: 1px solid $color_error_border
+      background-color: $color_error_background
+
+      i
+        color: #D62727
 
-  .error i, .banner-warning i
-    color: #D62727
-    font-size: 18pt
+  .banner-warning
+    border: 1px solid $color_error_border
+    background-color: $color_error_background
+
+    i
+      color: #D62727
 
   div
     &#select-container
@@ -324,7 +345,7 @@
     display: inline-block
     width: 30%
     min-width: 300px
-    min-height: 290px
+    min-height: 310px
     margin: 1%
     padding: 25px
     border: 1px solid #c3c3c3
@@ -375,17 +396,6 @@
   ul.plain
     list-style: none
 
-  a#already-have-codename
-    float: right
-    margin-right: 12px
-    margin-top: 10px
-    color: #888
-    text-decoration: none
-
-    &:hover
-      text-decoration: underline
-      color: #666
-
   ul.starred
     margin-bottom: 1.33em
 
@@ -428,10 +438,6 @@
   #regenerate-codename-btn-label
     font-size: 10px
 
-  .journalist-view-single
-    padding-top: 0px
-    text-align: center
-
   footer
     clear: both
     text-align: center

securedrop/sass/_button-rules.sass

@@ -56,14 +56,20 @@
     &.primary
       display: block
       margin: 0 auto
-      width: 35%
       display: inline-block
 
     &.secondary
       @extend .primary
       background: white
-      color: $color_blue_medium
-      border: 1px solid $color_blue_medium
+      color: $color_purple_medium_darker
+      border: 1px solid $color_purple_medium_darker
+
+    &.index
+      display: block
+      position: absolute
+      bottom: 5%
+      left: 10%
+      right: 10%
 
   button.block, a.btn.block
     text-decoration: none