From 132ad90b519384445b46e6031a41b4a379d42b8e Mon Sep 17 00:00:00 2001
From: William Lima <william.lima@nosi.cv>
Date: Thu, 14 Dec 2023 00:03:53 -0100
Subject: [PATCH] #140 Fix Globals, Home, Dataset, Dataset Detail, Build Data

---
 components/_shared/ScrollIndicator.tsx        |  1 +
 .../_shared/developer_experience/Code.tsx     |  7 ++--
 components/dataset/About.tsx                  | 32 ++++++++++++++-----
 components/dataset/DataExplorer.tsx           | 14 ++++----
 components/dataset/Share.tsx                  |  1 +
 components/dataset/SimilarDatasets.tsx        |  8 ++---
 components/home/main/OpenData101.tsx          | 10 +++---
 components/home/main/Topics.tsx               |  6 ++--
 components/resource/About.tsx                 |  6 ++--
 components/resource/ChartBuilder.tsx          |  9 ++++--
 components/resource/ResourceExplorer.tsx      |  6 ++--
 components/search/List.tsx                    |  2 +-
 components/search/ListCard.tsx                | 20 +++++++-----
 components/search/NewForm.tsx                 | 10 ++++--
 styles/globals.css                            | 16 +++++++++-
 tailwind.config.js                            |  2 +-
 16 files changed, 99 insertions(+), 51 deletions(-)

