From 18e62eb814503376f7fcfe44c4fb142471d5d3da Mon Sep 17 00:00:00 2001
From: atrincas <atrincas@gmail.com>
Date: Mon, 21 Oct 2024 12:18:48 +0200
Subject: [PATCH] Refactor styles

---
 client/src/constants.ts                       |  3 +-
 .../filter-select-values/index.tsx            |  4 +-
 .../containers/filter/filter-select/index.tsx | 16 +++-----
 .../filter-settings/filter-popup/index.tsx    |  7 ++--
 .../sidebar/filter-settings/index.tsx         |  2 +-
 client/src/containers/sidebar/index.tsx       |  6 +--
 .../sidebar/indicator-seletor/index.tsx       | 39 +++++++++----------
 7 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/client/src/constants.ts b/client/src/constants.ts
index dde5f221..79539b16 100644
--- a/client/src/constants.ts
+++ b/client/src/constants.ts
@@ -1 +1,2 @@
-export const POPOVER_CONTENT_CLASS = "ml-4 max-h-[320px] w-full min-w-[320px]";
+export const POPOVER_CONTENT_CLASS =
+  "flex flex-col ml-4 max-h-[320px] w-full min-w-[320px]";
diff --git a/client/src/containers/filter/filter-select/filter-select-values/index.tsx b/client/src/containers/filter/filter-select/filter-select-values/index.tsx
index d88e8091..717b941e 100644
--- a/client/src/containers/filter/filter-select/filter-select-values/index.tsx
+++ b/client/src/containers/filter/filter-select/filter-select-values/index.tsx
@@ -89,7 +89,7 @@ const FilterSelectValues: FC<FilterSelectValuesProps> = ({
   };
 
   return (
-    <>
+    <div className="flex h-full flex-col">
       <Button
         type="button"
         variant="clean"
@@ -194,7 +194,7 @@ const FilterSelectValues: FC<FilterSelectValuesProps> = ({
           </Button>
         )}
       </Form>
-    </>
+    </div>
   );
 };
 
diff --git a/client/src/containers/filter/filter-select/index.tsx b/client/src/containers/filter/filter-select/index.tsx
index d7328571..38b716ac 100644
--- a/client/src/containers/filter/filter-select/index.tsx
+++ b/client/src/containers/filter/filter-select/index.tsx
@@ -15,8 +15,6 @@ import {
   FilterSelectStep,
 } from "@/containers/filter/filter-select/store";
 
