Fix backgroundImage and styling

IFRCGo · Oct 15, 2024 · feccc5a · feccc5a
1 parent fe735ce
commit feccc5a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/app/src/views/FourHundredFour/background.svg → ...ts/content/fourhundredfour_background.svg b/app/src/views/FourHundredFour/background.svg → ...ts/content/fourhundredfour_background.svg
diff --git a/app/src/views/FourHundredFour/index.tsx b/app/src/views/FourHundredFour/index.tsx
@@ -1,6 +1,7 @@
 import { Heading } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
+import backgroundImage from '#assets/content/fourhundredfour_background.svg';
 import Link from '#components/Link';
 import Page from '#components/Page';
 
@@ -17,6 +18,13 @@ export function Component() {
             title={strings.uhohPageNotFoundTitle}
             mainSectionContainerClassName={styles.mainSectionContainer}
             mainSectionClassName={styles.main}
+            beforeHeaderContent={(
+                <img
+                    className={styles.backgroundLayer}
+                    src={backgroundImage}
+                    alt=""
+                />
+            )}
         >
             <div className={styles.topSection}>
                 <div className={styles.fourHundredFourHeading}>

diff --git a/app/src/views/FourHundredFour/styles.module.css b/app/src/views/FourHundredFour/styles.module.css
@@ -2,21 +2,17 @@
     display: flex;
     flex-direction: column;
 
-
     .main-section-container {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        background-image: url('./background.svg'); 
     }
-
     .main {
         display: flex;
         align-items: center;
         flex-direction: column;
         flex-grow: 1;
         gap: var(--go-ui-spacing-2xl);
-
 
         .top-section {
             display: flex;
@@ -30,14 +26,13 @@
                 background: repeating-linear-gradient(
                     -50deg,
                     red 10px,
-                    transparent ,
+                    transparent,
                     transparent 20px
                 );
-                -webkit-background-clip: text;
-                -moz-background-clip: text;
-                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                color: transparent;
                 font-size: 8rem;
-                font-weight: bold;
+                font-weight: var(--go-ui-font-weight-bold);
             }
 
             .heading {
@@ -62,4 +57,9 @@
             gap: var(--go-ui-spacing-xs);
         }
     }
-}
+    .background-layer{
+        position: absolute;
+        top: 0;
+        opacity: 0.1;
+    }
+}