From 07527ba69b48b30c44dca59482a6bfbe9a734334 Mon Sep 17 00:00:00 2001
From: Nikhil Mohite <nikhil.mohite@enterprisedb.com>
Date: Sun, 3 Apr 2022 12:27:47 +0530
Subject: [PATCH] Fixed maximize button issue on the preferences dialog.

refs #7149
---
 web/pgadmin/static/img/fonticon/close_fullscreen.svg  | 1 +
 web/pgadmin/static/img/fonticon/expand.svg            | 1 -
 web/pgadmin/static/img/fonticon/minimize_collapse.svg | 1 -
 web/pgadmin/static/img/fonticon/open_in_full.svg      | 1 +
 web/pgadmin/static/js/components/ExternalIcon.jsx     | 8 ++++----
 web/pgadmin/static/js/helpers/ModalProvider.jsx       | 8 ++++++--
 6 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 web/pgadmin/static/img/fonticon/close_fullscreen.svg
 delete mode 100644 web/pgadmin/static/img/fonticon/expand.svg
 delete mode 100644 web/pgadmin/static/img/fonticon/minimize_collapse.svg
 create mode 100644 web/pgadmin/static/img/fonticon/open_in_full.svg

diff --git a/web/pgadmin/static/img/fonticon/close_fullscreen.svg b/web/pgadmin/static/img/fonticon/close_fullscreen.svg
new file mode 100644
index 000000000..3957c94af
--- /dev/null
+++ b/web/pgadmin/static/img/fonticon/close_fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,3.41l-5.29,5.29L20,12h-8V4l3.29,3.29L20.59,2L22,3.41z M3.41,22l5.29-5.29L12,20v-8H4l3.29,3.29L2,20.59L3.41,22z"/></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/img/fonticon/expand.svg b/web/pgadmin/static/img/fonticon/expand.svg
deleted file mode 100644
index 552bd9d17..000000000
--- a/web/pgadmin/static/img/fonticon/expand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="512px" height="512px" viewBox="-32 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M212.686 315.314L120 408l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C10.697 480 0 469.255 0 456V344c0-21.382 25.803-32.09 40.922-16.971L72 360l92.686-92.686c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.249 6.248 6.249 16.378 0 22.627zm22.628-118.628L328 104l-32.922-31.029C279.958 57.851 290.666 32 312.048 32h112C437.303 32 448 42.745 448 56v112c0 21.382-25.803 32.09-40.922 16.971L376 152l-92.686 92.686c-6.248 6.248-16.379 6.248-22.627 0l-25.373-25.373c-6.249-6.248-6.249-16.378 0-22.627z"/></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/img/fonticon/minimize_collapse.svg b/web/pgadmin/static/img/fonticon/minimize_collapse.svg
deleted file mode 100644
index 439505640..000000000
--- a/web/pgadmin/static/img/fonticon/minimize_collapse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2"><g data-name="collapse"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M19 9h-2.58l3.29-3.29a1 1 0 1 0-1.42-1.42L15 7.57V5a1 1 0 0 0-1-1 1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 0-2z"/><path d="M10 13H5a1 1 0 0 0 0 2h2.57l-3.28 3.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L9 16.42V19a1 1 0 0 0 1 1 1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z"/></g></g></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/img/fonticon/open_in_full.svg b/web/pgadmin/static/img/fonticon/open_in_full.svg
new file mode 100644
index 000000000..f783c72bc
--- /dev/null
+++ b/web/pgadmin/static/img/fonticon/open_in_full.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><rect fill="none" height="24" width="24"/><polygon points="21,11 21,3 13,3 16.29,6.29 6.29,16.29 3,13 3,21 11,21 7.71,17.71 17.71,7.71"/></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/js/components/ExternalIcon.jsx b/web/pgadmin/static/js/components/ExternalIcon.jsx
index a1e0e7393..2c6433764 100644
--- a/web/pgadmin/static/js/components/ExternalIcon.jsx
+++ b/web/pgadmin/static/js/components/ExternalIcon.jsx
@@ -11,8 +11,8 @@ import DisconnectedSvg from '../../img/fonticon/disconnected.svg?svgr';
 import RegexSvg from '../../img/fonticon/regex.svg?svgr';
 import FormatCaseSvg from '../../img/fonticon/format_case.svg?svgr';
 import PropTypes from 'prop-types';
-import Expand from '../../img/fonticon/expand.svg?svgr';
-import Collapse from '../../img/fonticon/minimize_collapse.svg?svgr';
+import Expand from '../../img/fonticon/open_in_full.svg?svgr';
+import Collapse from '../../img/fonticon/close_fullscreen.svg?svgr';
 
 export default function ExternalIcon({Icon, ...props}) {
   return <Icon className={'MuiSvgIcon-root'} {...props} />;
@@ -33,6 +33,6 @@ export const ConnectedIcon = ()=><ExternalIcon Icon={ConnectedSvg} style={{heigh
 export const DisonnectedIcon = ()=><ExternalIcon Icon={DisconnectedSvg} style={{height: '0.7em'}} />;
 export const RegexIcon = ()=><ExternalIcon Icon={RegexSvg} />;
 export const FormatCaseIcon = ()=><ExternalIcon Icon={FormatCaseSvg} />;
-export const ExpandDialogIcon = ()=><ExternalIcon Icon={Expand} style={{height: 'auto', width: '1em'}}  />;
-export const MinimizeDialogIcon = ()=><ExternalIcon Icon={Collapse} style={{height: 'auto'}} />;
+export const ExpandDialogIcon = ()=><ExternalIcon Icon={Expand} style={{height: '1.2em'}}  />;
+export const MinimizeDialogIcon = ()=><ExternalIcon Icon={Collapse} style={{height: '1.4em'}} />;
 
diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx
index b955d9c3f..1f6d07433 100644
--- a/web/pgadmin/static/js/helpers/ModalProvider.jsx
+++ b/web/pgadmin/static/js/helpers/ModalProvider.jsx
@@ -226,6 +226,10 @@ const useModalStyles = makeStyles(() => ({
     transition: 'none',
     flexShrink: 0,
     userSelect: 'none',
+  },
+  iconButtonStyle: {
+    marginLeft: 'auto',
+    marginRight: '0.3em'
   }
 }));
 
@@ -251,11 +255,11 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, fullScr
             <Box className={classes.title} marginRight="0.25rem" >{title}</Box>
             {
               showFullScreen && !isfullScreen &&
-              <Box marginLeft="auto"><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
+              <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
             }
             {
               showFullScreen && isfullScreen &&
-              <Box marginLeft="auto"><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon  className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
+              <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon  className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
             }
 
             <Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon  />} size="xs" noBorder onClick={closeModal} /></Box>