[WIP] Logo & color refresh for SecureDrop 1.0.0

Updates colors throughout to a new "SecureDrop Blue" and a darker "Grimace Blue", as well as blue gradients on the landing page; updates the favicon and the default logo. Resolves #4500 Resolves #4501 Resolves #4502 Resolves #4503
freedomofpress · Jul 24, 2019 · 532737c · 532737c
1 parent 0dec74f
commit 532737c
Show file tree

Hide file tree

Showing 22 changed files with 126 additions and 75 deletions.
diff --git a/securedrop/journalist_templates/base.html b/securedrop/journalist_templates/base.html
@@ -33,7 +33,7 @@
       <div class="container">
         {% block header %}
         <div id="header">
-          <a href="{{ url_for('main.index') }}"><img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250"></a>
+          <a href="{{ url_for('main.index') }}" class="no-bottom-border"><img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250"></a>
           {% include 'locales.html' %}
           {% if use_custom_header_image %}
           <div class="powered">

diff --git a/securedrop/journalist_templates/locales.html b/securedrop/journalist_templates/locales.html
@@ -19,7 +19,7 @@
         {% else %}
           {% set url = '' %}
         {% endif %}
-        <a href="{{ url }}" rel="nofollow">
+        <a href="{{ url }}" rel="nofollow" class="no-bottom-border">
           <span>{{ g.locales[locale] }}</span>
         </a>
       </li>

diff --git a/securedrop/sass/_source_index.sass b/securedrop/sass/_source_index.sass
@@ -1,4 +1,9 @@
 =source_index_rules
+
+  #recommend-tor, #disable-js
+    text-decoration: underline
+    border: 0
+
   .index-wrap
     display: block
     text-align: center
@@ -31,22 +36,55 @@
 
     .index-column
       padding: 1em
-      display: block
+      display: flex
+      flex-direction: column
+      justify-content: space-between
       width: 48%
-      border: 1px solid $color_purple_medium
       border-top-width: 0
       border-bottom-width: 0
 
     .index-left
