chore(user-account-page): edit some design changes

Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Jan 17, 2025 · 5f5b0df · 5f5b0df
1 parent 25b6ddc
commit 5f5b0df
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/apps/web/src/services/my-page/components/UserAccountBaseInformation.vue b/apps/web/src/services/my-page/components/UserAccountBaseInformation.vue
@@ -156,7 +156,7 @@ watch(() => userStore.state.language, (language) => {
                         />
                         <p-field-group class="input-form">
                             <p-text-input v-model="state.userId"
-                                          disabled
+                                          readonly
                                           class="text-input"
                             />
                         </p-field-group>
@@ -182,7 +182,7 @@ watch(() => userStore.state.language, (language) => {
                         <p-field-group class="input-form">
                             <p-text-input :value="state.roleType"
                                           class="text-input"
-                                          disabled
+                                          readonly
                             />
                         </p-field-group>
                     </div>
@@ -240,7 +240,8 @@ watch(() => userStore.state.language, (language) => {
     .base-information-wrapper {
         max-width: 33.5rem;
         .input-form-wrapper {
-            @apply flex flex-wrap;
+            @apply flex flex-wrap items-center;
+            margin-bottom: 1rem;
             .field-title {
                 min-width: 7.75rem;
                 flex-shrink: 1;
@@ -271,4 +272,9 @@ watch(() => userStore.state.language, (language) => {
 :deep(.p-definition-table) {
     min-height: unset;
 }
+
+/* custom design-system component - p-field-group */
+:deep(.p-field-group) {
+    margin-bottom: unset;
+}
 </style>
diff --git a/apps/web/src/services/my-page/components/UserAccountChangePassword.vue b/apps/web/src/services/my-page/components/UserAccountChangePassword.vue
@@ -182,7 +182,8 @@ watch(() => props.certifiedPassword, (certifiedPassword) => {
     padding: 0 1rem;
     max-width: 35.5rem;
     .input-form-wrapper {
-        @apply flex flex-wrap justify-between;
+        @apply flex flex-wrap items-center justify-between;
+        margin-bottom: 1rem;
         .field-title {
             min-width: 7.75rem;
             flex-shrink: 1;
@@ -211,4 +212,9 @@ watch(() => props.certifiedPassword, (certifiedPassword) => {
 :deep(.p-definition-table) {
     min-height: unset;
 }
+
+/* custom design-system component - p-field-group */
+:deep(.p-field-group) {
+    margin-bottom: unset;
+}
 </style>