From 3ac9a450e3f202cb1b394100dfee9e64b2b7d164 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Mon, 15 Jul 2024 20:01:27 +0300
Subject: [PATCH] feat: generic improvements

---
 src/app/components/chart-block/index.tsx                   | 3 +++
 src/app/components/charts/bar-series/index.tsx             | 1 +
 src/app/components/charts/bar/index.tsx                    | 1 +
 .../components/charts/expandable-horizontal-bar/index.tsx  | 1 +
 src/app/components/charts/line/index.tsx                   | 1 +
 src/app/components/charts/pie/index.tsx                    | 1 +
 src/app/components/charts/radial/index.tsx                 | 5 ++++-
 src/app/components/charts/sunburst/index.tsx               | 1 +
 src/app/components/charts/treemap/index.tsx                | 1 +
 src/app/components/dropdown/index.tsx                      | 2 +-
 src/app/components/header/index.tsx                        | 5 +++++
 src/app/components/search/components/results/index.tsx     | 6 ++++--
 src/app/components/search/components/results/styles.ts     | 1 +
 src/index.css                                              | 7 +++++++
 14 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/app/components/chart-block/index.tsx b/src/app/components/chart-block/index.tsx
index aa2071536..b1f07350e 100644
--- a/src/app/components/chart-block/index.tsx
+++ b/src/app/components/chart-block/index.tsx
@@ -122,6 +122,9 @@ export const ChartBlock: React.FC<ChartBlockProps> = (
                   width: "100%",
                   marginTop: "20px",
                   justifyContent: "flex-end",
+                  "> button": {
+                    maxWidth: "unset",
+                  },
                 },
               }}
             >
