Skip to content

Commit a456f44

Browse files
webstackdevwebstackdev
committed
Improve theme colors for dark theme on Terraform animation, correctly center play icon in button, remove unused Computers animation
1 parent 2a33862 commit a456f44

2 files changed

Lines changed: 31 additions & 30 deletions

File tree

‎src/components/Animations/Terraform/client/index.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -301,11 +301,11 @@ export class TerraformAnimationElement extends LitElement {
301301
)
302302
this.toggleButton.dataset['animationState'] = state
303303

304-
const pauseIcon = queryAnimationTogglePauseIcon(this.toggleButton)
305-
const playIcon = queryAnimationTogglePlayIcon(this.toggleButton)
304+
const pauseIcon = queryAnimationTogglePauseIcon(this.toggleButton) as HTMLElement | null
305+
const playIcon = queryAnimationTogglePlayIcon(this.toggleButton) as HTMLElement | null
306306

307-
pauseIcon?.classList.toggle('hidden', state === 'paused')
308-
playIcon?.classList.toggle('hidden', state === 'playing')
307+
if (pauseIcon) pauseIcon.style.display = state === 'paused' ? 'none' : 'flex'
308+
if (playIcon) playIcon.style.display = state === 'playing' ? 'none' : 'flex'
309309
}
310310

311311
private resetToggleButton(): void {
@@ -315,11 +315,11 @@ export class TerraformAnimationElement extends LitElement {
315315
this.toggleButton.setAttribute('aria-label', 'Pause animation')
316316
this.toggleButton.setAttribute('aria-pressed', 'false')
317317

318-
const pauseIcon = queryAnimationTogglePauseIcon(this.toggleButton)
319-
const playIcon = queryAnimationTogglePlayIcon(this.toggleButton)
318+
const pauseIcon = queryAnimationTogglePauseIcon(this.toggleButton) as HTMLElement | null
319+
const playIcon = queryAnimationTogglePlayIcon(this.toggleButton) as HTMLElement | null
320320

321-
pauseIcon?.classList.remove('hidden')
322-
playIcon?.classList.add('hidden')
321+
if (pauseIcon) pauseIcon.style.display = 'flex'
322+
if (playIcon) playIcon.style.display = 'none'
323323

324324
this.toggleButton = null
325325
}

‎src/components/Animations/Terraform/index.astro‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import Icon from '@components/Icon/index.astro'
3838
<circle cx="62" cy="56" r="5" fill="#dc2626" opacity="0.7" />
3939
<circle cx="78" cy="56" r="5" fill="var(--color-spotlight)" opacity="0.7" />
4040
<circle cx="94" cy="56" r="5" fill="var(--color-success)" opacity="0.7" />
41-
<text x="300" y="61" fill="var(--color-page-base)" font-family="monospace" font-size="11" text-anchor="middle" opacity="0.6">terraform — plan &amp; apply</text>
41+
<text x="300" y="61" fill="var(--color-page-base)" font-family="monospace" font-size="12" text-anchor="middle">terraform — plan &amp; apply</text>
4242
</g>
4343

4444
<!-- ===== ROOT NODE: main.tf ===== -->
@@ -54,30 +54,30 @@ import Icon from '@components/Icon/index.astro'
5454
</g>
5555

5656
<!-- ===== PRIMARY EDGES (root → row 1) ===== -->
57-
<g id="tf-edges-primary" fill="none" stroke="var(--color-content-offset)" stroke-width="1.5">
57+
<g id="tf-edges-primary" fill="none" stroke="var(--color-page-base)" stroke-width="1.5">
5858
<path id="tf-edge-vpc" d="M270,138 C270,162 150,162 150,186" />
59-
<polygon id="tf-arrow-vpc" points="150,186 146,178 154,178" fill="var(--color-content-offset)" />
59+
<polygon id="tf-arrow-vpc" points="150,186 146,178 154,178" fill="var(--color-page-base)" />
6060
<path id="tf-edge-iam" d="M300,138 C300,158 300,166 300,186" />
61-
<polygon id="tf-arrow-iam" points="300,186 296,178 304,178" fill="var(--color-content-offset)" />
61+
<polygon id="tf-arrow-iam" points="300,186 296,178 304,178" fill="var(--color-page-base)" />
6262
<path id="tf-edge-s3" d="M330,138 C330,162 450,162 450,186" />
63-
<polygon id="tf-arrow-s3" points="450,186 446,178 454,178" fill="var(--color-content-offset)" />
63+
<polygon id="tf-arrow-s3" points="450,186 446,178 454,178" fill="var(--color-page-base)" />
6464
</g>
6565

6666
<!-- ===== CROSS-DEPENDENCY EDGES (row 1 → row 2) ===== -->
67-
<g id="tf-edges-cross" fill="none" stroke="var(--color-content-offset)" stroke-width="1" stroke-dasharray="6 3">
67+
<g id="tf-edges-cross" fill="none" stroke="var(--color-page-base)" stroke-width="1" stroke-dasharray="6 3">
6868
<path id="tf-edge-vpc-eks" d="M150,234 C150,260 210,260 210,286" />
69-
<polygon id="tf-arrow-vpc-eks" points="210,286 207,279 213,279" fill="var(--color-content-offset)" />
69+
<polygon id="tf-arrow-vpc-eks" points="210,286 207,279 213,279" fill="var(--color-page-base)" />
7070
<path id="tf-edge-iam-eks" d="M300,234 C300,260 210,264 210,286" />
71-
<polygon id="tf-arrow-iam-eks" points="210,286 207,279 213,279" fill="var(--color-content-offset)" />
71+
<polygon id="tf-arrow-iam-eks" points="210,286 207,279 213,279" fill="var(--color-page-base)" />
7272
<path id="tf-edge-vpc-rds" d="M175,234 C175,268 370,260 390,286" />
73-
<polygon id="tf-arrow-vpc-rds" points="390,286 387,279 393,279" fill="var(--color-content-offset)" />
73+
<polygon id="tf-arrow-vpc-rds" points="390,286 387,279 393,279" fill="var(--color-page-base)" />
7474
<path id="tf-edge-iam-rds" d="M320,234 C320,260 390,264 390,286" />
75-
<polygon id="tf-arrow-iam-rds" points="390,286 387,279 393,279" fill="var(--color-content-offset)" />
75+
<polygon id="tf-arrow-iam-rds" points="390,286 387,279 393,279" fill="var(--color-page-base)" />
7676
</g>
7777

7878
<!-- ===== ROW 1: VPC ===== -->
7979
<g id="tf-node-vpc" transform="translate(150,210)">
80-
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-content-offset)" stroke-width="1.5" />
80+
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
8181
<line x1="-28" y1="-8" x2="-6" y2="-8" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
8282
<line x1="-28" y1="0" x2="-6" y2="0" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
8383
<line x1="-28" y1="8" x2="-6" y2="8" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
@@ -94,7 +94,7 @@ import Icon from '@components/Icon/index.astro'
9494

