chore: Update the design of the help center portal (#6775)

app/views/public/api/v1/models/_article.json.jbuilder

@@ -7,6 +7,7 @@ json.status article.status
 json.position article.position
 json.account_id article.account_id
 json.last_updated_at article.updated_at
+json.slug article.slug
 
 if article.portal.present?
   json.portal do

app/views/public/api/v1/portals/_category-block.html.erb

@@ -1,6 +1,6 @@
 <section class="bg-white 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-900 font-semibold subpixel-antialiased leading-relaxed hover:underline">
+    <h3 class="text-xl text-slate-800 font-medium font-semibold leading-relaxed hover:underline">
       <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
         <%= category.name %>
       </a>

app/views/public/api/v1/portals/_header.html.erb

@@ -1,8 +1,11 @@
 
-<header class="bg-white mx-auto px-4 max-w-5xl w-full">
-  <nav class="px-0 flex" aria-label="Top">
-    <div class="w-full py-8 flex items-center">
-      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/" class="text-base font-semibold">
+<header class="bg-white w-full shadow-sm sticky top-0 z-50">
+  <nav class=" flex bg-white mx-auto max-w-6xl px-8" aria-label="Top">
+    <div class="w-full py-5 flex items-center">
+      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/" class="h-10 text-lg flex items-center text-slate-900 font-semibold">
+        <% if @portal.logo.present? %>
+          <img src="<%= url_for(@portal.logo) %>" class="h-10 w-auto mr-2" />
+        <% end %>
         <%= @portal.name %>
       </a>
       <% if @portal.homepage_link %>

app/views/public/api/v1/portals/_hero.html.erb

@@ -1,10 +1,10 @@
-
-<section class="bg-gradient-to-b from-white to-slate-75 pt-8 pb-16 md:py-16 flex flex-col items-center justify-center">
-  <div class="mx-auto w-full max-w-2xl flex flex-col items-center">
-    <h1 class="text-2xl px-5 md:text-4xl text-slate-900 font-semibold subpixel-antialiased leading-normal text-center">
+<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
+<section class="pt-8 pb-16 md:py-20 w-full bg-woot-50 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+  <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 font-semibold leading-normal">
       <%= portal.header_text %>
     </h1>
-    <p class="text-slate-600 py-2 text-center my-2 max-w-sm leading-normal"><%= I18n.t('public_portal.hero.sub_title') %></p>
+    <p class="text-slate-600 text-center text-lg leading-normal pt-4 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
     <div id="search-wrap"></div>
   </div>
 </section>

app/views/public/api/v1/portals/_uncategorized-block.html.erb

@@ -1,6 +1,6 @@
 <section class="bg-white 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-900 font-semibold subpixel-antialiased leading-relaxed hover:underline">
+    <h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline">
       <%= category %>
     </h3>
     <span class="text-slate-500">

app/views/public/api/v1/portals/articles/index.html.erb

@@ -12,7 +12,7 @@
 		<span>/</span>
 		</div>
 			<% @articles.each do |article| %>
-				<h1 class="text-4xl font-bold md:tracking-normal leading-snug md:text-5xl text-slate-900">
+				<h1 class="text-4xl font-semibold md:tracking-normal leading-snug md:text-5xl text-slate-900">
 				<%= article.title %></h1>
 				<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
 					<div class="flex items-center space-x-2">
@@ -28,9 +28,9 @@
 		</div>
 	</div>
 </div>
-<div class="max-w-4xl flex-grow w-full px-6 py-16 mx-auto space-y-12">
-	<article class="space-y-8 ">
-		<div class="text-slate-800 font-sans leading-8 text-lg subpixel-antialiased max-w-3xl blog-content">
+<div class="max-w-4xl flex-grow w-full px-8 py-16 mx-auto space-y-12">
+	<article class="space-y-8">
+		<div class="text-slate-800 font-sans leading-8 text-lg max-w-3xl blog-content">
 		</div>
 	</article>
 </div>

app/views/public/api/v1/portals/articles/show.html.erb

@@ -11,26 +11,25 @@
   <% end %>
 <% end %>
 
-<div class="bg-gradient-to-b from-white to-slate-50">
-  <div class="max-w-5xl px-8 lg:px-4 pt-8 pb-16 mx-auto space-y-4 w-full">
-    <% if @article.category.present? %>
-      <div>
-        <a
-          class="text-slate-700 hover:underline leading-8 text-sm font-medium"
-          href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>"
-        >
-          <%= I18n.t('public_portal.common.home') %>
-        </a>
-        <span class="text-xs text-slate-600 px-1">/</span>
-        <a
-          class="text-slate-700 hover:underline leading-8 text-sm font-medium"
-          href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %>"
-        >
-          <%= @article.category.name %>
-        </a>
-      </div>
-    <% end %>
-    <h1 class="text-3xl font-bold md:tracking-normal leading-snug md:text-5xl text-slate-900">
+<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
+<div class="bg-woot-50 py-8 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+  <div class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
+    <div>
+      <a
+        class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
+        href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>"
+      >
+        Home
+      </a>
+      <span class="text-xs text-slate-600 px-1">/</span>
+      <a
+        class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
+        href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %>"
+      >
+        <%= @article.category.name %>
+      </a>
+    </div>
+    <h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900">
       <%= @article.title %>
     </h1>
     <div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
@@ -47,9 +46,9 @@
     </div>
   </div>
 </div>
-<div class="max-w-5xl flex-grow w-full px-6 py-8 mx-auto space-y-12">
-  <article class="space-y-8 ">
-    <div class="text-slate-800 leading-8 text-lg subpixel-antialiased max-w-3xl prose break-words">
+<div class="max-w-6xl flex-grow w-full px-8 py-8 mx-auto space-y-12">
+  <article class="space-y-8">
+    <div class="text-slate-800 text-lg max-w-3xl prose break-words">
       <p><%= @parsed_content %></p>
     </div>
   </article>

app/views/public/api/v1/portals/categories/_category-block.html.erb

@@ -1,7 +1,7 @@
 
 <section class="bg-white 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-900 font-semibold subpixel-antialiased leading-relaxed hover:underline"">
+    <h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline"">
      <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
       <%= category.name %>
     </a>

app/views/public/api/v1/portals/categories/_hero.html.erb

@@ -1,7 +1,7 @@
 
 <section class="bg-slate-50 py-16 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
-    <h1 class="text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center"><%= portal.header_text %></h1>
+    <h1 class="text-4xl text-slate-900 font-semibold leading-relaxed text-center"><%= portal.header_text %></h1>
     <p class="text-slate-700 py-2 text-center"><%= I18n.t('public_portal.hero.sub_title') %></p>
   </div>
 </section>

app/views/public/api/v1/portals/categories/index.html.erb

@@ -1,6 +1,6 @@
 <%= render "hero", portal: @portal %>
 
-<div class="max-w-4xl w-full flex-grow mx-auto py-16">
+<div class="max-w-6xl w-full flex-grow mx-auto py-16">
   <div class="grid grid-cols-2 gap-x-32 gap-y-12">
     <% @categories.each do |category| %>
       <%= render "category-block", category: category, portal: @portal %>

app/views/public/api/v1/portals/categories/show.html.erb

@@ -5,17 +5,17 @@
   <% end %>
 <% end %>
 
-<div class="bg-gradient-to-b from-white to-black-50 pt-8 pb-16">
-  <div class="max-w-5xl px-4 mx-auto space-y-2">
+<div class="bg-woot-50 pt-16 pb-20" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+  <div class="max-w-6xl px-8 mx-auto space-y-2">
     <a
-      class="text-slate-700 text-sm hover:underline leading-8"
+      class="text-slate-700 text-sm hover:underline leading-8 font-semibold"
       href="/hc/<%= @portal.slug %>/<%= @category.locale %>"
     >
       <%= I18n.t('public_portal.common.home') %>
     </a>
     <span class="text-xs text-slate-600 px-1">/</span>
     <div class="flex justify-start items-center w-full">
-      <h1 class="text-3xl font-bold leading-snug md:tracking-normal text-slate-900">
+      <h1 class="text-3xl font-semibold leading-snug md:tracking-normal text-slate-900">
         <%= @category.name %>
       </h1>
       <div class="text-slate-500 px-8 mt-2">
@@ -25,7 +25,7 @@
   </div>
 </div>
 
-<section class="bg-white max-w-5xl w-full mx-auto py-6 px-4 flex flex-col items-center justify-center flex-grow">
+<section class="bg-white max-w-6xl w-full mx-auto py-6 px-8 flex flex-col items-center justify-center flex-grow">
   <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 rounded-xl py-6">
@@ -38,7 +38,7 @@
         href="/hc/<%= @portal.slug %>/articles/<%= article.slug %>"
       >
         <div>
-          <p class="font-medium mb-2 hover:underline"><%= article.title %></p>
+          <p class="mb-2 hover:underline font-semibold"><%= article.title %></p>
           <p class="text-sm">
             <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
           </p>

app/views/public/api/v1/portals/show.html.erb

@@ -1,5 +1,5 @@
 <%= render "public/api/v1/portals/hero", portal: @portal %>
-<div class="max-w-5xl w-full flex-grow mx-auto py-8 px-4">
+<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">
     <% @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 %>