-import { Card } from "@/components/ui/card";
-
 export interface FilterSelectProps {
   items: PageFilter[];
   defaultValues: string[];
@@ -38,14 +36,12 @@ const FilterSelect: FC<FilterSelectProps> = ({
         }
         filter={fixedFilter || null}
       >
-        <Card className="relative h-full bg-foreground p-0 text-background">
-          <FilterSelectSteps
-            defaultValues={defaultValues}
-            fixedFilter={fixedFilter}
-            items={items}
-            onSubmit={onSubmit}
-          />
-        </Card>
+        <FilterSelectSteps
+          defaultValues={defaultValues}
+          fixedFilter={fixedFilter}
+          items={items}
+          onSubmit={onSubmit}
+        />
       </AtomsHydrator>
     </Provider>
   );
diff --git a/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx b/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx
index 7ea8adf4..236c950b 100644
--- a/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx
+++ b/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx
@@ -3,6 +3,8 @@ import { FC, useState } from "react";
 import { PageFilter } from "@shared/dto/widgets/page-filter.entity";
 import { useSetAtom } from "jotai";
 
+import { cn } from "@/lib/utils";
+
 import useFilters from "@/hooks/useFilters";
 
 import FilterSelect from "@/containers/filter/filter-select";
@@ -14,6 +16,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { POPOVER_CONTENT_CLASS } from "@/constants";
 
 interface FilterPopupProps {
   name: string;
@@ -21,8 +24,6 @@ interface FilterPopupProps {
   items: PageFilter[];
 }
 
-const POPOVER_CONTENT_CLASS = "ml-4 h-[320px] w-full min-w-[320px]";
-
 const FilterItemButton: FC<{
   value: string;
 
@@ -89,7 +90,7 @@ const FilterPopup: FC<FilterPopupProps> = ({ name, fixedFilter, items }) => {
       <PopoverContent
         align="end"
         side="bottom"
-        className={POPOVER_CONTENT_CLASS}
+        className={cn(POPOVER_CONTENT_CLASS, "h-[320px]")}
       >
         <FilterSelect
           items={items}
diff --git a/client/src/containers/sidebar/filter-settings/index.tsx b/client/src/containers/sidebar/filter-settings/index.tsx
index 9bf23378..24398a74 100644
--- a/client/src/containers/sidebar/filter-settings/index.tsx
+++ b/client/src/containers/sidebar/filter-settings/index.tsx
@@ -26,7 +26,7 @@ const FilterSettings: FC = () => {
 
   return (
     <>
-      {data
+      {filtersQuery.data
         ?.filter((pageFilter) => DEFAULT_FILTERS.includes(pageFilter.name))
         .map((f) => (
           <FilterPopup
diff --git a/client/src/containers/sidebar/index.tsx b/client/src/containers/sidebar/index.tsx
index 43714007..eaf68183 100644
--- a/client/src/containers/sidebar/index.tsx
+++ b/client/src/containers/sidebar/index.tsx
@@ -55,11 +55,7 @@ const Sidebar: FC = () => {
             key="sidebar-accordion-explore"
             type="multiple"
             className="w-full overflow-y-auto"
-            defaultValue={
-              filters.length
-                ? ["explore-filters", "explore-sections"]
-                : ["explore-sections"]
-            }
+            defaultValue={["explore-sections"]}
           >
             <AccordionItem value="explore-filters">
               <AccordionTrigger>Filters</AccordionTrigger>
diff --git a/client/src/containers/sidebar/indicator-seletor/index.tsx b/client/src/containers/sidebar/indicator-seletor/index.tsx
index 91ce7568..5abe940c 100644
--- a/client/src/containers/sidebar/indicator-seletor/index.tsx
+++ b/client/src/containers/sidebar/indicator-seletor/index.tsx
@@ -1,10 +1,12 @@
 import { FC, useState } from "react";
 
 import { BaseWidgetWithData } from "@shared/dto/widgets/base-widget-data.interface";
+import { BaseWidget } from "@shared/dto/widgets/base-widget.entity";
 import { useAtom, useSetAtom } from "jotai";
 
 import { client } from "@/lib/queryClient";
 import { queryKeys } from "@/lib/queryKeys";
+import { cn } from "@/lib/utils";
 
 import {
   customWidgetAtom,
@@ -21,8 +23,6 @@ import {
 } from "@/components/ui/popover";
 import { POPOVER_CONTENT_CLASS } from "@/constants";
 
-import widgets from "../widgets.json";
-
 const IndicatorSelector: FC = () => {
   const { data } = client.widgets.getWidgets.useQuery(
     queryKeys.widgets.all.queryKey,
@@ -35,6 +35,7 @@ const IndicatorSelector: FC = () => {
   const [selectedVisualization, setSelectedVisualization] = useAtom(
     selectedVisualizationAtom,
   );
+  const widgets = data as BaseWidget[];
 
   return (
     <Popover
@@ -61,26 +62,24 @@ const IndicatorSelector: FC = () => {
       <PopoverContent
         align="start"
         side="bottom"
-        className={POPOVER_CONTENT_CLASS}
+        className={cn(POPOVER_CONTENT_CLASS, "h-[320px]")}
       >
-        <div className="flex h-full flex-col overflow-y-auto">
-          <SearchableList
-            items={widgets}
-            itemKey="indicator"
-            onItemClick={(w: any) => {
-              if (
-                selectedVisualization &&
-                !widget?.visualisations.includes(selectedVisualization)
-              ) {
-                setSelectedVisualization(null);
-              }
+        <SearchableList
+          items={widgets}
+          itemKey="indicator"
+          onItemClick={(w) => {
+            if (
+              selectedVisualization &&
+              !widget?.visualisations.includes(selectedVisualization)
+            ) {
+              setSelectedVisualization(null);
+            }
 
-              setWidget(w as BaseWidgetWithData);
-              setShowIndicators(false);
-              setIsPopoverOpen(false);
-            }}
-          />
-        </div>
+            setWidget(w as BaseWidgetWithData);
+            setShowIndicators(false);
+            setIsPopoverOpen(false);
+          }}
+        />
       </PopoverContent>
     </Popover>
   );