feat: add reset form button

astro.config.mjs

@@ -1,10 +1,10 @@
-import { defineConfig } from "astro/config";
-import mdx from "@astrojs/mdx";
-import sitemap from "@astrojs/sitemap";
-import react from "@astrojs/react";
-import partytown from "@astrojs/partytown";
-import cloudflare from "@astrojs/cloudflare";
-import million from "million/compiler";
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+import react from '@astrojs/react';
+import partytown from '@astrojs/partytown';
+import cloudflare from '@astrojs/cloudflare';
+import million from 'million/compiler';
 
 export default defineConfig({
 	site: "https://biancafiore.me",

src/pages/index.astro

@@ -6,7 +6,7 @@ import MyWork from "@components/organisms/myWork/MyWork.astro";
 import LatestArticles from "@components/organisms/latestArticles/LatestArticles.astro";
 
 // todo (current): related articles
-// todo: control errors in contact form
+// todo: control errors in request
 // todo: responsive
 // todo: add resume (PDF) in about?
 // todo: dynamic content
@@ -29,6 +29,7 @@ import LatestArticles from "@components/organisms/latestArticles/LatestArticles.
 // todo: replace arrows and icons for a finest ones
 // todo: refer logo (original + finet)
 // todo: add vitest
+// todo: check tags semantics (buttons clickable, etc)
 // todo: add small transitions & animations
 //        - home articles: show tags staggered in hover
 //        - CTAs with arrow: animate arrow
@@ -52,7 +53,7 @@ import LatestArticles from "@components/organisms/latestArticles/LatestArticles.
 // todo: reveal on scroll (Agafar idees gsap)
 // todo: fer que el globe es mogui segons l'scroll actual
 // todo: check namings
-// todo: add comments
+// todo: add comments section
 // todo: svg scroll offset driven animation in background
 // todo: remove ReactScripts and use event listeners in files
 // todo: https://codepen.io/jh3y/pen/GReZEwK

src/ui/components/atoms/spinner/spinner.css

@@ -1,9 +1,11 @@
 @layer spinner {
     .spinner {
+        --line-width: 3px;
+        --cover-width: 40px;
         animation: spinner 0.75s infinite ease-in-out;
-        background: linear-gradient(var(--neutral-main) 0 0) left -40px top 0/40px 100% no-repeat var(--white);
+        background: linear-gradient(var(--neutral-main) 0 0) left calc(-1 * var(--cover-width)) top 0/var(--cover-width) 100% no-repeat var(--white);
         height: 20px;
-        -webkit-mask: conic-gradient(from 90deg at 3px 3px, #0000 25%, #000 0) 0 0/calc((100% - 3px) / 3) calc(100% - 3px);
+        -webkit-mask: conic-gradient(from 90deg at var(--line-width) var(--line-width), transparent 25%, var(--neutral-main) 0) 0 0/calc((100% - var(--line-width)) / 3) calc(100% - var(--line-width));
         width: 75px;
     }
 }

src/ui/components/atoms/worldGlobe/utils/renderPin/renderPin.ts

@@ -1,13 +1,13 @@
 import { createRoot } from "react-dom/client";
 import { Pin as pin } from "@assets/images/svg-components/pin";
-import type { ReactGlobePoint } from "@shared/utils/refineCities";
+import type { ReactGlobePoint } from "@components/atoms/worldGlobe/utils/refineCities";
 
 interface RenderPinParams {
 	markerData: ReactGlobePoint;
 }
 
 export function renderPin({ markerData }: RenderPinParams): HTMLElement {
-	const markerWrapper = document.createElement("div");
+	const markerWrapper = document.createElement("button");
 	markerWrapper.classList.add(`marker__wrapper`);
 	markerWrapper.classList.add(`--is-${markerData.label.toLowerCase()}`);
 	const marker = document.createElement("div");

src/ui/components/atoms/worldGlobe/world-globe.css

@@ -1,59 +1,58 @@
 @layer about.world-globe {
-  canvas {
-    cursor: grab;
-  }
-
-  .world-globe__wrapper {
-    height: fit-content;
-    position: sticky;
-    top: calc(var(--header-height) + 0.5rem);
-  }
-
-  .marker__wrapper {
-    color: var(--primary-dark-1);
-    cursor: pointer;
-    pointer-events: auto;
-    width: 1.5rem;
-
-    svg circle {
-      fill: var(--primary-light-2);
+    canvas {
+        cursor: grab;
     }
 
-    &.--is-sydney {
-      svg {
-        rotate: 0.5turn;
-      }
+    .world-globe__wrapper {
+        height: fit-content;
+        position: sticky;
+        top: calc(var(--header-height) + 0.5rem);
     }
-  }
 
-  .world-globe__controls {
-    gap: 0 3rem;
-  }
+    .marker__wrapper {
+        color: var(--primary-dark-1);
+        cursor: pointer;
+        pointer-events: auto;
+        width: 1.5rem;
+
+        svg circle {
+            fill: var(--primary-light-2);
+        }
+
+        &.--is-sydney {
+            svg {
+                rotate: 0.5turn;
+            }
+        }
+    }
+
+    .world-globe__controls {
+        gap: 0 3rem;
+    }
 
-  .world-globe__controls__direction-wrapper {
-    gap: 0 1rem;
+    .world-globe__controls__direction-wrapper {
+        gap: 0 1rem;
 
-    img {
-      height: 3rem;
-      width: 3rem;
+        img {
+            height: 3rem;
+            width: 3rem;
+        }
     }
-  }
 
-  .world-globe__controls__zoom-wrapper {
-    gap: 0 1rem;
+    .world-globe__controls__zoom-wrapper {
+        gap: 0 1rem;
 
-    img {
-      height: 2rem;
-      width: 2rem;
+        img {
+            height: 2rem;
+            width: 2rem;
+        }
     }
-  }
 
-  .world-globe__controls__move {
-    cursor: pointer;
-    gap: 0 1rem;
+    .world-globe__controls__move {
+        gap: 0 1rem;
 
-    &.--right {
-      rotate: 0.5turn;
+        &.--right {
+            rotate: 0.5turn;
+        }
     }
-  }
 }

src/ui/components/molecules/aboutLatestArticlesSlider/components/aboutLatestArticlesSliderNavigation/about-latest-articles-slider-navigation.css

@@ -1,20 +1,18 @@
 @layer about.latest-articles.slider.navigation {
-  .about__latest-articles__slider__navigation {
-    gap: 0 1rem;
-    position: absolute;
-    right: 0;
-    z-index: 10;
+    .about__latest-articles__slider__navigation {
+        gap: 0 1rem;
+        position: absolute;
+        right: 0;
+        z-index: 10;
 
-    img {
-      width: 3rem;
+        img {
+            width: 3rem;
+        }
     }
-  }
 
-  .about__latest-articles__slider__navigation__button {
-    cursor: pointer;
-
-    &.--right {
-      rotate: 0.5turn;
+    .about__latest-articles__slider__navigation__button {
+        &.--right {
+            rotate: 0.5turn;
+        }
     }
-  }
 }

src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonials-navigation.css

@@ -1,20 +1,18 @@
 @layer testimonials.navigation {
-  .testimonials__navigation {
-    gap: 0 1rem;
-    position: absolute;
-    right: 0;
-    z-index: 10;
+    .testimonials__navigation {
+        gap: 0 1rem;
+        position: absolute;
+        right: 0;
+        z-index: 10;
 
-    img {
-      width: 3rem;
+        img {
+            width: 3rem;
+        }
     }
-  }
 
-  .testimonials__navigation__button {
-    cursor: pointer;
-
-    &.--right {
-      rotate: 0.5turn;
+    .testimonials__navigation__button {
+        &.--right {
+            rotate: 0.5turn;
+        }
     }
-  }
 }

src/ui/components/organisms/contactForm/ContactForm.tsx

@@ -62,6 +62,11 @@ export const ContactForm = () => {
 		[executeRecaptcha],
 	);
 
+	const resetForm = useCallback(
+		() => setFormStatus(FormStatus.INITIAL),
+		[formStatus],
+	);
+
 	const submitForm = useCallback(
 		async (data: FormData, event: FormEvent<HTMLFormElement>) => {
 			event.preventDefault();
@@ -169,6 +174,7 @@ export const ContactForm = () => {
 					<button
 						ref={submitRef}
 						className="contact-form__submit plane clickable"
+						disabled={formStatus === FormStatus.LOADING}
 						type="submit"
 					>
 						<span>
@@ -184,9 +190,17 @@ export const ContactForm = () => {
 					</button>
 				</form>
 			) : (
-				<h4 className="contact-form__success-message">
-					Form sent correctly! Will be in touch soon
-				</h4>
+				<div className="contact-form__success-message flex column-wrap">
+					<h4>Form sent correctly! Will be in touch soon</h4>
+					<p>Did you forgot something to say?</p>
+					<button
+						type="button"
+						className="contact-form__success__reset-button clickable"
+						onClick={resetForm}
+					>
+						Make a new inquiry
+					</button>
+				</div>
 			)}
 		</>
 	);