Display: Fix styles for buttons and form fields

assets/css/scss/_login.scss

@@ -5,6 +5,8 @@
   .p-inputtext {
     @apply border-none py-4 pl-4 text-support-3;
 
+    font-size: 16px;
+
     &.p-invalid.p-component {
       @apply border-error;
     }
@@ -51,11 +53,11 @@
   }
 
   &__buttons {
-    @apply flex flex-row gap-4;
+    @apply grid grid-cols-2 gap-4;
 
     a.btn,
     .p-button {
-      @apply w-6/12 p-3.5;
+      @apply p-3.5 text-body-1;
     }
   }
 }

assets/css/scss/atoms/_buttons.scss

@@ -1,7 +1,6 @@
 .btn {
-  @apply cursor-default font-semibold gap-2 inline-flex justify-center px-6 py-3 rounded-md transition flex-none;
+  @apply cursor-default font-semibold gap-2 inline-flex justify-center px-6 py-2 rounded-md transition flex-none;
-  font-size: 1rem;
+  font-size: 16px;
-  line-height: 1rem;
 
   &--primary {
     @apply bg-primary text-white;
@@ -230,9 +229,9 @@ $border-color_12: #9333EA;
 
 .p-button {
   @include filled-style('primary', 'support-4');
-  @apply cursor-default font-semibold gap-2 inline-flex justify-center px-6 py-3 rounded-md transition;
+  @apply cursor-pointer font-semibold gap-2 inline-flex justify-center items-center px-4 py-2 rounded-md transition;
-  font-size: 1rem;
+
-  line-height: 1rem;
+  font-size: 16px;
 
   &:focus {
     @apply outline-none;
@@ -259,7 +258,7 @@ $border-color_12: #9333EA;
   }
 
   &.p-button-sm {
-    @apply px-4 py-2;
+    @apply px-2 py-1;
     font-size: 13px;
   }
 

assets/css/scss/atoms/_dropdown.scss

@@ -4,6 +4,8 @@
     hover:border-primary hover:text-gray-90 hover:outline-0 hover:outline-none
     focus:border-primary focus:text-gray-90 focus:outline-0 focus:outline-none;
 
+  font-size: 14px;
+
   .p-dropdown-panel, .p-multiselect-panel {
     @apply min-w-full;
   }
@@ -13,6 +15,10 @@
   }
 }
 
+select.p-dropdown {
+  @apply px-4 py-2;
+}
+
 .p-dropdown {
   &-clear-icon {
     @apply absolute top-1/2 -mt-2;
@@ -29,7 +35,7 @@
 }
 
 .p-dropdown-label, .p-multiselect-label {
-  @apply block whitespace-nowrap overflow-hidden flex-1 w-[1%] overflow-ellipsis cursor-pointer
+  @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] overflow-ellipsis cursor-pointer
       bg-transparent border-none
     focus:outline-0 focus:outline-none;
 }

assets/css/scss/atoms/_form.scss

@@ -29,7 +29,7 @@
   .form {
     &--search,
     &--inline {
-      @apply flex-row gap-3 mb-1;
+      @apply flex-row gap-3;
     }
 
     &--search {
@@ -55,7 +55,7 @@
 }
 
 .field {
-  @apply mb-4;
+  @apply mb-5;
 
   > small,
   .help-text {

assets/css/scss/atoms/_input_text.scss

@@ -1,20 +1,22 @@
 .p-inputtext {
-  @apply border border-support-3 px-4 py-3 text-body-1 bg-white rounded-lg text-gray-90 transition w-full duration-200
+  @apply border border-support-3 px-4 py-2 bg-white rounded-lg text-gray-90 transition w-full duration-200 appearance-none font-sans
       placeholder:text-support-3
     hover:border-primary hover:text-gray-90 hover:outline-0 hover:ring-0
     focus:border-primary focus:text-gray-90 focus:outline-0 focus:ring-0;
 
+  font-size: 14px;
+
   &.p-invalid.p-component {
     @apply border-error
       placeholder:text-error;
   }
 
   &.p-inputtext-sm {
-    @apply px-2 py-1.5 text-body-2;
+    @apply px-3 py-1.5 text-body-2;
   }
 
   &.p-inputtext-lg {
-    @apply py-4;
+    @apply py-3;
   }
 }
 
@@ -62,7 +64,7 @@
 }
 
 .p-inputnumber-input {
-  @apply flex-1;
+  @apply flex-auto;
 }
 
 .p-inputtextarea {

assets/css/scss/atoms/_inputgroup.scss

@@ -15,7 +15,7 @@
 
   .p-inputtext,
   .p-inputwrapper {
-    @apply flex-1 w-[1%];
+    @apply flex-auto w-[1%];
   }
 
   > .p-component,

assets/css/scss/index.scss

@@ -7,9 +7,22 @@
 //@import 'install';
 
 @layer base {
+  body {
+    line-height: normal;
+  }
+
   hr {
     @apply text-gray-30 my-6;
   }
+
+  .p-component {
+    font-size: 1rem;
+    font-weight: normal;
+
+    & * {
+      @apply box-border;
+    }
+  }
 }
 
 @include meta.load-css("settings/typography");

assets/vue/components/basecomponents/BaseButton.vue

@@ -95,13 +95,6 @@ const buttonClass = computed(() => {
     return "p-3 text-tertiary hover:bg-tertiary-gradient/30"
   }
   let result = ""
-  switch (props.size) {
-    case "normal":
-      result += "py-2.5 px-4 "
-      break
-    case "small":
-      result += "py-2 px-3.5 "
-  }
 
   let commonDisabled =
     "disabled:bg-primary-bgdisabled disabled:border disabled:border-primary-borderdisabled disabled:text-fontdisabled disabled:pointer-events-auto disabled:cursor-not-allowed"