From 8f7f7cf591ec854e655ea173b4c0462786546121 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Fri, 8 Sep 2023 16:16:23 +0200
Subject: [PATCH 1/2] change solutions report btn

---
 .../sidebar/project/scenarios-list/index.tsx  | 51 +++++++++++++++++--
 .../scenario/solutions/overview/index.tsx     | 49 +-----------------
 2 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/app/layout/project/sidebar/project/scenarios-list/index.tsx b/app/layout/project/sidebar/project/scenarios-list/index.tsx
index 8beda93581..8643780753 100644
--- a/app/layout/project/sidebar/project/scenarios-list/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/index.tsx
@@ -16,6 +16,7 @@ import {
   useScenarios,
   useDuplicateScenario,
   useCancelRunScenario,
+  useDownloadSolutionsSummary,
 } from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
 
@@ -42,8 +43,9 @@ export const ScenariosList: React.FC = () => {
   const queryClient = useQueryClient();
   const { addToast } = useToasts();
 
-  const [modal, setModal] = useState(false);
+  const [modal, setModal] = useState<boolean>(false);
   const [deleteScenario, setDelete] = useState(null);
+  const [solutionsReportLoader, setSolutionsReportLoader] = useState<boolean>(false);
 
   const { search, filters, sort } = useSelector((state) => state['/projects/[id]']);
 
@@ -187,6 +189,33 @@ export const ScenariosList: React.FC = () => {
     [addToast, cancelRunMutation]
   );
 
+  const downloadSolutionsSummary = useDownloadSolutionsSummary();
+
+  const onDownloadSolutionsSummary = useCallback(() => {
+    setSolutionsReportLoader(true);
+
+    downloadSolutionsSummary.mutate(
+      { id: pid },
+      {
+        onError: () => {
+          addToast(
+            'download-error',
+            <>
+              <h2 className="font-medium">Error!</h2>
+              <ul className="text-sm">Solutions report not downloaded</ul>
+            </>,
+            {
+              level: 'error',
+            }
+          );
+        },
+        onSettled: () => {
+          setSolutionsReportLoader(false);
+        },
+      }
+    );
+  }, [downloadSolutionsSummary, addToast, pid]);
+
   return (
     <AnimatePresence>
       <div
@@ -204,7 +233,6 @@ export const ScenariosList: React.FC = () => {
           className="relative flex flex-grow flex-col space-y-3 overflow-hidden"
         >
           {(hasScenarios || search || hasFilters) && <ScenarioToolbar />}
-
           <div
             className={cn({
               'relative overflow-hidden': true,
@@ -260,7 +288,6 @@ export const ScenariosList: React.FC = () => {
               </ScrollArea>
             )}
           </div>
-
           {!hasScenarios && !search && !hasFilters && scenariosIsFetched && (
             <div className="flex flex-col space-y-2">
               <motion.div
@@ -323,7 +350,23 @@ export const ScenariosList: React.FC = () => {
           )}
 
           {(hasScenarios || search || hasFilters) && (
-            <div className="flex w-full flex-shrink-0 items-center justify-center rounded-[20px] bg-gray-700 p-6">
+            <div className="flex w-full flex-shrink-0 flex-col items-center justify-center rounded-[20px] bg-gray-700 p-6">
+              {hasScenarios && (
+                <Button
+                  theme="primary-alt"
+                  size="base"
+                  className="mb-5 flex w-full overflow-hidden uppercase"
+                  disabled={solutionsReportLoader}
+                  onClick={onDownloadSolutionsSummary}
+                >
+                  <Loading
+                    visible={solutionsReportLoader}
+                    className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
+                    iconClassName="w-10 h-10 text-primary-500"
+                  />
+                  {scenariosData.length === 1 ? 'Export scenario data' : 'Export scenarios data'}
+                </Button>
+              )}
               <Button
                 theme="primary"
                 size="base"
diff --git a/app/layout/project/sidebar/scenario/solutions/overview/index.tsx b/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
index 7ccf8a6da2..9cd447dd05 100644
--- a/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
@@ -9,11 +9,7 @@ import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 import { motion } from 'framer-motion';
 
 import { useProject } from 'hooks/projects';
-import {
-  useScenario,
-  useDownloadScenarioReport,
-  useDownloadSolutionsSummary,
-} from 'hooks/scenarios';
+import { useScenario, useDownloadScenarioReport } from 'hooks/scenarios';
 import { useSolution, useBestSolution } from 'hooks/solutions';
 import { useToasts } from 'hooks/toast';
 
@@ -34,7 +30,6 @@ export const SolutionsOverview = (): JSX.Element => {
   const { pid, sid } = query as { pid: string; sid: string };
 
   const [PDFLoader, setPDFLoader] = useState<boolean>(false);
-  const [solutionsReportLoader, setSolutionsReportLoader] = useState<boolean>(false);
   const [showTable, setShowTable] = useState<boolean>(false);
   const { addToast } = useToasts();
 
@@ -71,8 +66,6 @@ export const SolutionsOverview = (): JSX.Element => {
     runId: `${(selectedSolutionData || bestSolutionData)?.runId}`,
   });
 
-  const downloadSolutionsSummary = useDownloadSolutionsSummary();
-
   const SOLUTION_DATA = selectedSolutionData || bestSolutionData;
 
   const isBestSolution =
@@ -83,31 +76,6 @@ export const SolutionsOverview = (): JSX.Element => {
     (bestSolutionisFetching && !bestSolutionisFetched) ||
     (selectedSolutionisFetching && !selectedSolutionisFetched);
 
-  const onDownloadSolutionsSummary = useCallback(() => {
-    setSolutionsReportLoader(true);
-
-    downloadSolutionsSummary.mutate(
-      { id: pid },
-      {
-        onError: () => {
-          addToast(
-            'download-error',
-            <>
-              <h2 className="font-medium">Error!</h2>
-              <ul className="text-sm">Solutions report not downloaded</ul>
-            </>,
-            {
-              level: 'error',
-            }
-          );
-        },
-        onSettled: () => {
-          setSolutionsReportLoader(false);
-        },
-      }
-    );
-  }, [downloadSolutionsSummary, addToast, pid]);
-
   const onDownloadReport = useCallback(() => {
     setPDFLoader(true);
     addToast(
@@ -208,21 +176,6 @@ export const SolutionsOverview = (): JSX.Element => {
                 />
               </div>
 
-              <Button
-                theme="primary-alt"
-                size="base"
-                className="mb-4 flex h-12 overflow-hidden uppercase"
-                disabled={solutionsReportLoader}
-                onClick={onDownloadSolutionsSummary}
-              >
-                <Loading
-                  visible={solutionsReportLoader}
-                  className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
-                  iconClassName="w-10 h-10 text-primary-500"
-                />
-                Export solutions summary
-              </Button>
-
               <Button
                 theme="primary-alt"
                 size="base"

From 2cf41c9e0d17bef5592e8673b2b19d74b912b27e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Mon, 11 Sep 2023 08:57:56 +0200
Subject: [PATCH 2/2] minor styling

---
 .../project/sidebar/project/scenarios-list/index.tsx  | 11 ++++++-----
 .../sidebar/scenario/solutions/overview/index.tsx     | 10 ++++------
 app/svgs/ui/table.svg                                 |  3 ---
 3 files changed, 10 insertions(+), 14 deletions(-)
 delete mode 100644 app/svgs/ui/table.svg

diff --git a/app/layout/project/sidebar/project/scenarios-list/index.tsx b/app/layout/project/sidebar/project/scenarios-list/index.tsx
index 8643780753..7febd4d3c0 100644
--- a/app/layout/project/sidebar/project/scenarios-list/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/index.tsx
@@ -29,6 +29,7 @@ import { ScrollArea } from 'components/scroll-area';
 import HelpBeacon from 'layout/help/beacon';
 import NoResults from 'layout/project/sidebar/project/inventory-panel/components/no-results';
 import ScenarioToolbar from 'layout/project/sidebar/project/scenarios-list/toolbar';
+import Section from 'layout/section';
 import { cn } from 'utils/cn';
 
 import bgScenariosDashboard from 'images/new-layout/bg-scenarios-dashboard.png';
@@ -350,12 +351,12 @@ export const ScenariosList: React.FC = () => {
           )}
 
           {(hasScenarios || search || hasFilters) && (
-            <div className="flex w-full flex-shrink-0 flex-col items-center justify-center rounded-[20px] bg-gray-700 p-6">
+            <Section className="flex w-full flex-col items-center justify-center space-y-5">
               {hasScenarios && (
                 <Button
                   theme="primary-alt"
                   size="base"
-                  className="mb-5 flex w-full overflow-hidden uppercase"
+                  className="flex w-full overflow-hidden uppercase"
                   disabled={solutionsReportLoader}
                   onClick={onDownloadSolutionsSummary}
                 >
@@ -364,20 +365,20 @@ export const ScenariosList: React.FC = () => {
                     className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
                     iconClassName="w-10 h-10 text-primary-500"
                   />
-                  {scenariosData.length === 1 ? 'Export scenario data' : 'Export scenarios data'}
+                  {`Export scenario${scenariosData.length > 1 ? 's' : ''} data`}
                 </Button>
               )}
               <Button
                 theme="primary"
                 size="base"
-                className="!px-5"
+                className="px-5"
                 disabled={!editable}
                 onClick={() => setModal(true)}
               >
                 <span className="mr-5">Create scenario</span>
                 <Icon icon={PLUS_SVG} className="h-4 w-4" />
               </Button>
-            </div>
+            </Section>
           )}
         </div>
 
diff --git a/app/layout/project/sidebar/scenario/solutions/overview/index.tsx b/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
index 9cd447dd05..131e500a1a 100644
--- a/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
@@ -7,6 +7,7 @@ import { useRouter } from 'next/router';
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 
 import { motion } from 'framer-motion';
+import { HiOutlineTable } from 'react-icons/hi';
 
 import { useProject } from 'hooks/projects';
 import { useScenario, useDownloadScenarioReport } from 'hooks/scenarios';
@@ -14,15 +15,12 @@ import { useSolution, useBestSolution } from 'hooks/solutions';
 import { useToasts } from 'hooks/toast';
 
 import Button from 'components/button';
-import Icon from 'components/icon';
 import Loading from 'components/loading';
 import Modal from 'components/modal';
 import Section from 'layout/section';
 import SolutionSelected from 'layout/solutions/selected';
 import { formatFileName } from 'utils/units';
 
-import TABLE_SVG from 'svgs/ui/table.svg?sprite';
-
 import SolutionsTableForm from './table/table-form/component';
 
 export const SolutionsOverview = (): JSX.Element => {
@@ -179,7 +177,7 @@ export const SolutionsOverview = (): JSX.Element => {
               <Button
                 theme="primary-alt"
                 size="base"
-                className="mb-4 flex h-12 overflow-hidden uppercase"
+                className="relative overflow-hidden uppercase"
                 disabled={PDFLoader}
                 onClick={onDownloadReport}
               >
@@ -193,11 +191,11 @@ export const SolutionsOverview = (): JSX.Element => {
               <Button
                 theme="primary"
                 size="base"
-                className="mb-4 flex h-12 uppercase"
+                className="relative uppercase"
                 onClick={() => setShowTable(true)}
               >
                 View solutions table
-                <Icon icon={TABLE_SVG} className="absolute right-8 h-4 w-4" />
+                <HiOutlineTable className="absolute right-8 h-6 w-6" />
               </Button>
 
               <Modal
diff --git a/app/svgs/ui/table.svg b/app/svgs/ui/table.svg
deleted file mode 100644
index 3c6b3598ba..0000000000
--- a/app/svgs/ui/table.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0L14 0C14.5304 0 15.0391 0.210714 15.4142 0.585786C15.7893 0.960859 16 1.46957 16 2V14C16 14.5304 15.7893 15.0391 15.4142 15.4142C15.0391 15.7893 14.5304 16 14 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V2ZM15 4H11V7H15V4ZM15 8H11V11H15V8ZM15 12H11V15H14C14.2652 15 14.5196 14.8946 14.7071 14.7071C14.8946 14.5196 15 14.2652 15 14V12ZM10 15V12H6V15H10ZM5 15V12H1V14C1 14.2652 1.10536 14.5196 1.29289 14.7071C1.48043 14.8946 1.73478 15 2 15H5ZM1 11H5V8H1V11ZM1 7H5V4H1V7ZM6 4V7H10V4H6ZM10 8H6V11H10V8Z" />
-</svg>