Improve styling of sources page

src/views/Home/AlertsView/index.tsx

@@ -15,6 +15,7 @@ import {
     CountryListQuery,
     CountryListQueryVariables,
 } from '#generated/types/graphql';
+import routes from '#routes';
 
 import useAlertFilters from '../useAlertFilters';
 import AlertsAside from './AlertsAside';
@@ -78,7 +79,7 @@ function AlertsView(props: Props) {
                 // TODO: Add sources link
                 <Link
                     className={styles.sources}
-                    to="/"
+                    to={routes.viewAllSource.absolutePath}
                 >
                     {strings.mapViewAllSources}
                 </Link>

src/views/SourcesList/SourceCard/index.tsx

@@ -39,7 +39,7 @@ function SourceCard(props: Props) {
                 <div className={styles.title}>
                     <Header
                         heading={data?.languages?.map((lang) => lang.name)}
-                        headingLevel={6}
+                        headingLevel={5}
                     />
                     <div className={styles.language}>
                         {data?.languages?.map((name) => name.language)}

src/views/SourcesList/SourceCard/styles.module.css

@@ -2,12 +2,18 @@
     display: flex;
     gap: var(--go-ui-spacing-md);
     text-decoration: none;
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+    transition: box-shadow var(--go-ui-duration-transition-slow) ease-in-out;
+
+    &:hover {
+        box-shadow: var(--go-ui-box-shadow-xl);
+    }
 
     .source-detail {
         display: flex;
         gap: var(--go-ui-spacing-lg);
         border-radius: var(--go-ui-border-radius-lg);
-        box-shadow: var(--go-ui-box-shadow-md);
         padding: var(--go-ui-spacing-lg);
 
         .title {
@@ -30,4 +36,4 @@
             height: 4rem;
         }
     }
-}
+}

src/views/SourcesList/index.tsx

@@ -9,11 +9,14 @@ import {
 } from '@apollo/client';
 import {
     Container,
-    List,
     Pager,
+    RawList,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import { isDefined } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import Page from '#components/Page';
 import {
@@ -24,7 +27,6 @@ import {
 import SourceCard from './SourceCard';
 
 import i18n from './i18n.json';
-import styles from './style.module.css';
 
 const SOURCE_FEEDS = gql`
 query SourceFeeds($pagination: OffsetPaginationInput) {
@@ -74,20 +76,19 @@ export function Component() {
         error: sourceFeedsError,
     } = useQuery<SourceFeedsQuery, SourceFeedsQueryVariables>(
         SOURCE_FEEDS,
-        {
-            variables,
-        },
+        { variables },
     );
 
     const rendererParams = useCallback((_: string, value: SourceFeed) => ({
         data: value,
     }), []);
 
     return (
-        <Page>
+        <Page
+            title="AlertHub - Sources"
+            heading={strings.sourceFeedsTitle}
+        >
             <Container
-                heading={strings.sourceFeedsTitle}
-                withHeaderBorder
                 footerActions={(
                     <Pager
                         activePage={activePage}
@@ -96,16 +97,20 @@ export function Component() {
                         onActivePageChange={setActivePage}
                     />
                 )}
+                contentViewType="grid"
+                numPreferredGridContentColumns={3}
+                pending={sourceFeedsLoading}
+                errored={isDefined(sourceFeedsError)}
+                errorMessage={sourceFeedsError?.message}
+                empty={isNotDefined(sourceFeedsResponse)
+                    || sourceFeedsResponse.public.feeds.items.length === 0}
+                spacing="comfortable"
             >
-                <List
-                    className={styles.sourcesList}
+                <RawList
                     data={sourceFeedsResponse?.public.feeds.items}
                     renderer={SourceCard}
                     rendererParams={rendererParams}
                     keySelector={keySelector}
-                    pending={sourceFeedsLoading}
-                    filtered={false}
-                    errored={isDefined(sourceFeedsError)}
                 />
             </Container>
         </Page>