From 8f91e4ecb98c3f1ef8e18bf79a560404e5f3c42e Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Wed, 28 Feb 2024 16:53:54 +0000
Subject: [PATCH 1/4] Adjust index page fonts

---
 components/front-page/GettingStartedSection.tsx | 4 +---
 components/front-page/News.tsx                  | 6 +++---
 components/front-page/PopularCategories.tsx     | 2 +-
 components/markets/MarketScroll.tsx             | 6 ++++--
 styles/index.css                                | 4 ++--
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/front-page/GettingStartedSection.tsx b/components/front-page/GettingStartedSection.tsx
index c6939c24f..ebd992be9 100644
--- a/components/front-page/GettingStartedSection.tsx
+++ b/components/front-page/GettingStartedSection.tsx
@@ -6,9 +6,7 @@ const GettingStartedSection = () => {
   return (
     <>
       <div className="w-full" data-testid="learnSection">
-        <h2 className="mb-6 text-center sm:col-span-3 sm:text-start">
-          Getting Started
-        </h2>
+        <h2 className="mb-6 sm:col-span-3">Getting Started</h2>
         <div className="flex flex-col gap-4 md:flex-row">
           <div className="flex-1">
             <CreateAccountActionableCard animationVariant="right" />
diff --git a/components/front-page/News.tsx b/components/front-page/News.tsx
index 45c5a1c61..847ca984c 100644
--- a/components/front-page/News.tsx
+++ b/components/front-page/News.tsx
@@ -12,7 +12,7 @@ export const NewsSection = ({
 }) => {
   return (
     <div className="mb-12">
-      <h2 className="mb-6 text-center sm:col-span-2 sm:text-start">News</h2>
+      <h2 className="mb-6 sm:col-span-2">News</h2>
       <div className="flex flex-col gap-8 md:flex-row md:gap-4">
         {news.map((news, index) => {
           const link = news.link?.isMarket
@@ -44,8 +44,8 @@ export const NewsSection = ({
                   }}
                 />
               </div>
-              <h4 className="mb-1 font-semibold">{news.title}</h4>
-              <h5 className="text-base font-light">{news.subtitle}</h5>
+              <div className="mb-1 font-semibold">{news.title}</div>
+              <div className="text-sm font-light">{news.subtitle}</div>
             </Link>
           );
         })}
diff --git a/components/front-page/PopularCategories.tsx b/components/front-page/PopularCategories.tsx
index 006e934d3..2e00e5f8f 100644
--- a/components/front-page/PopularCategories.tsx
+++ b/components/front-page/PopularCategories.tsx
@@ -79,7 +79,7 @@ const PopularCategories: FC<{
 
   return (
     <div className="flex flex-col" data-testid="popularCategories">
-      <h2 className="mb-7 text-center sm:text-start">Popular Categories</h2>
+      <h2 className="mb-7">Popular Categories</h2>
       <div className="no-scroll-bar flex gap-4 overflow-x-auto md:overflow-x-visible">
         {topCategories.map((category, index) => (
           <Category
diff --git a/components/markets/MarketScroll.tsx b/components/markets/MarketScroll.tsx
index 36346fa4f..6dbb5409c 100644
--- a/components/markets/MarketScroll.tsx
+++ b/components/markets/MarketScroll.tsx
@@ -81,9 +81,11 @@ const MarketScroll = ({
   return (
     <div
       ref={containerRef}
-      className="grid grid-cols-1 gap-y-7 sm:grid-cols-2 sm:gap-7 lg:grid-cols-3"
+      className="grid grid-cols-1 gap-y-2 sm:grid-cols-2 sm:gap-7 lg:grid-cols-3"
     >
-      <h2 className="text-center sm:col-span-2 sm:text-start">{title}</h2>
+      <div className="flex items-center">
+        <h2 className="text-center sm:col-span-2 sm:text-start">{title}</h2>
+      </div>
       <HorizontalScroll
         classes="order-2 sm:order-none"
         link={link}
diff --git a/styles/index.css b/styles/index.css
index 005753616..4f4401699 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -44,7 +44,7 @@ h1 {
   @apply text-2.5xl font-bold text-fog-of-war;
 }
 h2 {
-  @apply text-2.5xl font-bold text-fog-of-war;
+  @apply text-xl font-bold text-fog-of-war;
 }
 h3 {
   @apply text-xl font-semibold text-fog-of-war;
@@ -821,4 +821,4 @@ input:-webkit-autofill {
   min-width: 0;
   padding-left: var(--slide-spacing);
   position: relative;
-}
\ No newline at end of file
+}

From c2759bcbe09774db9fc8c79043683cd6543c2eab Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 29 Feb 2024 09:43:38 +0000
Subject: [PATCH 2/4] handle images that aren't square

---
 components/front-page/LatestTradesCompact.tsx    | 6 +++++-
 components/front-page/TrendingMarketsCompact.tsx | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/front-page/LatestTradesCompact.tsx b/components/front-page/LatestTradesCompact.tsx
index 177f0ecba..6a11f9f71 100644
--- a/components/front-page/LatestTradesCompact.tsx
+++ b/components/front-page/LatestTradesCompact.tsx
@@ -8,7 +8,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 const LatestTradesCompact = () => {
-  const { data: trades } = useLatestTrades(4);
+  const { data: trades } = useLatestTrades(100);
 
   return (
     <div>
@@ -40,6 +40,10 @@ const LatestTradeRow = ({ trade }: { trade: TradeItem }) => {
           height={30}
           className="overflow-hidden rounded-md"
           sizes={"30px"}
+          style={{
+            objectFit: "cover",
+            objectPosition: "50% 50%",
+          }}
         />
       </div>
       <div className="ml-4 flex flex-col">
diff --git a/components/front-page/TrendingMarketsCompact.tsx b/components/front-page/TrendingMarketsCompact.tsx
index 7747ad848..e81c9633d 100644
--- a/components/front-page/TrendingMarketsCompact.tsx
+++ b/components/front-page/TrendingMarketsCompact.tsx
@@ -56,6 +56,10 @@ const TrendingMarketRow = ({ market }: { market: FullMarketFragment }) => {
           height={45}
           className="overflow-hidden rounded-md"
           sizes={"45px"}
+          style={{
+            objectFit: "cover",
+            objectPosition: "50% 50%",
+          }}
         />
       </div>
       <div className="flex flex-col justify-center">

From 7883d81c9b2f40938b930417f226dd407e1b3633 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 29 Feb 2024 10:11:19 +0000
Subject: [PATCH 3/4] revert

---
 components/front-page/LatestTradesCompact.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/front-page/LatestTradesCompact.tsx b/components/front-page/LatestTradesCompact.tsx
index 6a11f9f71..10f0e09ea 100644
--- a/components/front-page/LatestTradesCompact.tsx
+++ b/components/front-page/LatestTradesCompact.tsx
@@ -8,7 +8,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 const LatestTradesCompact = () => {
-  const { data: trades } = useLatestTrades(100);
+  const { data: trades } = useLatestTrades(4);
 
   return (
     <div>

From 66ceb45b81d6fb41c3bfde1bf5de4525d38f8bf3 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 1 Mar 2024 10:48:14 +0000
Subject: [PATCH 4/4] fix layout

---
 components/markets/MarketScroll.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/markets/MarketScroll.tsx b/components/markets/MarketScroll.tsx
index 6dbb5409c..08f0c55b8 100644
--- a/components/markets/MarketScroll.tsx
+++ b/components/markets/MarketScroll.tsx
@@ -83,8 +83,8 @@ const MarketScroll = ({
       ref={containerRef}
       className="grid grid-cols-1 gap-y-2 sm:grid-cols-2 sm:gap-7 lg:grid-cols-3"
     >
-      <div className="flex items-center">
-        <h2 className="text-center sm:col-span-2 sm:text-start">{title}</h2>
+      <div className="flex items-center sm:col-span-2">
+        <h2 className="text-center sm:text-start">{title}</h2>
       </div>
       <HorizontalScroll
         classes="order-2 sm:order-none"