Skip to content

Commit ec9cf14

Browse files
webstackdevwebstackdev
committed
Fix styles in Copy component, refactor to Icon component in Newsletter CTA components
1 parent e17aaa5 commit ec9cf14

7 files changed

Lines changed: 259 additions & 97 deletions

File tree

‎_TODO.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,10 @@ Generate cover images for the skills and technologies tags pages
235235

236236
- Need a secret token to bypass the waiting state for the Newsletter token page, so we can style it. Set it via env var.
237237

238+
- Details dd / dt in Markdown need bottom margin
239+
240+
- Highlighter component in Markdown needs better colors in dark theme. It's spotlight color with content text - and there's not much contrast in dark theme between the yellow and white text.
241+
238242
## Header
239243

240244
- Need to improve the "squish" animation where the header reduces in size on scroll down, and returns to full size on scroll up. Maybe reduce and expand the text and search / themepicker / hamburger menu sizes in place, and then slide them horizontally.

‎src/components/CallToAction/Newsletter/layouts/article.astro‎

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import GDPRConsent from '@components/Consent/Checkbox/index.astro'
33
import Confetti from '@components/Animations/Confetti/index.astro'
4+
import Icon from '@components/Icon/index.astro'
45
import type { NewsletterProps } from '@components/CallToAction/Newsletter/client/@types'
56
67
export type Props = Omit<NewsletterProps, 'variant'>
@@ -57,44 +58,18 @@ const {
5758
class="relative px-6 py-2 bg-primary hover:bg-primary-offset text-page-base font-semibold rounded text-sm transition-colors whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
5859
>
5960
<span id="button-text">{buttonText}</span>
60-
<svg
61+
<Icon
62+
icon="exit-right-thin"
63+
size={4}
64+
classes="inline-block ml-2"
6165
id="button-arrow"
62-
class="inline-block w-4 h-4 ml-2"
63-
fill="none"
64-
stroke="currentColor"
65-
viewBox="0 0 24 24"
66-
aria-hidden="true"
67-
focusable="false"
68-
>
69-
<path
70-
stroke-linecap="round"
71-
stroke-linejoin="round"
72-
stroke-width="2"
73-
d="M14 5l7 7m0 0l-7 7m7-7H3"
74-
></path>
75-
</svg>
76-
<svg
66+
/>
67+
<Icon
68+
icon="spinner"
69+
size={4}
70+
classes="hidden ml-2 animate-spin"
7771
id="button-spinner"
78-
class="hidden w-4 h-4 ml-2 animate-spin"
79-
fill="none"
80-
viewBox="0 0 24 24"
81-
aria-hidden="true"
82-
focusable="false"
83-
>
84-
<circle
85-
class="opacity-25"
86-
cx="12"
87-
cy="12"
88-
r="10"
89-
stroke="currentColor"
90-
stroke-width="4"
91-
></circle>
92-
<path
93-
class="opacity-75"
94-
fill="currentColor"
95-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
96-
></path>
97-
</svg>
72+
/>
9873
</button>
9974
</Confetti>
10075
</div>

‎src/components/CallToAction/Newsletter/layouts/home.astro‎

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import GDPRConsent from '@components/Consent/Checkbox/index.astro'
33
import Confetti from '@components/Animations/Confetti/index.astro'
4+
import Icon from '@components/Icon/index.astro'
45
import type { NewsletterProps } from '@components/CallToAction/Newsletter/client/@types'
56
67
export type Props = Omit<NewsletterProps, 'variant'>
@@ -209,44 +210,18 @@ const {
209210
class="relative w-full px-6 py-3 bg-content text-page-base font-bold rounded-none text-sm transition-all transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center gap-2 group-hover/form:bg-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
210211
>
211212
<span id="button-text">{buttonText}</span>
212-
<svg
213+
<Icon
214+
icon="exit-right-thin"
215+
size={4}
216+
classes="transition-transform group-hover/form:translate-x-1"
213217
id="button-arrow"
214-
class="w-4 h-4 transition-transform group-hover/form:translate-x-1"
215-
fill="none"
216-
stroke="currentColor"
217-
viewBox="0 0 24 24"
218-
aria-hidden="true"
219-
focusable="false"
220-
>
221-
<path
222-
stroke-linecap="round"
223-
stroke-linejoin="round"
224-
stroke-width="2"
225-
d="M17 8l4 4m0 0l-4 4m4-4H3"
226-
></path>
227-
</svg>
228-
<svg
218+
/>
219+
<Icon
220+
icon="spinner"
221+
size={4}
222+
classes="hidden animate-spin"
229223
id="button-spinner"
230-
class="hidden w-4 h-4 animate-spin"
231-
fill="none"
232-
viewBox="0 0 24 24"
233-
aria-hidden="true"
234-
focusable="false"
235-
>
236-
<circle
237-
class="opacity-25"
238-
cx="12"
239-
cy="12"
240-
r="10"
241-
stroke="currentColor"
242-
stroke-width="4"
243-
></circle>
244-
<path
245-
class="opacity-75"
246-
fill="currentColor"
247-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
248-
></path>
249-
</svg>
224+
/>
250225
</button>
251226
</Confetti>
252227
<GDPRConsent

‎src/components/Carousel/index.astro‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -133,21 +133,11 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
133133
)}
134134
<div class="mt-4 flex items-center text-primary text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
135135
<span>Learn more</span>
136-
<svg
137-
class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform"
138-
fill="none"
139-
stroke="currentColor"
140-
viewBox="0 0 24 24"
141-
aria-hidden="true"
142-
focusable="false"
143-
>
144-
<path
145-
stroke-linecap="round"
146-
stroke-linejoin="round"
147-
stroke-width="2"
148-
d="M17 8l4 4m0 0l-4 4m4-4H3"
149-
/>
150-
</svg>
136+
<Icon
137+
icon="exit-right-thin"
138+
size={4}
139+
classes="ml-0.5 mb-0.5 transform group-hover:translate-x-1 transition-transform"
140+
/>
151141
</div>
152142
</div>
153143
</a>

‎src/components/Copy/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ const iconButtonColorClass = [
6868
type="button"
6969
>
7070
<span data-copy-to-clipboard-icon class="shrink-0">
71-
<Icon icon="copy" color="inherit" classes={iconExtraClass ?? ''} />
71+
<Icon icon="copy" size={4} color="inherit" classes={iconExtraClass ?? ''} />
7272
</span>
7373
<span data-copy-to-clipboard-success-icon hidden class="shrink-0">
74-
<Icon icon="check" color="inherit" classes={successIconExtraClass ?? ''} />
74+
<Icon icon="check" size={4} color="inherit" classes={successIconExtraClass ?? ''} />
7575
</span>
7676
</button>
7777
</span>

‎src/components/List/layouts/CheckIconsList.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
2727
<li class:list={liClass}>
2828
<Icon
2929
icon="check-stylized"
30-
color="text-success"
30+
color="success"
3131
size={5}
3232
classes={"mt-1"}
3333
/>
@@ -38,7 +38,7 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
3838
<span class="text-content-offset/60 mx-2">—</span>
3939
</>
4040
)}
41-
<span class={`text-content-offset${item.lead ? " mx-6" : ""}`}>{item.text}</span>
41+
<span class={`text-content-offset`}>{item.text}</span>
4242
</span>
4343
</li>
4444
))

0 commit comments

Comments
 (0)