Skip to content

Commit 1c4a948

Browse files
takuphilchantakuphilchan
committed
fix: example prompt cards now work in both light and dark mode
1 parent bd48550 commit 1c4a948

File tree

2 files changed

+134
-72
lines changed

2 files changed

+134
-72
lines changed

‎desktop/index.html‎

Lines changed: 67 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -784,6 +784,37 @@
784784
scrollbar-width: thin;
785785
scrollbar-color: var(--scrollbar-thumb) transparent;
786786
}
787+
788+
/* Example prompt cards - theme aware */
789+
.example-prompt-card {
790+
padding: 1rem;
791+
text-align: left;
792+
border-radius: 0.75rem;
793+
border: 1px solid var(--border-color);
794+
background: var(--bg-secondary);
795+
transition: all 0.2s;
796+
}
797+
798+
.example-prompt-card:hover {
799+
background: var(--bg-tertiary);
800+
border-color: var(--accent-primary);
801+
}
802+
803+
.example-prompt-card .card-title {
804+
font-size: 0.875rem;
805+
font-weight: 500;
806+
color: var(--text-primary);
807+
}
808+
809+
.example-prompt-card:hover .card-title {
810+
color: var(--accent-primary);
811+
}
812+
813+
.example-prompt-card .card-desc {
814+
font-size: 0.75rem;
815+
color: var(--text-secondary);
816+
margin-top: 0.25rem;
817+
}
787818

