feat(extra-features): A bunch of improvements

falcon/_dev/css/abstracts/variables/bootstrap/_forms.scss

@@ -1,8 +1,10 @@
-$input-btn-padding-y:         rem-calc(8px);
-$input-btn-padding-x:         rem-calc(16px);
+$input-btn-padding-y: rem-calc(8px);
+$input-btn-padding-x: rem-calc(16px);
 
-$input-btn-padding-y-sm:      rem-calc(4px);
-$input-btn-padding-x-sm:      rem-calc(8px);
+$input-btn-padding-y-sm: rem-calc(4px);
+$input-btn-padding-x-sm: rem-calc(8px);
 
-$input-btn-padding-y-lg:      rem-calc(14px);
-$input-btn-padding-x-lg:      rem-calc(20px);
+$input-btn-padding-y-lg: rem-calc(14px);
+$input-btn-padding-x-lg: rem-calc(20px);
+
+$input-height: rem-calc(50px);

falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss

@@ -1,8 +1,7 @@
-$font-family-sans-serif: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI",
-    roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
 $font-family-base: $font-family-sans-serif;
 $headings-font-family: $font-family-sans-serif;
+$font-weight-base: 400;
 
 $font-size-base: rem-calc(14px);
 $font-size-lg: $font-size-base * 1.125;

falcon/_dev/css/theme/custom/_custom.scss

@@ -16,7 +16,7 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
 //@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
-//@import "components/buttons";
+@import "components/buttons";
 @import "components/forms";
 
 // Modules: Styling for specific modules.

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -1,4 +1,5 @@
-// To customize text colors per button, use this map
+// To customize text colors per button, use this map and below function
+
 $btn-color: (
     "primary": $white,
     "secondary": $white,
@@ -6,7 +7,6 @@ $btn-color: (
     "dark": $white,
 );
 
-// Generate button color overrides from the map
 @each $name, $color in $btn-color {
     .btn-#{$name},
     .btn-lg-#{$name},
@@ -15,33 +15,21 @@ $btn-color: (
     }
 }
 
-// bootstrap touchspin. Edit icons under js/theme/components/product.js
+// Bootstrap touchspin
 .bootstrap-touchspin {
-    min-width: 100px;
     flex-wrap: nowrap;
 
-    > input {
-        border-left: 0px;
-        color: $primary;
-        &:focus {
-            box-shadow: none;
-        }
-    }
-
-    .btn {
-        height: 50%;
-        width: 100%;
-        border-radius: 0px;
-        &:first-child {
-            border-bottom: 1px solid $border-color;
-        }
-    }
-
     .input-touchspin {
-        min-width: rem-calc(66px);
+        height: rem-calc(50px);
+        min-width: rem-calc(75px);
+        border-left: 0px;
     }
 
     .input-group-btn-vertical {
-        min-width: rem-calc(33px);
+        display: flex;
+        flex-direction: column;
+        button {
+            border-radius: 0px;
+        }
     }
 }

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

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

falcon/_dev/css/theme/custom/layout/_header.scss

@@ -10,4 +10,8 @@
             margin: 0;
         }
     }
+
+    .header-top__badge {
+        right: -0.9em;
+    }
 }