added basic status bar styles

opentech/apply/funds/templates/funds/applicationsubmission_detail.html

 {% extends "base-apply.html" %}
 
 {% block content %}
-<div class="wrapper wrapper--breakout wrapper--admin">
+<div class="wrapper wrapper--breakout wrapper--admin wrapper--bottom-space">
     <div class="wrapper wrapper--medium">
         <h2 class="heading heading--no-margin">{{ object.title }}</h2>
         <h5 class="heading heading--meta">
@@ -10,10 +10,8 @@
             <span>{{ object.round }}</span>
             <span>Lead: {{ object.round.specific.lead }}</span>
         </h5>
+        {% include "funds/includes/status_bar.html" with workflow=object.workflow status=object.status %}
     </div>
-
-    {% include "funds/includes/status_bar.html" with workflow=object.workflow status=object.status %}
-
 </div>
 
 <div>Submission Details</div>

opentech/apply/funds/templates/funds/includes/status_bar.html

-{% for phase in workflow %}
-<div class="{% if phase == status %}current{% endif %}" style="{% if phase == status %}font-weight:bold;{% endif %}">
-    {{ phase.name }}
+<div class="status-bar">
+    {# '.status-bar__item--is-complete' needs to be added to each 'complete' step in order for bar to be styled correctly #}
+    {% for phase in workflow %}
+        <div class="status-bar__item {% if phase == status %}status-bar__item--is-complete{% endif %}">
+                {% if phase == status %}
+                    <svg class="status-bar__icon"><use xlink:href="#tick-alt"></use></svg>
+                {% endif %}
+            <p>{{ phase.name }}</p>
+        </div>
+    {% endfor %}
 </div>
-{% endfor %}

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

+.status-bar {
+    $root: &;
+    display: flex;
+    padding: 30px 10px;
+
+    &__icon {
+        position: absolute;
+        top: -10px;
+        left: 0;
+        z-index: 30;
+        width: 20px;
+        height: 20px;
+
+        .status-bar__item:first-of-type & {
+            left: -10px;
+        }
+    }
+
+    &__item {
+        position: relative;
+        flex: 1;
+        height: 3px;
+        background: $color--mid-grey;
+
+        // every items dot
+        &::before {
+            position: absolute;
+            top: -10px;
+            width: 20px;
+            height: 20px;
+            background: $color--dark-grey;
+            border: 5px solid $color--mid-grey;
+            border-radius: 50%;
+            content: '';
+        }
+
+        // last items dont have a dot
+        &:last-of-type {
+            flex: 0;
+            height: 0;
+
+            &.status-bar__item--is-complete {
+                &::after {
+                    display: none;
+                }
+            }
+        }
+
+        &:first-of-type {
+            &::before {
+                left: -10px;
+            }
+        }
+
+        &--is-complete {
+            background: $color--primary;
+
+            // when a step is complete, overlay the next step dot
+            &::after {
+                position: absolute;
+                top: -10px;
+                right: -20px;
+                z-index: 10;
+                width: 20px;
+                height: 20px;
+                background: $color--white;
+                border: 5px solid $color--error;
+                border-radius: 50%;
+                content: '';
+            }
+
+            &:last-of-type {
+                &::after {
+                    background: $color--primary;
+                }
+            }
+
+            &::before {
+                z-index: 20;
+                background: $color--primary;
+                border-color: $color--primary;
+            }
+        }
+    }
+}
+

opentech/static_src/src/sass/apply/main.scss

@@ -13,6 +13,7 @@
 @import 'components/button';
 @import 'components/heading';
 @import 'components/icon';
+@import 'components/status-bar';
 @import 'components/wrapper';
 
 // Layout

opentech/templates/includes/sprites.html

@@ -148,6 +148,10 @@
         </g>
     </symbol>
 
+    <symbol id="tick-alt"viewBox="0 0 18 16">
+        <path d="M6 10.046l2.326 2.174L13.356 7" transform="translate(-1 -2)" stroke="#FFF" stroke-width="2" fill="none" fill-rule="evenodd" />
+    </symbol>
+
     <symbol id="website" width="13" height="13" viewBox="0 0 13 13">
         <path d="M0 0l4.92 12.8L6.86 9.22 10.631 13 13 10.632l-3.779-3.77L12.8 4.92z" />
     </symbol>