Merge pull request #4404 from consul/budget_styles

Change budgets section styles

.scss-lint.yml

@@ -98,6 +98,7 @@ linters:
 
   PlaceholderInExtend:
     enabled: true
+    exclude: "app/assets/stylesheets/mixins/icons.scss"
 
   PrivateNamingConvention:
     enabled: true

app/assets/stylesheets/_consul_settings.scss

@@ -17,7 +17,8 @@ $line-height:         rem-calc(24);
 $tiny-font-size:      rem-calc(12);
 
 $brand:             #004a83;
-$dark:              darken($brand, 10%);
+$brand-secondary:   darken($brand, 10%);
+$dark:              $brand-secondary;
 
 $text:              #222;
 $text-medium:       #515151;

app/assets/stylesheets/admin.scss

@@ -204,8 +204,8 @@ $table-header:   #ecf1f6;
       line-height: $line-height * 2;
 
       .button {
+        @include brand-text;
         background: #fff;
-        color: $brand;
       }
     }
   }
@@ -677,7 +677,7 @@ code {
     display: block;
 
     &.is-active {
-      color: $brand;
+      @include brand-text;
       font-weight: bold;
       text-decoration: underline;
     }

app/assets/stylesheets/application.scss

@@ -4,7 +4,7 @@
 @import "font-awesome-sprockets";
 @import "font-awesome";
 @import "icons";
-@import "mixins";
+@import "mixins/*";
 @import "admin";
 @import "advanced_search";
 @import "layout";
@@ -33,7 +33,7 @@
 @import "sticky_overrides";
 @import "tags";
 @import "admin/**/*";
-@import "budgets/*";
+@import "budgets/**/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";

app/assets/stylesheets/budgets/ballot/investment.scss

@@ -0,0 +1,52 @@
+.ballot-list li {
+  $side-padding: $line-height / 2;
+  $close-icon-size: rem-calc(20);
+  $close-icon-margin: rem-calc(6);
+
+  background: #f1f1f1;
+  border-radius: rem-calc(12);
+  line-height: $line-height;
+  margin-bottom: $line-height / 4;
+  padding: $line-height $side-padding;
+  position: relative;
+
+  a {
+    color: $text;
+  }
+
+  .ballot-list-title {
+    display: block;
+    padding-right: calc(#{$close-icon-size} + #{$close-icon-margin} - #{$side-padding});
+  }
+
+  .ballot-list-price {
+    @include brand-text;
+    display: block;
+    font-weight: bold;
+    margin-top: $line-height / 2;
+    text-align: right;
+  }
+
+  .remove-budget-investment {
+    @include has-fa-icon(times, solid);
+    font-size: $close-icon-size;
+    position: absolute;
+    right: $close-icon-margin;
+    top: $close-icon-margin;
+
+    &::before {
+      margin-right: 0;
+    }
+  }
+
+  &:hover {
+    @include brand-background;
+
+    a,
+    span {
+      color: #fff;
+      outline: 0;
+      text-decoration: none;
+    }
+  }
+}

app/assets/stylesheets/budgets/groups_and_headings.scss

@@ -9,6 +9,7 @@
   }
 
   .heading {
+    @include brand-text;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
@@ -53,7 +54,7 @@
       }
 
       &:hover::before {
-        background: $highlight;
+        background: $light;
         z-index: -1;
       }
     }

app/assets/stylesheets/budgets/investments/ballot.scss

@@ -0,0 +1,10 @@
+.ballot {
+
+  .button-remove-support {
+    @include has-fa-icon(times, solid);
+    background: #e7eaec;
+    color: $brand-secondary;
+    font-weight: bold;
+    margin-top: $line-height;
+  }
+}

app/assets/stylesheets/budgets/investments/sidebar.scss

@@ -0,0 +1,17 @@
+.my-ballot {
+  border-top: 1px solid $border;
+
+  h2 + * {
+    @include has-fa-icon(vote-yea, solid);
+
+    &::before {
+      float: left;
+      font-size: rem-calc(50);
+      margin-right: rem-calc(10);
+    }
+
+    + * {
+      clear: both;
+    }
+  }
+}

app/assets/stylesheets/budgets/phases.scss