diff --git a/components/_shared/ScrollIndicator.tsx b/components/_shared/ScrollIndicator.tsx
index 38f9d1e..6483456 100644
--- a/components/_shared/ScrollIndicator.tsx
+++ b/components/_shared/ScrollIndicator.tsx
@@ -64,6 +64,7 @@ const ScrollIndicator: React.FC<{
               <div className="h-full absolute flex flex-col justify-evenly w-full items-center border-[#333333] border-t-[1px] border-b-[1px] w-1">
                 {stops.map((stop, index) => (
                   <button
+                    aria-label={`Section ${index + 1}`}
                     className={`transition-all ease-in-out origin-center duration-100 rounded-full border-[1px] border-[#333333] w-[10px] h-[10px] bg-[#fff] ${
                       active == index ? 'scale-150' : ''
                     } flex justify-center items-center`}
diff --git a/components/_shared/developer_experience/Code.tsx b/components/_shared/developer_experience/Code.tsx
index b709e0d..a447bd4 100644
--- a/components/_shared/developer_experience/Code.tsx
+++ b/components/_shared/developer_experience/Code.tsx
@@ -1,5 +1,8 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import {
+  docco,
+  githubGist,
+} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { AR } from '../../../hooks/locale';
 import CopyIconButton from '../CopyIconButton';
 import useTranslation from 'next-translate/useTranslation';
@@ -24,7 +27,7 @@ const Code: React.FC<any> = ({ language, children }) => {
           <SyntaxHighlighter
             language={language}
             className="syntax"
-            style={docco}
+            style={githubGist}
             customStyle={{
               backgroundColor: '#FEFEFE',
               borderRadius: '25px',
diff --git a/components/dataset/About.tsx b/components/dataset/About.tsx
index 044f8a3..0d1cf34 100644
--- a/components/dataset/About.tsx
+++ b/components/dataset/About.tsx
@@ -34,9 +34,13 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           />
         </h1>
       </div>
-      <div className="flex flex-col lg:flex-row justify-start gap-x-8 mb-4 text-[#787878] text-[20px] font-normal">
+      <div className="flex flex-col lg:flex-row justify-start gap-x-8 mb-4 text-[#595959] text-[20px] font-normal">
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/library-icon.svg" alt="orgs" className="w-5 h-3" />
+          <img
+            src="/images/library-icon.svg"
+            alt="organization"
+            className="w-5 h-3"
+          />
           <Link href={`/@${result.organization.name}`}>
             <a href={`/@${result.organization.name}`}>
               {result.organization.title}
@@ -44,7 +48,11 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           </Link>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/print-icon.svg" alt="orgs" className="w-5 h-3 " />
+          <img
+            src="/images/print-icon.svg"
+            alt="date created"
+            className="w-5 h-3 "
+          />
           <span>
             {t('created') +
               ' ' +
@@ -52,7 +60,11 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           </span>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/clock-icon.svg" alt="orgs" className="w-5 h-3" />
+          <img
+            src="/images/clock-icon.svg"
+            alt="date updated"
+            className="w-5 h-3"
+          />
           <span>
             {t('updated') +
               ' ' +
@@ -60,7 +72,11 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           </span>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/book-icon.svg" alt="orgs" className="w-5  h-3" />
+          <img
+            src="/images/book-icon.svg"
+            alt="license"
+            className="w-5  h-3"
+          />
           <span>{result.license_title}</span>
         </div>
         {result.total_downloads > 0 ? (
@@ -75,7 +91,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           ''
         )}
       </div>
-      <div className="flex justify-start gap-x-4 md:gap-x-8 mb-4 text-[#787878] text-[20px] font-normal items-baseline">
+      <div className="flex justify-start gap-x-4 md:gap-x-8 mb-4 text-[#595959] text-[20px] font-normal items-baseline">
         <div className="font-avenir flex text-sm py-2 items-baseline">
           <span>{t('share')}: </span>
           <Share title={result.title} />
@@ -89,10 +105,10 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           <Rate title={result.title} id={result.id} />
         </div>
       </div>
-      <article className="font-avenir text-[#7C7C7C] text-[20px] font-normal  mb-4">
+      <article className="font-avenir text-[#595959] text-[20px] font-normal  mb-4">
         {result.description?.replace(/<[^>]*>?/gm, '') || ''}
       </article>
-      <div className="flex flex-row font-avenir font-normal text-[15px] text-[#086F06]">
+      <div className="flex flex-row font-avenir font-normal text-[15px] text-[#074106]">
         <Tags
           tags={result.tags}
           style={`rounded-full bg-[#80E47E] py-2 px-4 ${AR('', 'mr-4')}`}
diff --git a/components/dataset/DataExplorer.tsx b/components/dataset/DataExplorer.tsx
index 9305462..1d17637 100644
--- a/components/dataset/DataExplorer.tsx
+++ b/components/dataset/DataExplorer.tsx
@@ -159,7 +159,7 @@ const DataExplorer: React.FC<{
                   {i === activeTable ? (
                     <img
                       src="/images/checked-icon.svg"
-                      alt="orgs"
+                      alt="org checked"
                       className={`w-5 h-4 mb-4 absolute -top-2 ${AR(
                         'right-2',
                         '-right-2'
@@ -175,7 +175,7 @@ const DataExplorer: React.FC<{
                         ? `/images/${resource.format.toLowerCase()}-icon.svg`
                         : '/images/resources/unknown.svg'
                     }
-                    alt="orgs"
+                    alt={`resource ${i}`}
                     className="w-10 mb-4"
                   />
 
@@ -191,9 +191,9 @@ const DataExplorer: React.FC<{
       <div className="lg:col-span-9 p-6 lg:p-10 bg-[#F7FAFC] rounded-2xl">
         <div className="flex flex-col md:flex-row justify-between mb-4">
           <div className="md:w-2/3">
-            <p className="font-medium font-avenir text-2xl mb-5 text-[#4D4D4D]">
+            <h2 className="font-medium font-avenir text-2xl mb-5 text-[#4D4D4D]">
               {resources[activeTable].title || resources[activeTable].name}
-            </p>
+            </h2>
           </div>
           <div className="grid xl:justify-items-end align-middle justify-items-start ">
             <Link
@@ -217,7 +217,7 @@ const DataExplorer: React.FC<{
         </div>
 
         <div
-          className={`flex font-avenir text-[20px] text-[#808080] font-normal ${AR(
+          className={`flex font-avenir text-[20px] text-[#545454] font-normal ${AR(
             'pr-4',
             'pl-4'
           )} flex-col sm:flex-row`}
@@ -237,7 +237,7 @@ const DataExplorer: React.FC<{
             className={`${AR(
               'ml-3',
               'mr-3'
-            )} text-[#C4C4C4] text-1 hidden sm:block`}
+            )} text-[#545454] text-1 hidden sm:block`}
           >
             |
           </div>
@@ -250,7 +250,7 @@ const DataExplorer: React.FC<{
             className={`${AR(
               'ml-3',
               'mr-3'
-            )} text-[#C4C4C4] text-1 hidden sm:block`}
+            )} text-[#545454] text-1 hidden sm:block`}
           >
             |
           </div>
diff --git a/components/dataset/Share.tsx b/components/dataset/Share.tsx
index e6743bb..d69c36c 100644
--- a/components/dataset/Share.tsx
+++ b/components/dataset/Share.tsx
@@ -8,6 +8,7 @@ const Share: React.FC<{ title: string }> = ({ title }) => {
   return (
     <span className={`text-[#1F356C] ${AR('ml-2', 'mr-2')}}`}>
       <a
+        aria-label="Share"
         href={`mailto:?subject=${subject}&body=${title} - ${
           typeof window !== 'undefined' ? window.location.href : ''
         }  %0d%0a %0d%0a ${t('goto-site', {
diff --git a/components/dataset/SimilarDatasets.tsx b/components/dataset/SimilarDatasets.tsx
index 4425f34..da38047 100644
--- a/components/dataset/SimilarDatasets.tsx
+++ b/components/dataset/SimilarDatasets.tsx
@@ -49,7 +49,7 @@ export default function SimilarDatasets({ variables }) {
       <div className="flex justify-center w-full xl:p-10">
         <div className="flex flex-col items-between h-full xl:w-2/3 mb-10 w-full">
           <div className="self-center mb-4 font-avenir text-[30px] font-extrabold text-[#4D4D4D]">
-            <p>{t('explore-s-datasets')}</p>
+            <h2>{t('explore-s-datasets')}</h2>
           </div>
           <div className="flex xl:flex-row flex-col justify-between bg-[#F7FAFC] p-2 rounded-xl">
             <button
@@ -58,7 +58,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/edu-icon.svg"
-                alt="orgs"
+                alt="topic icon"
                 className={`w-4 h-4 ${AR('ml-2', 'mr-2')}`}
               />
               {result.groups[0]?.title} {t('topic')}
@@ -69,7 +69,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/ball-icon.svg"
-                alt="orgs"
+                alt="keywork icon"
                 className={`w-4 h-4 text-white ${AR('ml-2', 'mr-2')}`}
               />
               {result.tags[0]?.title} {t('keyword')}
@@ -80,7 +80,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/library-icon.svg"
-                alt="orgs"
+                alt="org icon"
                 className={`w-4 h-4 text-white ${AR('ml-2', 'mr-2')}`}
               />
               {result.organization.title}
diff --git a/components/home/main/OpenData101.tsx b/components/home/main/OpenData101.tsx
index 4de1de9..48ebda7 100644
--- a/components/home/main/OpenData101.tsx
+++ b/components/home/main/OpenData101.tsx
@@ -10,14 +10,16 @@ export default function OpenData101(props) {
   }
 
   return (
-    <div className="relative h-fit mb-[70px] sm:mb-10 container mx-auto ">
+    <div className="relative h-fit mb-[70px] sm:mb-10 container mx-auto">
       <img
         src="/images/open-data-101.svg"
-        alt="Open Data 101"
+        alt="Open Data 101 Background"
         className="w-full"
       />
       <div className="absolute w-full lg:w-1/2  lg:inset-x-1/4 top-0 sm:top-auto sm:bottom-1/2 text-center">
-        <p className="text-[#54CA59] font-semibold">- {t('hm-p-next')} -</p>
+        <p className="text-[#0E5D15] text-[18px] font-semibold">
+          - {t('hm-p-next')} -
+        </p>
         <a href={`${AR('/ar')}/p/open-data-101`}>
           <h2 className="font-avenir font-extrabold text-2xl lg:text-4xl mb-2">
             {text}
@@ -28,7 +30,7 @@ export default function OpenData101(props) {
         </p>
         <a
           href="#"
-          className="text-[#54CA59] font-medium"
+          className="text-[#0E5D15] font-medium text-[18px]"
           onClick={scrollToTop}
         >
           {t('opendata-a')}
diff --git a/components/home/main/Topics.tsx b/components/home/main/Topics.tsx
index e1715ba..1b0a02c 100644
--- a/components/home/main/Topics.tsx
+++ b/components/home/main/Topics.tsx
@@ -46,8 +46,8 @@ export default function Topics() {
                   href={`${AR('/ar')}/topic/${topic.name}`}
                   className="group h-full w-full flex flex-stretch"
                 >
-                  <div className="relative bg-gray-200 w-full rounded-lg overflow-hidden">
-                    <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l z-10" />
+                  <div className="relative bg-gray w-full rounded-lg overflow-hidden topic-item">
+                    <span className="absolute left-0 z-20 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l " />
                     <Image
                       src={topic.image_display_url}
                       priority={false}
@@ -57,7 +57,7 @@ export default function Topics() {
                       alt={topic.title}
                       className="w-full h-full object-center object-contain"
                     />
-                    <p className="absolute py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
+                    <p className="absolute z-10 py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
                       {topic.title}
                     </p>
                   </div>
diff --git a/components/resource/About.tsx b/components/resource/About.tsx
index 2467f76..f047171 100644
--- a/components/resource/About.tsx
+++ b/components/resource/About.tsx
@@ -42,13 +42,13 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           {resource.format === 'CSV' ? (
             <img
               src="/images/csv-icon.svg"
-              alt="Dataset title"
+              alt="CSV"
               className="inline w-6 xl:mr-2"
             />
           ) : (
             <img
               src="/images/excel-icon.svg"
-              alt="Dataset title"
+              alt="Excel"
               className="inline w-6 xl:mr-2"
             />
           )}
@@ -62,7 +62,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
             />
           </h1>
         </div>
-        <article className="font-avenir text-[#7C7C7C] text-[20px] font-normal mb-4">
+        <article className="font-avenir text-[#545454] text-[20px] font-normal mb-4">
           {resource.description?.replace(/<[^>]*>?/gm, '') || ''}
         </article>
       </div>
diff --git a/components/resource/ChartBuilder.tsx b/components/resource/ChartBuilder.tsx
index 1ee1617..e8e5008 100644
--- a/components/resource/ChartBuilder.tsx
+++ b/components/resource/ChartBuilder.tsx
@@ -72,7 +72,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
       <div className="flex  justify-start w-full py-10 pl-0">
         <div className="flex flex-col items-between h-full w-1/2 mb-10">
           <div className="self-start mb-4 font-avenir text-[30px] font-extrabold text-[#4D4D4D]">
-            <p>{t('create-viz')}</p>
+            <h2>{t('create-viz')}</h2>
           </div>
           <div className="flex xl:flex-row flex-col bg-[#F7FAFC] justify-between p-2 rounded-xl xl:w-4/6">
             <button
@@ -85,7 +85,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
             >
               <img
                 src="/images/pie-icon.svg"
-                alt="orgs"
+                alt="build chart icon"
                 className="w-4  h-4 mr-2"
               />
               {t('build-chart')}
@@ -100,7 +100,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
             >
               <img
                 src="/images/app-icon.svg"
-                alt="orgs"
+                alt="build dashboard icon"
                 className="w-4  h-4 mr-4 text-white"
               />
               {t('build-dashboard')}
@@ -122,6 +122,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
                 {t('chart-type')}
               </span>
               <select
+                aria-label="Chart type"
                 value={view.spec.type}
                 onChange={handleChartTypeChange}
                 className="rounded-xl outline-none border-none font-avenir font-medium text-[16px] p-4"
@@ -138,6 +139,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
                 {t('dimension')}
               </span>
               <select
+                aria-label="Dimension"
                 value={view.spec.group}
                 onChange={handleDimensionChange}
                 disabled={!view.spec.type}
@@ -158,6 +160,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
                 {t('measure')}
               </span>
               <select
+                aria-label="Measure"
                 value={view.spec.series[0] || ''}
                 onChange={handleMeasureChange}
                 disabled={!view.spec.type || !view.spec.group}
diff --git a/components/resource/ResourceExplorer.tsx b/components/resource/ResourceExplorer.tsx
index e57212f..e6137e1 100644
--- a/components/resource/ResourceExplorer.tsx
+++ b/components/resource/ResourceExplorer.tsx
@@ -111,7 +111,7 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
       {/* Preview: show Data Explorer if tabular data + datastore active */}
       <div className="col-span-12 p-10 bg-[#F7FAFC] rounded-2xl">
         <div className="flex xl:flex-row flex-col justify-between mb-4">
-          <div className="flex font-avenir text-[20px] text-[#808080] font-normal pl-4 w-2/3 xl:flex-row flex-col">
+          <div className="flex font-avenir text-[20px] text-[#545454] font-normal pl-4 w-2/3 xl:flex-row flex-col">
             <div className="flex xl:mr-3 items-baseline mb-2">
               <button
                 onClick={() => download(resources[activeTable].path)}
@@ -121,7 +121,7 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
                 {t('download')}
               </button>
             </div>
-            <div className="mr-3 text-[#C4C4C4] text-1 hidden xl:inline">
+            <div className="mr-3 text-[#545454] text-1 hidden xl:inline">
               |
             </div>
             <div className="flex xl:mr-3 mb-2">
@@ -129,7 +129,7 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
                 {resources[activeTable].count || 'N/A'} {t('rows')}
               </span>
             </div>
-            <div className="mr-3 text-[#C4C4C4] text-1 hidden xl:inline">
+            <div className="mr-3 text-[#545454] text-1 hidden xl:inline">
               |
             </div>
             <div className="flex mr-3">
diff --git a/components/search/List.tsx b/components/search/List.tsx
index ae6d20e..0a9a809 100644
--- a/components/search/List.tsx
+++ b/components/search/List.tsx
@@ -78,7 +78,7 @@ const List: React.FC<{
           )}
           {!loadSearch &&
             searchResults?.results.map((dataset, index) => (
-              <ListCard key={index} dataset={dataset} />
+              <ListCard key={index} index={index} dataset={dataset} />
             ))}
         </ul>
         <div className="flex justify-center overflow-auto hoverable-scroll">
diff --git a/components/search/ListCard.tsx b/components/search/ListCard.tsx
index f1c704d..501b662 100644
--- a/components/search/ListCard.tsx
+++ b/components/search/ListCard.tsx
@@ -16,7 +16,11 @@ const datasetFiles = [
   { name: 'zip', icon: '/images/resources/zip.svg' },
 ];
 
-const Card: React.FC<{ dataset: any }> = ({ dataset, ...props }) => {
+const Card: React.FC<{ dataset: any; index: number }> = ({
+  dataset,
+  index,
+  ...props
+}) => {
   const { t } = useTranslation('common');
   const availableFormats = dataset.resources.map((item) =>
     item.format.toLowerCase()
@@ -41,7 +45,7 @@ const Card: React.FC<{ dataset: any }> = ({ dataset, ...props }) => {
                     Math.random() * (6 - 1 + 1) + 1
                   )}.png`
                 }
-                alt={dataset.organization.title}
+                alt={`${dataset.organization.title} ${index + 1} `}
                 className="w-full h-[150px] h:sm-auto object-cover sm:object-scale-down object-center rounded-md"
               />
             </div>
@@ -57,7 +61,7 @@ const Card: React.FC<{ dataset: any }> = ({ dataset, ...props }) => {
                   {dataset.title}
                 </h1>
                 <p
-                  className={`text-sm font-medium text-[#7C7C7C] sm:h-[2.5rem] line-clamp-2  sm:text-left ${AR(
+                  className={`text-sm font-medium text-[#545454] sm:h-[2.5rem] line-clamp-2  sm:text-left ${AR(
                     'sm:text-right'
                   )}`}
                 >
@@ -67,10 +71,10 @@ const Card: React.FC<{ dataset: any }> = ({ dataset, ...props }) => {
                     : ''}
                 </p>
               </a>
-              <div className="inline-flex items-center justify-start lg:justify-start sm:py-1 lg:py-2 space-x-2 text-[#7C7C7C]">
+              <div className="inline-flex items-center justify-start lg:justify-start sm:py-1 lg:py-2 space-x-2 text-[#545454]">
                 <img
                   src="/images/library-icon.svg"
-                  alt="orgs"
+                  alt={`orgs icon ${index}`}
                   className={`w-4 mb-1 grayscale ${AR('ml-2')}`}
                 />
                 <span className="text-xs text-left sm:text-left capitalize">
@@ -79,13 +83,13 @@ const Card: React.FC<{ dataset: any }> = ({ dataset, ...props }) => {
               </div>
             </div>
           </div>
-          <div className="w-full lg:w-auto sm:pl-[96px] lg:pl-0 sm:flex justify-between items-center h-full text-[#7C7C7C] z-10">
+          <div className="w-full lg:w-auto sm:pl-[96px] lg:pl-0 sm:flex justify-between items-center h-full text-[#545454] z-10">
             {/* dataset info on hover */}
             <div className="flex flex-col flex-wrap sm:flex-row lg:flex-col sm:items-center lg:items-start sm:pl-6 pt-4 lg:pt-0 lg:px-4 sm:space-x-4 lg:space-x-0 lg:border-l-2 border-[#E6E6E6] h-full lg:opacity-0 group-hover:opacity-100 ease-in-out duration-150">
               <div className="whitespace-nowrap">
                 <img
                   src="/images/page.svg"
-                  alt="t"
+                  alt={` resources icon ${index + 1}`}
                   className={`inline grayscale ${AR('ml-1', 'mr-1')} w-4`}
                 />
                 <span className="text-xs">
@@ -98,7 +102,7 @@ const Card: React.FC<{ dataset: any }> = ({ dataset, ...props }) => {
               <div className="whitespace-nowrap ">
                 <img
                   src="/images/time.svg"
-                  alt="t"
+                  alt={` time icon ${index + 1}`}
                   className={`inline grayscale ${AR('ml-1', 'mr-1')} w-4`}
                 />
                 <span className="text-xs capitalize">
diff --git a/components/search/NewForm.tsx b/components/search/NewForm.tsx
index ea485b6..c517523 100644
--- a/components/search/NewForm.tsx
+++ b/components/search/NewForm.tsx
@@ -51,7 +51,10 @@ const SearchForm: React.FC<{
   return (
     <div className="relative bg-[#F7FAFC] font-avenir flex flex-col items-center justify-center w-full py-12 overflow-hidden">
       <div className="absolute bg-waves bg-cover bg-no-repeat bg-center left-0 right-0 top-[-227%] bottom-[-109%] z-0" />
-      <h1 className="text-3xl text-center font-extrabold !mt-0 mb-8 capitalize z-10">
+      <h1
+        className="text-3xl text-center font-extrabold !mt-0 mb-8 capitalize z-10"
+        id="search-title"
+      >
         {t('ds-h-sear')}
       </h1>
       <div className="xl:flex xl:flex-wrap items-center w-full sm:max-w-xl xl:max-w-none xl:w-9/12 px-4 sm:px-0 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
@@ -64,6 +67,7 @@ const SearchForm: React.FC<{
             id="search2"
             type="text"
             name="search"
+            aria-labelledby="search-title"
             ref={searchQueryRef}
             onKeyPress={handlekeyEvent}
             placeholder={t('ds-bt-searc')}
@@ -99,7 +103,7 @@ const SearchForm: React.FC<{
             >
               <img
                 src="/images/library-icon.svg"
-                alt="orgs"
+                alt="organizations icon"
                 className="w-5 mb-1"
               />
               <input
@@ -116,7 +120,7 @@ const SearchForm: React.FC<{
             >
               <img
                 src="/images/calender-icon.svg"
-                alt="orgs"
+                alt="calendar icon"
                 className="w-5 mb-1 "
               />
               <input
diff --git a/styles/globals.css b/styles/globals.css
index 3c40efc..ed472fa 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -349,7 +349,7 @@ svg.star-svg {
 
 .react-simple-star-rating-tooltip {
   background-color: white !important;
-  color: #7c7c82 !important;
+  color: #595959 !important;
   margin-left: 8px !important;
   padding: 0px !important;
 }
@@ -456,3 +456,17 @@ svg.star-svg {
   }
   
 }
+
+
+.topic-item:before{
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+  z-index: 1;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index bfc2b7f..dff36b9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,7 +19,7 @@ module.exports = {
         darkerbrown: '#964800',
         lightestblue: '#F7FAFC',
         black: '#4D4D4D',
-        gray: '#7C7C7C',
+        gray: '#605e5e',
         primaryGreen: '#22B373',
       },
       fontFamily: {