Skip to content

Commit f073d7a

Browse files
ErwanDecosterErwanDecoster
committed
feat: update AskIaButton component styles and replace SVG icons with inline SVGs
1 parent cccdea1 commit f073d7a

File tree

4 files changed

+78
-44
lines changed

4 files changed

+78
-44
lines changed

‎.vitepress/theme/style.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,22 @@ input {
348348
@apply w-full rounded-md border border-[var(--vp-c-divider)] bg-[var(--vp-c-bg-soft)] px-4 py-3 text-base text-[var(--vp-c-text-1)] transition focus:border-[var(--vp-c-brand-2)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-70;
349349
}
350350

351+
/**
352+
* Component: AskIaButton
353+
* -------------------------------------------------------------------------- */
354+
355+
:root {
356+
--c-askIa-bg: #f4f7fc;
357+
--c-askIa-bg-hover: #e3e7f7;
358+
--c-askIa-bg-active: #d1d5db;
359+
}
360+
361+
.dark {
362+
--c-askIa-bg: #1d1d24;
363+
--c-askIa-bg-hover: #2b304b;
364+
--c-askIa-bg-active: #3b426e;
365+
}
366+
351367
/**
352368
* Component: Banner
353369
* -------------------------------------------------------------------------- */

‎src/assets/icons/anthropic.svg‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/assets/icons/chatgpt.svg‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/AskIaButton.vue‎

Lines changed: 62 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
11
<template>
2-
<div
3-
class="relative mb-4 flex flex-col items-center text-white"
4-
ref="dropdownRef"
5-
>
2+
<div class="relative mb-4 flex flex-col items-center" ref="dropdownRef">
63
<!-- Split button: main button + dropdown trigger -->
74
<div
8-
class="flex h-9 cursor-pointer rounded-full bg-neutral-800 text-sm font-medium shadow-md"
5+
class="flex h-9 cursor-pointer rounded-full bg-[var(--c-askIa-bg)] text-sm font-medium shadow-md *:duration-200 *:hover:bg-[var(--c-askIa-bg-hover)]! *:active:bg-[var(--c-askIa-bg-active)]!"
96
>
107
<!-- Main button - launches ChatGPT directly -->
118
<a
12-
class="flex items-center rounded-l-full px-3 duration-200 hover:bg-neutral-700"
9+
class="flex items-center rounded-l-full px-3"
1310
:href="chatGPTLink"
1411
target="_blank"
1512
rel="noopener"
1613
>
17-
<img
18-
src="/assets/icons/chatgpt.svg"
19-
alt="ChatGPT"
20-
class="mr-2 h-6 w-6"
21-
/>
14+
<svg
15+
class="mr-2 h-6 w-6 fill-[var(--vp-c-text-1)]"
16+
xmlns="http://www.w3.org/2000/svg"
17+
fill="none"
18+
viewBox="0 0 24 24"
19+
id="Openai-Icon--Streamline-Svg-Logos"
20+
height="24"
21+
width="24"
22+
>
23+
<desc>Openai Icon Streamline Icon: https://streamlinehq.com</desc>
24+
<path
25+
d="M22.06755 9.86655c0.53155 -1.600775 0.34755 -3.352975 -0.50495 -4.8084C20.2808 2.826925 17.7045 1.67919 15.18845 2.21849c-1.4179 -1.577185 -3.569275 -2.2785285 -5.644275 -1.840025C7.46915 0.81697 5.785475 2.3287575 5.1269 4.34475c-1.652725 0.338925 -3.079185 1.37375 -3.9143575 2.83965C-0.08323475 9.412025 0.21087275 12.22195 1.939825 14.132975c-0.5335675 1.60005 -0.3512325 3.352475 0.5002975 4.808425C3.72355 21.173375 6.301525 22.321025 8.818925 21.78105c1.119725 1.260875 2.728375 1.978275 4.41465 1.96885 2.578975 0.0023 4.863725 -1.662575 5.651525 -4.118275 1.652475 -0.3395 3.078725 -1.37415 3.91435 -2.83965 1.280125 -2.223675 0.984775 -5.01845 -0.7319 -6.925425ZM13.233575 22.211875c-1.029375 0.001625 -2.0265 -0.359175 -2.816475 -1.019125l0.13895 -0.07875 4.678725 -2.7007c0.236875 -0.138925 0.383 -0.39245 0.384475 -0.66705V11.149725l1.978025 1.1442c0.0198 0.0101 0.033575 0.029025 0.037075 0.05095v5.466225c-0.0051 2.42835 -1.9724 4.395675 -4.400775 4.400775ZM3.77425 18.172425c-0.516225 -0.8914 -0.701575 -1.936275 -0.52345 -2.950825l0.13895 0.083375 4.68335 2.700675c0.235975 0.138475 0.528375 0.138475 0.76435 0l5.721 -3.29825v2.283775c-0.001075 0.02395 -0.013025 0.046125 -0.032425 0.0602L9.787075 19.7845c-2.105825 1.21315 -4.7963 0.491825 -6.012825 -1.612075Zm-1.232225 -10.19125c0.519825 -0.89715 1.3403 -1.581425 2.3162 -1.9317v5.55885c-0.003575 0.27355 0.141975 0.527375 0.37985 0.66245l5.6932 3.28435 -1.978025 1.1442c-0.021725 0.011525 -0.04775 0.011525 -0.069475 0L4.1541 13.97085c-2.1016975 -1.2182 -2.8224825 -3.90665 -1.612075 -6.012825v0.02315Zm16.250425 3.7754 -5.71175 -3.3168 1.9734 -1.13955c0.021725 -0.01155 0.047775 -0.01155 0.0695 0L19.85325 10.033325c1.476175 0.851825 2.327775 2.479375 2.186 4.177775 -0.141775 1.6984 -1.25145 3.162225 -2.848425 3.7575V12.40975c-0.0083 -0.27275 -0.159675 -0.52095 -0.398375 -0.653175Zm1.96875 -2.9601 -0.138975 -0.083375L15.94815 5.98925c-0.2374 -0.1393 -0.531575 -0.1393 -0.768975 0L9.462825 9.2875v-2.28375c-0.002475 -0.02365 0.008175 -0.046775 0.0278 -0.060225l4.72965 -2.728475c1.479775 -0.852475 3.31895 -0.772925 4.719575 0.20415 1.40065 0.977075 2.1104 2.675625 1.82135 4.35875v0.018525ZM8.383475 12.845175l-1.978025 -1.13955c-0.02 -0.012125 -0.033575 -0.032475 -0.037075 -0.0556V6.1977c0.002275 -1.707425 0.990925 -3.2598 2.53725 -3.983845 1.5463 -0.7240575 3.37175 -0.489395 4.68465 0.60222l-0.138975 0.07875L8.7726 5.5955c-0.236875 0.13895 -0.383 0.39245 -0.3845 0.667075l-0.004625 6.5826Zm1.0747 -2.316175 2.547825 -1.468475 2.55245 1.468475v2.936925l-2.543175 1.46845 -2.55245 -1.46845 -0.00465 -2.936925Z"
26+
stroke-width="0.25"
27+
></path>
28+
</svg>
2229
Ask in ChatGPT
2330
</a>
2431

2532
<!-- Dropdown trigger button -->
2633
<button
27-
class="flex w-6 items-center justify-center rounded-r-full border-l border-white/10 p-0 duration-200 hover:bg-neutral-700!"
34+
class="flex w-6 items-center justify-center rounded-r-full border-l border-white/10 p-0"
2835
@click.stop="toggleDropdown"
2936
aria-label="More options"
3037
>
@@ -40,67 +47,91 @@
4047

4148
<!-- Dropdown menu -->
4249
<div
43-
class="absolute top-full z-[1000] mt-2 min-w-[280px] rounded-xl border border-neutral-700 bg-neutral-800 shadow-2xl"
50+
class="absolute top-full z-[1000] mt-2 min-w-[280px] rounded-xl border border-[var(--vp-c-border)] bg-[var(--c-askIa-bg)] shadow-2xl *:flex *:w-full *:items-center *:gap-3 *:rounded-xl *:px-4! *:py-3! *:transition-all *:duration-200 *:hover:bg-[var(--c-askIa-bg-hover)]! *:active:bg-[var(--c-askIa-bg-active)]!"
4451
v-show="isDropdownOpen"
4552
>
4653
<a
47-
class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-neutral-300 transition-all duration-200 hover:bg-neutral-700 hover:text-white focus:outline-none active:bg-neutral-600 active:text-white"
4854
:href="chatGPTLink"
4955
target="_blank"
5056
rel="noopener"
5157
@click="closeDropdown"
5258
>
5359
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center">
54-
<img
55-
src="/assets/icons/chatgpt.svg"
56-
alt="ChatGPT"
57-
class="h-auto max-w-[80%]"
58-
/>
60+
<svg
61+
class="h-auto max-w-[80%] fill-[var(--vp-c-text-1)]"
62+
xmlns="http://www.w3.org/2000/svg"
63+
fill="none"
64+
viewBox="0 0 24 24"
65+
id="Openai-Icon--Streamline-Svg-Logos"
66+
height="24"
67+
width="24"
68+
>
69+
<desc>Openai Icon Streamline Icon: https://streamlinehq.com</desc>
70+
<path
71+
d="M22.06755 9.86655c0.53155 -1.600775 0.34755 -3.352975 -0.50495 -4.8084C20.2808 2.826925 17.7045 1.67919 15.18845 2.21849c-1.4179 -1.577185 -3.569275 -2.2785285 -5.644275 -1.840025C7.46915 0.81697 5.785475 2.3287575 5.1269 4.34475c-1.652725 0.338925 -3.079185 1.37375 -3.9143575 2.83965C-0.08323475 9.412025 0.21087275 12.22195 1.939825 14.132975c-0.5335675 1.60005 -0.3512325 3.352475 0.5002975 4.808425C3.72355 21.173375 6.301525 22.321025 8.818925 21.78105c1.119725 1.260875 2.728375 1.978275 4.41465 1.96885 2.578975 0.0023 4.863725 -1.662575 5.651525 -4.118275 1.652475 -0.3395 3.078725 -1.37415 3.91435 -2.83965 1.280125 -2.223675 0.984775 -5.01845 -0.7319 -6.925425ZM13.233575 22.211875c-1.029375 0.001625 -2.0265 -0.359175 -2.816475 -1.019125l0.13895 -0.07875 4.678725 -2.7007c0.236875 -0.138925 0.383 -0.39245 0.384475 -0.66705V11.149725l1.978025 1.1442c0.0198 0.0101 0.033575 0.029025 0.037075 0.05095v5.466225c-0.0051 2.42835 -1.9724 4.395675 -4.400775 4.400775ZM3.77425 18.172425c-0.516225 -0.8914 -0.701575 -1.936275 -0.52345 -2.950825l0.13895 0.083375 4.68335 2.700675c0.235975 0.138475 0.528375 0.138475 0.76435 0l5.721 -3.29825v2.283775c-0.001075 0.02395 -0.013025 0.046125 -0.032425 0.0602L9.787075 19.7845c-2.105825 1.21315 -4.7963 0.491825 -6.012825 -1.612075Zm-1.232225 -10.19125c0.519825 -0.89715 1.3403 -1.581425 2.3162 -1.9317v5.55885c-0.003575 0.27355 0.141975 0.527375 0.37985 0.66245l5.6932 3.28435 -1.978025 1.1442c-0.021725 0.011525 -0.04775 0.011525 -0.069475 0L4.1541 13.97085c-2.1016975 -1.2182 -2.8224825 -3.90665 -1.612075 -6.012825v0.02315Zm16.250425 3.7754 -5.71175 -3.3168 1.9734 -1.13955c0.021725 -0.01155 0.047775 -0.01155 0.0695 0L19.85325 10.033325c1.476175 0.851825 2.327775 2.479375 2.186 4.177775 -0.141775 1.6984 -1.25145 3.162225 -2.848425 3.7575V12.40975c-0.0083 -0.27275 -0.159675 -0.52095 -0.398375 -0.653175Zm1.96875 -2.9601 -0.138975 -0.083375L15.94815 5.98925c-0.2374 -0.1393 -0.531575 -0.1393 -0.768975 0L9.462825 9.2875v-2.28375c-0.002475 -0.02365 0.008175 -0.046775 0.0278 -0.060225l4.72965 -2.728475c1.479775 -0.852475 3.31895 -0.772925 4.719575 0.20415 1.40065 0.977075 2.1104 2.675625 1.82135 4.35875v0.018525ZM8.383475 12.845175l-1.978025 -1.13955c-0.02 -0.012125 -0.033575 -0.032475 -0.037075 -0.0556V6.1977c0.002275 -1.707425 0.990925 -3.2598 2.53725 -3.983845 1.5463 -0.7240575 3.37175 -0.489395 4.68465 0.60222l-0.138975 0.07875L8.7726 5.5955c-0.236875 0.13895 -0.383 0.39245 -0.3845 0.667075l-0.004625 6.5826Zm1.0747 -2.316175 2.547825 -1.468475 2.55245 1.468475v2.936925l-2.543175 1.46845 -2.55245 -1.46845 -0.00465 -2.936925Z"
72+
stroke-width="0.25"
73+
></path>
74+
</svg>
5975
</div>
6076
<div class="flex flex-1 flex-col gap-0.5">
6177
<div class="text-sm font-medium">Open in ChatGPT</div>
62-
<div class="text-xs leading-tight text-neutral-400">
78+
<div class="text-xs leading-tight text-[var(--vp-c-text-2)]">
6379
Ask questions about this page
6480
</div>
6581
</div>
6682
<Icon
67-
class="flex-shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-400"
83+
class="flex-shrink-0"
6884
icon="ep:arrow-right"
6985
height="16"
7086
width="16"
7187
/>
7288
</a>
7389

7490
<a
75-
class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-neutral-300 transition-all duration-200 hover:bg-neutral-700 hover:text-white focus:outline-none active:bg-neutral-600 active:text-white"
7691
:href="claudeLink"
7792
target="_blank"
7893
rel="noopener"
7994
@click="closeDropdown"
8095
>
8196
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center">
82-
<img
83-
src="/assets/icons/anthropic.svg"
84-
alt="Anthropic"
85-
class="h-auto max-w-[80%]"
86-
/>
97+
<svg
98+
class="h-auto max-w-[80%] fill-[var(--vp-c-text-1)]"
99+
xmlns="http://www.w3.org/2000/svg"
100+
fill="none"
101+
viewBox="0 0 24 24"
102+
id="Anthropic-Icon--Streamline-Svg-Logos"
103+
height="24"
104+
width="24"
105+
>
106+
<desc>
107+
Anthropic Icon Streamline Icon: https://streamlinehq.com
108+
</desc>
109+
<path
110+
d="m13.788825 3.932 6.43325 16.136075h3.5279L17.316725 3.932H13.788825Z"
111+
stroke-width="0.25"
112+
></path>
113+
<path
114+
d="m6.325375 13.682775 2.20125 -5.67065 2.201275 5.67065H6.325375ZM6.68225 3.932 0.25 20.068075h3.596525l1.3155 -3.3886h6.729425l1.315275 3.3886h3.59655L10.371 3.932H6.68225Z"
115+
stroke-width="0.25"
116+
></path>
117+
</svg>
87118
</div>
88119
<div class="flex flex-1 flex-col gap-0.5">
89120
<div class="text-sm font-medium">Open in Claude</div>
90-
<div class="text-xs leading-tight text-neutral-400">
121+
<div class="text-xs leading-tight text-[var(--vp-c-text-2)]">
91122
Ask questions about this page
92123
</div>
93124
</div>
94125
<Icon
95-
class="flex-shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-400"
126+
class="flex-shrink-0"
96127
icon="ep:arrow-right"
97128
height="16"
98129
width="16"
99130
/>
100131
</a>
101132

102133
<button
103-
class="flex w-full items-center gap-3 rounded-xl px-4! py-3! text-left text-neutral-300 transition-all duration-200 hover:bg-neutral-700! focus:outline-none active:bg-neutral-600! disabled:cursor-not-allowed disabled:opacity-50"
134+
class="text-left disabled:cursor-not-allowed disabled:opacity-50"
104135
@click="copyPageContent"
105136
:disabled="isCopying"
106137
>
@@ -116,7 +147,7 @@
116147
<div class="text-sm font-medium">
117148
{{ isCopying ? 'Copied!' : 'Copy page' }}
118149
</div>
119-
<div class="text-xs leading-tight text-neutral-400">
150+
<div class="text-xs leading-tight text-[var(--vp-c-text-2)]">
120151
Copy page as Markdown for LLMs
121152
</div>
122153
</div>

0 commit comments

Comments
 (0)