Use p-input-filled for green inputs

MerginMaps · Jan 8, 2024 · 295e009 · 295e009
1 parent fe630cf
commit 295e009
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 16 deletions.
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_form.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_form.scss
@@ -4,7 +4,7 @@ $inputPadding: .5rem .5rem;
 
 /// Background of an input field
 /// @group form
-$inputBg: #{map-get($colors, "light-green")};
+$inputBg: #ffffff;
 
 /// Font size of an input field
 /// @group form
@@ -40,7 +40,7 @@ $inputPlaceholderTextColor: #6c757d;
 
 /// Background of a filled input
 /// @group form
-$inputFilledBg:#f8f9fa;
+$inputFilledBg: #{map-get($colors, "light-green")};
 
 /// Background of a filled input in hover state
 /// @group form

diff --git a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
@@ -15,14 +15,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <span class="font-semibold text-color-forest text-lg">{{ text }}</span>
     <span class="text-sm opacity-80">{{ description }}</span>
     <span class="text-base font-semibold">{{ hint }}</span>
-    <span v-if="confirmField" class="flex p-float-label w-full">
+    <span v-if="confirmField" class="flex p-float-label w-full p-input-filled">
       <PInputText
         autofocus
         id="confirmValue"
         v-model="confirmValue"
         type="text"
         class="border-round-xl flex-grow-1"
-        :style="{ backgroundColor: 'var(--light-green-color)' }"
       />
       <label for="confirmValue">{{ confirmField.label }}</label>
     </span>

diff --git a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div class="py-4">
-    <span class="flex p-float-label w-full">
+    <span class="flex p-float-label w-ful p-input-filled">
       <PInputText
         autofocus
         id="name"
@@ -15,7 +15,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         aria-describedby="text-error"
         data-cy="clone-dialog-project-name"
         class="border-round-xl flex-grow-1"
-        :style="{ backgroundColor: 'var(--light-green-color)' }"
       />
       <label for="name">Project name</label>
     </span>

diff --git a/web-app/packages/lib/src/modules/project/components/ProjectForm.vue b/web-app/packages/lib/src/modules/project/components/ProjectForm.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <div class="py-4">
     <div class="mb-4">
-      <span class="flex p-float-label w-full">
+      <span class="flex p-float-label w-full p-input-filled">
         <PInputText
           autofocus
           id="name"
@@ -17,7 +17,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           aria-describedby="text-error"
           data-cy="project-form-name"
           class="border-round-xl flex-grow-1"
-          :style="{ backgroundColor: 'var(--light-green-color)' }"
         />
         <label for="name">Project name</label>
         <small class="p-error" id="text-error">{{

diff --git a/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue b/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div class="flex flex-column p-4 row-gap-1">
-    <span>
+    <span class="p-input-filled">
       <label for="oldPassowrd">Old password</label>
       <PPassword
         id="oldPassowrd"
@@ -28,10 +28,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       }}</span>
     </span>
 
-    <span>
+    <span class="p-input-filled">
       <label for="newPassword">New Password</label>
       <i
-        class="ti ti-info-circle-filled text-color-forest"
+        class="ti ti-info-circle-filled text-color-forest text-base"
         v-tooltip="{
           value: `
             \u2022 Password must be at least 8 characters long.\n
@@ -63,10 +63,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       }}</span>
     </span>
 
-    <span>
+    <span class="p-input-filled">
       <label for="confirm">Confirm password</label>
       <i
-        class="ti ti-info-circle-filled text-color-forest"
+        class="ti ti-info-circle-filled text-color-forest text-base"
         v-tooltip="{
           value: `
             \u2022Password must be at least 8 characters long.\n

diff --git a/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue b/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <form @submit.prevent="submit" class="flex flex-column p-4 row-gap-1">
-    <span>
+    <span class="p-input-filled">
       <label for="first-name">First name</label>
       <PInputText
         id="first-name"
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       }}</span>
     </span>
 
-    <span>
+    <span class="p-input-filled">
       <label for="last-name">Last name</label>
       <PInputText
         id="last-name"
@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       }}</span>
     </span>
 
-    <span>
+    <span class="p-input-filled">
       <label for="email">Email</label>
       <PInputText
         id="email"