-      background: $color_purple_medium
+      background-image: linear-gradient(140deg, #0096dc, #005db7)
       color: white
       border-style: none
 
-    .index-top
-      border-top-width: 1px
+    .index-right
+      background: white
+      border-width: 1.5px
+      border-image-source: linear-gradient(145deg, #0096dc, #005db7)
+      border-image-slice: 1
+      border-image-width: 1px
+      color: #0A7CDC
+
+    .left-cut-out
+      border-color: white
+
+    .right-cut-out
+      border-color: #0A7CDC
+
+    .index-column-bottom-container
+      margin-top: 3em
+
+    #submit-documents-button
+      font-weight: bold
+      letter-spacing: 0
+      font-size: 90%
+
+    #login-button
+      font-weight: bold
+      letter-spacing: 0
+      font-size: 90%
+      background-image: linear-gradient(111deg, #0082d9, #126ec8)
+
+    #login-button:hover
+      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
+      border-color: rgba(0, 0, 0, 0)
+      color: white
 
-    .index-bottom
-      border-bottom-width: 1px
+    #submit-documents-button:hover
+      color: white
+      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
+      border-color: rgba(0, 0, 0, 0)
 
     // This query is to reorder the flex box elements so that they correctly form the
     // two boxes (submit/returning) when the screen is sized down
@@ -73,14 +111,8 @@
       .index-column.index-top
         order: 4
 
-      .index-column.index-bottom
-        order: 6
-
       .index-column.index-left
         order: 2
 
       .index-column.index-left.index-top
         order: 1
-
-      .index-column.index-left.index-bottom
-        order: 3
diff --git a/securedrop/sass/_variables.sass b/securedrop/sass/_variables.sass
@@ -1,17 +1,21 @@
 $color_warning_red: #ae3840
-$color_warning_red_pale: #d55c5c
+$color_warning_red_pale: #ce0083
 
 $color_warning_purple: #813a81
 
 $color_purple_medium: #7985aa
 $color_purple_medium_darker: #727c9b
 
 $color_error_border: #F68E8E
-$color_error_background: #FCE3E3
+$color_error_background: #fce3e3
 
 $color_grey_dark: #626161
 $color_grey_medium: #9e9e9e
 $color_grey_light:  #f0f0f0
 $color_grey_xlight: #f3f3f3
 
+$color_grimace_blue: #2a319d
+$color_securedrop_blue: #0065db
+$color_button_blue: #045fb4
+
 $spacing-unit: 8px
diff --git a/securedrop/sass/modules/_button.sass b/securedrop/sass/modules/_button.sass
@@ -1,6 +1,6 @@
 =button
   button, a.btn, .btn
-    background: $color_purple_medium
+    background: $color_button_blue
     box-sizing: border-box
     -moz-box-sizing: border-box
     padding: 10px 15px
@@ -43,9 +43,9 @@
         border: 1px solid transparent
 
     &:hover
-      background: white
-      color: $color_purple_medium
-      border: 1px solid $color_purple_medium
+      background: $color_grimace_blue
+      color: white
+      border: 1px solid  $color_grimace_blue
 
   .btn
     &.small
@@ -61,8 +61,13 @@
     &.secondary
       @extend .primary
       background: white
-      color: $color_purple_medium_darker
-      border: 1px solid $color_purple_medium_darker
+      color: $color_button_blue
+      border: 1px solid $color_button_blue
+
+    &.secondary:hover
+      background: white
+      color: $color_grimace_blue
+      border-color: $color_grimace_blue
 
     &.index
       display: block
@@ -81,8 +86,8 @@
     padding: 3px 10px
 
   a.btn:hover, .btn:hover
-    background: white
-    color: $color_purple_medium
+    background: $color_grimace_blue
+    color: white
     border: 1px solid $color_purple_medium
 
   button.alt, a.btn.alt, .btn.alt

diff --git a/securedrop/sass/modules/_headline.sass b/securedrop/sass/modules/_headline.sass
@@ -2,9 +2,6 @@
   h1, h2, h3
     font-weight: bold
 
-  h1, h2
-    color: #7985aa
-
   h1
     text-align: left
     font-size: 30px

diff --git a/securedrop/sass/modules/_hr-horizontal-rule-line.sass b/securedrop/sass/modules/_hr-horizontal-rule-line.sass
@@ -1,10 +1,15 @@
 =hr-horizontal-rule-line
   hr
     &.cut-out
-      border-style: dashed
+      border-style: dotted
       border-bottom: none
       border-color: #c3c3c3
 
+    &.box-separator
+      width: 100%
+      margin-top: 1.5em
+      margin-bottom: 1.5em
+
     &.no-line
       clear: both
       border: none

diff --git a/securedrop/sass/modules/_link.sass b/securedrop/sass/modules/_link.sass
@@ -1,9 +1,21 @@
 =link
+
+
   a
-    color: $color_purple_medium
+    text-decoration: none
+    color: $color_securedrop_blue
+    border-bottom: 1px solid rgba(0, 117, 247, 0.4)
+
+    &:hover
+      color: $color_grimace_blue
+      border-bottom: 1px solid rgba(42, 49, 157, 1)
 
     &.plain
       color: #333
+      border: 0
 
       &:hover
         color: $color_purple_medium
+
+    &.no-bottom-border
+      border: 0
diff --git a/securedrop/sass/modules/_panel.sass b/securedrop/sass/modules/_panel.sass
@@ -4,5 +4,5 @@
     width: 100%
     margin: 0 auto
     padding: 16px 30px
-    border: 1px solid #c3c3c3
+    border: 1px solid #e1e1e1
     float: right
diff --git a/securedrop/sass/modules/_snippet.sass b/securedrop/sass/modules/_snippet.sass
@@ -4,7 +4,7 @@
     background: $color_grey_xlight
 
     .attachment
-      background-color: $color_grey_xlight
+      background-image: linear-gradient(115deg, #f8fbff, #eaf1f8)
       padding: 12px
       width: 45%
       @media only screen and (max-width: 815px)

diff --git a/securedrop/sass/modules/_text-link.sass b/securedrop/sass/modules/_text-link.sass
@@ -1,3 +1,9 @@
 =text-link
   a.text-link
-    color: $color_purple_medium
+    text-decoration: none
+    color: $color_securedrop_blue
+    border-bottom: 1px solid rgba(0, 117, 247, 0.4)
+
+    &:hover
+      color: $color_grimace_blue
+      border-bottom: 1px solid rgba(42, 49, 157, 1)
diff --git a/securedrop/sass/source.sass b/securedrop/sass/source.sass
@@ -44,6 +44,7 @@
       padding: 0
       height: 0
       overflow: hidden
+      border: 0
 
     .hidden-codename
       margin: auto

diff --git a/securedrop/source_templates/base.html b/securedrop/source_templates/base.html
@@ -16,7 +16,7 @@
       <div class="container">
         {% block header %}
         <div id="header">
-          <a href="{% if 'logged_in' in session %}{{ url_for('main.lookup') }}{% else %}{{ url_for('main.index') }}{% endif %}">
+          <a href="{% if 'logged_in' in session %}{{ url_for('main.lookup') }}{% else %}{{ url_for('main.index') }}{% endif %}" class="no-bottom-border">
             <img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250">
           </a>
           {% include 'locales.html' %}

diff --git a/securedrop/source_templates/generate.html b/securedrop/source_templates/generate.html
@@ -20,7 +20,7 @@ <h1>{{ gettext('Welcome') }}</h1>
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <button type="submit" id="regenerate-submit" class="small">
         <img class="icon pull-left off-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}" width="20" height="20">
-        <img class="icon pull-left on-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-blue.png') }}"  width="20" height="20">
+        <img class="icon pull-left on-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}"  width="20" height="20">
       </button>
     </form>
   </div>
@@ -39,8 +39,6 @@ <h1>{{ gettext('Welcome') }}</h1>
 <form id="create-form" method="post" action="/create" autocomplete="off">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <button type="submit" class="sd-button btn btn--space primary pull-right" id="continue-button">
-    <img class="icon off-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-white.png') }}" width="17" height="17">
-    <img class="icon on-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-blue.png') }}" width="17" height="17">
      {{ gettext('SUBMIT DOCUMENTS') }}
   </button>
 </form>

diff --git a/securedrop/source_templates/index.html b/securedrop/source_templates/index.html
@@ -33,53 +33,46 @@
               <img src="/static/i/securedrop_small.png" alt="SecureDrop">
             </div>
             {% endif %}
+            <div id="index-locales">
+              {% include 'locales.html' %}
+            </div>
           </div>
 
           <div class="index-row">
-            <div class="index-column index-left index-top">
+            <div class="index-column index-left">
+              <div class="index-column-top-container">
               <h2 class="welcome-text">
                 {{ gettext('Submit for the first time') }}
               </h2>
-              <hr class="cut-out">
+              <hr class="cut-out box-separator left-cut-out">
+              <p>{{ gettext('If this is your first time submitting to journalists, start here.') }}</p>
+              </div>
+              <div class="index-column-bottom-container">
+                <a href="{{ url_for('main.generate') }}" id="submit-documents-button" class="sd-button btn alt">
+                  <img class="icon" src="{{ url_for('static', filename='i/arrow-upload-white.png') }}" width="20" height="14">
+                  {{ gettext('SUBMIT DOCUMENTS') }}
+                </a>
+              </div>
             </div>
 
-            <div class="index-column index-top">
+            <div class="index-column index-right">
+              <div class="index-column-top-container">
               <h2 class="welcome-text">
                 {{ gettext('Already submitted something?') }}
               </h2>
-              <hr class="cut-out">
-            </div>
-
-            <div class="index-column index-left">
-              <p>{{ gettext('If this is your first time submitting to journalists, start here.') }}</p>
-            </div>
-
-            <div class="index-column">
+              <hr class="cut-out box-separator right-cut-out">
               <p>{{ gettext('If you have already submitted to journalists, log in here to check for responses.') }}</p>
+              </div>
+              <div class="index-column-bottom-container">
+                <a href="{{ url_for('main.login') }}" id="login-button" class="sd-button btn primary">
+                  <img class="icon" src="{{ url_for('static', filename='i/font-awesome/comments-white.png') }}" width="20" height="16">
+                  {{ gettext('CHECK FOR A RESPONSE') }}
+                </a>
+              </div>
             </div>
-
-            <div class="index-column index-left index-bottom">
-              <a href="{{ url_for('main.generate') }}" id="submit-documents-button" class="sd-button btn alt">
-                <img class="icon off-hover" src="{{ url_for('static', filename='i/arrow-upload-white.png') }}" width="20" height="14">
-                <img class="icon on-hover" src="{{ url_for('static', filename='i/arrow-upload-blue.png') }}" width="20" height="14">
-                {{ gettext('SUBMIT DOCUMENTS') }}
-              </a>
-            </div>
-
-            <div class="index-column index-bottom">
-              <a href="{{ url_for('main.login') }}" id="login-button" class="sd-button btn primary">
-                <img class="icon off-hover" src="{{ url_for('static', filename='i/font-awesome/comments-white.png') }}" width="20" height="16">
-                <img class="icon on-hover" src="{{ url_for('static', filename='i/font-awesome/comments-blue.png') }}" width="20" height="16">
-                {{ gettext('CHECK FOR A RESPONSE') }}
-              </a>
-            </div>
-          </div>
         </div>
       </div>
 
-      <div id="index-locales" class="center">
-        {% include 'locales.html' %}
-      </div>
       <footer>
         {{ gettext('Like all software, SecureDrop may contain security bugs. Use at your own risk.') }}<br>{{ gettext('Powered by') }} SecureDrop {{ version }}.
       </footer>

diff --git a/securedrop/source_templates/locales.html b/securedrop/source_templates/locales.html
@@ -19,7 +19,7 @@
         {% else %}
           {% set url = '' %}
         {% endif %}
-        <a href="{{ url }}" rel="nofollow">
+        <a href="{{ url }}" rel="nofollow" class="no-bottom-border">
           <span>{{ g.locales[locale] }}</span>
         </a>
       </li>

diff --git a/securedrop/source_templates/login.html b/securedrop/source_templates/login.html
@@ -18,8 +18,6 @@ <h1>{{ gettext('Enter Codename') }}</h1>
 
 <div class="pull-right">
   <button type="submit" class="sd-button btn primary" id="login">
-    <img class="icon off-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-white.png') }}" width="18" height="18">
-    <img class="icon on-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-blue.png') }}" width="18" height="18">
     {{ gettext('CONTINUE') }}
   </button>
   <a href="{{ url_for('main.index') }}" class="sd-button btn secondary" id="cancel">{{ gettext('CANCEL') }}</a>