9595
<!-- ===== ROW 1: IAM ===== -->
9696
<g id="tf-node-iam" transform="translate(300,210)">
97-
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-content-offset)" stroke-width="1.5" />
97+
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
9898
<path d="M-18,-14 L-28,-7 L-28,2 C-28,10 -18,16 -18,16 C-18,16 -8,10 -8,2 L-8,-7z" fill="none" stroke="var(--color-page-base)" stroke-width="1.3" stroke-linejoin="round" />
9999
<polyline points="-22,0 -18,4 -12,-4" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
100100
<text x="12" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11">IAM</text>
@@ -107,7 +107,7 @@ import Icon from '@components/Icon/index.astro'
107107

108108
<!-- ===== ROW 1: S3 ===== -->
109109
<g id="tf-node-s3" transform="translate(450,210)">
110-
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-content-offset)" stroke-width="1.5" />
110+
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
111111
<path d="M-28,-10 L-24,10 L-8,10 L-4,-10z" fill="none" stroke="var(--color-page-base)" stroke-width="1.3" stroke-linejoin="round" />
112112
<ellipse cx="-16" cy="-10" rx="12" ry="4" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
113113
<path d="M-27,0 Q-16,4 -5,0" fill="none" stroke="var(--color-page-base)" stroke-width="0.8" opacity="0.5" />
@@ -121,7 +121,7 @@ import Icon from '@components/Icon/index.astro'
121121

122122
<!-- ===== ROW 2: EKS ===== -->
123123
<g id="tf-node-eks" transform="translate(210,310)">
124-
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-content-offset)" stroke-width="1.5" />
124+
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
125125
<circle cx="-18" cy="0" r="6" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
126126
<circle cx="-18" cy="0" r="2.5" fill="var(--color-page-base)" opacity="0.5" />
127127
<line x1="-18" y1="-6" x2="-18" y2="-12" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" />
@@ -140,7 +140,7 @@ import Icon from '@components/Icon/index.astro'
140140

