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.
freshjuice-dev · May 29, 2024 · 162688d · 162688d
1 parent 8ccd588
commit 162688d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">