feat: signup form uses form module fields

Author: tikagan

assets/scss/theme/typography.scss

@@ -292,7 +292,7 @@ $fontAssetPath: 'assets/fonts';
 
 @mixin formFieldErrorMessage {
   font-size: toRem(14);
-  line-height: leading(21, 14);
+  line-height: 1;
   font-weight: 400;
   letter-spacing: 0.01em;
 }

components/form/field-container.vue

@@ -96,6 +96,7 @@ const handleFocus = (state, toggleState) => {
 
 // ///////////////////////////////////////////////////////////////////// General
 .field-container {
+  position: relative;
   &:hover,
   &:focus-within {
     .tooltip {
@@ -193,11 +194,11 @@ const handleFocus = (state, toggleState) => {
 
 // ////////////////////////////////////////////////////////////////// Validation
 :deep(.validation-message) {
-  margin-top: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
+  position: absolute;
+  right: toRem(3);
+  margin-top: toRem(6);
+  @include formFieldErrorMessage;
   color: $burntSienna;
-  font-style: italic;
   sup {
     top: -0.125rem;
     margin-right: 0.0625rem;

components/form/field/input.vue

@@ -25,14 +25,13 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped>
-$height: toRem(35);
+$height: toRem(41);
 
 // ///////////////////////////////////////////////////////////////////// General
 .field-input {
-  max-width: toRem(500);
+  // max-width: toRem(500);
   height: $height;
   border: 2px solid $sageGreen;
-  background-color: $sageGreen;
   border-radius: toRem(5);
   transition: 150ms ease-in-out;
   &:not(.disabled) {
@@ -60,7 +59,7 @@ $height: toRem(35);
   &.disabled {
     cursor: no-drop;
     :deep(.input) {
-      // color: rgba($whisper, 0.7);
+      color: rgba(var(--primary-text-color), 0.7);
     }
     :deep(.step-control) {
       cursor: no-drop;
@@ -94,10 +93,10 @@ $height: toRem(35);
   align-items: center;
   padding: 0 toRem(12);
   padding-top: toRem(3);
+  @include formFieldText;
   @include placeholder {
-    // color: $whisper;
-    font-weight: 400;
-    opacity: 0.7;
+    @include formFieldPlaceholder;
+    opacity: 0.9;
   }
 }
 

components/form/field/select.vue

@@ -1,5 +1,6 @@
 <template>
   <ZeroFieldSelect
+    class="field-select"
     v-bind="{...props, ...$attrs}"
     :options="options">
 
@@ -92,19 +93,19 @@ const getSelectedOptionLabels = (selection, placeholder) => {
 </script>
 
 <style lang="scss" scoped>
-$height: toRem(35);
+$height: toRem(41);
 
 // ///////////////////////////////////////////////////////////////////// General
 div.field-select {
-  max-width: toRem(380);
+  // max-width: toRem(380);
   height: $height;
   padding: 0 toRem(12);
   border: 2px solid $sageGreen;
-  background-color: $sageGreen;
   border-radius: toRem(5);
   transition: 150ms ease-in-out;
   &:not(.disabled) {
-    &:hover {
+    &:hover,
+    &.error:hover {
       border-color: rgba($chardonnay, 0.5);
       .icon-container {
         transition: 150ms ease-in;
@@ -114,6 +115,11 @@ div.field-select {
     &.in-progress {
       transition: border-color 150ms ease-in;
       border-color: rgba($chardonnay, 0.9);
+      &.dropdown-open {
+        border-bottom-color: transparent;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
     &.error {
       transition: border-color 150ms ease-in;
@@ -152,10 +158,14 @@ div.field-select {
   transition: scale 150ms ease-out;
   max-height: calc(#{$height} * 5.5);
   width: calc(100% + 4px);
+  top: 100%;
   left: -2px;
-  background-color: $sageGreen;
-  // border: 2px solid rgba($whisper, 0.5);
-  border-radius: 0.3125rem;
+  border: 2px solid $chardonnay;
+  border-top: none;
+  background-color: $codGray;
+  border-radius: toRem(5);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .selection-window {
@@ -174,8 +184,9 @@ div.field-select {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+    @include formFieldText;
     &.is-placeholder {
-      // color: rgba($whisper, 0.7);
+      @include formFieldPlaceholder;
     }
   }
   .icon-container {
@@ -201,10 +212,12 @@ div.field-select {
   padding: 0.5rem 0.75rem;
   cursor: pointer;
   transition: 150ms ease-out;
+  @include formFieldPlaceholder;
   &:hover,
   &.highlighted,
   &.selected {
-    // background-color: rgba($whisper, 0.1);
+    background-color: var(--secondary-text-color);
+    color: var(--background-color);
   }
 }