From c04d683231f896ddf314a7236949cd096decf347 Mon Sep 17 00:00:00 2001
From: saraBoutej <sboutej@exoplatform.com>
Date: Thu, 4 Jul 2024 12:28:05 +0100
Subject: [PATCH] Add new styling text method

---
 .../ManageAccessPermission.vue                |  4 +-
 .../ManageEditPermission.vue                  |  2 +-
 .../components/SitePropertiesDrawer.vue       | 40 +++++++------------
 3 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue
index efc77a235..4f0228a72 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageAccessPermission.vue
@@ -18,7 +18,7 @@
 -->
 <template>
   <div>
-    <p class="text-start text-color subtitle-1">{{ whoCanView }}</p>
+    <p class="text-start">{{ whoCanView }}</p>
     <v-select
       v-model="type"
       :items="typeLabel"
@@ -41,7 +41,7 @@
       include-groups
       include-spaces
       required />
-    <span v-if="!accessPermissions.length && showAccessPermissionsGroupSuggester" class="caption mx-2 mt-n3 position-absolute error-color">
+    <span v-if="!accessPermissions.length && showAccessPermissionsGroupSuggester" class="text-subtitle mx-2 mt-n3 position-absolute error-color">
       {{ $t('siteNavigation.required.error.message') }}
     </span>
     <template v-if="showAccessPermissionsList">
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageEditPermission.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageEditPermission.vue
index 4397c9ad6..442fe2115 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageEditPermission.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/manage-permissions/ManageEditPermission.vue
@@ -18,7 +18,7 @@
 -->
 <template>
   <div>
-    <p class="text-start text-color subtitle-1">{{ whoCanEdit }}</p>
+    <p class="text-start">{{ whoCanEdit }}</p>
     <exo-identity-suggester
       ref="navigationNodeEditPermissions"
       :labels="suggesterLabels"
diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/SitePropertiesDrawer.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/SitePropertiesDrawer.vue
index 0c6a47ce2..6bd2d76a7 100644
--- a/layout-webapp/src/main/webapp/vue-app/site-management/components/SitePropertiesDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/site-management/components/SitePropertiesDrawer.vue
@@ -49,20 +49,16 @@
             required
             @blur="convertSiteName">
             <template #title>
-              <v-label>
-                <span class="text-color">
-                  {{ $t('siteManagement.label.siteLabel.title') }} *              
-                </span>
-              </v-label>
+              <span>
+                {{ $t('siteManagement.label.siteLabel.title') }} *              
+              </span>
             </template>
           </translation-text-field>
         </v-card-text>
         <v-card-text class="d-flex pb-2">
-          <v-label>
-            <span class="text-color">
-              {{ $t('siteManagement.label.siteName.title') }} *              
-            </span>
-          </v-label>
+          <span>
+            {{ $t('siteManagement.label.siteName.title') }} *              
+          </span>
         </v-card-text>
         <v-card-text class="d-flex py-0">
           <v-text-field
@@ -89,11 +85,9 @@
             back-icon
             rich-editor>
             <template #title>
-              <v-label>
-                <span class="text-color">
-                  {{ $t('siteManagement.label.siteDescription.title') }}           
-                </span>
-              </v-label>
+              <span>
+                {{ $t('siteManagement.label.siteDescription.title') }}           
+              </span>
             </template>
             <rich-editor
               id="siteDescription"
@@ -105,12 +99,8 @@
           </translation-text-field>
         </v-card-text>
         <v-card-text class="mt-3 py-4 px-3">
-          <v-label>
-            <span class="text-color mb-2 px-1 text-capitalize"> {{ $t('siteManagement.label.banner') }}</span>
-          </v-label>
-          <v-label>
-            <span class="text-color caption px-1 text-capitalize"> {{ $t('siteManagement.label.caption') }}</span>
-          </v-label>
+          <p class="mb-2 px-1 text-capitalize"> {{ $t('siteManagement.label.banner') }}</p>
+          <p class="text-subtitle  px-1 text-capitalize"> {{ $t('siteManagement.label.caption') }}</p>
           <site-management-banner-selector
             ref="siteBannerSelector"
             :src="siteBannerUrl"
@@ -121,17 +111,15 @@
             @reset="resetBannerUploadId" />
         </v-card-text>
         <v-card-text class="mt-4">
-          <v-label>
-            <span class="text-color mb-2"> {{ $t('siteManagement.label.displayOrder') }}</span>
-          </v-label>
+          <span class="mb-2"> {{ $t('siteManagement.label.displayOrder') }}</span>
           <v-row class="mx-0 mt-2">
             <v-col class="d-flex flex-row px-0 py-0 col-10">
               <v-switch
                 v-model="displayed"
                 :disabled="displayedDisabled"
                 class="mt-2" />
-              <label v-if="displayed" class="subtitle-1 mx-1"> {{ $t('siteManagement.label.displayed') }} </label>
-              <label v-else class="subtitle-1 mx-1"> {{ $t('siteManagement.label.notDisplayed') }} </label>
+              <p v-if="displayed" class="mx-1"> {{ $t('siteManagement.label.displayed') }} </p>
+              <p v-else class="mx-1"> {{ $t('siteManagement.label.notDisplayed') }} </p>
             </v-col>
             <v-col class="col-2 px-0 py-0 mt-n1 orderDisplay">
               <v-text-field