Skip to content

Commit 7b6e007

Browse files
StevenU21StevenU21
committed
Enhance UI in RequestCount and AuthenticatedLayout components with icons and improved button styles
1 parent 1c2d7e1 commit 7b6e007

File tree

3 files changed

+31
-54
lines changed

3 files changed

+31
-54
lines changed

‎resources/js/Components/RequestCount.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<div class="relative ms-3" ref="dropdown">
33
<span
4-
@click="toggleDropdown"
5-
:class="{
6-
'inline-flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer': true,
7-
'bg-red-100 text-red-800': requestCount === 0,
8-
'bg-gray-700 text-white': requestCount > 0
9-
}"
4+
@click="toggleDropdown"
5+
:class="{
6+
'inline-flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer': true,
7+
'bg-red-100 text-red-800': requestCount === 0,
8+
'bg-gray-700 text-white': requestCount > 0
9+
}"
1010
>
11-
Requests left: {{ requestCount }}
11+
<i class="fas fa-clock mr-2"></i> Requests left: {{ requestCount }}
1212
</span>
1313
<div v-if="dropdownOpen" class="absolute mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
1414
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">

‎resources/js/Layouts/AuthenticatedLayout.vue

Lines changed: 21 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -48,48 +48,42 @@ onMounted(() => {
4848
:href="route('dashboard')"
4949
:active="route().current('dashboard')"
5050
>
51-
Dashboard
51+
<i class="fas fa-tachometer-alt mr-2"></i> Dashboard
5252
</NavLink>
5353

5454
<NavLink
5555
:href="route('transcriptions.index')"
56-
:active="
57-
route().current('transcriptions.index')
58-
"
56+
:active="route().current('transcriptions.index')"
5957
>
60-
Transcriptions
58+
<i class="fas fa-file-alt mr-2"></i> Transcriptions
6159
</NavLink>
6260

6361
<NavLink
6462
:href="route('translations.index')"
65-
:active="
66-
route().current('translations.index')
67-
"
63+
:active="route().current('translations.index')"
6864
>
69-
Translations
65+
<i class="fas fa-language mr-2"></i> Translations
7066
</NavLink>
7167

7268
<NavLink
7369
:href="route('speech_audios.index')"
74-
:active="
75-
route().current('speech_audios.index')
76-
"
70+
:active="route().current('speech_audios.index')"
7771
>
78-
Speech_Audios
72+
<i class="fas fa-microphone-alt mr-2"></i> Speech Audios
7973
</NavLink>
8074

8175
<NavLink
8276
:href="route('images.index')"
8377
:active="route().current('images.index')"
8478
>
85-
Images
79+
<i class="fas fa-image mr-2"></i> Images
8680
</NavLink>
8781

8882
<NavLink
8983
:href="route('chatbot.index')"
9084
:active="route().current('chatbot.index')"
9185
>
92-
ChatBot
86+
<i class="fas fa-comments mr-2"></i> ChatBot
9387
</NavLink>
9488
</div>
9589
</div>
@@ -105,36 +99,19 @@ onMounted(() => {
10599
type="button"
106100
class="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
107101
>
102+
<i class="fas fa-user mr-2"></i>
108103
{{ $page.props.auth.user.name }}
109-
110-
<svg
111-
class="-me-0.5 ms-2 h-4 w-4"
112-
xmlns="http://www.w3.org/2000/svg"
113-
viewBox="0 0 20 20"
114-
fill="currentColor"
115-
>
116-
<path
117-
fill-rule="evenodd"
118-
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
119-
clip-rule="evenodd"
120-
/>
121-
</svg>
104+
<i class="fas fa-chevron-down ms-2"></i>
122105
</button>
123106
</span>
124107
</template>
125108

126109
<template #content>
127-
<DropdownLink
128-
:href="route('profile.edit')"
129-
>
130-
Profile
110+
<DropdownLink :href="route('profile.edit')">
111+
<i class="fas fa-user mr-2"></i> Profile
131112
</DropdownLink>
132-
<DropdownLink
133-
:href="route('logout')"
134-
method="post"
135-
as="button"
136-
>
137-
Log Out
113+
<DropdownLink :href="route('logout')" method="post" as="button">
114+
<i class="fas fa-sign-out-alt mr-2"></i> Log Out
138115
</DropdownLink>
139116
</template>
140117
</Dropdown>
@@ -197,42 +174,42 @@ onMounted(() => {
197174
:href="route('dashboard')"
198175
:active="route().current('dashboard')"
199176
>
200-
Dashboard
177+
<i class="fas fa-tachometer-alt mr-2"></i> Dashboard
201178
</ResponsiveNavLink>
202179

203180
<ResponsiveNavLink
204181
:href="route('transcriptions.index')"
205182
:active="route().current('transcriptions.index')"
206183
>
207-
Transcriptions
184+
<i class="fas fa-file-alt mr-2"></i> Transcriptions
208185
</ResponsiveNavLink>
209186

210187
<ResponsiveNavLink
211188
:href="route('translations.index')"
212189
:active="route().current('translations.index')"
213190
>
214-
Translations
191+
<i class="fas fa-language mr-2"></i> Translations
215192
</ResponsiveNavLink>
216193

217194
<ResponsiveNavLink
218195
:href="route('speech_audios.index')"
219196
:active="route().current('speech_audios.index')"
220197
>
221-
Speech_Audios
198+
<i class="fas fa-microphone-alt mr-2"></i> Speech Audios
222199
</ResponsiveNavLink>
223200

224201
<ResponsiveNavLink
225202
:href="route('images.index')"
226203
:active="route().current('images.index')"
227204
>
228-
Images
205+
<i class="fas fa-image mr-2"></i> Images
229206
</ResponsiveNavLink>
230207

231208
<ResponsiveNavLink
232209
:href="route('chatbot.index')"
233210
:active="route().current('chatbot.index')"
234211
>
235-
ChatBot
212+
<i class="fas fa-comments mr-2"></i> ChatBot
236213
</ResponsiveNavLink>
237214
</div>
238215

‎resources/js/Pages/ChatBot/Index.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
class="p-3 rounded-md max-w-lg md:max-w-xl"
6363
>
6464
<div v-html="msg.text ? renderMarkdown(msg.text) : ''"></div>
65-
<button v-if="msg.isComplete" @click="downloadResponse(msg.text)" class="mt-2 px-2 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 flex items-center">
65+
<button v-if="msg.isComplete" @click="downloadResponse(msg.text)" class="mt-2 px-2 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 flex items-center">
6666
<i class="fas fa-download mr-2"></i> Descargar Respuesta
6767
</button>
6868
</div>
@@ -88,13 +88,13 @@
8888
placeholder="Write your Message..."></textarea>
8989
<button @click="sendMessage"
9090
:disabled="isGenerating"
91-
class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 focus:outline-none
91+
class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none
9292
disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
9393
<i class="fas fa-paper-plane mr-2"></i> Send
9494
</button>
9595
<button @click="clearChat"
9696
:disabled="isGenerating"
97-
class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none
97+
class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none
9898
disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
9999
<i class="fas fa-trash-alt mr-2"></i> Clear Chat
100100
</button>

0 commit comments

Comments
 (0)