Qa fixes (#67)

* QA Fixes

* More fixes (Topic individual page)

* Footer

* Fix forms

deployment/frontend/src/components/_shared/CarouselNavButton.tsx

@@ -1,5 +1,5 @@
 
-import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/20/solid";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 
 const sizes = {
   small: 'w-[30px] h-[30px]',
@@ -15,13 +15,13 @@ const CarouselNavButton: React.FC<{
       <button
         className={`bg-white shadow ${sizes[size ?? 'medium']} rounded-full flex justify-center items-center`}
       >
-        <ArrowRightIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "right" ? "block" : "hidden"}`} />
-        <ArrowLeftIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "left" ? "block" : "hidden"}`} />
+        <ChevronRightIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "right" ? "block" : "hidden"}`} />
+        <ChevronLeftIcon className={`w-8 h-8 text-wri-black font-light ${orientation === "left" ? "block" : "hidden"}`} />
       </button>
     </>
   );
 };
 
 CarouselNavButton.defaultProps = { orientation: 'left', size: 'medium' };
 
-export default CarouselNavButton;
+export default CarouselNavButton;

deployment/frontend/src/components/_shared/Footer.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
+import { Button } from "./Button";
 
 export default function Footer({
   links = {
@@ -37,86 +38,82 @@ export default function Footer({
           </div>
         </div>
       </div>
-
-      <div className="flex flex-col w-full px-8 xxl:px-0  max-w-8xl mx-auto">
-        <div className=" pt-16 lg:pl-10 flex flex-col items-center sm:items-start sm:flex-row gap-y-4 sm:gap-x-4 font-bold text-wri-black">
-          <div className="w-full sm:w-1/5 flex flex-col items-center sm:items-start gap-y-4 mb-6 sm:mb-0">
+<div className="default-home-container mx-auto flex w-full flex-col pb-16">
+        <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 items-center gap-y-8 pt-16 font-bold text-wri-black sm:flex-row sm:items-start">
+          <div className="mb-6 flex w-full flex-col items-center gap-y-4 sm:mb-0 sm:items-start">
             <p className="text-base font-bold">ABOUT WRI</p>
             <p className=" font-normal">About us</p>
             <p className=" font-normal">Our Work</p>
             <p className=" font-normal">Our Approach</p>
           </div>
-          <div className="w-full sm:w-1/5 flex flex-col items-center sm:items-start  gap-y-4 mb-6 sm:mb-0">
+          <div className="mb-6 flex w-full flex-col items-center gap-y-4  sm:mb-0 sm:items-start">
             <p className="text-base font-bold">USEFUL LINKS</p>
             <p className=" font-normal">About us</p>
             <p className=" font-normal">Our Work</p>
             <p className=" font-normal">Our Approach</p>
           </div>
-          <div className="w-full sm:w-1/5 flex flex-col items-center sm:items-start gap-y-4">
+          <div className="flex w-full flex-col items-center gap-y-4 sm:items-start">
             <p className="text-base font-bold">GET STARTED</p>
             <p className=" font-normal">About us</p>
             <p className=" font-normal">Our Work</p>
             <p className=" font-normal">Our Approach</p>
           </div>
-          <div className="w-full sm:w-1/2 flex flex-col items-center sm:items-start gap-y-4 shrink xl:ml-20 mt-10 sm:mt-0">
-            <p className="font-bold text-base sm:text-[1.375rem]">
+          <div className="ml-auto mt-10 lg:col-span-2 lg:w-[90%] flex w-full shrink flex-col items-center gap-y-4 sm:mt-0 sm:items-start xl:min-w-[420px]">
+            <div className="font-acumin text-[22px] font-bold text-gray-800">
               STAY UP TO DATE WITH THE NEWS{" "}
-            </p>
-            <div className="flex flex-col lg:flex-row gap-y-4 gap-x-2 w-full ">
-              <div className="outline outline-1 rounded-sm pl-1 py-2 gap-x-2 flex flex-row items-center min-w-fit  w-full lg:w-[337px]">
-                <div className=" my-auto">
-                  <EnvelopeIcon className="w-5 h-5 text-wri-gray" />
-                </div>
-                <div className="grow shrink basis-auto">
-                  <input
-                    type="text"
-                    placeholder="Enter your email address"
-                    className=" focus:outline-none placeholder:text-xs text-xs font-normal w-full"
-                  />
+            </div>
+            <div className="flex w-full flex-col gap-x-2 gap-y-4 lg:flex-row justify-between">
+              <div className="relative grow">
+                <input
+                  type="text"
+                  className="h-11 w-full peer grow rounded border-0 shadow outline-0 ring-0 ring-offset-0"
+                />
+                <div className="absolute pointer-events-none peer-focus:hidden inset-y-0 left-0 flex gap-x-2 items-center pl-3">
+                  <EnvelopeIcon className="h-6 w-5 text-gray-400" />
+                  <span className="text-xs text-gray-400">Enter your email</span>
                 </div>
               </div>
-              <div className="px-4 py-2 sm:px-6 2xl:px-10 bg-wri-gold text-wri-black font-bold  text-[0.875rem] xxl:w-[139px] rounded-sm text-center">
-                SUBSCRIBE
-              </div>
+              <Button>SUBSCRIBE</Button>
             </div>
             <div className="flex flex-row gap-5">
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/fb.svg" alt="" fill />
               </div>
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/x.svg" alt={""} fill />
               </div>
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/linkedin.svg" alt={""} fill />
               </div>
-              <div className="w-5 h-5 relative ">
+              <div className="relative h-5 w-5 ">
                 <Image src="/icons/mail.svg" alt={""} fill />
               </div>
             </div>
           </div>
         </div>
-        <div className=" w-full mx-auto pt-16 lg:pl-10  flex flex-col sm:flex-row  gap-y-8 sm:gap-y-4 items sm:items-start">
-          <div className=" w-52 h-16 sm:w-56 sm:h-20 relative mx-auto sm:ml-0">
+        <div className="items mx-auto flex w-full flex-col gap-y-8 pt-16 sm:flex-row sm:gap-y-4">
+          <div className=" relative mx-auto h-16 w-52 sm:ml-0 sm:h-20 sm:w-56">
             <Image
               src="/images/WRI_logo_4c.png"
               alt="Picture of the author"
               fill
             />
           </div>
-          <div className="mx-auto sm:ml-auto sm:mr-0 xxl:mr-14  w-fit flex  items-end gap-x-1 font-normal text-base mt-auto">
+          <div className="mt-auto flex items-end gap-x-1  text-base font-normal sm:ml-auto">
             <span>
               Powered by{" "}
               <a href="#" className=" text-wri-green">
                 Portal.js
               </a>{" "}
               from
             </span>
-            <div className=" w-24 h-6 relative">
+            <div className=" relative h-6 w-24">
               <Image src="/images/datopian.png" alt="" fill></Image>
             </div>
           </div>
         </div>
       </div>
+
     </section>
   );
 }

deployment/frontend/src/components/_shared/Login.tsx

@@ -1,48 +1,71 @@
-import React from 'react'
-import { ExclamationCircleIcon, EnvelopeIcon, LockClosedIcon } from '@heroicons/react/24/outline'
-import Image from 'next/image'
+import React from "react";
+import {
+  ExclamationCircleIcon,
+  EnvelopeIcon,
+  LockClosedIcon,
+} from "@heroicons/react/24/outline";
+import Image from "next/image";
 
 export default function Login() {
   return (
-    <section id="login-modal" className=' font-acumin mb-4'>
+    <section id="login-modal" className=" mb-4 font-acumin max-w-[24rem] mx-auto">
       <div className="mt-2 flex flex-col">
-        <div className=' text-center'>
-          <ExclamationCircleIcon className='w-5 h-5 mx-auto mb-2' />
-          <p className=' font-light font-wri-black text-[0.813rem]'>Registration Not Available Yet! <b>Login for WRI Members Only.</b> You Can Still Use All Portal Features.</p>
-          <h3 className='mt-8 font-semibold text-[1.75rem]'>Log In</h3>
+        <div className=" text-center">
+          <ExclamationCircleIcon className="mx-auto mb-2 h-5 w-5" />
+          <p className=" font-wri-black text-[0.813rem] font-light">
+            Registration Not Available Yet! <b>Login for WRI Members Only.</b>{" "}
+            You Can Still Use All Portal Features.
+          </p>
+          <h3 className="mt-8 text-[1.75rem] font-semibold">Log In</h3>
         </div>
-        <div className='mt-4'>
-          <form action="" className='flex flex-col gap-y-4'>
-
-            <div className=' rounded-md px-4 group hover:bg-[#F0FDF4] hover:border-0 hover:border-b-2 hover:border-b-[#3654A5] py-3 gap-x-2 flex pr-8 flex-row items-center min-w-fit  w-full bg-white border-[1px] border-wri-gray-200'>
-              <div className='grow shrink basis-auto'><input type="text" placeholder='Email' className=' focus:outline-none group-hover:bg-[#F0FDF4]  placeholder:text-xs placeholder:font-light placeholder:text-[#353535] text-xs font-light w-full' /></div>
-              <div className=' my-auto'><EnvelopeIcon className='w-4 h-4 text-[#3654A5]' /></div>
+        <div className="mt-4">
+          <form action="" className="flex flex-col gap-y-4">
+            <div className="relative mx-auto w-full rounded-md">
+              <input
+                type="text"
+                placeholder="Email Address"
+                className="shadow-wri-small peer block w-full rounded-md border-0 px-5 py-3 text-neutral-700 ring-1 ring-inset ring-gray-300 placeholder:text-neutral-700 focus:border-b-2 focus:border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+              ></input>
+              <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center pr-3 text-neutral-700 peer-focus:text-[#3654A5]">
+                <EnvelopeIcon className="h-5 w-5 " />
+              </div>
             </div>
-
-            <div className=' rounded-md px-4 group hover:bg-[#F0FDF4] hover:border-0 hover:border-b-2 hover:border-b-[#3654A5] py-3 gap-x-2 flex pr-8 flex-row items-center min-w-fit  w-full bg-white border-[1px] border-wri-gray-200'>
-              <div className='grow shrink basis-auto'><input type="text" placeholder='Password' className=' focus:outline-none placeholder:text-xs placeholder:font-light placeholder:text-[#353535] text-xs font-light w-full group-hover:bg-[#F0FDF4]' /></div>
-              <div className=' my-auto'><LockClosedIcon className='w-4 h-4 text-[#3654A5]' /></div>
+            <div className="relative mx-auto w-full max-w-[24rem] rounded-md">
+              <input
+                type="text"
+                placeholder="Password"
+                className="shadow-wri-small peer block w-full rounded-md border-0 px-5 py-3 text-neutral-700 ring-1 ring-inset ring-gray-300 placeholder:text-neutral-700 focus:border-b-2 focus:border-blue-800 focus:bg-slate-100 focus:ring-0 focus:ring-offset-0 sm:text-sm sm:leading-6"
+              ></input>
+              <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center pr-3 text-neutral-700 peer-focus:text-[#3654A5]">
+                <LockClosedIcon className="h-5 w-5 " />
+              </div>
             </div>
-            <div className='font-light text-[0.875rem] text-wri-black text-right -mt-2'>
+
+            <div className="-mt-2 text-right text-[0.875rem] font-light text-wri-black">
               Forgot password?
             </div>
-            <button type='submit' className='bg-wri-gold text-wri-black font-semibold text-[1.125rem] rounded-sm px-4 py-4'>Log In</button>
+            <button
+              type="submit"
+              className="rounded-sm bg-wri-gold px-4 py-4 text-[1.125rem] font-semibold text-wri-black"
+            >
+              Log In
+            </button>
           </form>
         </div>
-        <div className='mt-8 text-center flex justify-center items-center gap-x-2'>
-          <div className='font-light text-[0.875rem] border border-1 border-wri-gray w-20 h-0' />
-          <div className='text-wri-black '>or</div>
-          <div className='font-light text-[0.875rem] border border-1 border-wri-gray w-20 h-0' />
+        <div className="mt-8 flex items-center justify-center gap-x-2 text-center">
+          <div className="border-1 h-0 w-20 border border-wri-gray text-[0.875rem] font-light" />
+          <div className="text-wri-black ">or</div>
+          <div className="border-1 h-0 w-20 border border-wri-gray text-[0.875rem] font-light" />
         </div>
-        <div className='flex  mt-8 outline outline-1 outline-wri-gold rounded-sm justify-center py-4 '>
-          <div className='w-4 h-4 relative my-auto'>
-            <Image src='/images/wri_logo.png' alt="comment" fill />
+        <div className="mt-8  flex justify-center rounded-sm py-4 outline outline-1 outline-wri-gold ">
+          <div className="relative my-auto h-4 w-4">
+            <Image src="/images/wri_logo.png" alt="comment" fill />
           </div>
-          <div className='ml-2 w-fit font-semibold text-base text-wri-black '>
+          <div className="ml-2 w-fit text-base font-semibold text-wri-black ">
             Sign In with your WRI Credentials
           </div>
         </div>
       </div>
     </section>
-  )
+  );
 }

deployment/frontend/src/components/_shared/Modal.tsx

@@ -34,7 +34,7 @@ export default function Modal({ open, setOpen, children, className = "" }: { ope
                 <div className="absolute right-0 top-0  pr-4 pt-4 block z-50">
                   <button
                     type="button"
-                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                     onClick={() => setOpen(false)}
                   >
                     <span className="sr-only">Close</span>

deployment/frontend/src/components/dashboard/ActivityStreams.tsx

@@ -25,7 +25,7 @@ export default function UserActivityStreams({ drag }: { drag: boolean }) {
       }
       <div className='flex px-2 mb-4 border-b-[0.3px] border-b-gray-100'>
         <p className='font-normal text-[20px]'>Activity Stream</p>
-        <div className='ml-auto flex items-center font-semibold text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4' /></div>
+        <div className='ml-auto flex items-center font-semibold gap-x-1 text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4 mb-1' /></div>
       </div>
       {
         activitydata.slice(0, 6).map((items, index) => {
@@ -37,4 +37,4 @@ export default function UserActivityStreams({ drag }: { drag: boolean }) {
     </section>
 
   )
-}
+}

deployment/frontend/src/components/dashboard/Favourites.tsx

@@ -27,7 +27,7 @@ export default function Favourites({ drag }: { drag: boolean }) {
       }
       <div className='flex px-2 mb-4 border-b-[0.3px] border-b-gray-100'>
         <p className='font-normal text-[20px]'>My Favourites</p>
-        <div className='ml-auto flex items-center font-semibold text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4' /></div>
+        <div className='ml-auto flex items-center font-semibold gap-x-1 text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4 mb-1' /></div>
       </div>
       {
         [1, 2, 3, 4, 5, 6].map((items) => {

deployment/frontend/src/components/dashboard/Notifications.tsx

@@ -34,7 +34,7 @@ export default function Notifications({ drag }: { drag: boolean }) {
           <p className='font-normal text-[20px]'>Notifications </p>
           <div className='rounded-full my-auto w-4 h-4 bg-wri-gold font-bold text-[11px] flex justify-center items-center'>3</div>
         </div>
-        <div className='ml-auto flex items-center font-semibold text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4' /></div>
+        <div className='ml-auto flex items-center font-semibold gap-x-1 text-[14px] text-wri-green'><span>See all</span> <ArrowRightIcon className='w-4 h-4 mb-1' /></div>
       </div>
       {
         [1, 2, 3, 4, 5, 6].map((items) => {

deployment/frontend/src/components/dashboard/_shared/SearchHeader.tsx

@@ -5,7 +5,7 @@ import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 function LeftNode({ placeholder }: { placeholder?: string }) {
   return (
     <div className=' px-2 py-4 gap-x-2 flex flex-row items-center min-w-fit  w-full bg-white'>
-      <div className='grow shrink basis-auto'><input type="text" placeholder={`${placeholder ? placeholder : "Search by keywords"}`} className=' focus:outline-none outline-none border-none focus:border-none placeholder:text-[14px] text-[14px] font-light w-full' /></div>
+      <div className='grow shrink basis-auto'><input type="text" placeholder={`${placeholder ? placeholder : "Search by keywords"}`} className=' focus:outline-none outline-none border-none focus:border-none focus:ring-0 focus:ring-offset-0 placeholder:text-[14px] text-[14px] font-light w-full' /></div>
       <div className=' my-auto'><MagnifyingGlassIcon className='w-4 h-4 text-wri-black' /></div>
     </div>
   )