From 894d00ca063da894613645d2d4320fdd70a0720d Mon Sep 17 00:00:00 2001
From: subinasr <ssr.subina@gmail.com>
Date: Wed, 9 Oct 2024 12:10:21 +0545
Subject: [PATCH] Add variables for gradients

---
 .changeset/fluffy-months-film.md                |  5 +++++
 app/src/views/FourHundredFour/styles.module.css | 16 +++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fluffy-months-film.md

diff --git a/.changeset/fluffy-months-film.md b/.changeset/fluffy-months-film.md
new file mode 100644
index 000000000..5483e4156
--- /dev/null
+++ b/.changeset/fluffy-months-film.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Add a new 404 page
diff --git a/app/src/views/FourHundredFour/styles.module.css b/app/src/views/FourHundredFour/styles.module.css
index 973417412..b045b6809 100644
--- a/app/src/views/FourHundredFour/styles.module.css
+++ b/app/src/views/FourHundredFour/styles.module.css
@@ -1,6 +1,13 @@
 .four-hundred-four {
     display: flex;
     flex-direction: column;
+    /* FIXME: To be moved to go-ui */
+    --four-hundred-four-heading-gradient: repeating-linear-gradient(
+        -50deg,
+        red 10px,
+        transparent,
+        transparent 20px
+    )
 
     .main-section-container {
         display: flex;
@@ -23,12 +30,7 @@
             gap: var(--go-ui-spacing-xs);
 
             .four-hundred-four-heading {
-                background: repeating-linear-gradient(
-                    -50deg,
-                    red 10px,
-                    transparent,
-                    transparent 20px
-                );
+                background: var(--four-hundred-four-heading-gradient);
                 background-clip: text;
                 color: transparent;
                 font-size: 8rem;
@@ -62,4 +64,4 @@
         top: 0;
         opacity: 0.1;
     }
-}
\ No newline at end of file
+}