Update index page in Source UI to simplified layout, content

Resolves #4663
freedomofpress · Aug 22, 2019 · d738a9b · d738a9b
1 parent 67b0bea
commit d738a9b
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 60 deletions.
diff --git a/securedrop/sass/_source_index.sass b/securedrop/sass/_source_index.sass
@@ -1,4 +1,7 @@
 =source_index_rules
+  @media only screen and (min-width: 768px)
+    .header
+      padding: 0em 2em 1em 2em
 
   #recommend-tor, #disable-js
     text-decoration: underline
@@ -14,7 +17,7 @@
       display: inline-block
 
     .header
-      width: 33.3333%
+      width: 30%
       height: 100%
       align-self: center
 
@@ -28,14 +31,19 @@
       &:dir(rtl)
         text-align: right
 
+      &.extended-welcome-text
+        color: #626161
+        font-size: .9em
+        line-height: 1.4em
+
     .index-row
       display: flex
       justify-content: space-between
       flex-wrap: wrap
-      width: 66.6666%
+      width: 70%
 
     .index-column
-      padding: 1em
+      padding: 1em 2em 1em 2em
       display: flex
       flex-direction: column
       justify-content: space-between
@@ -44,18 +52,8 @@
       border-bottom-width: 0
 
     .index-left
-      background-image: linear-gradient(140deg, #0096dc, #005db7)
-      color: white
       border-style: none
 
-    div.index-right
-      background: white
-      border-width: 1px
-      border-style: solid
-      border-image-source: linear-gradient(145deg, #0096dc, #005db7)
-      border-image-slice: 1
-      color: #0A7CDC
-
     .left-cut-out
       border-color: white
 
@@ -65,31 +63,20 @@
     .index-column-bottom-container
       margin-top: 3em
 
+    #middle-separator
+      background: $color_grimace_grey
+      margin-top: 1.5em
+      margin-right: 1.2em
+      width: 3px
+
     #submit-documents-button, #login-button
-      padding: 10px 20px 10px 20px
-
-    #submit-documents-button
-      font-weight: bold
-      letter-spacing: 0
-      font-size: 90%
-      background: transparent
-      border: 1px solid white
-
-    #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
-
-    #submit-documents-button:hover
-      color: white
-      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
-      border-color: rgba(0, 0, 0, 0)
+      padding: 10px 15px 10px 15px
+      width: 90%
+      font-size: .9em
+      letter-spacing: .1em
+      // Standard secondary buttons have a margin to set them apart from the primary
+      margin-left: 0
+      margin-right: 10%
 
     // 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

diff --git a/securedrop/sass/_variables.sass b/securedrop/sass/_variables.sass
@@ -10,9 +10,12 @@ $color_grey_dark: #626161
 $color_grey_medium: #9e9e9e
 $color_grey_light:  #f0f0f0
 $color_grey_xlight: #f8f8f8
+// Derived from grimace blue, below
+$color_grimace_grey: rgba(42, 49, 157, 0.1)
 
 $color_grimace_blue: #2a319d
 $color_securedrop_blue: #0065db
 $color_button_blue: #045fb4
+$color_deep_blue: #000c6c
 
 $spacing-unit: 8px
diff --git a/securedrop/sass/modules/_footer.sass b/securedrop/sass/modules/_footer.sass
@@ -2,11 +2,10 @@
   footer
     clear: both
     text-align: center
-    margin-top: 20px
-    padding-top: 20px
-    margin-bottom: 20px
-    padding-bottom: 20px
-    font-size: .9em
+    padding-top: 2em
+    padding-bottom: 2em
+    font-size: .8em
+    line-height: 1
 
   footer #footer-powered-by
     color: #373737
@@ -22,5 +21,5 @@
     color: #9d9cbd
 
   footer img#footer-logo
-    vertical-align: -35%
+    vertical-align: -40%
     margin-right: 0.5em
diff --git a/securedrop/sass/modules/_headline.sass b/securedrop/sass/modules/_headline.sass
@@ -1,7 +1,7 @@
 =headline
   h1, h2, h3
     font-weight: bold
-    color: #000c6c
+    color: $color_deep_blue
 
   h1
     text-align: left
@@ -13,6 +13,8 @@
   h2
     font-size: 25px
 
+    // Used on Source Interface index page
     &.welcome-text
-      color: inherit
-      text-align: center
+      color: $color_deep_blue
+      text-align: left
+      letter-spacing: .02em
diff --git a/securedrop/sass/modules/_hr-horizontal-rule-line.sass b/securedrop/sass/modules/_hr-horizontal-rule-line.sass
@@ -7,8 +7,11 @@
 
     &.box-separator
       width: 100%
-      margin-top: 1.5em
-      margin-bottom: 1.5em
+      margin-top: 2.5em
+      margin-bottom: 0
+      height: 1px
+      border: none
+      background: $color_grimace_grey
 
     &.no-line
       clear: both

diff --git a/securedrop/sass/source.sass b/securedrop/sass/source.sass
@@ -10,6 +10,11 @@
 .grid
   margin: 0 auto
   max-width: 921px
+  margin-top: 60px
+
+@media only screen and (max-width: 768px)
+  .grid
+    margin-top: 30px
 
 .option
   a.btn.block

diff --git a/securedrop/source_templates/footer.html b/securedrop/source_templates/footer.html
@@ -1,3 +1,4 @@
+<hr class="box-separator">
 <footer>
   <div id="footer-powered-by">
     <img id="footer-logo" src="{{url_for('static', filename='i/logo-footer.png') }}" width="20" height="23">{{ gettext('Powered by') }} <strong>SecureDrop {{ version }}</strong>.

diff --git a/securedrop/source_templates/index.html b/securedrop/source_templates/index.html
@@ -42,31 +42,27 @@
             <div class="index-column index-left">
               <div class="index-column-top-container">
               <h2 class="welcome-text">
-                {{ gettext('Submit for the first time') }}
+                {{ gettext('First submission') }}
               </h2>
-              <hr class="cut-out box-separator left-cut-out">
-              <p>{{ gettext('If this is your first time submitting to journalists, start here.') }}</p>
+              <p class="extended-welcome-text">{{ gettext('First time submitting to our SecureDrop? Start here.') }}</p>
               </div>
               <div class="index-column-bottom-container">
                 <a href="{{ url_for('main.generate') }}" id="submit-documents-button" class="btn alt">
-                  <img class="icon" src="{{ url_for('static', filename='i/arrow-upload-white.png') }}" width="20" height="14">
-                  {{ gettext('SUBMIT DOCUMENTS') }}
+                  {{ gettext('GET STARTED') }}
                 </a>
               </div>
             </div>
-
+            <div id="middle-separator"></div>
             <div class="index-column index-right">
               <div class="index-column-top-container">
               <h2 class="welcome-text">
-                {{ gettext('Already submitted something?') }}
+                {{ gettext('Return visit') }}
               </h2>
-              <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>
+              <p class="extended-welcome-text">{{ gettext('Already have a codename? Check for replies or submit something new.') }}</p>
               </div>
               <div class="index-column-bottom-container">
-                <a href="{{ url_for('main.login') }}" id="login-button" class="btn">
-                  <img class="icon" src="{{ url_for('static', filename='i/font-awesome/comments-white.png') }}" width="20" height="16">
-                  {{ gettext('CHECK FOR A RESPONSE') }}
+                <a href="{{ url_for('main.login') }}" id="login-button" class="btn secondary">
+                  {{ gettext('CHECK-IN') }}
                 </a>
               </div>
             </div>