@@ -102,7 +102,7 @@
     }
 
     &.current-phase-tab a {
-      background: $brand;
+      background: $brand-secondary;
       color: $white;
       padding-top: $line-height / 2;
 
@@ -141,9 +141,8 @@
     .budget-next-phase,
     .budget-prev-phase-disabled,
     .budget-next-phase-disabled {
-      background: $brand;
+      @extend %brand-background;
       border-radius: rem-calc(3);
-      color: $white;
       display: flex;
       font-size: rem-calc(36);
       height: 1em * 4 / 3;

app/assets/stylesheets/dashboard.scss

@@ -320,7 +320,7 @@
   }
 
   .is-active {
-    color: $brand;
+    @include brand-text;
     position: relative;
 
     &::before {
@@ -335,7 +335,7 @@
     }
 
     a {
-      color: $brand;
+      @include brand-text;
 
       ~ a {
         color: $text;
@@ -343,7 +343,7 @@
     }
 
     [class^="icon-"] {
-      color: $brand;
+      @include brand-text;
     }
   }
 
@@ -358,7 +358,7 @@
     border-bottom: 2px solid $brand;
 
     .has-tip {
-      color: $brand;
+      @include brand-text;
       font-weight: bold;
     }
   }

app/assets/stylesheets/datepicker_overrides.scss

@@ -2,8 +2,7 @@
 //
 
 .ui-datepicker-header {
-  background: $brand;
+  @extend %brand-background;
-  color: #fff;
   font-weight: bold;
 }
 
@@ -16,8 +15,7 @@
 
   .ui-state-hover,
   .ui-state-active {
-    background: $brand;
+    @extend %brand-background;
-    color: #fff;
   }
 
   thead {

app/assets/stylesheets/layout.scss

@@ -29,9 +29,8 @@
 // 01. Global styles
 // -----------------
 
-::selection {
+* {
-  color: #fff;
+  @include normal-selection;
-  background-color: $brand;
 }
 
 html,
@@ -83,6 +82,7 @@ a {
 
 .button {
   @extend %button;
+  @include inverted-selection;
   background: $brand;
 
   &.warning,
@@ -96,6 +96,7 @@ a {
 }
 
 .button.hollow {
+  @include normal-selection;
   border: 1px solid $link;
   color: $link;
 }
@@ -248,12 +249,12 @@ a {
     }
 
     &.is-active {
+      @include brand-text;
       border-bottom: 2px solid $brand;
-      color: $brand;
       padding-bottom: rem-calc(1);
 
       h2 a {
-        color: $brand;
+        @include brand-text;
       }
     }
 
@@ -279,8 +280,8 @@ a {
       padding: 0;
 
       &.is-active {
+        @include brand-text;
         font-weight: bold;
-        color: $brand;
       }
     }
 
@@ -289,8 +290,8 @@ a {
     }
 
     &.is-active {
+      @include brand-text;
       border-bottom: 2px solid $brand;
-      color: $brand;
     }
   }
 
@@ -352,15 +353,15 @@ a {
     position: relative;
 
     &:hover {
+      @include brand-text;
       background: none;
-      color: $brand;
       text-decoration: none;
     }
 
     &[aria-selected="true"],
     &.is-active {
+      @include brand-text;
       border-bottom: 0;
-      color: $brand;
       font-weight: bold;
 
       &::after {
@@ -386,7 +387,7 @@ a {
 }
 
 .pagination .current {
-  background: $brand;
+  @extend %brand-background;
 }
 
 .pagination li {
@@ -489,7 +490,7 @@ a {
 
 body > header,
 .wrapper > header {
-  background: $brand;
+  @extend %brand-background;
   border-bottom: 1px solid $border;
   margin-bottom: $line-height;
 
@@ -527,11 +528,11 @@ body > header,
       padding: rem-calc(6);
 
       [type="submit"] {
+        @include brand-text;
         background: none;
         border: 0;
         cursor: pointer;
         font-weight: bold;
-        color: $brand;
 
         &:hover {
           text-decoration: underline;
@@ -552,8 +553,7 @@ body > header,
 }
 
 .top-bar {
-  background: $brand !important;
+  @extend %brand-background;
-  color: #fff;
   padding-bottom: 0;
   padding-top: 0;
 
@@ -616,8 +616,8 @@ body > header,
       text-align: left;
 
       @include breakpoint(medium) {
+        @include brand-text;
         background: #fff;
-        color: $brand;
         text-align: center;
       }
     }
@@ -777,8 +777,8 @@ body > header,
       color: #fff;
 
       @include breakpoint(medium) {
+        @include brand-text;
         border-bottom: 2px solid $brand;
-        color: $brand;
       }
     }
   }
@@ -849,8 +849,8 @@ body > header,
   }
 
   .is-active {
+    @include brand-text;
     border-bottom: 2px solid $brand;
-    color: $brand;
 
     &:hover {
       text-decoration: none;
@@ -941,8 +941,7 @@ footer {
 
   &:hover,
   &.is-active {
-    background: $brand;
+    @extend %brand-background;
-    color: #fff;
   }
 }
 
@@ -1640,7 +1639,7 @@ table {
     text-decoration: none;
 
     &:hover {
-      color: $brand;
+      @include brand-text;
     }
   }
 }
@@ -2541,8 +2540,27 @@ table {
 // 22. Images
 // -----------------
 
-.images .button {
+.button {
-  margin-top: $line-height / 2;
+
+  &.upload-image {
+    @include has-fa-icon(image, solid);
+  }
+
+  &.upload-document {
+    @include has-fa-icon(file, solid);
+  }
+
+  &.upload-image,
+  &.upload-document {
+    font-weight: bold;
+    margin-bottom: $line-height * 1.5;
+
+    &::before {
+      $button-padding-left: nth($button-padding, 2);
+      margin-left: -$button-padding-left / 2;
+      margin-right: $button-padding-left / 2;
+    }
+  }
 }
 
 // 23. Maps

app/assets/stylesheets/legislation.scss

@@ -1,29 +1,10 @@
 // Table of Contents
 //
-// 01. Hero
+// 01. Sidebar menu
-// 02. Sidebar menu
+// 02. Legislation cards
-// 03. Legislation cards
 //
 
-// 01. Hero
+// 01. Sidebar menu
-// -----------------
-.brand-heading {
-  background: $brand;
-  margin-bottom: 5rem;
-
-  .column {
-    padding-top: 10rem;
-    padding-bottom: 10rem;
-
-    h4 {
-      font-weight: 400;
-      text-align: center;
-      color: #fff;
-    }
-  }
-}
-
-// 02. Sidebar menu
 // -----------------
 .legislation-categories {
 
@@ -55,7 +36,7 @@
   }
 }
 
-// 03. Legislation cards
+// 02. Legislation cards
 // -----------------
 .legislation {
   margin: 0 0 $line-height;

app/assets/stylesheets/legislation_process.scss

@@ -144,8 +144,8 @@
     margin-bottom: rem-calc(40);
 
     .debate-type {
+      @include brand-text;
       text-transform: uppercase;
-      color: $brand;
       font-weight: 700;
       font-size: $small-font-size;
 
@@ -155,7 +155,7 @@
     }
 
     .debate-title a {
-      color: $brand;
+      @include brand-text;
     }
   }
 
@@ -208,7 +208,7 @@
     }
 
     h4 a {
-      color: $brand;
+      @include brand-text;
 
       &:hover {
         text-decoration: none;
@@ -225,8 +225,8 @@
     }
 
     .quiz-next {
+      @include brand-text;
       background: #ccdbe5;
-      color: $brand;
       font-size: $small-font-size;
       font-weight: bold;
       text-align: right;
@@ -239,8 +239,7 @@
 
       &:hover,
       &:active {
-        background: $brand;
+        @extend %brand-background;
-        color: #fff;
         text-decoration: none;
       }
     }

app/assets/stylesheets/mixins.scss

@@ -1,322 +0,0 @@
-// Table of Contents
-//
-// 01. Logo
-// 02. Orbit bullets
-// 03. Direct uploads
-// 04. Admin layout
-// ------------------
-
-// 01. Logo
-// --------
-
-@mixin logo {
-  color: #fff;
-  display: inline-block;
-  font-family: "Lato" !important;
-  font-size: rem-calc(24);
-  font-weight: lighter;
-
-  @include breakpoint(medium) {
-    line-height: $line-height * 2;
-    margin-top: 0;
-  }
-}
-
-// 02. Orbit bullets
-// -----------------
-
-@mixin orbit-bullets {
-  @include disable-mouse-outline;
-  position: relative;
-  margin-top: $orbit-bullet-margin-top;
-  margin-bottom: $orbit-bullet-margin-bottom;
-  text-align: center;
-
-  button {
-    width: $orbit-bullet-diameter;
-    height: $orbit-bullet-diameter;
-    margin: $orbit-bullet-margin;
-
-    border-radius: 50%;
-    background-color: $orbit-bullet-background;
-
-    &:hover {
-      background-color: $orbit-bullet-background-active;
-    }
-
-    &.is-active {
-      background-color: $orbit-bullet-background-active;
-    }
-  }
-}
-
-// 03. Direct uploads
-// ------------------
-
-@mixin direct-uploads {
-
-  .cached-image {
-    max-width: rem-calc(150);
-    max-height: rem-calc(150);
-  }
-
-  .progress-bar-placeholder {
-    display: none;
-    margin-bottom: $line-height;
-  }
-
-  .document,
-  .image {
-
-    .document-attachment,
-    .image-attachment {
-      padding-left: 0;
-
-      p {
-        margin-bottom: 0;
-      }
-    }
-
-    .attachment-errors {
-
-      > .js-image-attachment,
-      > .js-document-attachment {
-        display: none;
-
-        ~ .error {
-          display: inline-block;
-        }
-      }
-    }
-  }
-
-  .button {
-    font-weight: normal;
-  }
-
-  .progress-bar {
-    width: 100%;
-    background-color: $light-gray;
-  }
-
-  .file-name {
-    margin-top: 0;
-  }
-
-  .loading-bar {
-    height: 5px;
-    width: 0;
-    transition: width 500ms ease-out;
-
-    &.uploading {
-      background-color: $dark-gray;
-    }
-
-    &.complete {
-      background-color: $success-color;
-    }
-
-    &.errors {
-      background-color: $alert-color;
-      margin-top: $line-height / 2;
-    }
-  }
-
-  .loading-bar.no-transition {
-    transition: none;
-  }
-}
-
-// 04. Admin layout
-// ----------------
-
-@mixin admin-layout {
-
-  > header {
-    margin-bottom: 0;
-  }
-
-  > .menu-and-content {
-    flex: 1;
-  }
-}
-
-%font-icon {
-  @extend %fa-icon;
-  font-family: "Font Awesome 5 Free";
-  margin-right: rem-calc(4);
-  vertical-align: middle;
-}
-
-%svg-icon {
-  background: currentcolor;
-  content: "";
-  height: 1em;
-  mask-repeat: no-repeat;
-  mask-size: 100% 100%;
-  width: 1em;
-}
-
-%admin-menu-icon {
-  font-size: rem-calc(20);
-  margin-left: rem-calc(8);
-  margin-right: rem-calc(10);
-}
-
-@mixin has-fa-icon($icon, $style, $position: "before") {
-
-  &::#{$position} {
-    @extend %font-icon;
-    @extend .fa-#{$icon}:before;
-
-    @if $style == "solid" {
-      font-weight: bold;
-    } @else {
-      font-weight: normal;
-    }
-
-    @if $style == "brands" {
-      font-family: "Font Awesome 5 Brands";
-    }
-  }
-
-  @supports (mask-image: url()) {
-
-    &::#{$position} {
-      @extend %svg-icon;
-      mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
-    }
-  }
-}
-
-@mixin bottom-tooltip {
-  @include tooltip;
-  line-height: $global-lineheight;
-  margin-top: $line-height / 8;
-  width: max-content;
-
-  &::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-%button {
-  font-size: $base-font-size;
-
-  &:focus,
-  &:hover {
-    text-decoration: none !important;
-  }
-}
-
-@mixin regular-button($color: $brand) {
-  @include button($background: $color);
-  @extend %button;
-}
-
-@mixin hollow-button($color: $link) {
-  @include button($style: hollow, $background: $color);
-  @extend %button;
-  margin-bottom: 0;
-}
-
-@mixin header-font-size($heading-tag) {
-  @each $size, $headers in $header-styles {
-    @include breakpoint($size) {
-      font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size));
-    }
-  }
-}
-
-@mixin sdg-goal-list($spacing: 1ch) {
-  $min-spacing: $sdg-icon-min-width / 10;
-  $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
-
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: -$spacing 0 $line-height / 3 -#{$spacing};
-  margin-left: calc(-1 * #{$max-spacing});
-  margin-top: calc(-1 * #{$max-spacing});
-  width: calc(100% + #{$spacing});
-  width: calc(100% + #{$max-spacing});
-
-  > *,
-  > .tabs-title {
-    margin-bottom: 0;
-    margin-left: $spacing;
-    margin-left: $max-spacing;
-    margin-right: 0;
-    margin-top: $spacing;
-    margin-top: $max-spacing;
-  }
-
-  a:hover .sdg-goal-icon {
-    filter: brightness(90%);
-  }
-}
-
-%sdg-goal-list {
-  @include sdg-goal-list;
-}
-
-%sdg-goal-list-expanded {
-  $spacing: 0.5%;
-  @include sdg-goal-list($spacing);
-
-  label,
-  li {
-    min-width: $sdg-icon-min-width;
-    width: calc(100% / 17 - #{$spacing});
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    .sdg-goal-icon {
-      width: 100%;
-    }
-
-    a:focus {
-      outline: none;
-
-      img {
-        outline: $outline-focus;
-      }
-    }
-  }
-}
-
-%tags {
-  margin-bottom: 0;
-  margin-left: 0;
-
-  li {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-
-  a,
-  span {
-    @extend %tag;
-  }
-}
-
-%tag {
-  background: #ececec;
-  border-radius: rem-calc(6);
-  color: $text;
-  display: inline-block;
-  font-size: $small-font-size;
-  margin-bottom: $line-height / 3;
-  padding: $line-height / 4 $line-height / 3;
-  text-decoration: none;
-
-  &:hover {
-    background: #e0e0e0;
-    text-decoration: none;
-  }
-}

app/assets/stylesheets/mixins/buttons.scss

@@ -0,0 +1,21 @@
+%button {
+  font-size: $base-font-size;
+
+  &:focus,
+  &:hover {
+    text-decoration: none !important;
+  }
+}
+
+@mixin regular-button($color: $brand) {
+  @include button($background: $color);
+  @include inverted-selection;
+  @extend %button;
+}
+
+@mixin hollow-button($color: $link) {
+  @include button($style: hollow, $background: $color);
+  @include normal-selection;
+  @extend %button;
+  margin-bottom: 0;
+}

app/assets/stylesheets/mixins/colors.scss

@@ -0,0 +1,38 @@
+@mixin brand-background($invert-selection: true) {
+  background-color: $brand;
+  color: $white;
+
+  @if $invert-selection {
+    @include inverted-selection;
+  }
+}
+
+@mixin brand-text {
+  @include normal-selection;
+  color: $brand;
+}
+
+@mixin normal-selection {
+
+  &::selection,
+  *::selection {
+    @include brand-background($invert-selection: false);
+  }
+}
+
+@mixin inverted-selection {
+
+  &::selection,
+  *::selection {
+    background-color: rgba($white, 0.99);
+    color: $brand;
+  }
+}
+
+%brand-background {
+  @include brand-background;
+}
+
+%brand-text {
+  @include brand-text;
+}

app/assets/stylesheets/mixins/headings.scss

@@ -0,0 +1,7 @@
+@mixin header-font-size($heading-tag) {
+  @each $size, $headers in $header-styles {
+    @include breakpoint($size) {
+      font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size));
+    }
+  }
+}

app/assets/stylesheets/mixins/icons.scss

@@ -0,0 +1,47 @@
+%font-icon {
+  @extend %fa-icon;
+  font-family: "Font Awesome 5 Free";
+  margin-right: rem-calc(4);
+  vertical-align: middle;
+}
+
+%svg-icon {
+  background: currentcolor;
+  content: "";
+  height: 1em;
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  width: 1em;
+}
+
+%admin-menu-icon {
+  font-size: rem-calc(20);
+  margin-left: rem-calc(8);
+  margin-right: rem-calc(10);
+}
+
+@mixin has-fa-icon($icon, $style, $position: "before") {
+
+  &::#{$position} {
+    @extend %font-icon;
+    @extend .fa-#{$icon}:before;
+
+    @if $style == "solid" {
+      font-weight: bold;
+    } @else {
+      font-weight: normal;
+    }
+
+    @if $style == "brands" {
+      font-family: "Font Awesome 5 Brands";
+    }
+  }
+
+  @supports (mask-image: url()) {
+
+    &::#{$position} {
+      @extend %svg-icon;
+      mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
+    }
+  }
+}

app/assets/stylesheets/mixins/layouts.scss

@@ -0,0 +1,23 @@
+@mixin admin-layout {
+
+  > header {
+    margin-bottom: 0;
+  }
+
+  > .menu-and-content {
+    flex: 1;
+  }
+}
+
+@mixin logo {
+  color: #fff;
+  display: inline-block;
+  font-family: "Lato" !important;
+  font-size: rem-calc(24);
+  font-weight: lighter;
+
+  @include breakpoint(medium) {
+    line-height: $line-height * 2;
+    margin-top: 0;
+  }
+}

app/assets/stylesheets/mixins/orbit_bullets.scss

@@ -0,0 +1,24 @@
+@mixin orbit-bullets {
+  @include disable-mouse-outline;
+  position: relative;
+  margin-top: $orbit-bullet-margin-top;
+  margin-bottom: $orbit-bullet-margin-bottom;
+  text-align: center;
+
+  button {
+    width: $orbit-bullet-diameter;
+    height: $orbit-bullet-diameter;
+    margin: $orbit-bullet-margin;
+
+    border-radius: 50%;
+    background-color: $orbit-bullet-background;
+
+    &:hover {
+      background-color: $orbit-bullet-background-active;
+    }
+
+    &.is-active {
+      background-color: $orbit-bullet-background-active;
+    }
+  }
+}

app/assets/stylesheets/mixins/sdg.scss

@@ -0,0 +1,58 @@
+@mixin sdg-goal-list($spacing: 1ch) {
+  $min-spacing: $sdg-icon-min-width / 10;
+  $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
+
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: -$spacing 0 $line-height / 3 -#{$spacing};
+  margin-left: calc(-1 * #{$max-spacing});
+  margin-top: calc(-1 * #{$max-spacing});
+  width: calc(100% + #{$spacing});
+  width: calc(100% + #{$max-spacing});
+
+  > *,
+  > .tabs-title {
+    margin-bottom: 0;
+    margin-left: $spacing;
+    margin-left: $max-spacing;
+    margin-right: 0;
+    margin-top: $spacing;
+    margin-top: $max-spacing;
+  }
+
+  a:hover .sdg-goal-icon {
+    filter: brightness(90%);
+  }
+}
+
+%sdg-goal-list {
+  @include sdg-goal-list;
+}
+
+%sdg-goal-list-expanded {
+  $spacing: 0.5%;
+  @include sdg-goal-list($spacing);
+
+  label,
+  li {
+    min-width: $sdg-icon-min-width;
+    width: calc(100% / 17 - #{$spacing});
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    .sdg-goal-icon {
+      width: 100%;
+    }
+
+    a:focus {
+      outline: none;
+
+      img {
+        outline: $outline-focus;
+      }
+    }
+  }
+}

app/assets/stylesheets/mixins/tags.scss

@@ -0,0 +1,31 @@
+%tags {
+  margin-bottom: 0;
+  margin-left: 0;
+
+  li {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+
+  a,
+  span {
+    @extend %tag;
+  }
+}
+
+%tag {
+  background: #ececec;
+  border-radius: rem-calc(6);
+  color: $text;
+  display: inline-block;
+  font-size: $small-font-size;
+  margin-bottom: $line-height / 3;
+  padding: $line-height / 4 $line-height / 3;
+  text-decoration: none;
+
+  &:hover {
+    background: #e0e0e0;
+    text-decoration: none;
+  }
+}
+

app/assets/stylesheets/mixins/tooltips.scss

@@ -0,0 +1,13 @@
+@mixin bottom-tooltip {
+  @include tooltip;
+  line-height: $global-lineheight;
+  margin-top: $line-height / 8;
+  width: max-content;
+
+  &::before {
+    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

app/assets/stylesheets/mixins/uploads.scss

@@ -0,0 +1,69 @@
+@mixin direct-uploads {
+
+  .cached-image {
+    max-width: rem-calc(150);
+    max-height: rem-calc(150);
+  }
+
+  .progress-bar-placeholder {
+    display: none;
+    margin-bottom: $line-height;
+  }
+
+  .document,
+  .image {
+
+    .document-attachment,
+    .image-attachment {
+      padding-left: 0;
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    .attachment-errors {
+
+      > .js-image-attachment,
+      > .js-document-attachment {
+        display: none;
+
+        ~ .error {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  .progress-bar {
+    width: 100%;
+    background-color: $light-gray;
+  }
+
+  .file-name {
+    margin-top: 0;
+  }
+
+  .loading-bar {
+    height: 5px;
+    width: 0;
+    transition: width 500ms ease-out;
+
+    &.uploading {
+      background-color: $dark-gray;
+    }
+
+    &.complete {
+      background-color: $success-color;
+    }
+
+    &.errors {
+      background-color: $alert-color;
+      margin-top: $line-height / 2;
+    }
+  }
+
+  .loading-bar.no-transition {
+    transition: none;
+  }
+}

app/assets/stylesheets/pages.scss

@@ -52,7 +52,7 @@
 .more-info-content {
 
   h3 {
-    color: $brand;
+    @include brand-text;
   }
 
   .additional-info {

app/assets/stylesheets/participation.scss

@@ -329,7 +329,6 @@
 .debate-show,
 .proposal-show,
 .poll-question-show,
-.investment-project-show,
 .budget-investment-show,
 .polls-show,
 .debate-quiz,
@@ -491,13 +490,11 @@
   color: $text;
 }
 
-.investment-project-show p,
 .budget-investment-show p {
   word-break: break-word;
 }
 
 .proposal-show,
-.investment-project-show,
 .budget-investment-show {
 
   .supports {
@@ -644,7 +641,6 @@
 
 .debate,
 .proposal,
-.investment-project,
 .budget-investment,
 .legislation,
 .communities-show {
@@ -799,8 +795,6 @@
   }
 }
 
-.investment-project,
-.investment-project-show,
 .budget-investment,
 .budget-investment-show {
 
@@ -818,6 +812,8 @@
     .button-support {
       background: $budget;
       color: #fff;
+      font-size: $base-font-size;
+      font-weight: bold;
 
       &:hover {
         background: $budget-hover;
@@ -858,7 +854,6 @@
   }
 }
 
-.investment-project-show .supports,
 .budget-investment-show .supports {
   border: 0;
 }
@@ -870,8 +865,6 @@
   }
 }
 
-.investment-project .no-button,
-.investment-project-show .no-button,
 .budget-investment .no-button,
 .budget-investment-show .no-button {
   display: block;
@@ -991,7 +984,7 @@
   }
 
   .is-active {
-    color: $brand;
+    @include brand-text;
 
     &::after {
       content: "\6c";
@@ -1137,7 +1130,7 @@
 // -----------
 
 .budget-header {
-  background: $budget;
+  @extend %brand-background;
   margin-top: -$line-height;
   padding-bottom: $line-height;
   padding-top: $line-height;
@@ -1172,24 +1165,36 @@
 }
 
 .jumbo-budget {
-  background: $budget;
+  background: $white;
-  border-bottom: 1px solid $budget;
+  border-bottom: 2px solid $border;
 
   &.budget-heading {
     min-height: $line-height * 10;
+
+    .check-ballot {
+      @include has-fa-icon(chevron-right, solid, after);
+      float: right;
+      min-width: rem-calc(240);
+
+      &::after {
+        margin-left: $line-height / 4;
+        margin-right: 0;
+      }
+    }
   }
 
   h2 {
     margin-bottom: 0;
   }
 
+  h1,
   h2,
   h3,
   .back,
   .icon-angle-left,
   p,
   a {
-    color: #fff;
+    color: $text;
   }
 
   .tagline {
@@ -1211,62 +1216,77 @@
   }
 
   .button {
-    background: #fff;
+    @extend %brand-background;
-    color: $brand;
     margin-bottom: rem-calc(3);
     text-decoration: none;
   }
 }
 
 .current-phase {
-  color: $brand;
+  @include brand-text;
 }
 
 .progress-votes {
   position: relative;
 
   .progress {
-    background: #212033;
+    background: #bbcdd9;
+    border-radius: rem-calc(12);
     clear: both;
     margin-bottom: 0;
+    overflow: hidden;
   }
 
   .progress-meter {
-    background: #fdcb10;
+    background: $brand;
-    border-radius: 0;
+    border-radius: rem-calc(12);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
     transition: width 2s;
   }
 
-  .spent-amount-text {
+  .total-amount,
+  .amount-available {
+    font-weight: bold;
     margin-bottom: 0;
+    text-transform: uppercase;
+  }
+
+  .total-amount {
+    font-size: $tiny-font-size;
+
+    @include breakpoint(medium) {
+      text-align: right;
+    }
+
+    span {
+      @include brand-text;
+      font-size: $base-font-size;
+    }
+  }
+
+  .amount-available {
+    display: block;
+    font-size: $small-font-size;
+    margin-top: $line-height / 8;
     position: relative;
     text-align: right;
     white-space: nowrap;
 
     &::before {
-      color: #a5a1ff;
+      color: $brand;
       content: "\57";
       font-family: "icons";
       font-size: $small-font-size;
       line-height: 0;
       position: absolute;
       right: -0.5em;
+      top: -$line-height / 8;
     }
-  }
-
-  .total-amount {
-    color: #fff;
-    font-size: rem-calc(18);
-    font-weight: bold;
-    float: right;
-  }
-
-  .amount-available {
-    display: block;
 
     span {
+      @include brand-text;
       font-size: rem-calc(24);
-      font-weight: bold;
     }
   }
 }
@@ -1301,7 +1321,7 @@
   }
 
   .subtitle {
-    border-left: 2px solid $budget;
+    border-left: 2px solid $brand;
     margin: $line-height / 2 0;
     padding-left: $line-height / 2;
   }
@@ -1321,58 +1341,6 @@
 .ballot-list {
   list-style: none;
   margin-left: 0;
-
-  li {
-    background: #f9f9f9;
-    line-height: $line-height;
-    margin-bottom: $line-height / 4;
-    padding: $line-height $line-height / 2;
-    position: relative;
-
-    a {
-      color: $text;
-    }
-
-    span {
-      display: block;
-      font-style: italic;
-    }
-
-    .remove-investment-project {
-      display: block;
-      height: 0;
-
-      .icon-x {
-        color: #9f9f9f;
-        font-size: rem-calc(24);
-        line-height: $line-height / 2;
-        position: absolute;
-        right: 6px;
-        text-decoration: none;
-        top: 6px;
-
-        @include breakpoint(medium) {
-          font-size: $base-font-size;
-        }
-      }
-    }
-
-    &:hover {
-      background: $budget;
-      color: #fff;
-
-      a,
-      span {
-        color: #fff;
-        outline: 0;
-        text-decoration: none;
-      }
-
-      .remove-investment-project .icon-x {
-        color: #fff;
-      }
-    }
-  }
 }
 
 .select-district a {
@@ -1408,15 +1376,11 @@
   z-index: 3;
 
   @include breakpoint(medium) {
-    background-color: $budget;
     transition: height 0.3s;
 
-    h2 {
-      margin-bottom: $line-height / 2;
-      transition: font-size 0.3s;
-    }
-
     &.is-fixed {
+      background: $white;
+      border-bottom: 2px solid $border;
       height: auto;
       left: 0;
       padding: $line-height;
@@ -1431,6 +1395,14 @@
       }
     }
   }
+
+  h2 {
+    transition: font-size 0.3s;
+
+    @include breakpoint(small only) {
+      margin: $line-height 0;
+    }
+  }
 }
 
 .budgets-stats {

app/components/budgets/ballot/investment_component.html.erb

@@ -0,0 +1,14 @@
+<li id="<%= list_item_id %>">
+  <%= investment_title %>
+  <%= investment_price %>
+
+  <% if budget.balloting? %>
+    <%= link_to delete_path,
+                title: t("budgets.ballots.show.remove"),
+                class: "remove-budget-investment",
+                method: :delete,
+                remote: true do %>
+      <span class="show-for-sr"><%= t("budgets.ballots.show.remove") %></span>
+    <% end %>
+  <% end %>
+</li>

app/components/budgets/ballot/investment_component.rb

@@ -0,0 +1,29 @@
+class Budgets::Ballot::InvestmentComponent < ApplicationComponent
+  attr_reader :investment
+
+  def initialize(investment:)
+    @investment = investment
+  end
+
+  private
+
+    def budget
+      investment.budget
+    end
+
+    def list_item_id
+      dom_id(investment)
+    end
+
+    def investment_title
+      link_to investment.title, budget_investment_path(budget, investment)
+    end
+
+    def investment_price
+      tag.span investment.formatted_price, class: "ballot-list-price"
+    end
+
+    def delete_path
+      budget_ballot_line_path(budget, id: investment.id)
+    end
+end

app/components/budgets/ballot/investment_for_sidebar_component.rb

@@ -0,0 +1,23 @@
+class Budgets::Ballot::InvestmentForSidebarComponent < Budgets::Ballot::InvestmentComponent
+  with_collection_parameter :investment
+  attr_reader :investment_ids
+
+  def initialize(investment:, investment_ids:)
+    super(investment: investment)
+    @investment_ids = investment_ids
+  end
+
+  private
+
+    def list_item_id
+      "#{super}_sidebar"
+    end
+
+    def investment_title
+      tag.span investment.title, class: "ballot-list-title"
+    end
+
+    def delete_path
+      budget_ballot_line_path(id: investment.id, investments_ids: investment_ids)
+    end
+end

app/models/budget/ballot.rb

@@ -63,10 +63,11 @@ class Budget
     def voting_style
       @voting_style ||= voting_style_class.new(self)
     end
-    delegate :amount_available, :amount_available_info, :amount_spent, :amount_spent_info, :amount_limit,
+    delegate :amount_available, :amount_available_info, :amount_progress, :amount_spent,
-             :amount_limit_info, :change_vote_info, :enough_resources?, :formatted_amount_available,
+             :amount_spent_info, :amount_limit, :amount_limit_info, :change_vote_info,
-             :formatted_amount_limit, :formatted_amount_spent, :not_enough_resources_error,
+             :enough_resources?, :formatted_amount_available, :formatted_amount_limit,
-             :percentage_spent, :reason_for_not_being_ballotable, :voted_info,
+             :formatted_amount_spent, :not_enough_resources_error, :percentage_spent,
+             :reason_for_not_being_ballotable, :voted_info,
              to: :voting_style
 
     private

app/models/budget/voting_styles/base.rb

@@ -10,13 +10,25 @@ class Budget::VotingStyles::Base
   end
 
   def change_vote_info(link:)
-    I18n.t("budgets.investments.index.sidebar.change_vote_info.#{name}", link: link)
+    I18n.t(
+      "budgets.investments.index.sidebar.change_vote_info.#{name}",
+      link: link,
+      phase_end_date: I18n.l(budget.current_phase.ends_at.to_date, format: :long)
+    )
+  end
+
+  def amount_progress(heading)
+    I18n.t(
+      "budgets.ballots.show.amount_progress",
+      amount_spent: amount_spent_info(heading),
+      amount_limit: amount_limit_info(heading)
+    )
   end
 
   def voted_info(heading)
     I18n.t("budgets.investments.index.sidebar.voted_info.#{name}",
       count: investments(heading).count,
-      amount_spent: ballot.budget.formatted_amount(investments_price(heading)))
+      amount_spent: budget.formatted_amount(investments_price(heading)))
   end
 
   def amount_available_info(heading)
@@ -56,6 +68,10 @@ class Budget::VotingStyles::Base
 
   private
 
+    def budget
+      ballot.budget
+    end
+
     def investments(heading)
       ballot.investments.by_heading(heading.id)
     end

app/views/budgets/ballot/_ballot.html.erb

@@ -40,8 +40,9 @@
         <% end %>
 
         <ul class="ballot-list">
-          <%= render partial: "budgets/ballot/investment",
+          <%= render Budgets::Ballot::InvestmentComponent.with_collection(
-                     collection: @ballot.investments.by_group(group.id) %>
+            @ballot.investments.by_group(group.id)
+          ) %>
         </ul>
       </div>
     </div>

app/views/budgets/ballot/_investment.html.erb

@@ -1,14 +0,0 @@
-<li id="<%= dom_id(investment) %>">
-  <%= link_to investment.title, budget_investment_path(@budget, investment) %>
-  <span><%= investment.formatted_price %></span>
-
-  <% if @budget.balloting? %>
-    <%= link_to budget_ballot_line_path(@budget, id: investment.id),
-                title: t("budgets.ballots.show.remove"),
-                class: "remove-investment-project",
-                method: :delete,
-                remote: true do %>
-       <span class="icon-x"></span>
-    <% end %>
-  <% end %>
-</li>

app/views/budgets/ballot/_investment_for_sidebar.html.erb

@@ -1,16 +0,0 @@
-<li id="<%= dom_id(investment) %>_sidebar">
-  <%= investment.title %>
-  <span><%= investment.formatted_price %></span>
-
-  <% if @budget.balloting? %>
-    <%= link_to budget_ballot_line_path(id: investment.id,
-                                        investments_ids: investment_ids),
-                title: t("budgets.ballots.show.remove"),
-                class: "remove-investment-project",
-                method: :delete,
-                remote: true do %>
-      <span class="show-for-sr"><%= t("budgets.ballots.show.remove") %></span>
-      <span class="icon-x"></span>
-    <% end %>
-  <% end %>
-</li>

app/views/budgets/ballot/_progress_bar.html.erb

@@ -1,6 +1,6 @@
-<span class="total-amount">
+<p id="total_amount" class="total-amount">
-  <%= sanitize(ballot.amount_limit_info(heading)) %>
+  <%= sanitize(ballot.amount_progress(heading)) %>
-</span>
+</p>
 
 <div class="progress" role="progressbar" tabindex="0"
      aria-valuenow="<%= ballot.percentage_spent(heading) %>" aria-valuemin="0" aria-valuemax="100">
@@ -9,6 +9,6 @@
   </div>
 </div>
 
-<p id="amount-spent" class="spent-amount-text" style="width: <%= ballot.percentage_spent(heading) %>%">
+<p id="amount_available" class="amount-available" style="width: <%= ballot.percentage_spent(heading) %>%">
-  <%= render "budgets/ballot/progress_bar/#{ballot.budget.voting_style}", ballot: ballot, heading: heading %>
+  <%= sanitize(ballot.amount_available_info(heading)) %>
 </p>

app/views/budgets/ballot/progress_bar/_approval.html.erb

@@ -1,3 +0,0 @@
-<%= sanitize(t("budgets.progress_bar.votes",
-               count: ballot.amount_spent(heading),
-               limit: ballot.amount_limit(heading))) %>

app/views/budgets/ballot/progress_bar/_knapsack.html.erb

@@ -1,5 +0,0 @@
-<small><%= t("budgets.progress_bar.assigned") %></small><%= ballot.formatted_amount_spent(heading) %>
-<span id="amount-available" class="amount-available">
-  <small><%= t("budgets.progress_bar.available") %></small>
-  <span><%= ballot.formatted_amount_available(heading) %></span>
-</span>

app/views/budgets/investments/_ballot.html.erb

@@ -2,7 +2,7 @@
 <div class="js-participation supports ballot">
   <% if ballot.has_investment?(investment) %>
 
-    <div class="remove supported inline-block">
+    <div class="remove supported">
       <span class="icon-check-circle"
             title="<%= t("budgets.investments.investment.already_added") %>">
       </span>
@@ -14,7 +14,7 @@
                     budget_ballot_line_path(id: investment.id,
                                             budget_id: investment.budget_id,
                                             investments_ids: investment_ids),
-                    class: "delete small expanded",
+                    class: "button button-remove-support expanded",
                     method: :delete,
                     remote: true %>
       <% end %>
@@ -31,7 +31,7 @@
                     budget_ballot_lines_path(investment_id: investment.id,
                                              budget_id: investment.budget_id,
                                              investments_ids: investment_ids),
-                    class: "button button-support small expanded",
+                    class: "button button-support expanded",
                     title: t("budgets.investments.investment.support_title"),
                     method: :post,
                     remote: true %>

app/views/budgets/investments/_header.html.erb

@@ -9,7 +9,7 @@
           <% if can? :show, @ballot %>
             <%= link_to t("budgets.investments.header.check_ballot"),
                         budget_ballot_path(@budget),
-                        class: "button float-right" %>
+                        class: "check-ballot button" %>
           <% end %>
         </div>
       </div>
@@ -26,7 +26,7 @@
                 <h2>
                   <%= t("budgets.investments.index.by_heading", heading: @heading.name) %>
                 </h2>
-                <div id="progress_bar" class="no-margin-top">
+                <div id="progress_bar">
                   <%= render "budgets/ballot/progress_bar", ballot: @ballot, heading: @heading %>
                 </div>
               </div>

app/views/budgets/investments/_sidebar.html.erb

@@ -13,26 +13,7 @@
 <% end %>
 
 <% if @heading && can?(:show, @ballot) %>
-  <p class="callout">
+  <div class="my-ballot">
-    <%= sanitize(@ballot.change_vote_info(
-        link: link_to(t("budgets.investments.index.sidebar.change_vote_link"),
-            budget_ballot_path(@budget)))) %>
-  </p>
-<% end %>
-
-<% if @heading && !@heading.content_blocks.where(locale: I18n.locale).empty? %>
-  <%= render "budgets/investments/content_blocks" %>
-<% end %>
-<% if @map_location&.available? %>
-  <%= render "budgets/investments/map" %>
-<% end %>
-<%= render "shared/tag_cloud", taggable: "Budget::Investment" %>
-<%= render "budgets/investments/categories" %>
-
-<% if @heading && can?(:show, @ballot) %>
-
-  <div class="sidebar-divider"></div>
-
     <h2 class="sidebar-title">
       <%= t("budgets.investments.index.sidebar.my_ballot") %>
     </h2>
@@ -57,17 +38,32 @@
       <p><strong><%= t("budgets.investments.index.sidebar.zero") %></strong></p>
     <% end %>
 
+    <p>
+      <%= sanitize(@ballot.change_vote_info(
+          link: link_to(t("budgets.investments.index.sidebar.change_vote_link"),
+              budget_ballot_path(@budget)))) %>
+    </p>
+
     <ul class="ballot-list">
       <% if @heading %>
-      <% @ballot.investments.by_heading(@heading.id).each do |investment| %>
+        <%= render Budgets::Ballot::InvestmentForSidebarComponent.with_collection(
-        <%= render "budgets/ballot/investment_for_sidebar",
+          @ballot.investments.by_heading(@heading.id),
-                    investment: investment,
+          investment_ids: @investment_ids
-                    investment_ids: @investment_ids %>
+        ) %>
-      <% end %>
       <% end %>
     </ul>
 
     <%= link_to t("budgets.investments.header.check_ballot"),
                   budget_ballot_path(@budget),
                   class: "button hollow expanded" %>
+  </div>
 <% end %>
+
+<% if @heading && !@heading.content_blocks.where(locale: I18n.locale).empty? %>
+  <%= render "budgets/investments/content_blocks" %>
+<% end %>
+<% if @map_location&.available? %>
+  <%= render "budgets/investments/map" %>
+<% end %>
+<%= render "shared/tag_cloud", taggable: "Budget::Investment" %>
+<%= render "budgets/investments/categories" %>

app/views/budgets/investments/index.html.erb

@@ -94,7 +94,7 @@
 
     <div class="small-12 medium-3 column">
       <aside class="margin-bottom">
-        <div id="sidebar">
+        <div id="sidebar" class="budget-investments-sidebar">
           <%= render "/budgets/investments/sidebar" %>
         </div>
       </aside>

app/views/documents/_nested_documents.html.erb

@@ -11,7 +11,8 @@
   <%= link_to_add_association t("documents.form.add_new_document"), f, :documents,
                               partial: "documents/document_fields",
                               id: "new_document_link",
-                              class: "button hollow  #{"hide" if documentable.documents.count >= documentable.class.max_documents_allowed}",
+                              class: "button upload-document
+                                      #{"hide" if max_documents_allowed?(documentable)}",
                               data: {
                                 association_insertion_node: "#nested-documents",
                                 association_insertion_method: "append"

app/views/images/_nested_image.html.erb

@@ -13,7 +13,7 @@
                             force_non_association_create: true,
                             partial: "images/image_fields",
                             id: "new_image_link",
-                            class: "button hollow
+                            class: "button upload-image
                                     #{"hide" if image_fields == :image && imageable.image.present?}",
                             render_options: {
                               locals: { imageable: imageable }

config/locales/en/budgets.yml

@@ -3,8 +3,9 @@ en:
     ballots:
       show:
         title: Your ballot
+        amount_progress: "%{amount_spent} / %{amount_limit}"
         amount_available:
-          knapsack: "You still have <span>%{count}</span> to invest."
+          knapsack: "Still available to you <span>%{count}</span>"
           approval:
             zero: "You can still cast <span>%{count}</span> votes."
             one: "You can still cast <span>%{count}</span> vote."
@@ -16,7 +17,7 @@ en:
             one: "Votes cast: <span>%{count}</span>"
             other: "Votes cast: <span>%{count}</span>"
         amount_limit:
-          knapsack: "%{count}"
+          knapsack: "Total budget <span>%{count}</span>"
           approval:
             one: "You can vote <span>1</span> project"
             other: "You can vote up to <span>%{count}</span> projects"
@@ -107,12 +108,12 @@ en:
               one: "<strong>You voted one proposal</strong>"
               other: "<strong>You voted %{count} proposals</strong>"
           change_vote_info:
-            knapsack: "You can %{link} at any time until the close of this phase. No need to spend all the money available."
+            knapsack: "You can %{link} at any time until %{phase_end_date}. No need to spend all the money available."
-            approval: "You can %{link} at any time until the close of this phase."
+            approval: "You can %{link} at any time until %{phase_end_date}."
           change_vote_link: "change your vote"
           different_heading_assigned: "You have active votes in another heading: %{heading_link}"
           change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
-          check_ballot_link: "check and confirm my ballot"
+          check_ballot_link: "submit my ballot"
           zero: You have not voted any investment project in this group.
           verified_only: "To create a new budget investment %{verify}."
           create: "Create a budget investment"
@@ -165,18 +166,11 @@ en:
           zero: No supports
         give_support: Support
       header:
-        check_ballot: Check and confirm my ballot
+        check_ballot: "Submit my ballot"
         different_heading_assigned: "You have active votes in another heading: %{heading_link}"
         change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
-        check_ballot_link: "check and confirm my ballot"
+        check_ballot_link: "submit my ballot"
-        price: "This heading has a budget of"
+        price: "Total budget"
-    progress_bar:
-      assigned: "You have assigned: "
-      available: "Available budget: "
-      votes:
-        zero: "You have selected <strong>0</strong> projects out of <strong>%{limit}</strong>"
-        one: "You have selected <strong>1</strong> project out of <strong>%{limit}</strong>"
-        other: "You have selected <strong>%{count}</strong> projects out of <strong>%{limit}</strong>"
     show:
       see_results: See results
     results:

config/locales/es/budgets.yml

@@ -3,20 +3,21 @@ es:
     ballots:
       show:
         title: Mis votos
+        amount_progress: "%{amount_spent} / %{amount_limit}"
         amount_available:
-          knapsack: "Te quedan <span>%{count}</span> para invertir"
+          knapsack: "Todavía disponible <span>%{count}</span>"
           approval:
             zero: "Te quedan <span>%{count}</span> votos disponibles"
             one: "Te queda <span>%{count}</span> voto disponible"
             other: "Te quedan <span>%{count}</span> votos disponibles"
         amount_spent:
-          knapsack: "Coste total <span>%{count}</span>"
+          knapsack: "Has asignado <span>%{count}</span>"
           approval:
             zero: "Votos: <span>%{count}</span>"
             one: "Votos: <span>%{count}</span>"
             other: "Votos: <span>%{count}</span>"
         amount_limit:
-          knapsack: "%{count}"
+          knapsack: "Presupuesto total <span>%{count}</span>"
           approval:
             one: "Puedes votar <span>1</span> proyecto"
             other: "Puedes votar hasta <span>%{count}</span> proyectos"
@@ -107,8 +108,8 @@ es:
               one: "<strong>Has votado un proyecto</strong>"
               other: "<strong>Has votado %{count} proyectos</strong>"
           change_vote_info:
-            knapsack: "Puedes %{link} en cualquier momento hasta el cierre de esta fase. No hace falta que gastes todo el dinero disponible."
+            knapsack: "Puedes %{link} en cualquier momento hasta el %{phase_end_date}. No hace falta que gastes todo el dinero disponible."
-            approval: "Puedes %{link} en cualquier momento hasta el cierre de esta fase."
+            approval: "Puedes %{link} en cualquier momento hasta el %{phase_end_date}."
           change_vote_link: "cambiar tus votos"
           different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
           change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
@@ -169,14 +170,7 @@ es:
         different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
         change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
         check_ballot_link: "revisar y confirmar mis votos"
-        price: "Esta partida tiene un presupuesto de"
+        price: "Presupuesto total"
-    progress_bar:
-      assigned: "Has asignado: "
-      available: "Presupuesto disponible: "
-      votes:
-        zero: "Has seleccionado <strong>0</strong> proyectos de <strong>%{limit}</strong>"
-        one: "Has seleccionado <strong>1</strong> proyecto de <strong>%{limit}</strong>"
-        other: "Has seleccionado <strong>%{count}</strong> proyectos de <strong>%{limit}</strong>"
     show:
       see_results: Ver resultados
     results:

spec/system/budgets/ballots_spec.rb

@@ -125,24 +125,24 @@ describe "Ballots" do
         visit budget_investments_path(budget, heading_id: new_york)
         add_to_ballot("Bring back King Kong")
 
-        expect(page).to have_css("#amount-spent", text: "€10,000")
+        expect(page).to have_css("#total_amount", text: "€10,000")
-        expect(page).to have_css("#amount-available", text: "€990,000")
+        expect(page).to have_css("#amount_available", text: "€990,000")
 
         within("#sidebar") do
           expect(page).to have_content "Bring back King Kong"
           expect(page).to have_content "€10,000"
-          expect(page).to have_link("Check and confirm my ballot")
+          expect(page).to have_link "Submit my ballot"
         end
 
         add_to_ballot("Paint cabs black")
 
-        expect(page).to have_css("#amount-spent", text: "€30,000")
+        expect(page).to have_css("#total_amount", text: "€30,000")
-        expect(page).to have_css("#amount-available", text: "€970,000")
+        expect(page).to have_css("#amount_available", text: "€970,000")
 
         within("#sidebar") do
           expect(page).to have_content "Paint cabs black"
           expect(page).to have_content "€20,000"
-          expect(page).to have_link("Check and confirm my ballot")
+          expect(page).to have_link "Submit my ballot"
         end
       end
 
@@ -152,26 +152,26 @@ describe "Ballots" do
         visit budget_investments_path(budget, heading_id: new_york)
 
         expect(page).to have_content investment.title
-        expect(page).to have_css("#amount-spent", text: "€10,000")
+        expect(page).to have_css("#total_amount", text: "€10,000")
-        expect(page).to have_css("#amount-available", text: "€990,000")
+        expect(page).to have_css("#amount_available", text: "€990,000")
 
         within("#sidebar") do
           expect(page).to have_content investment.title
           expect(page).to have_content "€10,000"
-          expect(page).to have_link("Check and confirm my ballot")
+          expect(page).to have_link "Submit my ballot"
         end
 
         within("#budget_investment_#{investment.id}") do
           find(".remove a").click
         end
 
-        expect(page).to have_css("#amount-spent", text: "€0")
+        expect(page).to have_css("#total_amount", text: "€0")
-        expect(page).to have_css("#amount-available", text: "€1,000,000")
+        expect(page).to have_css("#amount_available", text: "€1,000,000")
 
         within("#sidebar") do
           expect(page).not_to have_content investment.title
           expect(page).not_to have_content "€10,000"
-          expect(page).to have_link("Check and confirm my ballot")
+          expect(page).to have_link "Submit my ballot"
         end
       end
 
@@ -217,8 +217,8 @@ describe "Ballots" do
 
         add_to_ballot("Cheap")
 
-        expect(page).to have_css("#amount-spent",     text: "€10,000")
+        expect(page).to have_css("#total_amount",     text: "€10,000")
-        expect(page).to have_css("#amount-available", text: "€9,990,000")
+        expect(page).to have_css("#amount_available", text: "€9,990,000")
 
         within("#sidebar") do
           expect(page).to have_content "Cheap"
@@ -227,13 +227,13 @@ describe "Ballots" do
 
         visit budget_investments_path(budget, heading_id: district_heading1)
 
-        expect(page).to have_css("#amount-spent", text: "€0")
+        expect(page).to have_css("#total_amount", text: "€0")
-        expect(page).to have_css("#amount-spent", text: "€1,000,000")
+        expect(page).to have_css("#amount_available", text: "€1,000,000")
 
         add_to_ballot("Average")
 
-        expect(page).to have_css("#amount-spent",     text: "€20,000")
+        expect(page).to have_css("#total_amount",     text: "€20,000")
-        expect(page).to have_css("#amount-available", text: "€980,000")
+        expect(page).to have_css("#amount_available", text: "€980,000")
 
         within("#sidebar") do
           expect(page).to have_content "Average"
@@ -245,8 +245,8 @@ describe "Ballots" do
 
         visit budget_investments_path(budget, heading_id: city_heading)
 
-        expect(page).to have_css("#amount-spent",     text: "€10,000")
+        expect(page).to have_css("#total_amount",     text: "€10,000")
-        expect(page).to have_css("#amount-available", text: "€9,990,000")
+        expect(page).to have_css("#amount_available", text: "€9,990,000")
 
         within("#sidebar") do
           expect(page).to have_content "Cheap"
@@ -270,7 +270,7 @@ describe "Ballots" do
       add_to_ballot("Park expansion")
 
       within("#progress_bar") do
-        expect(page).to have_css("#amount-spent", text: "€10,000")
+        expect(page).to have_css("#total_amount", text: "€10,000")
       end
     end
   end
@@ -323,7 +323,7 @@ describe "Ballots" do
     end
   end
 
-  context "Showing the ballot" do
+  context "Showing the ballot", :js do
     scenario "Displaying the correct group, heading, count & amount" do
       group1 = create(:budget_group, budget: budget)
       group2 = create(:budget_group, budget: budget)
@@ -350,13 +350,13 @@ describe "Ballots" do
       within("#budget_group_#{group1.id}") do
         expect(page).to have_content "#{group1.name} - #{heading1.name}"
         expect(page).to have_content "Amount spent €20"
-        expect(page).to have_link "You still have €80 to invest.", href: budget_group_path(budget, group1)
+        expect(page).to have_link "Still available to you €80", href: budget_group_path(budget, group1)
       end
 
       within("#budget_group_#{group2.id}") do
         expect(page).to have_content "#{group2.name} - #{heading2.name}"
         expect(page).to have_content "Amount spent €15"
-        expect(page).to have_content "You still have €35 to invest"
+        expect(page).to have_content "Still available to you €35"
       end
     end
 
@@ -380,7 +380,7 @@ describe "Ballots" do
     expect(page).to have_content("You have voted one investment")
 
     within("#budget_investment_#{investment.id}") do
-      find(".icon-x").click
+      click_link "Remove vote"
     end
 
     expect(page).to have_current_path(budget_ballot_path(budget))
@@ -395,8 +395,8 @@ describe "Ballots" do
     login_as(user)
     visit budget_investments_path(budget, heading_id: new_york.id)
 
-    expect(page).to have_css("#amount-spent", text: "€30,000")
+    expect(page).to have_css("#total_amount", text: "€30,000")
-    expect(page).to have_css("#amount-available", text: "€970,000")
+    expect(page).to have_css("#amount_available", text: "€970,000")
 
     within("#sidebar") do
       expect(page).to have_content investment1.title
@@ -407,11 +407,11 @@ describe "Ballots" do
     end
 
     within("#sidebar #budget_investment_#{investment1.id}_sidebar") do
-      find(".icon-x").click
+      click_link "Remove vote"
     end
 
-    expect(page).to have_css("#amount-spent", text: "€20,000")
+    expect(page).to have_css("#total_amount", text: "€20,000")
-    expect(page).to have_css("#amount-available", text: "€980,000")
+    expect(page).to have_css("#amount_available", text: "€980,000")
 
     within("#sidebar") do
       expect(page).not_to have_content investment1.title
@@ -431,13 +431,13 @@ describe "Ballots" do
       add_to_ballot("Sully monument")
 
       within(".budget-heading") do
-        click_link "Check and confirm my ballot"
+        click_link "Submit my ballot"
       end
 
       expect(page).to have_content("You have voted one investment")
 
       within(".ballot-list li", text: "Sully monument") do
-        find(".icon-x").click
+        click_link "Remove vote"
       end
 
       expect(page).to have_content("You have voted 0 investments")
@@ -452,7 +452,7 @@ describe "Ballots" do
       visit budget_investments_path(budget, heading_id: new_york.id)
 
       within(".budget-heading") do
-        click_link "Check and confirm my ballot"
+        click_link "Submit my ballot"
       end
 
       expect(page).to have_content("You have voted 0 investments")
@@ -627,7 +627,7 @@ describe "Ballots" do
       end
 
       within("#budget_investment_#{bi1.id}_sidebar") do
-        find(".icon-x").click
+        click_link "Remove vote"
       end
 
       expect(page).not_to have_css "#budget_investment_#{bi1.id}_sidebar"

spec/system/budgets/investments_spec.rb

@@ -692,12 +692,12 @@ describe "Budget Investments" do
 
       visit budget_investments_path(budget, heading_id: heading.id)
 
-      expect(page).not_to have_link("Check and confirm my ballot")
+      expect(page).not_to have_link("Submit my ballot")
       expect(page).not_to have_css("#progress_bar")
 
       within("#sidebar") do
         expect(page).not_to have_content("My ballot")
-        expect(page).not_to have_link("Check and confirm my ballot")
+        expect(page).not_to have_link("Submit my ballot")
       end
     end
 
@@ -1332,12 +1332,12 @@ describe "Budget Investments" do
 
       visit budget_investments_path(budget, heading_id: heading.id)
 
-      expect(page).to have_link("Check and confirm my ballot")
+      expect(page).to have_link("Submit my ballot")
       expect(page).to have_css("#progress_bar")
 
       within("#sidebar") do
         expect(page).to have_content("My ballot")
-        expect(page).to have_link("Check and confirm my ballot")
+        expect(page).to have_link("Submit my ballot")
       end
     end
 

spec/system/budgets/votes_spec.rb

@@ -211,7 +211,7 @@ describe "Votes" do
       add_to_ballot(investment1.title)
 
       expect(page).to have_content("Remove vote")
-      expect(page).to have_content("You have selected 1 project out of 2")
+      expect(page).to have_content("YOU CAN STILL CAST 1 VOTE")
 
       within(".budget-investment", text: investment2.title) do
         find("div.ballot").hover