Merge pull request #2413 from oasisprotocol/kaja/rofl-section-homepage

ROFL section on homepage

Author: kaja-osojnik

.changelog/2413.trivial.md

@@ -0,0 +1 @@
+Move Rofl section below the Ecosystem and add 'View all' link to it

src/app/pages/HomePage/RoflAppsCard.tsx

@@ -5,6 +5,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@oasisprotocol/ui-libr
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { RouteUtils } from '../../utils/route-utils'
 import { Link as RouterLink } from 'react-router-dom'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 
 export const RoflAppsCard: FC = () => {
   const { t } = useTranslation()
@@ -13,9 +15,10 @@ export const RoflAppsCard: FC = () => {
     <Card variant="layout">
       <CardHeader>
         <CardTitle>
-          <div>
-            <RouterLink to={RouteUtils.getRoflAppsRoute('mainnet')}>{t('rofl.listTitle')}</RouterLink>
-          </div>
+          <Typography variant="h3">{t('rofl.listTitle')}</Typography>
+          <Link asChild textColor="primary" className="font-medium px-4">
+            <RouterLink to={RouteUtils.getRoflAppsRoute('mainnet')}>{t('common.viewAll')}</RouterLink>
+          </Link>
         </CardTitle>
       </CardHeader>
       <CardContent>

src/app/pages/HomePage/index.tsx

@@ -25,6 +25,7 @@ export const HomePage: FC = () => {
       <div className="flex flex-col border-8 md:border-[15px] px-0 md:px-[4%] pt-4 md:pt-7 md:border-t-0 border-t-0 border-theme-layout-accent">
         <HomeSearch />
         <Ecosystem />
+        <RoflAppsCard />
         <div className="flex gap-6 flex-col md:flex-row">
           <RecentBlocksCard />
           <TotalTransactions
@@ -37,7 +38,6 @@ export const HomePage: FC = () => {
             }
           />
         </div>
-        <RoflAppsCard />
         <Social />
       </div>
       <Footer />