In /my_account/sign_up/index.html.jst add icons to every button

diff --git a/_svg/fa_arrow-circle-left.svg b/_svg/fa_arrow-circle-left.svg
new file mode 100644 (file)
index 0000000..1f21c63
--- /dev/null
+++ b/_svg/fa_arrow-circle-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm28.9-143.6L209.4 288H392c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24H209.4l75.5-72.4c9.7-9.3 9.9-24.8.4-34.3l-11-10.9c-9.4-9.4-24.6-9.4-33.9 0L107.7 239c-9.4 9.4-9.4 24.6 0 33.9l132.7 132.7c9.4 9.4 24.6 9.4 33.9 0l11-10.9c9.5-9.5 9.3-25-.4-34.3z"/></svg>
\ No newline at end of file

diff --git a/_svg/fa_envelope.svg b/_svg/fa_envelope.svg
new file mode 100644 (file)
index 0000000..2da8a00
--- /dev/null
+++ b/_svg/fa_envelope.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></svg>
\ No newline at end of file

diff --git a/_svg/fa_redo.svg b/_svg/fa_redo.svg
new file mode 100644 (file)
index 0000000..fd68111
--- /dev/null
+++ b/_svg/fa_redo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"/></svg>
\ No newline at end of file

diff --git a/_svg/fa_user-plus.svg b/_svg/fa_user-plus.svg
new file mode 100644 (file)
index 0000000..4c79099
--- /dev/null
+++ b/_svg/fa_user-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M624 208h-64v-64c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v64h-64c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h64v64c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-64h64c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm-400 48c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
\ No newline at end of file