788819
.settings-grid {
789820
display: grid;
@@ -1213,21 +1244,21 @@ <h2 class="text-2xl font-semibold text-primary mb-2">What can I help you with?</
12131244
<p class="text-sm text-secondary">Select a model above and try one of these prompts</p>
12141245
</div>
12151246
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full">
1216-
<button onclick="useExamplePrompt('Explain how neural networks work in simple terms')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
1217-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Explain a concept</div>
1218-
<div class="text-xs text-white/50 mt-1">"Explain how neural networks work in simple terms"</div>
1247+
<button onclick="useExamplePrompt('Explain how neural networks work in simple terms')" class="example-prompt-card">
1248+
<div class="card-title">Explain a concept</div>
1249+
<div class="card-desc">"Explain how neural networks work in simple terms"</div>
12191250
</button>
1220-
<button onclick="useExamplePrompt('Write a Python function that sorts a list using quicksort')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
1221-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Write code</div>
1222-
<div class="text-xs text-white/50 mt-1">"Write a Python function that sorts a list using quicksort"</div>
1251+
<button onclick="useExamplePrompt('Write a Python function that sorts a list using quicksort')" class="example-prompt-card">
1252+
<div class="card-title">Write code</div>
1253+
<div class="card-desc">"Write a Python function that sorts a list using quicksort"</div>
12231254
</button>
1224-
<button onclick="useExamplePrompt('Help me brainstorm ideas for a mobile app that helps people learn new languages')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
1225-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Brainstorm ideas</div>
1226-
<div class="text-xs text-white/50 mt-1">"Help me brainstorm ideas for a mobile app..."</div>
1255+
<button onclick="useExamplePrompt('Help me brainstorm ideas for a mobile app that helps people learn new languages')" class="example-prompt-card">
1256+
<div class="card-title">Brainstorm ideas</div>
1257+
<div class="card-desc">"Help me brainstorm ideas for a mobile app..."</div>
12271258
</button>
1228-
<button onclick="useExamplePrompt('Summarize the key differences between REST and GraphQL APIs')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
1229-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Compare topics</div>
1230-
<div class="text-xs text-white/50 mt-1">"Summarize the key differences between REST and GraphQL"</div>
1259+
<button onclick="useExamplePrompt('Summarize the key differences between REST and GraphQL APIs')" class="example-prompt-card">
1260+
<div class="card-title">Compare topics</div>
1261+
<div class="card-desc">"Summarize the key differences between REST and GraphQL"</div>
12311262
</button>
12321263
</div>
12331264
</div>
@@ -2876,21 +2907,21 @@ <h2 class="text-2xl font-semibold text-primary mb-2">What can I help you with?</
28762907
<p class="text-sm text-secondary">Select a model above and try one of these prompts</p>
28772908
</div>
28782909
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full">
2879-
<button onclick="useExamplePrompt('Explain how neural networks work in simple terms')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
2880-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Explain a concept</div>
2881-
<div class="text-xs text-white/50 mt-1">"Explain how neural networks work in simple terms"</div>
2910+
<button onclick="useExamplePrompt('Explain how neural networks work in simple terms')" class="example-prompt-card">
2911+
<div class="card-title">Explain a concept</div>
2912+
<div class="card-desc">"Explain how neural networks work in simple terms"</div>
28822913
</button>
2883-
<button onclick="useExamplePrompt('Write a Python function that sorts a list using quicksort')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
2884-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Write code</div>
2885-
<div class="text-xs text-white/50 mt-1">"Write a Python function that sorts a list using quicksort"</div>
2914+
<button onclick="useExamplePrompt('Write a Python function that sorts a list using quicksort')" class="example-prompt-card">
2915+
<div class="card-title">Write code</div>
2916+
<div class="card-desc">"Write a Python function that sorts a list using quicksort"</div>
28862917
</button>
2887-
<button onclick="useExamplePrompt('Help me brainstorm ideas for a mobile app that helps people learn new languages')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
2888-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Brainstorm ideas</div>
2889-
<div class="text-xs text-white/50 mt-1">"Help me brainstorm ideas for a mobile app..."</div>
2918+
<button onclick="useExamplePrompt('Help me brainstorm ideas for a mobile app that helps people learn new languages')" class="example-prompt-card">
2919+
<div class="card-title">Brainstorm ideas</div>
2920+
<div class="card-desc">"Help me brainstorm ideas for a mobile app..."</div>
28902921
</button>
2891-
<button onclick="useExamplePrompt('Summarize the key differences between REST and GraphQL APIs')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
2892-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Compare topics</div>
2893-
<div class="text-xs text-white/50 mt-1">"Summarize the key differences between REST and GraphQL"</div>
2922+
<button onclick="useExamplePrompt('Summarize the key differences between REST and GraphQL APIs')" class="example-prompt-card">
2923+
<div class="card-title">Compare topics</div>
2924+
<div class="card-desc">"Summarize the key differences between REST and GraphQL"</div>
28942925
</button>
28952926
</div>
28962927
</div>
@@ -3332,21 +3363,21 @@ <h2 class="text-2xl font-semibold text-primary mb-2">What can I help you with?</
33323363
<p class="text-sm text-secondary">Select a model above and try one of these prompts</p>
33333364
</div>
33343365
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full">
3335-
<button onclick="useExamplePrompt('Explain how neural networks work in simple terms')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
3336-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Explain a concept</div>
3337-
<div class="text-xs text-white/50 mt-1">"Explain how neural networks work in simple terms"</div>
3366+
<button onclick="useExamplePrompt('Explain how neural networks work in simple terms')" class="example-prompt-card">
3367+
<div class="card-title">Explain a concept</div>
3368+
<div class="card-desc">"Explain how neural networks work in simple terms"</div>
33383369
</button>
3339-
<button onclick="useExamplePrompt('Write a Python function that sorts a list using quicksort')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
3340-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Write code</div>
3341-
<div class="text-xs text-white/50 mt-1">"Write a Python function that sorts a list using quicksort"</div>
3370+
<button onclick="useExamplePrompt('Write a Python function that sorts a list using quicksort')" class="example-prompt-card">
3371+
<div class="card-title">Write code</div>
3372+
<div class="card-desc">"Write a Python function that sorts a list using quicksort"</div>
33423373
</button>
3343-
<button onclick="useExamplePrompt('Help me brainstorm ideas for a mobile app that helps people learn new languages')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
3344-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Brainstorm ideas</div>
3345-
<div class="text-xs text-white/50 mt-1">"Help me brainstorm ideas for a mobile app..."</div>
3374+
<button onclick="useExamplePrompt('Help me brainstorm ideas for a mobile app that helps people learn new languages')" class="example-prompt-card">
3375+
<div class="card-title">Brainstorm ideas</div>
3376+
<div class="card-desc">"Help me brainstorm ideas for a mobile app..."</div>
33463377
</button>
3347-
<button onclick="useExamplePrompt('Summarize the key differences between REST and GraphQL APIs')" class="p-4 text-left rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
3348-
<div class="text-sm font-medium text-white/90 group-hover:text-white">Compare topics</div>
3349-
<div class="text-xs text-white/50 mt-1">"Summarize the key differences between REST and GraphQL"</div>
3378+
<button onclick="useExamplePrompt('Summarize the key differences between REST and GraphQL APIs')" class="example-prompt-card">
3379+
<div class="card-title">Compare topics</div>
3380+
<div class="card-desc">"Summarize the key differences between REST and GraphQL"</div>
33503381
</button>
33513382
</div>
33523383
</div>

0 commit comments

Comments
 (0)