Change glob pins image and other home style changes

client/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",

client/src/components/ui/card.tsx

@@ -4,6 +4,8 @@ import { InfoIcon } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
+// import { ScrollArea } from '@/components/ui/scroll-area';
+
 type CardProps = PropsWithChildren & {
   title?: string;
   info?: string;
@@ -14,17 +16,21 @@ const Card = ({ children, title, info, className }: CardProps) => {
   return (
     <div
       className={cn(
-        'animate-in slide-in-from-top-5 fade-in bg-card rounded border border-[#335E6F] p-4 backdrop-blur-sm',
+        'animate-in slide-in-from-top-5 fade-in bg-card flex h-full flex-col rounded border border-[#335E6F] pt-4 backdrop-blur-sm',
         className
       )}
     >
       {title && (
-        <div className="mb-2 flex justify-between">
-          <p>{title}</p>
+        <div className="mb-2 flex justify-between px-4">
+          <p className="font-notes text-sm font-bold uppercase">{title}</p>
           {info && <InfoIcon className="h-4 w-4" />}
         </div>
       )}
-      {children}
+      {/* <ScrollArea className={cn('h-full px-4')}> */}
+      <div className={cn('h-full overflow-y-auto px-4')}>
+        <div className="pb-4">{children}</div>
+      </div>
+      {/* </ScrollArea> */}
     </div>
   );
 };

client/src/components/ui/gradient-line.tsx

@@ -1,3 +1,3 @@
-const GradientLine = () => <div className="bg-header-line my-4 h-[1px]"></div>;
+const GradientLine = () => <div className="bg-header-line relative my-4 h-[1px]"></div>;
 
 export default GradientLine;

client/src/components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/classnames';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-gray-800" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

client/src/containers/home/dashboard/numbers.tsx

@@ -8,9 +8,9 @@ const DashboardNumbers = () => {
   return (
     <div className="flex gap-x-1">
       {numbers.map(({ stat, number }) => (
-        <div key={stat} className="text-xs">
-          <p className="text-3xl font-bold">{number}</p>
-          <p>{stat}</p>
+        <div key={stat} className="space-y-1 text-center text-xs">
+          <p className="text-4xl font-bold">{number}</p>
+          <p className="font-open-sans font-semibold text-gray-400">{stat}</p>
         </div>
       ))}
     </div>

client/src/containers/home/index.tsx

@@ -36,31 +36,34 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="home text-primary flex h-screen w-screen flex-col justify-between px-12">
+    <div className="home text-primary flex h-screen w-screen flex-col justify-between overflow-y-hidden px-12">
       <Header />
       <Filters />
-      <div className="mt-12 flex flex-1 justify-between">
+      <div className="flex max-h-full flex-1 justify-between overflow-hidden pb-6 pt-12">
         <Sidebar>
           <div className="2xl:w-70 w-[280px]">
             <Dashboard />
           </div>
         </Sidebar>
-        <Sidebar>
-          <div className="2xl:w-70 w-[280px]">
-            <Card title="Impact indicator">
+        <div className="2xl:w-70 flex h-full w-[280px] flex-col">
+          <div className="flex max-h-[calc(100%-110px)] flex-col justify-between">
+            <Card title="Top stories" className="max-h-[calc(100%-33px)]">
+              <TopStories />
+            </Card>
+            <GradientLine />
+          </div>
+          <div className="h-fit">
+            <Card title="Programme Dashboard">
               <a
                 target="_blank"
+                className="font-open-sans text-sm leading-snug"
                 href="https://lookerstudio.google.com/reporting/b6d8f54c-558e-48dc-bc79-a7eca193da6f/page/p_2ehvdzg47c"
               >
-                View links
+                Detailed report dashboard on ESA GDA programme.
               </a>
             </Card>
-            <GradientLine />
-            <Card title="Top stories">
-              <TopStories />
-            </Card>
           </div>
-        </Sidebar>
+        </div>
       </div>
       <div className="z-10">
         <Categories />

client/src/containers/home/sidebar/index.tsx

@@ -14,13 +14,14 @@ export default function Sidebar({ children }: PropsWithChildren) {
   return (
     <div
       className={cn({
-        'pointer-events-none h-full max-w-[400px]  flex-col transition-transform duration-500':
-          true,
+        'pointer-events-none h-full max-w-[400px] flex-col transition-transform duration-500': true,
         'translate-x-0': open,
         '-translate-x-full': !open,
       })}
     >
-      <div className="pointer-events-auto flex grow flex-col overflow-y-auto">{children}</div>
+      <div className="pointer-events-auto flex h-[inherit] flex-col overflow-y-auto">
+        {children}
+      </div>
     </div>
   );
 }

client/src/containers/home/top-stories/index.tsx

@@ -10,7 +10,7 @@ const TopStories = () => {
   });
 
   return (
-    <div className="max-h-[35vh] space-y-4 overflow-y-auto">
+    <div className="space-y-4">
       {topStories?.data?.map((topStory) => (
         <TopStoriesItem key={topStory.id} topStory={topStory.attributes} />
       ))}

client/src/containers/map/markers/home-markers/index.tsx

@@ -66,7 +66,7 @@ const StoryMarkers = () => {
         type="circle"
         filter={['has', 'point_count']}
         paint={{
-          'circle-color': '#000',
+          'circle-color': '#FFE094',
           'circle-radius': 12,
         }}
         layout={{
@@ -85,7 +85,7 @@ const StoryMarkers = () => {
           'text-allow-overlap': true,
         }}
         paint={{
-          'text-color': '#fff',
+          'text-color': '#003247',
         }}
       />
 

client/src/containers/story/steps/layouts/components/map-content.tsx

@@ -0,0 +1,45 @@
+import { PropsWithChildren } from 'react';
+
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '@/lib/classnames';
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+
+type MapContentProps = PropsWithChildren & {
+  showContent?: boolean;
+  title?: string;
+  titlePlaceholder?: string;
+};
+
+const MapContent = ({ showContent, title, titlePlaceholder, children }: MapContentProps) => {
+  return (
+    <Collapsible
+      defaultOpen
+      className={cn(
+        'group pointer-events-auto w-[404px] overflow-hidden rounded border border-gray-800 bg-[#335e6f] bg-opacity-50 p-2 backdrop-blur transition-all duration-300 ease-in-out',
+        showContent ? 'opacity-100' : 'opacity-0'
+      )}
+    >
+      <CollapsibleTrigger className="group flex w-full justify-between gap-2 px-6 data-[state=open]:pt-2">
+        <h2 className="font-notes group w-[calc(100%-32px)] flex-1 text-start text-xl font-bold">
+          {title ? (
+            title
+          ) : (
+            <span className="block w-full truncate group-data-[state=open]:hidden">
+              {titlePlaceholder}
+            </span>
+          )}
+        </h2>
+        <ChevronDownIcon className="h-6 w-6 shrink-0 group-data-[state=open]:rotate-180" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className={cn('w-full space-y-2 px-6 pb-6', title && ' pt-2')}>
+          <div className="font-open-sans space-y-4 text-sm">{children}</div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export default MapContent;

client/src/containers/story/steps/layouts/map-step.tsx

@@ -3,7 +3,6 @@
 import { InfoIcon } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
-// import { useScrollToItem } from '@/lib/scroll';
 
 import {
   StepLayoutMapStepComponent,
@@ -17,6 +16,8 @@ import CategoryIcon from '@/components/ui/category-icon';
 import RichText from '@/components/ui/rich-text';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
+import MapContent from './components/map-content';
+
 type MapStepLayoutProps = {
   step: StoryStepsItem;
   category: StoryCategoryDataAttributes | undefined;
@@ -27,14 +28,8 @@ type MapStepLayoutProps = {
 const cardClassName =
   'rounded border border-gray-800 bg-[#335e6f] bg-opacity-50 py-6 px-4 backdrop-blur';
 
-const MapStepLayout = ({ step, category, showContent, stepIndex }: MapStepLayoutProps) => {
+const MapStepLayout = ({ step, category, showContent }: MapStepLayoutProps) => {
   const { story_summary, card, widget } = step as StepLayoutMapStepComponent;
-  // const scrollToItem = useScrollToItem();
-
-  // const handleClickCard = () => {
-  //   scrollToItem(stepIndex + 1);
-  // };
-
   return (
     <div className="flex justify-between">
       <div className="flex flex-1 flex-col space-y-8 pt-[84px]">
@@ -80,33 +75,21 @@ const MapStepLayout = ({ step, category, showContent, stepIndex }: MapStepLayout
       <div className="relative min-h-screen pt-[84px]">
         <div className="flex min-h-full flex-col items-end justify-end space-y-6 pb-16">
           {!!card && (
-            <div
-              className={cn(
-                'pointer-events-auto overflow-hidden rounded border border-gray-800 bg-[#335e6f] bg-opacity-50 p-8 backdrop-blur transition-all duration-300 ease-in-out',
-                showContent ? 'opacity-100' : 'opacity-0'
-              )}
+            <MapContent
+              showContent={showContent}
+              title={card.title}
+              titlePlaceholder={card.content}
             >
-              <div className="w-[400px] space-y-2">
-                {card?.title && <h2 className="font-notes text-2xl font-bold">{card?.title}</h2>}
-                <div className="font-open-sans space-y-4">
-                  <RichText className="text-white">{card?.content}</RichText>
-                </div>
-              </div>
-            </div>
+              <RichText>{card.content}</RichText>
+            </MapContent>
           )}
           {!!widget?.id && (
-            <div
-              className={cn(
-                'pointer-events-auto overflow-hidden rounded border border-gray-800 bg-[#335e6f] bg-opacity-50 p-8 backdrop-blur transition-all duration-300 ease-in-out',
-                showContent ? 'opacity-100' : 'opacity-0'
-              )}
-            >
-              <div className="w-[400px] space-y-2">
-                {widget?.title && <h2 className="font-notes text-xl font-bold">{widget?.title}</h2>}
+            <MapContent showContent={showContent} title={widget.title}>
+              <div className="mt-2 space-y-2">
                 <Chart widget={widget as WidgetWidgetComponent} />
                 {(widget as any)?.legend && <RichText>{(widget as any).legend}</RichText>}
               </div>
-            </div>
+            </MapContent>
           )}
         </div>
       </div>