141141
<!-- ===== ROW 2: RDS ===== -->
142142
<g id="tf-node-rds" transform="translate(390,310)">
143-
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-content-offset)" stroke-width="1.5" />
143+
<rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
144144
<ellipse cx="-18" cy="-8" rx="10" ry="5" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
145145
<line x1="-28" y1="-8" x2="-28" y2="8" stroke="var(--color-page-base)" stroke-width="1.2" />
146146
<line x1="-8" y1="-8" x2="-8" y2="8" stroke="var(--color-page-base)" stroke-width="1.2" />
@@ -156,33 +156,33 @@ import Icon from '@components/Icon/index.astro'
156156

157157
<!-- ===== TERMINAL OUTPUT ===== -->
158158
<g id="tf-terminal" transform="translate(70,370)">
159-
<line id="tf-separator" x1="-30" y1="-8" x2="490" y2="-8" stroke="var(--color-primary-offset)" stroke-width="1" />
159+
<line id="tf-separator" x1="-30" y1="-8" x2="490" y2="-8" stroke="var(--color-page-base)" stroke-width="1" />
160160
<g id="tf-term-line-1" opacity="0">
161161
<text x="0" y="10" fill="var(--color-success)" font-family="monospace" font-size="12">$</text>
162162
<text x="14" y="10" fill="var(--color-page-base)" font-family="monospace" font-size="12">terraform init</text>
163163
</g>
164164
<g id="tf-term-line-2" opacity="0">
165-
<text x="0" y="28" fill="var(--color-content-offset)" font-family="monospace" font-size="11">Initializing provider plugins...</text>
165+
<text x="0" y="28" fill="var(--color-page-base)" font-family="monospace" font-size="11">Initializing provider plugins...</text>
166166
</g>
167167
<g id="tf-term-line-3" opacity="0">
168168
<text x="0" y="48" fill="var(--color-success)" font-family="monospace" font-size="12">$</text>
169169
<text x="14" y="48" fill="var(--color-page-base)" font-family="monospace" font-size="12">terraform plan</text>
170170
</g>
171171
<g id="tf-term-line-4" opacity="0">
172-
<text x="0" y="66" fill="var(--color-content-offset)" font-family="monospace" font-size="11">Plan: 5 to add, 0 to change, 0 to destroy.</text>
172+
<text x="0" y="66" fill="var(--color-page-base)" font-family="monospace" font-size="11">Plan: 5 to add, 0 to change, 0 to destroy.</text>
173173
</g>
174174
<g id="tf-term-line-5" opacity="0">
175175
<text x="0" y="86" fill="var(--color-success)" font-family="monospace" font-size="12">$</text>
176176
<text x="14" y="86" fill="var(--color-page-base)" font-family="monospace" font-size="12">terraform apply -auto-approve</text>
177177
</g>
178178
<g id="tf-term-line-6" opacity="0">
179-
<text x="0" y="104" fill="var(--color-content-offset)" font-family="monospace" font-size="11">aws_vpc.main: Creating...</text>
179+
<text x="0" y="104" fill="var(--color-page-base)" font-family="monospace" font-size="11">aws_vpc.main: Creating...</text>
180180
</g>
181181
<g id="tf-term-line-7" opacity="0">
182-
<text x="0" y="120" fill="var(--color-content-offset)" font-family="monospace" font-size="11">aws_eks_cluster.platform: Creating...</text>
182+
<text x="0" y="120" fill="var(--color-page-base)" font-family="monospace" font-size="11">aws_eks_cluster.platform: Creating...</text>
183183
</g>
184184
<g id="tf-term-line-8" opacity="0">
185-
<text x="0" y="136" fill="var(--color-content-offset)" font-family="monospace" font-size="11">aws_db_instance.primary: Creating...</text>
185+
<text x="0" y="136" fill="var(--color-page-base)" font-family="monospace" font-size="11">aws_db_instance.primary: Creating...</text>
186186
</g>
187187
<g id="tf-term-complete" opacity="0">
188188
<text x="0" y="162" fill="var(--color-success)" font-family="monospace" font-size="13" font-weight="bold">Apply complete! Resources: 5 added, 0 changed, 0 destroyed.</text>
@@ -206,7 +206,8 @@ import Icon from '@components/Icon/index.astro'
206206
</span>
207207
<span
208208
data-animation-icon="play"
209-
class="hidden h-12 w-12 items-center justify-center bg-transparent"
209+
class="flex h-12 w-12 items-center justify-center bg-transparent"
210+
style="display: none;"
210211
>
211212
<Icon name="play" size={20} variant="custom" class="text-primary-inverse fill-primary-inverse stroke-primary-inverse" />
212213
</span>

0 commit comments

Comments
 (0)