feat(standard-styling): Fix icons; add standard css

falcon/_dev/css/custom.scss

@@ -6,6 +6,7 @@
 
 // Components: parts of the theme itself that are not associated with a module.
 //@import "custom/components/";
+@import "custom/components/forms";
 
 // Modules: Styling for specific modules.
 //@import "custom/modules/";
@@ -13,6 +14,7 @@
 //Layouts: Parts of a page, such as the header, footer, etc.
 //@import "custom/layout/header";
 //@import "custom/layout/footer";
+@import "custom/layout/left-column";
 
 // Pages
 //@import "custom/pages/category";

falcon/_dev/css/custom/components/_forms.scss

@@ -0,0 +1,12 @@
+.field-password-policy .input-group.js-parent-focus {
+    > * {
+        max-height: rem-calc(39px);
+    }
+    .form-control {
+        height: unset;
+    }
+    .input-group-append .btn {
+        border-top-right-radius: $border-radius !important;
+        border-bottom-right-radius: $border-radius !important;
+    }
+}

falcon/_dev/css/custom/layout/_left-column.scss

@@ -0,0 +1,10 @@
+#left-column {
+    .list-group-item,
+    .list-group-item-action-dropdown-link,
+    label {
+        font-family: $font-family-base;
+        font-size: $font-size-base;
+        color: $secondary;
+        font-weight: 400;
+    }
+}

falcon/_dev/css/theme/components/customer/_customer-links.scss

