From 5486f39f7e6c3ca75b31c82d430a85d2d11f468e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 9 Nov 2023 08:47:38 +0530
Subject: [PATCH] feat: Update uncategorized block design (#8324)

---
 .../v1/portals/_uncategorized-block.html.erb  | 56 ++++++++-----------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/app/views/public/api/v1/portals/_uncategorized-block.html.erb b/app/views/public/api/v1/portals/_uncategorized-block.html.erb
index df3605122c29..0a86e19310c2 100644
--- a/app/views/public/api/v1/portals/_uncategorized-block.html.erb
+++ b/app/views/public/api/v1/portals/_uncategorized-block.html.erb
@@ -1,35 +1,27 @@
 <section class="lg:container w-full flex flex-col h-full">
-  <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-900 dark:text-white font-semibold leading-relaxed hover:underline">
-      <%= I18n.t('public_portal.header.uncategorized') %>
-    </h3>
-    <span class="text-slate-500">
-      <%= render 'public/api/v1/portals/article_count', article_count: portal.articles.published.where(category_id: nil).size %>
-    </span>
+  <div class="flex flex-col gap-8 h-full group <%= !@is_plain_layout_enabled ? 'border border-solid border-slate-100 dark:border-slate-800 hover:border-woot-600 dark:hover:border-woot-600 py-5 px-3 rounded-lg' : '' %>">
+    <div class="flex justify-between items-center w-full <%= !@is_plain_layout_enabled ?  'px-1' : '' %>">
+      <h3 class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer <%= @is_plain_layout_enabled ? 'hover:underline' : 'pl-1 group-hover:text-woot-600 dark:group-hover:text-woot-600' %>">
+        <%= I18n.t('public_portal.header.uncategorized') %>
+      </h3>
+    </div>
+    <div class="-mt-4">
+      <% portal.articles.published.where(category_id: nil).order(position: :asc).take(5).each do |article| %>
+      <a
+        class="text-slate-700 dark:text-slate-100 leading-7"
+        href="<%= generate_article_link(portal.slug, article.slug, @theme) %>"
+      >
+        <div class="flex justify-between hover:cursor-pointer items-center py-1 rounded-lg gap-3  <%= !@is_plain_layout_enabled ? 'px-2 hover:bg-slate-50 dark:hover:bg-slate-800' : 'hover:underline' %>">
+          <%= article.title %>
+          <span class="flex items-center font-normal">
+            <%= render partial: 'icons/chevron-right' %>
+          </span>
+        </div>
+      </a>
+      <% end %>
+    </div>
+    <div class="flex justify-between flex-row items-center <%= !@is_plain_layout_enabled && 'px-2' %>">
+      <span class="text-sm font-medium text-slate-600 dark:text-slate-400"><%= render 'public/api/v1/portals/article_count', article_count: portal.articles.published.where(category_id: nil).size %></span>
+    </div>
   </div>
-  <div class="py-4 w-full mt-2 flex-grow">
-    <% portal.articles.published.where(category_id: nil).order(position: :asc).take(5).each do |article| %>
-    <a
-      class="text-slate-800 dark:text-slate-100 hover:underline leading-8"
-      href="<%= generate_article_link(portal.slug, article.slug, @theme) %>"
-    >
-      <div class="flex justify-between content-center my-1 -mx-1 p-1 rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800">
-        <%= article.title %>
-        <span class="flex items-center">
-          <svg
-            class="w-4 h-4 fill-current text-slate-700 dark:text-slate-200"
-            width="24"
-            height="24"
-            fill="none"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
-            />
-          </svg>
-        </span>
-      </div>
-    </a>
-    <% end %>
-   </div>
 </section>