diff --git a/src/app/components/charts/bar-series/index.tsx b/src/app/components/charts/bar-series/index.tsx
index fc0c52ad1..c14f302a3 100644
--- a/src/app/components/charts/bar-series/index.tsx
+++ b/src/app/components/charts/bar-series/index.tsx
@@ -42,6 +42,7 @@ echarts.use([
 const Tooltip = (props: any) => {
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "400px",
diff --git a/src/app/components/charts/bar/index.tsx b/src/app/components/charts/bar/index.tsx
index 59542e3fa..d7c5aeddb 100644
--- a/src/app/components/charts/bar/index.tsx
+++ b/src/app/components/charts/bar/index.tsx
@@ -43,6 +43,7 @@ echarts.use([
 const Tooltip = (props: any) => {
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "400px",
diff --git a/src/app/components/charts/expandable-horizontal-bar/index.tsx b/src/app/components/charts/expandable-horizontal-bar/index.tsx
index da44f8329..3735ed867 100644
--- a/src/app/components/charts/expandable-horizontal-bar/index.tsx
+++ b/src/app/components/charts/expandable-horizontal-bar/index.tsx
@@ -45,6 +45,7 @@ echarts.use([
 const Tooltip = (props: any) => {
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "400px",
diff --git a/src/app/components/charts/line/index.tsx b/src/app/components/charts/line/index.tsx
index 7bfdcb7f3..6e30f1380 100644
--- a/src/app/components/charts/line/index.tsx
+++ b/src/app/components/charts/line/index.tsx
@@ -29,6 +29,7 @@ echarts.use([EChartsLine, GridComponent, TooltipComponent, SVGRenderer]);
 const Tooltip = (props: any) => {
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "400px",
diff --git a/src/app/components/charts/pie/index.tsx b/src/app/components/charts/pie/index.tsx
index cd7f7e3d2..714dcc05e 100644
--- a/src/app/components/charts/pie/index.tsx
+++ b/src/app/components/charts/pie/index.tsx
@@ -18,6 +18,7 @@ echarts.use([EChartsPie, TooltipComponent, SVGRenderer]);
 const Tooltip = (props: any) => {
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "400px",
diff --git a/src/app/components/charts/radial/index.tsx b/src/app/components/charts/radial/index.tsx
index 35d9fd2f8..1cd115bfa 100644
--- a/src/app/components/charts/radial/index.tsx
+++ b/src/app/components/charts/radial/index.tsx
@@ -25,6 +25,7 @@ const Tooltip = (props: any) => {
 
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "400px",
@@ -47,7 +48,9 @@ const Tooltip = (props: any) => {
         <div className="chart-tooltip-text">
           {showList
             ? ""
-            : `${((props.value / props.totalValue) * 100).toFixed(2).replace(".00", "")}% - `}
+            : `${((props.value / props.totalValue) * 100)
+                .toFixed(2)
+                .replace(".00", "")}% - `}
           {formatFinancialValue(props.value)}
         </div>
       </div>
diff --git a/src/app/components/charts/sunburst/index.tsx b/src/app/components/charts/sunburst/index.tsx
index 2a9988a8e..5e268cf82 100644
--- a/src/app/components/charts/sunburst/index.tsx
+++ b/src/app/components/charts/sunburst/index.tsx
@@ -24,6 +24,7 @@ echarts.use([EChartsSunburst, TooltipComponent, SVGRenderer]);
 const Tooltip = (props: any) => {
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "400px",
diff --git a/src/app/components/charts/treemap/index.tsx b/src/app/components/charts/treemap/index.tsx
index ae8c0c2bb..a94011a54 100644
--- a/src/app/components/charts/treemap/index.tsx
+++ b/src/app/components/charts/treemap/index.tsx
@@ -24,6 +24,7 @@ echarts.use([EchartsTreemap, TooltipComponent, SVGRenderer]);
 const Tooltip = (props: any) => {
   return (
     <div
+      className="chart-tooltip"
       style={{
         gap: "10px",
         width: "250px",
diff --git a/src/app/components/dropdown/index.tsx b/src/app/components/dropdown/index.tsx
index 801bd61c5..a861c5274 100644
--- a/src/app/components/dropdown/index.tsx
+++ b/src/app/components/dropdown/index.tsx
@@ -118,7 +118,7 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
           "& .MuiPaper-root": {
             width: props.width,
             "@media (max-width: 767px)": {
-              width: props.width ?? "160px",
+              width: props.width ?? "180px",
             },
           },
         }}
diff --git a/src/app/components/header/index.tsx b/src/app/components/header/index.tsx
index 507c99310..555ed7b05 100644
--- a/src/app/components/header/index.tsx
+++ b/src/app/components/header/index.tsx
@@ -23,6 +23,11 @@ export const Header: React.FC = () => {
 
   const onSearchBtnClick = () => {
     setSearchOpen(!searchOpen);
+    if (!searchOpen)
+      setTimeout(() => {
+        const input = document.getElementById("general-search");
+        if (input) input.focus();
+      }, 100);
   };
 
   const handleKeyPress = (e: KeyboardEvent) => {
diff --git a/src/app/components/search/components/results/index.tsx b/src/app/components/search/components/results/index.tsx
index dcef6b9fb..e98049200 100644
--- a/src/app/components/search/components/results/index.tsx
+++ b/src/app/components/search/components/results/index.tsx
@@ -86,11 +86,13 @@ export function SearchResults(props: SearchResultsProps) {
         })}
         {props.results.length === 0 && !props.loading && hasLoaded && (
           <NoResults>
-            {get(cmsData, "componentsSearch.noResults", "")}
+            {get(cmsData, "componentsSearch.noResults", "No results found.")}
           </NoResults>
         )}
         {props.loading && (
-          <NoResults>{get(cmsData, "componentsSearch.loading", "")}</NoResults>
+          <NoResults>
+            {get(cmsData, "componentsSearch.loading", "Loading...")}
+          </NoResults>
         )}
       </Results>
     </Container>
diff --git a/src/app/components/search/components/results/styles.ts b/src/app/components/search/components/results/styles.ts
index d8119cc42..189c9eabe 100644
--- a/src/app/components/search/components/results/styles.ts
+++ b/src/app/components/search/components/results/styles.ts
@@ -137,6 +137,7 @@ export const ResultLink = styled(Link)`
 
 export const NoResults = styled.div`
   width: 100%;
+  color: #000;
   height: 100%;
   display: flex;
   align-items: center;
diff --git a/src/index.css b/src/index.css
index 8cf10be00..e04925a64 100644
--- a/src/index.css
+++ b/src/index.css
@@ -60,6 +60,13 @@ input[type="text"] {
   -webkit-appearance: none;
 }
 
+
+@media (max-width: 767px) {
+  .chart-tooltip {
+    width: 250px !important;
+  }
+}
+
 .chart-tooltip-title {
   max-width: 100%;
   font-size: 18px;