before update add chat 2

src/pages/project-page/ProjectPageChats.vue

@@ -209,23 +209,49 @@
       v-model="showAttachChatDialog"
       >
       <div class="column w100" v-if="isEnableChatAdd">
+
         <div
           v-for="item in fabMenu"
           :key="item.id" 
           class="column w100"
           >
-          <q-item :class="item.id !== 1 ? 'q-pt-lg' : ''">
+          <div class="q-px-md column w100 items-center">
+            <div class="flex no-wrap" :class="item.id !== 1 ? 'q-pt-lg' : ''">
+              <q-icon
+                size="sm"
+                :name="typeDescription(item.chatType).icon"
+                :color="typeDescription(item.chatType).color"
+                class="q-mr-xs"
+              />
+              <div class="text-bold" :class="'text-' + typeDescription(item.chatType).color">
+                {{ $t(item.title) }}
+              </div>
+            </div>
+
+            <div class="text-caption text-center">
+              {{ $t(item.description) }}
+            </div>
+            <div class="text-caption text-grey text-center">
+              {{ $t(item.description2) }}
+            </div>
+
+            <q-badge
+              v-if="item.badge"
+              class="text-white q-my-sm"
+              :color="item.badgeColor"
+              :label=" $t(item.badge)"
+              dense
+            />
+          </div>
+
+
+         <!--  <q-item >
              <q-item-section avatar class="items-center">
-                <q-avatar
+
-                  round
-                  text-color="white"
-                  :icon="typeDescription(item.chatType).icon"
-                  :color="typeDescription(item.chatType).color"
-                />
               </q-item-section>
               <q-item-section>
                 <q-item-label class="text-bold">
-                  {{ $t(item.title) }}
+                  
                 </q-item-label>
                 <q-item-label class="text-caption text-grey">
                   {{ $t(item.description) }}
@@ -236,29 +262,46 @@
                   </q-badge>
                 </q-item-label>
               </q-item-section>
-          </q-item>
+          </q-item> -->
           <div
             v-for="(btn, idx) in item.btns"
             :key="idx"
-            class="column items-center w100 q-px-md"
+            class="column w100"
             >
-            <q-btn
+            <q-item
               @click="showAttachChatDialog = false; btn.func()" 
-              unelevated
+              class="w100"
-              dense
+              clickable
-              class="w100 q-my-sm"
+              v-ripple
-              no-caps
-              rounded
-              :color="typeDescription(item.chatType).color"
-              :outline="btn.is_outline"
               >
-              {{ $t(btn.title) }}
+              <q-item-section avatar class="items-center">
-            </q-btn>
+                <q-avatar
+                  :color="btn.color"
+                  :text-color="btn.textColor"
+                  :icon="btn.icon"
+                  rounded
+                />
+              </q-item-section>
+              <q-item-section>
+                <div class="column">
+                  <div>
+                    {{ $t(btn.title) }}
+                  </div>
+                  <div>
+                    <q-badge
+                      v-if="btn.badge"
+                      :label="$t(btn.badge)"
+                      :color="btn.badgeColor"
+                    />
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
           </div>
         </div>
 
         <div
-          class="flex column items-center w100 q-pt-lg"
+          class="flex column items-center w100 q-pt-md"
           >
           <q-btn
             class="w100 rotate-icon-btn"
@@ -304,6 +347,7 @@
             </transition>
           </div>
         </div>
+
       </div>
 
       <div v-else class="w100 bg-white column q-py-md rounded-card fab-action-item">
@@ -399,20 +443,25 @@
       chatType: 'full' as const,
       title: 'chats__attach_chat_title',
       description: 'chats__attach_chat_title_description',
+      description2: 'chats__attach_chat_title_description2',
       badge: 'chats__attach_chat_badge',
       badgeColor: 'grey-5', 
       color: 'primary',
       btns: [
         {
+          color: 'primary',
+          textColor: 'white',
           icon: 'mdi-chat-plus-outline',
           title: 'chats__attach_chat',
-          is_outline: false,
+          badge: 'chats__attach_chat_badge_btn',
+          badgeColor: 'green',
           func: attachChat
         },
         {
+          color: 'primary',
+          textColor: 'white',
           icon: 'mdi-share-outline',
           title: 'chats__send_chat',
-          is_outline: true,
           func: sendChat
         }
       ]
@@ -422,14 +471,16 @@
       chatType: 'notify' as const,
       title: 'chats__attach_chat_private_title',
       description: 'chats__attach_chat_private_title_description',
-      badge: 'chats__attach_chat_private_badge',
+      description2: 'chats__attach_chat_private_title_description2',
-      badgeColor: 'grey-5',
       color: 'info',
       btns: [
         {
+          color: 'info',
+          textColor: 'white',
           icon: 'mdi-chat-plus-outline',
-          title: 'chats__attach_private_chat', 
+          title: 'chats__attach_private_chat',
-          is_outline: true,
+          badge: 'chats__attach_chat_private_badge_btn',
+          badgeColor: 'warning',
           func: attachPrivateChat
         }
       ]
@@ -552,7 +603,10 @@
   }
 
   .fab-disabled :deep(.q-btn--fab) {
-    opacity: 0.65
+    opacity: 0.65;
+  }
+  
+  .opacity-60 {
+    opacity: 0.6;
   }
-
 </style>