Fix sources feed styling

IFRCGo · Apr 23, 2024 · add27be · add27be
1 parent b848222
commit add27be
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 40 deletions.
diff --git a/src/views/SourcesList/SourceCard/index.tsx b/src/views/SourcesList/SourceCard/index.tsx
@@ -8,6 +8,7 @@ import { SourceFeedsQuery } from '#generated/types/graphql';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
+import { Link } from 'react-router-dom';
 
 type SourceFeed = NonNullable<NonNullable<SourceFeedsQuery['public']>['feeds']>['items'][number];
 
@@ -23,22 +24,29 @@ function SourceCard(props: Props) {
     const strings = useTranslation(i18n);
 
     return (
-        <Container
+        <Link
             className={styles.sourceCard}
-            childrenContainerClassName={styles.sourceDetail}
+            to={data?.url}
         >
-            <img
-                className={styles.figure}
-                src={data?.languages?.map((image) => image.logo)}
-                alt={strings.sourceCardAlt}
-            />
-            <Header
-                heading={data?.languages?.map((lang) => lang.name)}
-                headingLevel={5}
-                headingDescription={data?.languages?.map((name) => name.language)}
-                headingDescriptionContainerClassName={styles.languageButton}
-            />
-        </Container>
+            <Container
+                childrenContainerClassName={styles.sourceDetail}
+            >
+                <img
+                    className={styles.figure}
+                    src={data?.languages?.map((image) => image.logo)?.[0] || ''}
+                    alt={strings.sourceCardAlt}
+                />
+                <div className={styles.title}>
+                    <Header
+                        heading={data?.languages?.map((lang) => lang.name)}
+                        headingLevel={6}
+                    />
+                    <div className={styles.language}>
+                        {data?.languages?.map((name) => name.language)}
+                    </div>
+                </div>
+            </Container>
+        </Link>
     );
 }
 export default SourceCard;
diff --git a/src/views/SourcesList/SourceCard/styles.module.css b/src/views/SourcesList/SourceCard/styles.module.css
@@ -1,28 +1,33 @@
 .source-card {
-   display: flex;
-   gap:var(--go-ui-spacing-lg);
-}
-
-.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-md);
+    gap: var(--go-ui-spacing-md);
+    text-decoration: none;
 
-    .language-button {
-        align-items: flex-end;
-        border-radius: var(--go-ui-border-radius-2xl);
-        background-color: var(--go-ui-color-primary-red);
-        padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-lg);
-        width: fit-content;
-        text-decoration: none;
-        color: var(--go-ui-color-white);
-        font-weight: var(--go-ui-font-weight-medium);
-    }
+    .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 {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-md);
+            justify-content: space-between;
+            color: var(--go-ui-color-text);
+        }
+
+        .language {
+            width: fit-content;
+            text-decoration: none;
+            color: var(--go-ui-color-gray-60);
+            font-weight: var(--go-ui-font-weight-medium);
+        }
 
-    .figure {
-        width: 10rem;
-        height: 4rem;
+        .figure {
+            width: 10rem;
+            height: 4rem;
+        }
     }
-}
+}
diff --git a/src/views/SourcesList/index.tsx b/src/views/SourcesList/index.tsx
@@ -40,7 +40,9 @@ query SourceFeeds($pagination: OffsetPaginationInput) {
             id
           }
           id
+          url
         }
+        count
       }
     }
 }
@@ -89,7 +91,7 @@ export function Component() {
                 footerActions={(
                     <Pager
                         activePage={activePage}
-                        itemsCount={sourceFeedsResponse?.public?.feeds?.limit ?? MAX_ITEM_PER_PAGE}
+                        itemsCount={sourceFeedsResponse?.public?.feeds?.count ?? MAX_ITEM_PER_PAGE}
                         maxItemsPerPage={MAX_ITEM_PER_PAGE}
                         onActivePageChange={setActivePage}
                     />

diff --git a/src/views/SourcesList/style.module.css b/src/views/SourcesList/style.module.css
@@ -1,5 +1,5 @@
 .sources-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
-    grid-gap: var(--go-ui-spacing-md);
+    grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
+    grid-gap: var(--go-ui-spacing-lg);
 }