add hero background image back

quran · Mar 1, 2024 · 5db0997 · 5db0997
1 parent 5d02ef5
commit 5db0997
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 8 deletions.
diff --git a/public/icons/learning-plan.svg b/public/icons/learning-plan.svg
diff --git a/src/components/HomePage/HomePageHero.tsx b/src/components/HomePage/HomePageHero.tsx
@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic';
+import Head from 'next/head';
 
 import styles from './HomePageHero.module.scss';
 import QuickLinks from './QuickLinks';
@@ -10,6 +11,10 @@ const PlayRadioButton = dynamic(() => import('./PlayRadioButton'));
 const HomePageHero = () => {
   return (
     <div className={styles.outerContainer}>
+      <Head>
+        <link rel="preload" as="image" href="/images/background.jpg" />
+      </Head>
+      <div className={styles.backgroundImage} />
       <div data-theme="light">
         <PlayRadioButton />
         <div className={styles.innerContainer}>

diff --git a/src/components/HomePage/PlayRadioButton.tsx b/src/components/HomePage/PlayRadioButton.tsx
@@ -10,7 +10,7 @@ import { StationType } from '../Radio/types';
 import styles from './PlayRadioButton.module.scss';
 import RadioInformation from './RadioInformation';
 
-import Button, { ButtonType, ButtonSize } from '@/dls/Button/Button';
+import Button, { ButtonType, ButtonSize, ButtonVariant } from '@/dls/Button/Button';
 import Spinner from '@/dls/Spinner/Spinner';
 import PauseIcon from '@/icons/pause.svg';
 import PlayIcon from '@/icons/play-arrow.svg';
@@ -62,7 +62,8 @@ const PlayRadioButton = () => {
     <div className={styles.container}>
       <Button
         href={getCoursesNavigationUrl()}
-        type={ButtonType.Success}
+        type={ButtonType.Secondary}
+        variant={ButtonVariant.Outlined}
         size={ButtonSize.Small}
         onClick={onCoursesClicked}
         className={styles.ctaButton}
@@ -76,7 +77,7 @@ const PlayRadioButton = () => {
             onClick={onPauseClicked}
             type={ButtonType.Success}
             size={ButtonSize.Small}
-            className={styles.ctaButton}
+            className={styles.playPauseButton}
           >
             {t('pause-radio')}
           </Button>
@@ -87,7 +88,7 @@ const PlayRadioButton = () => {
             shouldFlipOnRTL={false}
             type={ButtonType.Success}
             size={ButtonSize.Small}
-            className={styles.ctaButton}
+            className={styles.playPauseButton}
           >
             {t('play-radio')}
           </Button>

diff --git a/src/components/HomePage/QuickLinks/QuickLink.tsx b/src/components/HomePage/QuickLinks/QuickLink.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Button, { ButtonShape, ButtonSize, ButtonType } from '@/dls/Button/Button';
+import Button, { ButtonShape, ButtonSize, ButtonType, ButtonVariant } from '@/dls/Button/Button';
 import { logButtonClick } from '@/utils/eventLogger';
 
 interface Props {
@@ -16,7 +16,8 @@ const QuickLink: React.FC<Props> = ({ text, slug, className, logKey, isExternalL
     size={ButtonSize.Small}
     className={className}
     href={isExternalLink ? slug : `/${slug}`}
-    type={ButtonType.Success}
+    type={ButtonType.Secondary}
+    variant={ButtonVariant.Compact}
     shape={ButtonShape.Pill}
     onClick={() => {
       logButtonClick(`quick_link_${logKey}`);

diff --git a/src/components/HomePage/QuickLinks/QuickLinks.module.scss b/src/components/HomePage/QuickLinks/QuickLinks.module.scss
@@ -26,5 +26,6 @@ $link-shadow: 0px 3px 11px 1px rgb(0 0 0 / 3%);
   margin-block-end: var(--spacing-xxsmall);
   &:hover {
     box-shadow: var(--shadow-large);
+    color: var(--color-text-inverse);
   }
 }
diff --git a/src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/index.tsx b/src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/index.tsx
@@ -10,7 +10,7 @@ import QuranReadingGoals from '@/components/HomePage/QuranGrowthJourneySection/C
 import Collapsible, { CollapsibleDirection } from '@/dls/Collapsible/Collapsible';
 import ChevronDownIcon from '@/icons/chevron-down.svg';
 import GoalIcon from '@/icons/goal-1.svg';
-import ReaderIcon from '@/icons/reader.svg';
+import ReaderIcon from '@/icons/learning-plan.svg';
 
 export enum CollapsibleType {
   QuranReadingGoalsType = 'quran_reading_goals',

diff --git a/src/components/Navbar/NavbarBody/ProfileAvatarButton.tsx b/src/components/Navbar/NavbarBody/ProfileAvatarButton.tsx
@@ -9,9 +9,9 @@ import Button, { ButtonShape, ButtonVariant } from '@/dls/Button/Button';
 import PopoverMenu from '@/dls/PopoverMenu/PopoverMenu';
 import ClockIcon from '@/icons/clock.svg';
 import ArrowIcon from '@/icons/east.svg';
+import ReaderIcon from '@/icons/learning-plan.svg';
 import LogoutIcon from '@/icons/logout.svg';
 import IconPerson from '@/icons/person.svg';
-import ReaderIcon from '@/icons/reader.svg';
 import TickIcon from '@/icons/tick.svg';
 import { logoutUser } from '@/utils/auth/api';
 import { isLoggedIn } from '@/utils/auth/login';