diff --git a/css/bootstrap/_buttons.scss b/css/bootstrap/_buttons.scss
index 6ee24ba..e8effb2 100644 (file)
--- a/css/bootstrap/_buttons.scss
+++ b/css/bootstrap/_buttons.scss
@@ -16,7 +16,8 @@
   user-select: none;
   background-color: transparent;
   border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+  //@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+  @include button-size($btn-padding-yt, $btn-padding-yb, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); // Nick
   @include transition($btn-transition);
 
   @include hover() {
@@ -110,11 +111,13 @@ fieldset:disabled a.btn {
 //
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+  //@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-yt-lg, $btn-padding-yb-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); // Nick
 }
 
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  //@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-yb-sm, $btn-padding-yt-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 }
 
 

diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss
index a6ba2ed..095c5bc 100644 (file)
--- a/css/bootstrap/_variables.scss
+++ b/css/bootstrap/_variables.scss
@@ -414,6 +414,8 @@ $input-btn-border-width:      $border-width !default;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 $btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-yt:              $btn-padding-y * 1.1 !default; // Nick
+$btn-padding-yb:              $btn-padding-y * .9 !default; // Nick
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
 $btn-font-size:               $input-btn-font-size !default;
@@ -421,11 +423,15 @@ $btn-line-height:             $input-btn-line-height !default;
 $btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-yt-sm:           $btn-padding-y-sm * 1.1 !default; // Nick
+$btn-padding-yb-sm:           $btn-padding-y-sm * .9 !default; // Nick
 $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
 $btn-font-size-sm:            $input-btn-font-size-sm !default;
 $btn-line-height-sm:          $input-btn-line-height-sm !default;
 
 $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-yt-lg:           $btn-padding-y-lg * 1.1 !default; // Nick
+$btn-padding-yb-lg:           $btn-padding-y-lg * .9 !default; // Nick
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
 $btn-font-size-lg:            $input-btn-font-size-lg !default;
 $btn-line-height-lg:          $input-btn-line-height-lg !default;
@@ -840,15 +846,9 @@ $jumbotron-bg:                      $gray-200 !default;
 
 // Cards
 
-// Nick
-// the card header/footer looks slightly wonky because the centring is
-// applied after room for ascender and descender, but don't want room
-// for descender, therefore set the bottom spacing to be slightly less;
-// try to allow enough room overall for a 32px icon to show and hide
-$card-spacer-yt:                    .8rem !default;
-$card-spacer-yb:                    .7rem !default;
-
 $card-spacer-y:                     .75rem !default;
+$card-spacer-yt:                    $card-spacer-y * 1.05 !default; // Nick
+$card-spacer-yb:                    $card-spacer-y * .95 !default; // Nick
 $card-spacer-x:                     1.25rem !default;
 $card-border-width:                 $border-width !default;
 $card-border-radius:                $border-radius !default;

diff --git a/css/bootstrap/mixins/_buttons.scss b/css/bootstrap/mixins/_buttons.scss
index d6235aa..4e03ce0 100644 (file)
--- a/css/bootstrap/mixins/_buttons.scss
+++ b/css/bootstrap/mixins/_buttons.scss
@@ -101,8 +101,10 @@
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  padding: $padding-y $padding-x;
+// Nick $padding-y changes to $padding-yt, $padding-yb
+@mixin button-size($padding-yt, $padding-yb, $padding-x, $font-size, $line-height, $border-radius) {
+  //padding: $padding-y $padding-x;
+  padding: $padding-yt $padding-x $padding-yb $padding-x;
   @include font-size($font-size);
   line-height: $line-height;
   // Manually declare to provide an override to the browser default

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index e9e29ca..006d9a7 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -1,5 +1,9 @@
 return async env => {
   let breadcrumbs = await _require('/_lib/breadcrumbs.jst')
+  let fa_arrow_circle_left = await env.site.get_min_svg('/_svg/fa_arrow-circle-left.svg')
+  let fa_envelope = await env.site.get_min_svg('/_svg/fa_envelope.svg')
+  let fa_redo = await env.site.get_min_svg('/_svg/fa_redo.svg')
+  let fa_user_plus = await env.site.get_min_svg('/_svg/fa_user-plus.svg')
   let get_placeholder = await _require('/_lib/get_placeholder.jst')
   let get_session = await _require('/_lib/get_session.jst')
   let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg')
@@ -118,11 +122,26 @@ return async env => {
                 }
               }
 
-              button.btn.btn-outline-secondary#'card-1-new-code'(type="button") {'New code'}
+              button.btn.btn-outline-secondary#'card-1-new-code'(type="button") {
+                div.icon24-outer.mr-2 {
+                  div.icon24-inner {_out.push(fa_redo)}
+                }
+                'New code'
+              }
               if (sign_up_draft !== null)
-                button.btn.btn-success.ml-3#card-1-create-account(type="button") {'Create account'}
-             else
-                button.btn.btn-success.ml-3#card-1-create-account(type="button" disabled) {'Create account'}
+                button.btn.btn-success.ml-3#card-1-create-account(type="button") {
+                  div.icon24-outer.mr-2 {
+                    div.icon24-inner {_out.push(fa_user_plus)}
+                  }
+                  'Create account'
+                }
+              else
+                button.btn.btn-success.ml-3#card-1-create-account(type="button" disabled) {
+                  div.icon24-outer.rm-2 {
+                    div.icon24-inner {_out.push(fa_user_plus)}
+                  }
+                  'Create account'
+                }
 
               p.'mt-3'.mb-0#card-1-message(hidden) {}
             }
@@ -147,8 +166,18 @@ return async env => {
           }
           div#card-2-collapse.collapse(role="tabpanel" aria-labelledby="card-2-heading" data-parent="#accordion") {
             div.card-body {
-              button.btn.btn-outline-secondary#card-2-back(type="button") {'Back'}
-              button.btn.btn-outline-secondary.ml-3#card-2-resend-email(type="button" disabled) {'Re-send email'}
+              button.btn.btn-outline-secondary#card-2-back(type="button") {
+                div.icon24-outer.mr-2 {
+                  div.icon24-inner {_out.push(fa_arrow_circle_left)}
+                }
+                'Back'
+              }
+              button.btn.btn-outline-secondary.ml-3#card-2-resend-email(type="button" disabled) {
+                div.icon24-outer.mr-2 {
+                  div.icon24-inner {_out.push(fa_envelope)}
+                }
+                'Re-send email'
+              }
 
               p.'mt-3'.mb-0#card-2-message(hidden) {}
             }