chore: refactor css styles for forms (#2240)

* chore: refactor css styles for forms

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -358,7 +358,7 @@ $form-label-font-weight: $font-weight-medium;
 $form-label-line-height: 1.8;
 $select-background: $white;
 $select-triangle-color: $dark-gray;
-$select-radius: $global-radius;
+$select-radius: var(--border-radius-normal);
 $input-color: $header-color;
 $input-placeholder-color: $light-gray;
 $input-font-family: inherit;
@@ -374,8 +374,8 @@ $input-shadow-focus: 0;
 $input-cursor-disabled: not-allowed;
 $input-transition: border-color 0.25s ease-in-out;
 $input-number-spinners: true;
-$input-radius: $global-radius;
-$form-button-radius: $global-radius;
+$input-radius: var(--border-radius-normal);
+$form-button-radius: var(--border-radius-normal);
 
 // 20. Label
 // ---------

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -51,25 +51,6 @@
   }
 }
 
-
-input,
-textarea,
-select {
-  border-radius: var(--space-smaller) !important;
-}
-
-.input-group {
-  .input-group-label:first-child {
-    border-bottom-left-radius: var(--space-smaller);
-    border-top-left-radius: var(--space-smaller);
-  }
-
-  .input-group-field {
-    border-bottom-left-radius: 0 !important;
-    border-top-left-radius: 0 !important;
-  }
-}
-
 .justify-space-between {
   justify-content: space-between;
 }

app/javascript/dashboard/assets/scss/storybook.scss

@@ -24,3 +24,4 @@
 
 @import 'foundation-custom';
 @import 'widgets/buttons';
+@import 'widgets/forms';

app/javascript/dashboard/assets/scss/widgets/_forms.scss

@@ -1,7 +1,8 @@
 .error {
+
   #{$all-text-inputs},
   select,
-  .multiselect > .multiselect__tags {
+  .multiselect>.multiselect__tags {
     @include thin-border(var(--r-400));
   }
 
@@ -33,3 +34,10 @@ input {
 .help-text {
   font-weight: $font-weight-normal;
 }
+
+.input-group.small {
+  input {
+    font-size: var(--font-size-small);
+    height: var(--space-large);
+  }
+}