feat: generic improvements

globalfund · Jul 15, 2024 · 3ac9a45 · 3ac9a45
1 parent 14a8a39
commit 3ac9a45
Show file tree

Hide file tree

Showing 14 changed files with 32 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;