ajustes visuais apresentacao

src/components/dashboard/DashboardTodaySchedules.vue

@@ -16,18 +16,17 @@
                   {{ item.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}
                 </span>
               </q-avatar>
-              <div class="col column no-wrap overflow-hidden justify-center">
-                <span class="text-body2 text-text leading-tight">
+              <div class="col-7 column no-wrap overflow-hidden justify-center">
+                <span class="text-caption text-text leading-tight">
                   <template v-if="cardState(item) === 'awaiting_code'">{{ $t('dashboard_client.today_schedules.start_with') }}</template>
                   <template v-else-if="cardState(item) === 'in_progress'">{{ $t('dashboard_client.today_schedules.started_by') }}</template>
                   <template v-else>{{ $t('dashboard_client.today_schedules.finished_by') }}</template>
                   <span class="text-weight-bold"> {{ ' ' +  item.provider_name ?? '—' }}</span>
                 </span>
-                <div class="row items-center q-mt-xs">
+                <div class="row items-center q-mt-xs no-wrap">
                   <q-icon name="mdi-clock-outline" size="13px" class="q-mr-xs gradient-diarista" />
-                  <span class="text-caption text-grey-5">
-                    <template v-if="cardState(item) !== 'finished'">{{ $t('dashboard_client.next_schedules.from') }} </template>
-                    {{ item.start_time?.slice(0, 5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ item.end_time?.slice(0, 5) }}
+                  <span class="hours-font text-grey-5">
+                    {{ $t('dashboard_client.next_schedules.from') }} {{ item.start_time?.slice(0, 5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ item.end_time?.slice(0, 5) }}
                   </span>
                 </div>
               </div>
@@ -42,7 +41,7 @@
                 <template v-else-if="cardState(item) === 'in_progress'">
                   <div class="column items-center">
                     <div class="clock-badge">
-                      <q-icon name="mdi-clock-outline" size="18px" color="white" />
+                      <q-icon name="mdi-clock-outline" size="15px" color="white" />
                     </div>
                     <span class="badge-status-text text-primary text-weight-bold q-mt-xs">
                       {{ $t('dashboard_client.today_schedules.in_progress') }}
@@ -52,25 +51,28 @@
 
                 <template v-else>
                   <div v-if="item.client_reviewed" class="rate-btn reviewed-badge">
-                    <q-icon name="mdi-star" size="14px" class="q-mr-xs" />
+                    <q-icon name="mdi-star" size="12px" class="q-mr-xs" />
                     {{ $t('dashboard_client.schedule_rating.reviewed_badge') }}
                   </div>
                   <q-btn
                     v-else
                     unelevated no-caps
                     class="rate-btn"
-                    icon="mdi-star-outline"
-                    :label="$t('dashboard_client.today_schedules.rate_btn')"
                     @click.stop="emit('rate', item)"
-                  />
+                  >
+                    <div class="column items-center">
+                      <q-icon name="mdi-star-outline" size="12px" class="q-mr-xs" />
+                      {{ $t('dashboard_client.today_schedules.rate_btn') }}
+                    </div>
+                  </q-btn>
                 </template>
               </div>
             </div>
 
+
             <div class="progress-track q-mb-sm">
               <div class="progress-fill" :class="cardState(item) === 'finished' ? 'progress-fill--finished' : ''" :style="{ width: progressByState(item) + '%' }" />
             </div>
-
             <div class="row items-center no-wrap">
               <template v-if="cardState(item) !== 'finished'">
                 <q-btn
@@ -163,15 +165,15 @@ const openHelp = () => {
 .code-pill {
   color: white;
   font-weight: 700;
-  font-size: 15px;
-  letter-spacing: 2px;
+  font-size: 11px;
+  letter-spacing: 1px;
   border-radius: 20px;
-  padding: 4px 14px;
+  padding: 4px 10px;
 }
 
 .clock-badge {
-  width: 36px;
-  height: 36px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
   background: linear-gradient(135deg, #8B5CF6, #EC4899);
   display: flex;
@@ -180,25 +182,24 @@ const openHelp = () => {
 }
 
 .badge-status-text {
-  font-size: 10px;
+  font-size: 9px;
   white-space: nowrap;
 }
 
 .rate-btn {
   background: #EC4899;
   color: white;
-  font-weight: 700;
-  font-size: 13px;
+  font-weight: 600;
+  font-size: 11px;
   white-space: nowrap;
   border-radius: 10px !important;
-  min-width: 72px;
-  min-height: 56px;
-  padding: 6px 10px;
+  min-width: 45px;
+  min-height: 40px;
+  padding: 3px 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
 }
 
 .reviewed-badge {
@@ -225,4 +226,8 @@ const openHelp = () => {
     background: #22c55e;
   }
 }
+
+.hours-font {
+  font-size: 11px;
+}
 </style>