Booth redesign (#282)

Parent issue: https://github.com/sequentech/voting-booth/issues/304

Author: Findeton

Gruntfile.js

@@ -276,10 +276,8 @@ module.exports = function (grunt) {
             dest: 'dist/themes/fonts/'
           },
           {
-            expand: true,
-            cwd: 'node_modules/bootstrap/fonts/',
-            src: ['**'],
-            dest: 'dist/themes/fonts/'
+            src: ['fonts/Manrope-VariableFont_wght.ttf'],
+            dest: 'dist/fonts/Manrope-VariableFont_wght.ttf'
           },
           {
             expand: true,

SequentThemes.js

@@ -20,7 +20,7 @@
     SequentThemes.current = 'default';
 
     SequentThemes.change = function(theme) {
-        var base = $("#theme").get('base');
+        var base = $("#theme")[0].getAttribute('data-base');
         $("#theme").attr("href", base + "themes/"+theme+"/app.min.css");
     };
 }).call(this);

app.less

@@ -41,6 +41,8 @@
 @import "avUi/simple-error-directive/simple-error-directive.less";
 @import "avUi/children-elections-directive/children-elections-directive.less";
 @import "avUi/change-lang-directive/change-lang-directive.less";
+@import "avUi/common-footer-directive/common-footer-directive.less";
+@import "avUi/common-header-directive/common-header-directive.less";
 @import "avUi/foot-directive/foot-directive.less";
 @import "avUi/documentation-directive/documentation-directive.less";
 

avRegistration/field-directive/field-directive.less

@@ -0,0 +1,6 @@
+[avr-field] {
+    .form-group {
+        margin-right: unset;
+        margin-left: unset;
+    }
+}

avRegistration/fields/bool-field-directive/bool-field-directive.html

@@ -1,5 +1,5 @@
 <div class="form-group">
-    <label class="control-label col-sm-4">
+    <label>
         <input
             type="checkbox"
             class="form-control"
@@ -10,7 +10,7 @@
             tabindex="0"
             ng-required={{field.required}} />
     </label>
-    <div class="col-sm-8">
+    <div class="bool-text-content">
         <label class="text-left" for="{{index}}Text" id="label-{{index}}Text">
           <span ng-bind-html="field.name | addTargetBlank"></span>
         </label>

avRegistration/fields/bool-field-directive/bool-field-directive.less

@@ -1,8 +1,27 @@
 [avr-bool-field] {
+  .form-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
   input[type="checkbox"] {
     text-align: right;
     width: auto;
     float: right;
-    margin-top: -10px;
+    margin-top: 0;
+    accent-color: @brand-success;
+  }
+
+  label {
+    margin-right: 16px;
+  }
+
+  .bool-text-content {
+    color: @av-secondary;
+
+    a { 
+      color: @brand-success;
+    }
   }
 }

avRegistration/fields/captcha-field-directive/captcha-field-directive.html

@@ -2,10 +2,10 @@
     <div class="col-sm-8 col-sm-offset-4">
         <img ng-src={{authMethod.captcha_image_url}} style="width:161px;height:65px">
     </div>
-    <label id="label-{{index}}Text" for="{{index}}Text" class="control-label col-sm-4">
+    <label id="label-{{index}}Text" for="{{index}}Text">
         <span>{{field.name}}</span>
     </label>
-    <div class="col-sm-8">
+    <div>
         <input
             type="text"
             class="form-control"

avRegistration/fields/code-field-directive/code-field-directive.html

@@ -1,6 +1,6 @@
 <div class="form-group">
-    <label id="{{code_id}}-code" for="{{code_id}}" class="control-label col-sm-4" ng-i18next="avRegistration.codeLabel"></label>
-    <div class="col-sm-8">
+    <label id="{{code_id}}-code" for="{{code_id}}" ng-i18next="avRegistration.codeLabel"></label>
+    <div>
         <input
             type="text"
             class="form-control"
@@ -28,8 +28,8 @@
             ng-if="!!field.help && field.help.length > 0"
             ng-bind-html="field.help | addTargetBlank"
         ></p>
-        <p class="help-block code-help">
-          <span ng-if="allowUserResend && showResendAuthCode() && !sendingData && ((method !== 'sms' && method !== 'sms-otp') || isValidTel)">
+        <p class="help-block code-help" ng-if="allowUserResend && showResendAuthCode() && !sendingData && ((method !== 'sms' && method !== 'sms-otp') || isValidTel)">
+          <span>
             <b ng-i18next="avRegistration.noCodeReceivedQuestion"></b>
             <a
               ng-click="resendAuthCode(field)"

avRegistration/fields/code-field-directive/code-field-directive.less

@@ -2,4 +2,8 @@
   input.filled {
     text-transform: uppercase;
   }
+
+  .form-group {
+    margin-bottom: unset;
+  }
 }

avRegistration/fields/date-field-directive/date-field-directive.html

@@ -1,14 +1,12 @@
 <div class="form-group">
    <label 
       ng-if="!label"
-      class="control-label col-sm-4"
    >{{field.name}}</label>
    <label
-      class="control-label col-sm-4"
       ng-if="label"
       ng-bind="label"
    ></label>
-   <div class="col-sm-8">
+   <div>
       <select 
          aria-label="{{field.name}}-year"
          ng-model="date.year"