From 3171771966eec9ebeef7a18beab215d6e5a48ee1 Mon Sep 17 00:00:00 2001
From: Matthew-Baird <148975913+Matthew-Baird@users.noreply.github.com>
Date: Thu, 25 Apr 2024 08:28:47 +0200
Subject: [PATCH] Opp Carousel Touchups & Goodies (#753)

* Organisation admin view tab mobile styling
* Opportunity carousel styling
* Nprogress loader styling
* Update status text
* Cancel submission modal overflow fix
* Custom bounce ease to tailwind config
* Carousel scroll bug fix
---
 .../src/components/Carousel/ArrowButtons.tsx  |  14 ++-
 .../Carousel/SelectedSnapDisplay.tsx          |   2 +-
 .../Opportunity/OpportunitiesCarousel.tsx     | 117 +++++++++++++-----
 .../Opportunity/OpportunityPublicSmall.tsx    |  14 ++-
 .../opportunities/[[...query]]/index.tsx      |   8 +-
 .../opportunities/[opportunityId]/index.tsx   |  21 ++--
 .../organisations/[[...query]]/index.tsx      |  88 ++++++++++---
 src/web/src/styles/globals.scss               |  18 +--
 src/web/tailwind.config.ts                    |   3 +
 9 files changed, 202 insertions(+), 83 deletions(-)

diff --git a/src/web/src/components/Carousel/ArrowButtons.tsx b/src/web/src/components/Carousel/ArrowButtons.tsx
index a7f8defb8..f8086547c 100644
--- a/src/web/src/components/Carousel/ArrowButtons.tsx
+++ b/src/web/src/components/Carousel/ArrowButtons.tsx
@@ -65,11 +65,14 @@ export const PrevButton: React.FC<PropType> = (props) => {
 
   return (
     <button
-      className="btn btn-circle btn-sm transform-gpu cursor-pointer border-[1px] border-purple bg-transparent text-black hover:scale-105 hover:bg-gray"
+      className="group btn btn-circle btn-sm h-10 w-10 transform-gpu cursor-pointer border-[1.5px] border-purple bg-transparent text-black transition-all duration-500 ease-bounce md:h-8 md:w-8 xl:hover:scale-110 xl:hover:border-purple xl:hover:bg-purple"
       type="button"
       {...restProps}
     >
-      <svg className="h-[40%] w-[40%]" viewBox="0 0 532 532">
+      <svg
+        className="mr-[2px] h-[45%] w-[45%] transform text-purple transition-all duration-500 ease-bounce group-disabled:text-gray xl:group-hover:scale-110 xl:group-hover:text-white"
+        viewBox="0 0 532 532"
+      >
         <path
           fill="currentColor"
           d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
@@ -85,11 +88,14 @@ export const NextButton: React.FC<PropType> = (props) => {
 
   return (
     <button
-      className="btn btn-circle btn-sm transform-gpu cursor-pointer border-[1px] border-purple bg-transparent text-black hover:scale-105 hover:bg-gray"
+      className="group btn btn-circle btn-sm h-10 w-10 transform-gpu cursor-pointer border-[1.5px] border-purple bg-transparent text-black transition-all duration-500 ease-bounce md:h-8 md:w-8 xl:hover:scale-110 xl:hover:border-purple xl:hover:bg-purple"
       type="button"
       {...restProps}
     >
-      <svg className="h-[40%] w-[40%]" viewBox="0 0 532 532">
+      <svg
+        className="ml-[2px] h-[45%] w-[45%] transform text-purple transition-all duration-500 ease-bounce group-disabled:text-gray xl:group-hover:scale-110 xl:group-hover:text-white"
+        viewBox="0 0 532 532"
+      >
         <path
           fill="currentColor"
           d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
diff --git a/src/web/src/components/Carousel/SelectedSnapDisplay.tsx b/src/web/src/components/Carousel/SelectedSnapDisplay.tsx
index 6196944c5..e18aece85 100644
--- a/src/web/src/components/Carousel/SelectedSnapDisplay.tsx
+++ b/src/web/src/components/Carousel/SelectedSnapDisplay.tsx
@@ -38,7 +38,7 @@ export const SelectedSnapDisplay: React.FC<{
   const { selectedSnap, snapCount } = props;
 
   return (
-    <div className="flex select-none items-center justify-start font-semibold">
+    <div className="flex select-none items-center justify-start text-sm font-semibold md:font-normal md:text-gray-dark">
       {selectedSnap + 1} / {snapCount}
     </div>
   );
diff --git a/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx b/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx
index 2c3f4cb27..14391385b 100644
--- a/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx
+++ b/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx
@@ -15,32 +15,57 @@ import {
   PrevButton,
   NextButton,
 } from "../Carousel/ArrowButtons";
-
-const OPTIONS: EmblaOptionsType = {
-  dragFree: false,
-  containScroll: "keepSnaps",
-  watchSlides: true,
-  watchResize: true,
-};
+import { useAtomValue } from "jotai";
+import { screenWidthAtom } from "~/lib/store";
 
 const OpportunitiesCarousel: React.FC<{
   [id: string]: any;
   title?: string;
+  description?: string;
   viewAllUrl?: string;
   loadData: (startRow: number) => Promise<OpportunitySearchResultsInfo>;
   data: OpportunitySearchResultsInfo;
   options?: EmblaOptionsType;
 }> = (props) => {
-  const { id, title, viewAllUrl, loadData, data: propData } = props;
+  const {
+    id,
+    title,
+    description,
+    viewAllUrl,
+    loadData,
+    data: propData,
+  } = props;
   const scrollListenerRef = useRef<() => void>(() => undefined);
   const listenForScrollRef = useRef(true);
   const hasMoreToLoadRef = useRef(true);
   const [slides, setSlides] = useState(propData.items);
   const [hasMoreToLoad, setHasMoreToLoad] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
+  const screenWidth = useAtomValue(screenWidthAtom);
+  const [options, setOptions] = useState<EmblaOptionsType>({
+    dragFree: false,
+    containScroll: "trimSnaps",
+    watchSlides: true,
+    watchResize: true,
+    align: "start",
+  });
+
+  useEffect(() => {
+    if (screenWidth < 768) {
+      setOptions((prevOptions) => ({
+        ...prevOptions,
+        align: "center",
+      }));
+    } else {
+      setOptions((prevOptions) => ({
+        ...prevOptions,
+        align: "start",
+      }));
+    }
+  }, [screenWidth]);
 
   const [emblaRef, emblaApi] = useEmblaCarousel({
-    ...OPTIONS,
+    ...options,
     watchSlides: (emblaApi) => {
       const reloadEmbla = (): void => {
         const oldEngine = emblaApi.internalEngine();
@@ -156,22 +181,44 @@ const OpportunitiesCarousel: React.FC<{
   }, [hasMoreToLoad]);
 
   return (
-    <div className="mb-12 md:mb-8">
+    <div className="mb-12 md:mb-20">
       <div className="mb-2 flex flex-col gap-6">
         <div className="flex max-w-full flex-row px-4 md:max-w-7xl md:px-0">
-          <div className="flex flex-grow">
+          <div className="flex flex-grow flex-col">
             <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold text-black md:max-w-[800px]">
               {title}
             </div>
+            <div className="text-gray-dark">{description}</div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            {snapCount > 1 && selectedSnap < snapCount && (
+              <div className="flex items-center">
+                <div className="hidden w-full gap-4 md:flex">
+                  <SelectedSnapDisplay
+                    selectedSnap={selectedSnap}
+                    snapCount={propData.totalCount ?? snapCount}
+                  />
+                  <PrevButton
+                    onClick={onPrevButtonClick}
+                    disabled={prevBtnDisabled}
+                  />
+                  <NextButton
+                    onClick={onNextButtonClick}
+                    disabled={nextBtnDisabled}
+                  />
+                </div>
+              </div>
+            )}
+            {viewAllUrl && (
+              <Link
+                href={viewAllUrl}
+                className="flex w-14 select-none whitespace-nowrap border-b-2 border-transparent text-center text-sm tracking-wide text-gray-dark duration-300 xl:hover:border-purple xl:hover:text-purple"
+              >
+                View All
+              </Link>
+            )}
           </div>
-          {viewAllUrl && (
-            <Link
-              href={viewAllUrl}
-              className="my-auto items-end text-sm text-gray-dark"
-            >
-              View all
-            </Link>
-          )}
         </div>
         {/* {slidePercentage <= 0 && (
         <div className="flex items-center justify-center">
@@ -206,20 +253,24 @@ const OpportunitiesCarousel: React.FC<{
         </div>
 
         {snapCount > 1 && selectedSnap < snapCount && (
-          <div className="my-2 mt-0 flex w-full place-content-start md:mb-10">
-            <div className="mx-auto flex scale-100 justify-center gap-4 md:mx-0 md:mr-auto md:scale-[0.85] md:justify-start md:gap-2">
-              <SelectedSnapDisplay
-                selectedSnap={selectedSnap}
-                snapCount={propData.totalCount ?? snapCount}
-              />
-              <PrevButton
-                onClick={onPrevButtonClick}
-                disabled={prevBtnDisabled}
-              />
-              <NextButton
-                onClick={onNextButtonClick}
-                disabled={nextBtnDisabled}
-              />
+          <div className="my-2 mt-2 flex w-full place-content-start md:mb-10 md:mt-1">
+            <div className="mx-auto flex w-full justify-center gap-4 md:mx-0 md:mr-auto md:justify-start md:gap-6">
+              {screenWidth < 768 && (
+                <>
+                  <PrevButton
+                    onClick={onPrevButtonClick}
+                    disabled={prevBtnDisabled}
+                  />
+                  <SelectedSnapDisplay
+                    selectedSnap={selectedSnap}
+                    snapCount={propData.totalCount ?? snapCount}
+                  />
+                  <NextButton
+                    onClick={onNextButtonClick}
+                    disabled={nextBtnDisabled}
+                  />
+                </>
+              )}
             </div>
           </div>
         )}
diff --git a/src/web/src/components/Opportunity/OpportunityPublicSmall.tsx b/src/web/src/components/Opportunity/OpportunityPublicSmall.tsx
index 638acfa69..4cb338f6e 100644
--- a/src/web/src/components/Opportunity/OpportunityPublicSmall.tsx
+++ b/src/web/src/components/Opportunity/OpportunityPublicSmall.tsx
@@ -6,7 +6,7 @@ import iconUser from "public/images/icon-user.svg";
 import iconZlto from "public/images/icon-zlto.svg";
 import Moment from "react-moment";
 import { DATE_FORMAT_HUMAN } from "~/lib/constants";
-import { IoMdPause, IoMdPlay, IoMdClose } from "react-icons/io";
+import { IoMdCalendar, IoMdPlay, IoMdCloudUpload } from "react-icons/io";
 import { AvatarImage } from "../AvatarImage";
 interface InputProps {
   data: OpportunityInfo;
@@ -112,22 +112,24 @@ const OpportunityPublicSmallComponent: React.FC<InputProps> = ({ data }) => {
           <>
             {new Date(data.dateStart) > new Date() && (
               <div className="badge bg-yellow-tint text-yellow">
-                <IoMdPause />
-                <p className="ml-1">Not started</p>
+                <IoMdCalendar className="h-4 w-4" />
+                <Moment format={DATE_FORMAT_HUMAN} utc={true} className="ml-1">
+                  {data.dateStart}
+                </Moment>
               </div>
             )}
             {new Date(data.dateStart) < new Date() && (
               <div className="badge bg-purple-tint text-purple-shade">
                 <IoMdPlay />
-                <span className="ml-1">Started</span>
+                <span className="ml-1">Ongoing</span>
               </div>
             )}
           </>
         )}
         {data.status == "Expired" && (
           <div className="badge bg-red-100 text-error">
-            <IoMdClose className="h-4 w-4" />
-            <span className="ml-1">Expired</span>
+            <IoMdCloudUpload className="h-4 w-4" />
+            <span className="ml-1">Upload Only</span>
           </div>
         )}
       </div>
diff --git a/src/web/src/pages/opportunities/[[...query]]/index.tsx b/src/web/src/pages/opportunities/[[...query]]/index.tsx
index 33200d2e2..675585a78 100644
--- a/src/web/src/pages/opportunities/[[...query]]/index.tsx
+++ b/src/web/src/pages/opportunities/[[...query]]/index.tsx
@@ -202,8 +202,8 @@ const Opportunities: NextPageWithLayout<{
 
   const lookups_publishedStates: SelectOption[] = [
     { value: "0", label: "Not started" },
-    { value: "1", label: "Active" },
-    ...(session ? [{ value: "2", label: "Expired" }] : []), // logged in users can see expired
+    { value: "1", label: "Ongoing" },
+    ...(session ? [{ value: "2", label: "Upload Only" }] : []), // logged in users can see expired
   ];
 
   // get filter parameters from route
@@ -886,6 +886,7 @@ const Opportunities: NextPageWithLayout<{
               <OpportunitiesCarousel
                 id={`opportunities_trending`}
                 title="Trending 🔥"
+                description="The most viewed opportunities"
                 data={opportunities_trending}
                 loadData={loadDataTrending}
                 viewAllUrl="/opportunities?mostViewed=true"
@@ -897,6 +898,7 @@ const Opportunities: NextPageWithLayout<{
               <OpportunitiesCarousel
                 id={`opportunities_learning`}
                 title="Learning Courses 📚"
+                description="Discover exciting online courses"
                 data={opportunities_learning}
                 loadData={loadDataLearning}
                 viewAllUrl="/opportunities?types=Learning"
@@ -908,6 +910,7 @@ const Opportunities: NextPageWithLayout<{
               <OpportunitiesCarousel
                 id={`opportunities_tasks`}
                 title="Impact Tasks ⚡"
+                description="Contribute to real-world projects"
                 data={opportunities_tasks}
                 loadData={loadDataTasks}
                 viewAllUrl="/opportunities?types=Task"
@@ -919,6 +922,7 @@ const Opportunities: NextPageWithLayout<{
               <OpportunitiesCarousel
                 id={`opportunities_allOpportunities`}
                 title="All Opportunities"
+                description="Explore all available opportunities"
                 data={opportunities_allOpportunities}
                 loadData={loadDataOpportunities}
                 viewAllUrl="/opportunities?page=1"
diff --git a/src/web/src/pages/opportunities/[opportunityId]/index.tsx b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
index 88b734462..b27fc71ee 100644
--- a/src/web/src/pages/opportunities/[opportunityId]/index.tsx
+++ b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
@@ -25,11 +25,12 @@ import {
   IoMdClose,
   IoMdFingerPrint,
   IoMdArrowRoundBack,
-  IoMdPause,
   IoMdPlay,
   IoMdBookmark,
   IoMdPerson,
   IoIosBook,
+  IoMdCalendar,
+  IoMdCloudUpload,
 } from "react-icons/io";
 import type { NextPageWithLayout } from "~/pages/_app";
 import ReactModal from "react-modal";
@@ -645,7 +646,7 @@ const OpportunityDetails: NextPageWithLayout<{
                 onRequestClose={() => {
                   setCancelOpportunityDialogVisible(false);
                 }}
-                className={`fixed bottom-0 left-0 right-0 top-0 flex-grow overflow-y-scroll bg-white animate-in fade-in md:m-auto md:max-h-[450px] md:w-[600px] md:overflow-y-clip md:rounded-3xl`}
+                className={`fixed bottom-0 left-0 right-0 top-0 flex-grow overflow-y-scroll bg-white animate-in fade-in md:m-auto md:max-h-[450px] md:w-[600px] md:overflow-y-hidden md:rounded-3xl`}
                 portalClassName={"fixed z-40"}
                 overlayClassName="fixed inset-0 bg-overlay"
               >
@@ -776,22 +777,28 @@ const OpportunityDetails: NextPageWithLayout<{
                             <>
                               {new Date(opportunity.dateStart) > new Date() && (
                                 <div className="badge bg-yellow-tint text-yellow">
-                                  <IoMdPause />
-                                  <p className="ml-1">Not started</p>
+                                  <IoMdCalendar className="h-4 w-4" />
+                                  <Moment
+                                    format={DATE_FORMAT_HUMAN}
+                                    utc={true}
+                                    className="ml-1"
+                                  >
+                                    {opportunity.dateStart}
+                                  </Moment>
                                 </div>
                               )}
                               {new Date(opportunity.dateStart) < new Date() && (
                                 <div className="badge bg-purple-tint text-purple-shade">
                                   <IoMdPlay />
-                                  <span className="ml-1">Started</span>
+                                  <span className="ml-1">Ongoing</span>
                                 </div>
                               )}
                             </>
                           )}
                           {opportunity?.status == "Expired" && (
                             <div className="badge bg-red-100 text-error">
-                              <IoMdClose className="h-4 w-4" />
-                              <span className="ml-1">Expired</span>
+                              <IoMdCloudUpload className="h-4 w-4" />
+                              <span className="ml-1">Upload Only</span>
                             </div>
                           )}
                         </div>
diff --git a/src/web/src/pages/organisations/[[...query]]/index.tsx b/src/web/src/pages/organisations/[[...query]]/index.tsx
index abd838447..87b7c17d7 100644
--- a/src/web/src/pages/organisations/[[...query]]/index.tsx
+++ b/src/web/src/pages/organisations/[[...query]]/index.tsx
@@ -364,17 +364,44 @@ const Organisations: NextPageWithLayout<{
           {/* TABBED NAVIGATION */}
           <div className="z-10 flex justify-center md:justify-start">
             <div className="flex w-full gap-2">
+              {/* LEFT BUTTON MOBILE */}
+              <div className="-ml-1 mb-1 flex items-center md:hidden">
+                <button
+                  className="ease-bounce focus:outline-none active:scale-90"
+                  onClick={() => {
+                    const tabList = document.querySelector('[role="tablist"]');
+                    if (tabList) {
+                      tabList.scrollLeft -= 100;
+                    }
+                  }}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-8 w-8 text-white"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 19l-7-7 7-7"
+                    />
+                  </svg>
+                </button>
+              </div>
               {/* TABS */}
               <div
                 className="tabs tabs-bordered w-full gap-2 overflow-x-scroll md:overflow-hidden"
                 role="tablist"
               >
                 <div className="border-b border-transparent text-center text-sm font-medium text-gray-dark">
-                  <ul className="overflow-x-hiddem -mb-px flex w-full justify-center gap-0 md:justify-start">
-                    <li className="w-1/5 md:w-24">
+                  <ul className="-mb-px flex w-full justify-between gap-4 overflow-x-auto md:justify-start md:gap-0">
+                    <li className=" md:w-24">
                       <Link
                         href={`/organisations`}
-                        className={`inline-block w-full rounded-t-lg border-b-4 py-2 text-white duration-300 ${
+                        className={`inline-block h-10 w-full whitespace-nowrap rounded-t-lg border-b-4 py-2 text-white duration-300 ${
                           !status
                             ? "active border-orange"
                             : "border-transparent hover:border-gray hover:text-gray"
@@ -383,16 +410,16 @@ const Organisations: NextPageWithLayout<{
                       >
                         All
                         {(totalCountAll ?? 0) > 0 && (
-                          <div className="badge my-auto ml-2 bg-warning text-[12px] font-semibold text-white">
+                          <div className="badge my-auto ml-2 bg-warning p-1 text-[12px] font-semibold text-white">
                             {totalCountAll}
                           </div>
                         )}
                       </Link>
                     </li>
-                    <li className="w-1/5 md:w-24">
+                    <li className=" md:w-24">
                       <Link
                         href={`/organisations?status=Active`}
-                        className={`inline-block w-full rounded-t-lg border-b-4 py-2 text-white duration-300 ${
+                        className={`inline-block h-10 w-full whitespace-nowrap rounded-t-lg border-b-4 py-2 text-white duration-300 ${
                           status === "Active"
                             ? "active border-orange"
                             : "border-transparent hover:border-gray hover:text-gray"
@@ -401,16 +428,16 @@ const Organisations: NextPageWithLayout<{
                       >
                         Active
                         {(totalCountActive ?? 0) > 0 && (
-                          <div className="badge my-auto ml-2 bg-warning text-[12px] font-semibold text-white">
+                          <div className="badge my-auto ml-2 bg-warning p-1 text-[12px] font-semibold text-white">
                             {totalCountActive}
                           </div>
                         )}
                       </Link>
                     </li>
-                    <li className="w-1/5 md:w-24">
+                    <li className=" md:w-24">
                       <Link
                         href={`/organisations?status=Inactive`}
-                        className={`inline-block w-full rounded-t-lg border-b-4 py-2 text-white duration-300 ${
+                        className={`inline-block h-10 w-full whitespace-nowrap rounded-t-lg border-b-4 py-2 text-white duration-300 ${
                           status === "Inactive"
                             ? "active border-orange"
                             : "border-transparent hover:border-gray hover:text-gray"
@@ -419,16 +446,16 @@ const Organisations: NextPageWithLayout<{
                       >
                         Pending
                         {(totalCountInactive ?? 0) > 0 && (
-                          <div className="badge my-auto ml-2 bg-warning text-[12px] font-semibold text-white">
+                          <div className="badge my-auto ml-2 bg-warning p-1 text-[12px] font-semibold text-white">
                             {totalCountInactive}
                           </div>
                         )}
                       </Link>
                     </li>
-                    <li className="w-1/5 md:w-24">
+                    <li className=" md:w-24">
                       <Link
                         href={`/organisations?status=Declined`}
-                        className={`inline-block w-full rounded-t-lg border-b-4 py-2 text-white duration-300 ${
+                        className={`inline-block h-10 w-full whitespace-nowrap rounded-t-lg border-b-4 py-2 text-white duration-300 ${
                           status === "Declined"
                             ? "active border-orange"
                             : "border-transparent hover:border-gray hover:text-gray"
@@ -437,16 +464,16 @@ const Organisations: NextPageWithLayout<{
                       >
                         Declined
                         {(totalCountDeclined ?? 0) > 0 && (
-                          <div className="badge my-auto ml-2 bg-warning text-[12px] font-semibold text-white">
+                          <div className="badge my-auto ml-2 bg-warning p-1 text-[12px] font-semibold text-white">
                             {totalCountDeclined}
                           </div>
                         )}
                       </Link>
                     </li>
-                    <li className="w-1/5 md:w-24">
+                    <li className=" md:w-24">
                       <Link
                         href={`/organisations?status=Deleted`}
-                        className={`inline-block w-full rounded-t-lg border-b-4 py-2 text-white duration-300 ${
+                        className={`inline-block h-10 w-full whitespace-nowrap rounded-t-lg border-b-4 py-2 text-white duration-300 ${
                           status === "Deleted"
                             ? "active border-orange"
                             : "border-transparent hover:border-gray hover:text-gray"
@@ -455,7 +482,7 @@ const Organisations: NextPageWithLayout<{
                       >
                         Deleted
                         {(totalCountDeleted ?? 0) > 0 && (
-                          <div className="badge my-auto ml-2 bg-warning text-[12px] font-semibold text-white">
+                          <div className="badge my-auto ml-2 bg-warning p-1 text-[12px] font-semibold text-white">
                             {totalCountDeleted}
                           </div>
                         )}
@@ -464,6 +491,33 @@ const Organisations: NextPageWithLayout<{
                   </ul>
                 </div>
               </div>
+              {/* RIGHT BUTTON MOBILE */}
+              <div className="-mr-1 mb-1 flex items-center md:hidden ">
+                <button
+                  className="ease-bounce focus:outline-none active:scale-90"
+                  onClick={() => {
+                    const tabList = document.querySelector('[role="tablist"]');
+                    if (tabList) {
+                      tabList.scrollLeft += 100;
+                    }
+                  }}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-8 w-8 text-white"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </button>
+              </div>
             </div>
           </div>
 
@@ -484,7 +538,7 @@ const Organisations: NextPageWithLayout<{
           </div>
         </div>
 
-        <div className="rounded-lg md:bg-white md:p-4 md:shadow-custom">
+        <div className="rounded-lg md:p-4">
           {/* NO RESULTS */}
           {searchResults && searchResults.totalCount === 0 && (
             <div className="flex h-fit flex-col items-center rounded-lg bg-white pb-8 md:pb-16">
diff --git a/src/web/src/styles/globals.scss b/src/web/src/styles/globals.scss
index 68eee50f4..ac826d757 100644
--- a/src/web/src/styles/globals.scss
+++ b/src/web/src/styles/globals.scss
@@ -110,19 +110,11 @@ body {
 
 // NProgress
 #nprogress .bar {
-  height: 4px !important;
+  height: 5.5px !important;
+  background: theme("colors.white") !important;
+  opacity: 0.3 !important;
 }
 
-// override the NProgress styles based on the theme
-[data-theme="purple"] #nprogress .bar {
-  @apply bg-blue;
-}
-[data-theme="green"] #nprogress .bar {
-  @apply bg-blue;
-}
-[data-theme="blue"] #nprogress .bar {
-  @apply bg-white;
-}
-[data-theme="orange"] #nprogress .bar {
-  @apply bg-blue;
+#nprogress .peg {
+  display: none !important;
 }
diff --git a/src/web/tailwind.config.ts b/src/web/tailwind.config.ts
index eb1e5fd0a..6658e784d 100644
--- a/src/web/tailwind.config.ts
+++ b/src/web/tailwind.config.ts
@@ -42,6 +42,9 @@ export default {
         custom:
           "0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)",
       },
+      transitionTimingFunction: {
+        bounce: "cubic-bezier(0.175, 1.485, 0.320, 1.275)",
+      },
     },
   },
   darkMode: "class",