From 7041d86e4d821e8fbe20e1420bb1dd894bf073a4 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 9 Nov 2023 07:29:03 +0530
Subject: [PATCH] feat: Updated home page design (#8106)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 app/helpers/portal_helper.rb                  |   8 +-
 .../portal/components/PublicArticleSearch.vue |   2 +-
 app/views/icons/_chevron-right.html.erb       |  12 +-
 .../api/v1/portals/_category-block.html.erb   | 114 ++++++++----------
 .../public/api/v1/portals/_hero.html.erb      |  18 +--
 .../api/v1/portals/articles/show.html.erb     |  36 +++---
 .../api/v1/portals/categories/show.html.erb   |   6 +-
 app/views/public/api/v1/portals/show.html.erb |   6 +-
 config/locales/en.yml                         |   2 +-
 public/assets/images/hc/hexagon-dark.svg      |   3 +
 public/assets/images/hc/hexagon-light.svg     |   3 +
 spec/helpers/portal_helper_spec.rb            |  32 +++--
 12 files changed, 132 insertions(+), 110 deletions(-)
 create mode 100644 public/assets/images/hc/hexagon-dark.svg
 create mode 100644 public/assets/images/hc/hexagon-light.svg

diff --git a/app/helpers/portal_helper.rb b/app/helpers/portal_helper.rb
index 2011bb525..4f8014ac3 100644
--- a/app/helpers/portal_helper.rb
+++ b/app/helpers/portal_helper.rb
@@ -1,11 +1,11 @@
 module PortalHelper
   def generate_portal_bg_color(portal_color, theme)
     base_color = theme == 'dark' ? 'black' : 'white'
-    "color-mix(in srgb, #{portal_color} 10%, #{base_color})"
+    "color-mix(in srgb, #{portal_color} 20%, #{base_color})"
   end
 
   def generate_portal_bg(portal_color, theme)
-    bg_image = theme == 'dark' ? 'grid_dark.svg' : 'grid.svg'
+    bg_image = theme == 'dark' ? 'hexagon-dark.svg' : 'hexagon-light.svg'
     "background: url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
   end
 
@@ -33,4 +33,8 @@ module PortalHelper
       'icons/monitor'
     end
   end
+
+  def generate_gradient_to_bottom(theme)
+    "background-image: linear-gradient(to bottom, transparent, #{theme == 'dark' ? '#151718' : 'white'})"
+  end
 end
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index f2afeb4ce..59dc94cf0 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-on-clickaway="closeSearch" class="max-w-6xl w-full relative my-4">
+  <div v-on-clickaway="closeSearch" class="max-w-5xl w-full relative my-4">
     <public-search-input
       v-model="searchTerm"
       :search-placeholder="searchTranslations.searchPlaceholder"
diff --git a/app/views/icons/_chevron-right.html.erb b/app/views/icons/_chevron-right.html.erb
index ea10fc633..4ed459d47 100644
--- a/app/views/icons/_chevron-right.html.erb
+++ b/app/views/icons/_chevron-right.html.erb
@@ -1,3 +1,11 @@
-<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 9L5 5L1 1" stroke-linecap="round" stroke-linejoin="round"/>
+<svg
+  class="w-4 h-4 fill-current text-slate-500 dark:text-slate-400"
+  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>
diff --git a/app/views/public/api/v1/portals/_category-block.html.erb b/app/views/public/api/v1/portals/_category-block.html.erb
index f64ddc467..99f5ccce1 100644
--- a/app/views/public/api/v1/portals/_category-block.html.erb
+++ b/app/views/public/api/v1/portals/_category-block.html.erb
@@ -1,67 +1,49 @@
-<section class="lg:container w-full py-6 px-4 flex flex-col h-full">
-  <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-800 dark:text-slate-50 font-medium leading-relaxed hover:underline">
-      <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>">
-        <%= category.name %>
-      </a>
-    </h3>
-    <span class="text-slate-500">
-      <%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.order(position: :asc).size %>
-    </span>
-  </div>
-  <div class="py-4 w-full mt-2 flex-grow">
-    <% if category.articles.published.size == 0 %>
-    <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl mb-4">
-      <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
-    </div>
-    <% else %>
-      <% category.articles.published.order(position: :asc).take(5).each do |article| %>
-      <a
-        class="text-slate-800 dark:text-slate-50 hover:underline leading-8"
-        href="/hc/<%= portal.slug %>/articles/<%= article.slug %><%= @theme.present? ? '?theme='+@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 %>
-    <% end %>
-  </div>
-  <div>
-    <a
-      href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
-      class="flex flex-row items-center text-base font-medium text-woot-500 hover:underline mt-4"
-      style="color: <%= portal.color %>"
-    >
-      <%= I18n.t('public_portal.common.view_all_articles') %>
-      <span class="ml-2">
-        <svg
-          class="w-4 h-4 fill-current text-woot-500"
-          width="24"
-          height="24"
-          fill="none"
-          style="color: <%= portal.color %>"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z"
-          />
-        </svg>
-      </span>
-    </a>
-  </div>
+<section class="lg:container w-full flex flex-col h-full">
+   <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">
+         <div class="flex items-start flex-col gap-1">
+            <div class="flex flex-row items-center gap-2 <%= !@is_plain_layout_enabled && 'px-1' %>">
+               <% if category.icon.present? %>
+               <span class="text-lg rounded-md cursor-pointer <%= !@is_plain_layout_enabled && 'pl-1' %>"><%= category.icon %></span>
+               <% end %>
+               <h3 class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer <%= @is_plain_layout_enabled ? 'hover:underline' : 'group-hover:text-woot-600 dark:group-hover:text-woot-600' %> <%= category.icon.blank? && !@is_plain_layout_enabled ? 'pl-1' : '' %>">
+                  <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? && @theme != 'system' ? '?theme='+@theme : ''  %>">
+                  <%= category.name %>
+                  </a>
+               </h3>
+            </div>
+            <% if category.description.present? %>
+            <span class="text-base text-slate-600 dark:text-slate-400 <%= !@is_plain_layout_enabled && 'px-2' %>"><%= category.description %></span>
+            <% end %>
+         </div>
+      </div>
+      <div class="flex flex-col gap-2 flex-grow <%= category.description.blank? && '-mt-4' %>">
+         <% if category.articles.published.size==0 %>
+         <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl mb-4">
+            <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
+         </div>
+         <% else %>
+         <% category.articles.published.order(position: :asc).take(5).each do |article| %>
+         <a class="text-slate-700 dark:text-slate-100 leading-7" href="/hc/<%= portal.slug %>/articles/<%= article.slug %><%= @theme.present? && @theme != 'system' ? '?theme='+@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 %>
+         <% end %>
+      </div>
+      <div class="flex justify-between flex-row items-center <%= !@is_plain_layout_enabled && 'px-2' %>">
+         <div>
+           <span class="text-sm font-medium text-slate-600 dark:text-slate-400"><%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.order(position: :asc).size %></span>
+         </div>
+         <div>
+            <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>" class="flex flex-row items-center text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100">
+            <%= I18n.t('public_portal.common.view_all_articles') %>
+            </a>
+         </div>
+      </div>
+   </div>
 </section>
diff --git a/app/views/public/api/v1/portals/_hero.html.erb b/app/views/public/api/v1/portals/_hero.html.erb
index f2f6f61e6..7f944e6c8 100644
--- a/app/views/public/api/v1/portals/_hero.html.erb
+++ b/app/views/public/api/v1/portals/_hero.html.erb
@@ -1,11 +1,13 @@
-<% if !@is_plain_layout_enabled %> 
-<section id="portal-bg" class="pt-8 pb-16 md:py-20 w-full bg-woot-50 dark:bg-woot-900 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme) %>">
-  <div class="mx-auto max-w-6xl px-8 flex flex-col items-center sm:items-start">
-    <h1 class="text-2xl md:text-4xl text-slate-900 dark:text-white font-semibold leading-normal">
-      <%= portal.header_text %>
-    </h1>
-    <p class="text-slate-600 dark:text-slate-200 text-center text-lg leading-normal pt-4 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
-    <div id="search-wrap"></div>
+<% if !@is_plain_layout_enabled %>
+<section id="portal-bg" class="w-full bg-woot-50 dark:bg-woot-900 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme)  %>">
+  <div id="portal-bg-gradient" class="pt-8 pb-12 md:py-14" style="<%= generate_gradient_to_bottom(@theme) %>">
+    <div class="mx-auto max-w-5xl px-8 flex flex-col items-center sm:items-start">
+      <h1 class="text-2xl md:text-4xl text-slate-900 dark:text-white font-semibold leading-normal">
+        <%= portal.header_text %>
+      </h1>
+      <p class="text-slate-600 dark:text-slate-200 text-center text-lg leading-normal pt-4 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
+      <div id="search-wrap"></div>
+    </div>
   </div>
 </section>
 <% end %>
diff --git a/app/views/public/api/v1/portals/articles/show.html.erb b/app/views/public/api/v1/portals/articles/show.html.erb
index 50b619b2d..88deccc9d 100644
--- a/app/views/public/api/v1/portals/articles/show.html.erb
+++ b/app/views/public/api/v1/portals/articles/show.html.erb
@@ -12,28 +12,30 @@
 <% end %>
 
 <% if !@is_plain_layout_enabled %>
-<div class="bg-woot-50 dark:bg-woot-900 py-8 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme) %>">
-  <div class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
-    <div>
-      <a
-        class="text-slate-700 dark:text-slate-100 hover:underline leading-8 text-sm font-semibold"
-        href="/hc/<%= @portal.slug %>/<%= @article.category&.locale %><%= @theme.present? ? '?theme='+@theme : ''  %>"
-      >
-        Home
-      </a>
-      <span class="text-xs text-slate-600 dark:text-slate-200  px-1">/</span>
-      <% if @article.category %>
+<div class="bg-woot-50 dark:bg-woot-900 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme) %>">
+  <div class="py-8" style="<%= generate_gradient_to_bottom(@theme) %>">
+    <div class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
+      <div>
         <a
           class="text-slate-700 dark:text-slate-100 hover:underline leading-8 text-sm font-semibold"
-          href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
+          href="/hc/<%= @portal.slug %>/<%= @article.category&.locale %><%= @theme.present? ? '?theme='+@theme : ''  %>"
         >
-          <%= @article.category&.name %>
+          Home
         </a>
-      <% else %>
-        <span class="text-slate-700 dark:text-slate-100 leading-8 text-sm font-semibold" > Uncategorized </span>
-      <% end %>
+        <span class="text-xs text-slate-600 dark:text-slate-200  px-1">/</span>
+        <% if @article.category %>
+          <a
+            class="text-slate-700 dark:text-slate-100 hover:underline leading-8 text-sm font-semibold"
+            href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
+          >
+            <%= @article.category&.name %>
+          </a>
+        <% else %>
+          <span class="text-slate-700 dark:text-slate-100 leading-8 text-sm font-semibold" > Uncategorized </span>
+        <% end %>
+      </div>
+      <%= render "public/api/v1/portals/articles/article_header", article: @article %>
     </div>
-    <%= render "public/api/v1/portals/articles/article_header", article: @article %>
   </div>
 </div>
 <% else %>
diff --git a/app/views/public/api/v1/portals/categories/show.html.erb b/app/views/public/api/v1/portals/categories/show.html.erb
index b127cb96e..66203d74f 100644
--- a/app/views/public/api/v1/portals/categories/show.html.erb
+++ b/app/views/public/api/v1/portals/categories/show.html.erb
@@ -6,8 +6,10 @@
 <% end %>
 
 <% if !@is_plain_layout_enabled %>
-<div class="bg-woot-50 dark:bg-woot-900 pt-16 pb-20" style="<%= generate_portal_bg(@portal.color, @theme) %>">
-  <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
+<div class="bg-woot-50 dark:bg-woot-900" style="<%= generate_portal_bg(@portal.color, @theme) %>">
+  <div class="pt-16 pb-20" style="<%= generate_gradient_to_bottom(@theme) %>">
+    <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
+  </div>
 </div>
 <% else %>
   <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
diff --git a/app/views/public/api/v1/portals/show.html.erb b/app/views/public/api/v1/portals/show.html.erb
index 339610045..c3c3005b1 100644
--- a/app/views/public/api/v1/portals/show.html.erb
+++ b/app/views/public/api/v1/portals/show.html.erb
@@ -1,12 +1,12 @@
 <%= render "public/api/v1/portals/hero", portal: @portal %>
-<div class="max-w-6xl w-full flex-grow mx-auto py-8 px-4">
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-32 gap-y-0 lg:gap-y-12">
+<div class="max-w-5xl w-full flex-grow mx-auto py-8 px-8">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-6">
     <% @portal.categories.where(locale: @locale).joins(:articles).where(articles:{ status: :published }).order(position: :asc).group('categories.id').each do |category| %>
       <%= render "public/api/v1/portals/category-block", category: category, portal: @portal %>
     <% end %>
   </div>
 
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-32 gap-y-0 lg:gap-y-12">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-6">
     <% if @portal.articles.where(status: :published, category_id: nil).count > 0 %>
       <%= render "public/api/v1/portals/uncategorized-block", category: "Uncategorized", portal: @portal %>
     <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ccd744dbe..af26aa8f5 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -212,7 +212,7 @@ en:
     common:
       home: Home
       last_updated_on: Last updated on %{last_updated_on}
-      view_all_articles: View all articles
+      view_all_articles: View all
       article: article
       articles: articles
       no_articles: There are no articles here
diff --git a/public/assets/images/hc/hexagon-dark.svg b/public/assets/images/hc/hexagon-dark.svg
new file mode 100644
index 000000000..47b07ad0d
--- /dev/null
+++ b/public/assets/images/hc/hexagon-dark.svg
@@ -0,0 +1,3 @@
+<svg width="44" height="77" viewBox="0 0 44 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9846 15.1129C21.6033 14.7557 22.3654 14.7556 22.9841 15.1125L41.4123 25.7442C42.0314 26.1014 42.4129 26.7618 42.4129 27.4766V48.7377C42.4129 49.4525 42.0314 50.1129 41.4123 50.4701L22.9841 61.1017C22.3654 61.4587 21.6033 61.4586 20.9846 61.1014L2.57141 50.4702C1.95262 50.1129 1.57143 49.4527 1.57143 48.7382V27.4761C1.57143 26.7616 1.95262 26.1013 2.57141 25.7441L20.9846 15.1129ZM5.71489 27.5513C5.09575 27.9085 4.71429 28.569 4.71429 29.2837V46.9306C4.71429 47.6453 5.09575 48.3058 5.71489 48.6629L20.9846 57.4718C21.6032 57.8287 22.3653 57.8286 22.9839 57.4715L38.2699 48.6473C38.8888 48.2901 39.27 47.6298 39.27 46.9152V29.2843C39.27 28.5692 38.8882 27.9085 38.2687 27.5515L22.9835 18.7416C22.3651 18.3852 21.6036 18.3853 20.9853 18.742L5.71489 27.5513ZM0 23.5557C0 23.5627 0.00756041 23.5671 0.0136066 23.5636L19.3977 12.3632C20.0162 12.0058 20.3971 11.3458 20.3971 10.6315V1.57143C20.3971 0.703554 19.6936 0 18.8257 0C17.9578 0 17.2543 0.703553 17.2543 1.57143V8.82393C17.2543 9.53843 16.8731 10.1987 16.2544 10.5559L0.999919 19.3641C0.381163 19.7213 0 20.3816 0 21.0961V23.5557ZM0 52.6586C0 52.6516 0.00755897 52.6472 0.013604 52.6507L19.3977 63.8511C20.0162 64.2085 20.3971 64.8685 20.3971 65.5828V75.4286C20.3971 76.2964 19.6936 77 18.8257 77C17.9578 77 17.2543 76.2964 17.2543 75.4286V67.3904C17.2543 66.6759 16.8731 66.0156 16.2544 65.6583L0.999919 56.8502C0.381163 56.4929 0 55.8327 0 55.1182V52.6586ZM25.1429 0C24.275 0 23.5714 0.703553 23.5714 1.57143V10.631C23.5714 11.3456 23.9526 12.0058 24.5714 12.3631L43.9814 23.5698C43.9833 23.5709 43.9854 23.5714 43.9876 23.5714C43.9944 23.5714 44 23.5659 44 23.559V19.9538C44 19.947 43.9944 19.9414 43.9876 19.9414C43.9854 19.9414 43.9833 19.9409 43.9814 19.9398L27.7149 10.5558C27.0957 10.1986 26.7143 9.53819 26.7143 8.82341V1.57143C26.7143 0.703552 26.0107 0 25.1429 0ZM25.1429 77C24.275 77 23.5714 76.2964 23.5714 75.4286V65.5833C23.5714 64.8687 23.9526 64.2085 24.5714 63.8512L43.9814 52.6445C43.9833 52.6434 43.9854 52.6429 43.9876 52.6429C43.9944 52.6429 44 52.6484 44 52.6553V56.2605C44 56.2673 43.9944 56.2729 43.9876 56.2729C43.9854 56.2729 43.9833 56.2734 43.9814 56.2745L27.7149 65.6585C27.0957 66.0157 26.7143 66.6761 26.7143 67.3909V75.4286C26.7143 76.2964 26.0107 77 25.1429 77Z" fill="white" fill-opacity="0.04"/>
+</svg>
diff --git a/public/assets/images/hc/hexagon-light.svg b/public/assets/images/hc/hexagon-light.svg
new file mode 100644
index 000000000..e496934e6
--- /dev/null
+++ b/public/assets/images/hc/hexagon-light.svg
@@ -0,0 +1,3 @@
+<svg width="44" height="77" viewBox="0 0 44 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9843 14.5357L42.4129 26.3214V49.8929L21.9843 61.6786L1.57143 49.8929V26.3214L21.9843 14.5357ZM4.71429 28.1286V48.0857L21.9843 58.0486L39.27 48.07V28.1286L21.9843 18.1657L4.71429 28.1286ZM0 23.5714L20.3971 11.7857V0H17.2543V9.97857L0 19.9414V23.5557V23.5714ZM0 52.6429L20.3971 64.4286V77H17.2543V66.2357L0 56.2729V52.6586V52.6429ZM23.5714 0V11.7857L43.9843 23.5714H44V19.9414H43.9843L26.7143 9.97857V0H23.5714ZM23.5714 77V64.4286L43.9843 52.6429H44V56.2729H43.9843L26.7143 66.2357V77H23.5714Z" fill="black" fill-opacity="0.024"/>
+</svg>
diff --git a/spec/helpers/portal_helper_spec.rb b/spec/helpers/portal_helper_spec.rb
index 732be24f8..338a9260b 100644
--- a/spec/helpers/portal_helper_spec.rb
+++ b/spec/helpers/portal_helper_spec.rb
@@ -5,7 +5,7 @@ describe PortalHelper do
     context 'when theme is dark' do
       it 'returns the correct color mix with black' do
         expect(helper.generate_portal_bg_color('#ff0000', 'dark')).to eq(
-          'color-mix(in srgb, #ff0000 10%, black)'
+          'color-mix(in srgb, #ff0000 20%, black)'
         )
       end
     end
@@ -13,7 +13,7 @@ describe PortalHelper do
     context 'when theme is not dark' do
       it 'returns the correct color mix with white' do
         expect(helper.generate_portal_bg_color('#ff0000', 'light')).to eq(
-          'color-mix(in srgb, #ff0000 10%, white)'
+          'color-mix(in srgb, #ff0000 20%, white)'
         )
       end
     end
@@ -21,10 +21,10 @@ describe PortalHelper do
     context 'when provided with various colors' do
       it 'adjusts the color mix appropriately' do
         expect(helper.generate_portal_bg_color('#00ff00', 'dark')).to eq(
-          'color-mix(in srgb, #00ff00 10%, black)'
+          'color-mix(in srgb, #00ff00 20%, black)'
         )
         expect(helper.generate_portal_bg_color('#0000ff', 'light')).to eq(
-          'color-mix(in srgb, #0000ff 10%, white)'
+          'color-mix(in srgb, #0000ff 20%, white)'
         )
       end
     end
@@ -33,26 +33,26 @@ describe PortalHelper do
   describe '#generate_portal_bg' do
     context 'when theme is dark' do
       it 'returns the correct background with dark grid image and color mix with black' do
-        expected_bg = 'background: url(/assets/images/hc/grid_dark.svg) color-mix(in srgb, #ff0000 10%, black)'
+        expected_bg = 'background: url(/assets/images/hc/hexagon-dark.svg) color-mix(in srgb, #ff0000 20%, black)'
         expect(helper.generate_portal_bg('#ff0000', 'dark')).to eq(expected_bg)
       end
     end
 
     context 'when theme is not dark' do
       it 'returns the correct background with light grid image and color mix with white' do
-        expected_bg = 'background: url(/assets/images/hc/grid.svg) color-mix(in srgb, #ff0000 10%, white)'
+        expected_bg = 'background: url(/assets/images/hc/hexagon-light.svg) color-mix(in srgb, #ff0000 20%, white)'
         expect(helper.generate_portal_bg('#ff0000', 'light')).to eq(expected_bg)
       end
     end
 
     context 'when provided with various colors' do
       it 'adjusts the background appropriately for dark theme' do
-        expected_bg = 'background: url(/assets/images/hc/grid_dark.svg) color-mix(in srgb, #00ff00 10%, black)'
+        expected_bg = 'background: url(/assets/images/hc/hexagon-dark.svg) color-mix(in srgb, #00ff00 20%, black)'
         expect(helper.generate_portal_bg('#00ff00', 'dark')).to eq(expected_bg)
       end
 
       it 'adjusts the background appropriately for light theme' do
-        expected_bg = 'background: url(/assets/images/hc/grid.svg) color-mix(in srgb, #0000ff 10%, white)'
+        expected_bg = 'background: url(/assets/images/hc/hexagon-light.svg) color-mix(in srgb, #0000ff 20%, white)'
         expect(helper.generate_portal_bg('#0000ff', 'light')).to eq(expected_bg)
       end
     end
@@ -85,4 +85,20 @@ describe PortalHelper do
       expect(helper.get_theme_icon('any_other_value')).to eq('icons/monitor')
     end
   end
+
+  describe '#generate_gradient_to_bottom' do
+    context 'when theme is dark' do
+      it 'returns the correct background gradient' do
+        expected_gradient = 'background-image: linear-gradient(to bottom, transparent, #151718)'
+        expect(helper.generate_gradient_to_bottom('dark')).to eq(expected_gradient)
+      end
+    end
+
+    context 'when theme is not dark' do
+      it 'returns the correct background gradient' do
+        expected_gradient = 'background-image: linear-gradient(to bottom, transparent, white)'
+        expect(helper.generate_gradient_to_bottom('light')).to eq(expected_gradient)
+      end
+    end
+  end
 end