@@ -1,83 +1,80 @@
 @use "sass:map";
 
 .customer-links {
-  margin: 0 0 map.get($spacers, 3);
+    margin: 0 0 map.get($spacers, 3);
-  @include media-breakpoint-up(lg) {
-    margin: 0;
-  }
-
-  .link-item {
-    display: flex;
-    align-items: center;
-  }
-
-  &__list {
-    @include media-breakpoint-down(md) {
-      display: flex;
-      flex-wrap: nowrap;
-
-      margin: rem-calc(20px) 0 0;
-      overflow-x: scroll;
-      overflow-y: hidden;
-      white-space: nowrap;
-      -webkit-overflow-scrolling: touch;
-      -ms-overflow-style: -ms-autohiding-scrollbar;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  a {
-    display: block;
-    flex: 0 0;
-    max-width: inherit;
-    padding: map.get($spacers, 2);
-    font-weight: 700;
-    color: $gray-800;
-    white-space: nowrap;
-    border-radius: $border-radius;
-    @include font-size($font-size-base);
-
     @include media-breakpoint-up(lg) {
-      white-space: normal;
+        margin: 0;
     }
 
-    @include hover-focus() {
+    .link-item {
-      color: $primary;
+        display: flex;
-      text-decoration: none;
+        align-items: center;
     }
 
-    i {
+    &__list {
-      margin-right: map.get($spacers, 1);
+        @include media-breakpoint-down(md) {
-      color: $primary;
+            display: flex;
-      @include font-size(26px);
+            flex-wrap: nowrap;
-      @include media-breakpoint-up(md) {
+
-        margin-right: map.get($spacers, 2);
+            margin: rem-calc(20px) 0 0;
-      }
+            overflow-x: scroll;
+            overflow-y: hidden;
+            white-space: nowrap;
+            -webkit-overflow-scrolling: touch;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
     }
 
-    &.active {
+    a {
-      color: #fff;
-      background: $primary;
-
-      &::after {
         display: block;
-      }
+        flex: 0 0;
+        max-width: inherit;
+        padding: map.get($spacers, 2);
+        font-weight: 700;
+        white-space: nowrap;
+        border-radius: $border-radius;
+        @include font-size($font-size-base);
 
-      i {
+        @include media-breakpoint-up(lg) {
-        color: inherit;
+            white-space: normal;
-      }
+        }
+
+        @include hover-focus() {
+            text-decoration: none;
+        }
+
+        i {
+            margin-right: map.get($spacers, 1);
+            @include font-size(26px);
+            @include media-breakpoint-up(md) {
+                margin-right: map.get($spacers, 2);
+            }
+        }
+
+        &.active {
+            color: #fff;
+            background: $primary;
+
+            &::after {
+                display: block;
+            }
+
+            i {
+                color: inherit;
+            }
+        }
     }
-  }
 
-  &__logout {
+    &__logout {
-    text-align: center;
+        text-align: center;
 
-    &::after,
+        &::after,
-    &::before {
+        &::before {
-      display: none;
+            display: none;
+        }
     }
-  }
 }

falcon/_dev/img/chevron_down.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10.828" height="6.414" viewBox="0 0 10.828 6.414">
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 10.828 6.414">
-  <path id="Path_62" data-name="Path 62" d="M1560.845,813.75l4,4-4,4" transform="translate(823.164 -1559.431) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path d="M1560.845,813.75l4,4-4,4" transform="translate(823.164 -1559.431) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 </svg>

falcon/_dev/img/chevron_right.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="6.414" height="10.828" viewBox="0 0 6.414 10.828">
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 6.414 10.828">
-  <path id="Path_94" data-name="Path 94" d="M1560.845,813.75l4,4-4,4" transform="translate(-1559.431 -812.336)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+  <path d="M1560.845,813.75l4,4-4,4" transform="translate(-1559.431 -812.336)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
 </svg>

falcon/_dev/img/hamburger-menu.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.2222C0 13.0159 0.0766233 12.8181 0.213013 12.6722C0.349403 12.5264 0.534388 12.4444 0.727273 12.4444H15.2727C15.4656 12.4444 15.6506 12.5264 15.787 12.6722C15.9234 12.8181 16 13.0159 16 13.2222C16 13.4285 15.9234 13.6263 15.787 13.7722C15.6506 13.9181 15.4656 14 15.2727 14H0.727273C0.534388 14 0.349403 13.9181 0.213013 13.7722C0.0766233 13.6263 0 13.4285 0 13.2222ZM0 7C0 6.79372 0.0766233 6.59589 0.213013 6.45003C0.349403 6.30417 0.534388 6.22222 0.727273 6.22222H15.2727C15.4656 6.22222 15.6506 6.30417 15.787 6.45003C15.9234 6.59589 16 6.79372 16 7C16 7.20628 15.9234 7.40411 15.787 7.54997C15.6506 7.69583 15.4656 7.77778 15.2727 7.77778H0.727273C0.534388 7.77778 0.349403 7.69583 0.213013 7.54997C0.0766233 7.40411 0 7.20628 0 7ZM0 0.777778C0 0.571498 0.0766233 0.373668 0.213013 0.227806C0.349403 0.0819444 0.534388 0 0.727273 0H15.2727C15.4656 0 15.6506 0.0819444 15.787 0.227806C15.9234 0.373668 16 0.571498 16 0.777778C16 0.984057 15.9234 1.18189 15.787 1.32775C15.6506 1.47361 15.4656 1.55556 15.2727 1.55556H0.727273C0.534388 1.55556 0.349403 1.47361 0.213013 1.32775C0.0766233 1.18189 0 0.984057 0 0.777778Z" fill="currentColor"/>
+</svg>

falcon/templates/customer/history.tpl

@@ -29,7 +29,11 @@
 {/block}
 
 {block name='page_content'}
-  <h6>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
+  <p>
+    <strong>
+       {l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}
+    </strong>
+  </p>
 
   {if $orders}
     <table class="table table-striped table-bordered hidden-sm-down">
@@ -40,7 +44,7 @@
           <th>{l s='Total price' d='Shop.Theme.Checkout'}</th>
           <th class="hidden-md-down">{l s='Payment' d='Shop.Theme.Checkout'}</th>
           <th class="hidden-md-down">{l s='Status' d='Shop.Theme.Checkout'}</th>
-          <th>&nbsp;</th>
+          <th>{l s='Actions' d='Shop.Theme.Checkout'}</th>
         </tr>
       </thead>
       <tbody>
@@ -66,16 +70,14 @@
                 {$order.history.current.ostate_name}
               </span>
             </td>
-            <td class="text-sm-center order-actions align-middle">
+            <td class="order-actions align-middle d-flex">
               <a class="view-order-details-link btn btn-sm btn-primary" href="{$order.details.details_url}" data-link-action="view-order-details">
                 {l s='Details' d='Shop.Theme.Customeraccount'}
               </a>
               {if $order.details.reorder_url}
-                <div class="col-sm-6 mt-2">
+                  <a class="reorder-link btn btn-sm btn-secondary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
-                  <a class="reorder-link btn btn-sm btn-primary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
                     {l s='Reorder' d='Shop.Theme.Actions'}
                   </a>
-                </div>
               {/if}
             </td>
           </tr>