Merge pull request #904 from OpenTechFund/feature/850-admin-bar-polish

Feature/850 admin bar polish

opentech/apply/funds/templates/funds/submissions_by_round.html

@@ -7,9 +7,12 @@
     <div class="admin-bar">
         <div class="admin-bar__inner admin-bar__inner--with-button">
             <div>
-                <h5><a href="{% url "apply:submissions:overview" %}">< Submissions</a></h5>
+                <a href="{% url "apply:submissions:overview" %}" class="admin-bar__link">
+                    <svg><use xlink:href="#arrow"></use></svg>
+                    Submissions
+                </a>
                 <h1 class="gamma heading heading--no-margin heading--bold">{{ object }}</h1>
-                <h5>{% if object.fund %}{{ object.fund }} | {% endif %}Lead: {{ object.lead }}</h5>
+                <p class="admin-bar__meta">{% if object.fund %}{{ object.fund }} | {% endif %}Lead: {{ object.lead }}</p>
             </div>
             <div id="submissions-by-round-app-react-switcher"></div>
         </div>

opentech/apply/review/templatetags/review_tags.py

@@ -21,7 +21,7 @@ TRAFFIC_LIGHT_COLORS = {
     }
 }
 
-TRAFFIC_LIGHT_TEMPLATE = '<span class="traffic-light traffic-light--{color}">{value}</span>'
+TRAFFIC_LIGHT_TEMPLATE = '<span aria-label="Traffic light score" class="traffic-light traffic-light--{color}">{value}</span>'
 
 
 @register.filter()

opentech/static_src/src/sass/apply/abstracts/_variables.scss

@@ -26,7 +26,7 @@ $color--mint: #40c2ad;
 $color--grass: #7dc588;
 $color--ocean: #1888b1;
 $color--sky-blue: #e7f2f6;
-$color--marine: #177da8;
+$color--marine: #14729a;
 $color--mist: #f3fafe;
 $color--green: #7dc558;
 $color--pastel-red: #f1a9a9;
@@ -39,6 +39,7 @@ $color--linkedin: #137ab8;
 $color--facebook: #396ab5;
 
 // Transparent
+$color--black-60: rgba(0, 0, 0, .6);
 $color--black-50: rgba(0, 0, 0, .5);
 $color--black-40: rgba(0, 0, 0, .4);
 $color--black-25: rgba(0, 0, 0, .25);

opentech/static_src/src/sass/apply/components/_admin-bar.scss

@@ -28,4 +28,29 @@
             margin-bottom: 0;
         }
     }
+
+    &__link {
+        display: inline-flex;
+        align-items: center;
+        color: $color--white;
+        opacity: .8;
+        transition: opacity $quick-transition;
+        font-size: 14px;
+        font-weight: $weight--semibold;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        svg {
+            width: 30px;
+            height: 30px;
+            fill: $color--white;
+            margin-right: 5px;
+        }
+    }
+
+    &__meta {
+        margin: 0 0 10px;
+    }
 }

opentech/static_src/src/sass/apply/components/_all-submissions-table.scss

@@ -13,7 +13,7 @@
 
         th {
             &.reviews_stats { // sass-lint:disable-line class-name-format
-                color: $color--mid-dark-grey;
+                color: $color--black-60;
 
                 span {
                     font-size: 13px;

opentech/static_src/src/sass/apply/components/_table.scss

@@ -13,7 +13,7 @@ table {
         text-align: left;
 
         a {
-            color: $color--mid-dark-grey;
+            color: $color--black-60;
             transition: color .25s ease-out;
         }
     }

opentech/templates/includes/sprites.html

@@ -296,4 +296,9 @@
     <symbol id="padlock" viewBox="0 0 64 64">
         <g id="Icon-Lock" transform="translate(284 430)"><path class="st0" d="M-237.7-401.3h-3v-6.4c0-6.2-5.1-11.3-11.3-11.3-6.2 0-11.3 5.1-11.3 11.3v6.4h-3v-6.4c0-7.9 6.4-14.3 14.3-14.3s14.3 6.4 14.3 14.3v6.4" id="Fill-66"/><path class="st0" d="M-239.2-374.1h-25.6c-2.6 0-4.8-2.2-4.8-4.8v-19.2c0-2.6 2.2-4.8 4.8-4.8h25.6c2.6 0 4.8 2.2 4.8 4.8v19.2c0 2.7-2.2 4.8-4.8 4.8zm-25.6-25.6c-.9 0-1.6.7-1.6 1.6v19.2c0 .9.7 1.6 1.6 1.6h25.6c.9 0 1.6-.7 1.6-1.6v-19.2c0-.9-.7-1.6-1.6-1.6h-25.6z" id="Fill-67"/><path class="st0" d="M-248.8-393.3c0 1.8-1.4 3.2-3.2 3.2s-3.2-1.4-3.2-3.2 1.4-3.2 3.2-3.2 3.2 1.5 3.2 3.2" id="Fill-68"/><path class="st0" id="Fill-69" d="M-251.2-393.3h-1.6l-1.6 9.6h4.8l-1.6-9.6"/></g>
     </symbol>
+
+    <symbol id="arrow" viewBox="0 0 24 24">
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+    </symbol>
 </svg>