Merge pull request #2332 from zeitgeistpm/tr-index-fonts-adjustments

Adjust index page fonts
zeitgeistpm · Mar 1, 2024 · 8a8e9f3 · 8a8e9f3
2 parents 20b5bb1 + 66ceb45
commit 8a8e9f3
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 11 deletions.
diff --git 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/LatestTradesCompact.tsx b/components/front-page/LatestTradesCompact.tsx
@@ -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/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
@@ -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/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">

diff --git 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 sm:col-span-2">
+        <h2 className="text-center 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
@@ -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;
-}
+}