From 162688d8c307546c6f08d37f55e00b986fee895a Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Wed, 29 May 2024 15:00:11 +0200
Subject: [PATCH] Update UI styles in theme modules and CSS

Changes include adjusting grid gaps, text sizes, and column spacing in the stats-simple, stats-simple-grid, and stats-timeline modules. Moreover, unnecessary CSS classes were removed such as fj-gap-x8 and lg:fj-flex-row, contributing to a cleaner codebase.
---
 theme/css/tailwind.css                        | 19 +++----------------
 .../stats-simple-grid.module/module.html      |  4 ++--
 theme/modules/stats-simple.module/module.html |  4 ++--
 .../modules/stats-timeline.module/module.html |  2 +-
 4 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index 31d572c..250e08c 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -2278,11 +2278,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
        column-gap:1.5rem;
 }
 
-.fj-gap-x-8{
-  -moz-column-gap:2rem;
-       column-gap:2rem;
-}
-
 .fj-gap-y-16{
   row-gap:4rem;
 }
@@ -3652,9 +3647,9 @@ lite-youtube.lyt-activated > .lty-playbtn{
     line-height:2rem;
   }
 
-  .sm\:fj-text-5xl{
-    font-size:3rem;
-    line-height:1;
+  .sm\:fj-text-4xl{
+    font-size:2.25rem;
+    line-height:2.5rem;
   }
 
   .sm\:fj-ring-1{
@@ -3925,10 +3920,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     grid-template-columns:repeat(4, minmax(0, 1fr));
   }
 
-  .lg\:fj-flex-row{
-    flex-direction:row;
-  }
-
   .lg\:fj-flex-col{
     flex-direction:column;
   }
@@ -3949,10 +3940,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     gap:2rem;
   }
 
-  .lg\:fj-gap-2{
-    gap:0.5rem;
-  }
-
   .lg\:fj-gap-x-10{
     -moz-column-gap:2.5rem;
          column-gap:2.5rem;
diff --git a/theme/modules/stats-simple-grid.module/module.html b/theme/modules/stats-simple-grid.module/module.html
index d81b657..88f92e0 100644
--- a/theme/modules/stats-simple-grid.module/module.html
+++ b/theme/modules/stats-simple-grid.module/module.html
@@ -10,9 +10,9 @@
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
-<div class="fj-not-prose fj-grid fj-divide-x-4 fj-divide-y-4 fj-divide-white fj-grid-cols-1 sm:fj-grid-cols-2 {{ grid_col_class or '' }}">
+<div class="fj-not-prose fj-grid fj-gap-1 fj-grid-cols-1 sm:fj-grid-cols-2 fj-text-balance {{ grid_col_class or '' }}">
   {% for item in module.stats_item %}
-    <div class="fj-grid fj-bg-gray-50 fj-place-items-center fj-text-center">
+    <div class="fj-grid fj-bg-gray-100 fj-place-items-center fj-text-center fj-p-2">
       <p class="fj-text-3xl fj-font-semibold fj-tracking-tight">{{ item.title }}</p>
 
       <p class="fj-text-sm fj-leading-7">{{ item.subtext }}</p>
diff --git a/theme/modules/stats-simple.module/module.html b/theme/modules/stats-simple.module/module.html
index d2e469f..2985c46 100644
--- a/theme/modules/stats-simple.module/module.html
+++ b/theme/modules/stats-simple.module/module.html
@@ -10,10 +10,10 @@
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
-<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-gap-x-8 fj-gap-y-16 {{ grid_col_class or '' }}">
+<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-gap-x-4 fj-gap-y-16 fj-text-balance {{ grid_col_class or '' }}">
   {% for item in module.stats_item %}
     <div class="fj-grid fj-place-items-center fj-gap-2 fj-text-center">
-      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-5xl">{{ item.stats_title }}</p>
+      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-4xl">{{ item.stats_title }}</p>
 
       <p class="fj-text-base fj-leading-7">{{ item.subtext }}</p>
     </div>
diff --git a/theme/modules/stats-timeline.module/module.html b/theme/modules/stats-timeline.module/module.html
index b88e62f..d0a1955 100644
--- a/theme/modules/stats-timeline.module/module.html
+++ b/theme/modules/stats-timeline.module/module.html
@@ -10,7 +10,7 @@
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
-<div class="fj-not-prose fj-py-32 fj-gap-4 lg:fj-gap-8 fj-grid fj-grid-cols-1 {{ grid_col_class or '' }}">
+<div class="fj-not-prose fj-text-balance fj-gap-4 lg:fj-gap-8 fj-grid fj-grid-cols-1 {{ grid_col_class or '' }}">
   {% for item in module.timeframe %}
     <div class="fj-grid fj-gap-2">
       <div class="fj-flex fj-items-center fj-gap-4 fj-text-sm fj-font-semibold fj-leading-6 fj-text-blue-600">