From dbf9e0bd0a1de5ba75fd9ab2deac714644e260eb Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Tue, 2 Jul 2024 10:27:12 +0200
Subject: [PATCH 1/8] format imagine dialog

---
 src/Components/Buttons.jsx               |  2 +-
 src/Components/Imagine/ImagineDialog.jsx | 52 ++++++++++++++++--------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/Components/Buttons.jsx b/src/Components/Buttons.jsx
index 8e9ccb593..a4e95b77a 100644
--- a/src/Components/Buttons.jsx
+++ b/src/Components/Buttons.jsx
@@ -195,7 +195,7 @@ export function RectangularButton({
   return (
     icon ?
       <Button onClick={onClick} startIcon={icon} variant='contained'>{title}</Button> :
-      <Button onClick={onClick} variant='contained' disabled={disabled}>{title}</Button>
+      <Button onClick={onClick} variant='contained' disabled={disabled} sx={{minWidth: '10em'}}>{title}</Button>
   )
 }
 
diff --git a/src/Components/Imagine/ImagineDialog.jsx b/src/Components/Imagine/ImagineDialog.jsx
index 26974d31f..a71672fc2 100644
--- a/src/Components/Imagine/ImagineDialog.jsx
+++ b/src/Components/Imagine/ImagineDialog.jsx
@@ -11,8 +11,9 @@ import debug from '../../utils/debug'
 import {RectangularButton} from '../Buttons'
 import Dialog from '../Dialog'
 import Loader from '../Loader'
-import ClearIcon from '@mui/icons-material/Clear'
-import BotIcon from '../../assets/icons/Bot2.svg'
+import CloseIcon from '@mui/icons-material/Close'
+import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'
+// import BotIcon from '../../assets/icons/Bot2.svg'
 
 
 /**
@@ -71,14 +72,20 @@ export default function ImagineDialog({
 
   return (
     <Dialog
-      headerIcon={<BotIcon className='icon-share' style={{height: '50px'}}/>}
+      headerIcon={<AutoFixHighOutlinedIcon className='icon-share'/>}
       headerText={'Imagine'}
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
     >
       <Helmet><title>{finalPrompt ? `Imagine: ${finalPrompt}` : 'Imagine'}</title></Helmet>
       <Stack
-        sx={{minHeight: '390px'}}
+        sx={{
+          'minHeight': '390px',
+          'minWidth': '25em',
+          '@media (max-width: 900px)': {
+            minWidth: '10em',
+          },
+        }}
       >
         <Box
           sx={{
@@ -96,10 +103,17 @@ export default function ImagineDialog({
              alt='Imagine'
              height='390px'
              data-testid='img-rendered'
+             style={{borderRadius: '10px'}}
            />}
         </Box>
-
-        <Stack>
+        <Stack
+          sx={{
+            padding: '1em 0em',
+          }}
+          direction='column'
+          spacing={2}
+          justifyContent='center'
+        >
           <TextField
             value={prompt}
             onChange={(event) => setPrompt(event.target.value)}
@@ -110,27 +124,31 @@ export default function ImagineDialog({
             data-testid='text-field-render-description'
             InputProps={{
               endAdornment: (
-                <InputAdornment position='end'>
-                  {prompt && (
-                    <IconButton
-                      aria-label='clear text'
-                      onClick={onClearClick}
-                      edge='end'
-                      size='small'
-                    >
-                      <ClearIcon size='inherit'/>
-                    </IconButton>
-                  )}
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="clear search"
+                    onClick={() => onClearClick()}
+                    sx={{marginRight: '-.4em', height: '2em', width: '2em'}}
+                  >
+                    <CloseIcon
+                      className="icon-share"
+                      color='primary'
+                      fontSize="small"
+                    />
+                  </IconButton>
                 </InputAdornment>
               ),
             }}
           />
           <Stack direction='row' spacing={1} justifyContent='center'>
+          <Box>
             <RectangularButton
               title='Create'
               onClick={onCreateClick}
               disabled={prompt.length === 0}
             />
+          </Box>
+
             <RectangularButton
               title='Download'
               onClick={() => downloadImaginePng(imagine)}

From 4358211fe88d5cde728d3fafe34d34df25725802 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Tue, 2 Jul 2024 17:38:53 +0200
Subject: [PATCH 2/8] change the dimensions of the image

---
 src/Components/Imagine/ImagineDialog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Imagine/ImagineDialog.jsx b/src/Components/Imagine/ImagineDialog.jsx
index a71672fc2..50fcabdcb 100644
--- a/src/Components/Imagine/ImagineDialog.jsx
+++ b/src/Components/Imagine/ImagineDialog.jsx
@@ -81,7 +81,7 @@ export default function ImagineDialog({
       <Stack
         sx={{
           'minHeight': '390px',
-          'minWidth': '25em',
+          'minWidth': '35em',
           '@media (max-width: 900px)': {
             minWidth: '10em',
           },

From e013c66626f0e0ef119602df50755cd37da7fd81 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 3 Jul 2024 13:14:04 +0200
Subject: [PATCH 3/8] clean up

---
 src/Components/Imagine/ImagineDialog.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Components/Imagine/ImagineDialog.jsx b/src/Components/Imagine/ImagineDialog.jsx
index 50fcabdcb..02396ef88 100644
--- a/src/Components/Imagine/ImagineDialog.jsx
+++ b/src/Components/Imagine/ImagineDialog.jsx
@@ -103,7 +103,7 @@ export default function ImagineDialog({
              alt='Imagine'
              height='390px'
              data-testid='img-rendered'
-             style={{borderRadius: '10px'}}
+             style={{borderRadius: '1em'}}
            />}
         </Box>
         <Stack
@@ -141,14 +141,11 @@ export default function ImagineDialog({
             }}
           />
           <Stack direction='row' spacing={1} justifyContent='center'>
-          <Box>
             <RectangularButton
               title='Create'
               onClick={onCreateClick}
               disabled={prompt.length === 0}
             />
-          </Box>
-
             <RectangularButton
               title='Download'
               onClick={() => downloadImaginePng(imagine)}

From f0f9c6da1a3053d20cbac9f40df4b235950b7b03 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 3 Jul 2024 14:58:50 +0200
Subject: [PATCH 4/8] clean up

---
 src/Components/Imagine/ImagineDialog.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Components/Imagine/ImagineDialog.jsx b/src/Components/Imagine/ImagineDialog.jsx
index 02396ef88..bd463982a 100644
--- a/src/Components/Imagine/ImagineDialog.jsx
+++ b/src/Components/Imagine/ImagineDialog.jsx
@@ -107,9 +107,7 @@ export default function ImagineDialog({
            />}
         </Box>
         <Stack
-          sx={{
-            padding: '1em 0em',
-          }}
+          sx={{padding: '1em 0em'}}
           direction='column'
           spacing={2}
           justifyContent='center'

From 29bbfc787a518d38da6cf2379e0180e22cb27749 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 5 Jul 2024 14:23:30 +0200
Subject: [PATCH 5/8] fix image dimensions

---
 src/Components/Imagine/ImagineDialog.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Components/Imagine/ImagineDialog.jsx b/src/Components/Imagine/ImagineDialog.jsx
index bd463982a..1aa234287 100644
--- a/src/Components/Imagine/ImagineDialog.jsx
+++ b/src/Components/Imagine/ImagineDialog.jsx
@@ -6,6 +6,7 @@ import TextField from '@mui/material/TextField'
 import Box from '@mui/material/Box'
 import InputAdornment from '@mui/material/InputAdornment'
 import IconButton from '@mui/material/IconButton'
+import {useIsMobile} from '../Hooks'
 import useStore from '../../store/useStore'
 import debug from '../../utils/debug'
 import {RectangularButton} from '../Buttons'
@@ -13,7 +14,6 @@ import Dialog from '../Dialog'
 import Loader from '../Loader'
 import CloseIcon from '@mui/icons-material/Close'
 import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'
-// import BotIcon from '../../assets/icons/Bot2.svg'
 
 
 /**
@@ -37,6 +37,7 @@ export default function ImagineDialog({
   const [image, setImage] = useState(null)
 
   const [finalPrompt, setFinalPrompt] = useState(null)
+  const imageDimensions = useIsMobile() ? '280px' : '390px'
 
   useEffect(() => {
     if (viewer && isDialogDisplayed && isModelReady) {
@@ -80,7 +81,7 @@ export default function ImagineDialog({
       <Helmet><title>{finalPrompt ? `Imagine: ${finalPrompt}` : 'Imagine'}</title></Helmet>
       <Stack
         sx={{
-          'minHeight': '390px',
+          'minHeight': imageDimensions,
           'minWidth': '35em',
           '@media (max-width: 900px)': {
             minWidth: '10em',
@@ -89,7 +90,7 @@ export default function ImagineDialog({
       >
         <Box
           sx={{
-            minHeight: '390px',
+            minHeight: imageDimensions,
             borderRadius: '10px',
             display: 'flex',
             justifyContent: 'center',
@@ -101,7 +102,7 @@ export default function ImagineDialog({
            <img
              src={image}
              alt='Imagine'
-             height='390px'
+             height={imageDimensions}
              data-testid='img-rendered'
              style={{borderRadius: '1em'}}
            />}

From 4cfd5ddf040ffccb6bf4c9c5f2bd4e4ad63a8b8c Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 24 Jul 2024 10:59:49 +0200
Subject: [PATCH 6/8] adjust clear button

---
 src/Components/Imagine/ImagineDialog.jsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/Components/Imagine/ImagineDialog.jsx b/src/Components/Imagine/ImagineDialog.jsx
index 1aa234287..272d9ea07 100644
--- a/src/Components/Imagine/ImagineDialog.jsx
+++ b/src/Components/Imagine/ImagineDialog.jsx
@@ -125,15 +125,13 @@ export default function ImagineDialog({
               endAdornment: (
                 <InputAdornment position="end">
                   <IconButton
-                    aria-label="clear search"
-                    onClick={() => onClearClick()}
+                    aria-label="clear text"
+                    onClick={onClearClick}
+                    edge='end'
+                    size='small'
                     sx={{marginRight: '-.4em', height: '2em', width: '2em'}}
                   >
-                    <CloseIcon
-                      className="icon-share"
-                      color='primary'
-                      fontSize="small"
-                    />
+                    <CloseIcon fontSize="small"/>
                   </IconButton>
                 </InputAdornment>
               ),

From a946a84164e2dacc3bc090795fbea16a68ea2814 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 7 Aug 2024 09:49:29 +0200
Subject: [PATCH 7/8] try the tree adjustment

---
 src/Components/LoadingBackdrop.jsx     |  2 +-
 src/Components/NavTree/NavTreeItem.jsx | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/Components/LoadingBackdrop.jsx b/src/Components/LoadingBackdrop.jsx
index bc7bd6daf..f3b70316b 100644
--- a/src/Components/LoadingBackdrop.jsx
+++ b/src/Components/LoadingBackdrop.jsx
@@ -14,6 +14,6 @@ export default function LoadingBackdrop() {
       open={isModelLoading}
       sx={{color: theme.palette.primary.sceneHighlight, zIndex: 1000}}
     >
-      <CircularProgress color='inherit'/>
+      <CircularProgress color='inherit' disableShrink thickness={5.0}/>
     </Backdrop>)
 }
diff --git a/src/Components/NavTree/NavTreeItem.jsx b/src/Components/NavTree/NavTreeItem.jsx
index 29bdca460..4d4c41a92 100644
--- a/src/Components/NavTree/NavTreeItem.jsx
+++ b/src/Components/NavTree/NavTreeItem.jsx
@@ -80,7 +80,19 @@ export default function CustomContent(props, ref) {
             width: hasHideIcon ? 'calc(100% - 30px)' : '100%',
           }}
         >
-          <Typography variant='tree'>{label}</Typography>
+          <Typography
+          variant='tree'
+          sx={{
+                display: 'inlineBlock',
+                width: '20ch',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }
+          }
+          >
+            {label}
+          </Typography>
         </Box>
         {hasHideIcon &&
          <Box display='flex' sx={{display: 'contents', width: '30px'}}>

From 34aabaf360cc4313276b36fd12bd3fe7a37c884e Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Thu, 8 Aug 2024 15:41:20 +0200
Subject: [PATCH 8/8] revert changes to other components

---
 src/Components/LoadingBackdrop.jsx     |  2 +-
 src/Components/NavTree/NavTreeItem.jsx | 14 +-------------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/Components/LoadingBackdrop.jsx b/src/Components/LoadingBackdrop.jsx
index f3b70316b..bc7bd6daf 100644
--- a/src/Components/LoadingBackdrop.jsx
+++ b/src/Components/LoadingBackdrop.jsx
@@ -14,6 +14,6 @@ export default function LoadingBackdrop() {
       open={isModelLoading}
       sx={{color: theme.palette.primary.sceneHighlight, zIndex: 1000}}
     >
-      <CircularProgress color='inherit' disableShrink thickness={5.0}/>
+      <CircularProgress color='inherit'/>
     </Backdrop>)
 }
diff --git a/src/Components/NavTree/NavTreeItem.jsx b/src/Components/NavTree/NavTreeItem.jsx
index 4d4c41a92..29bdca460 100644
--- a/src/Components/NavTree/NavTreeItem.jsx
+++ b/src/Components/NavTree/NavTreeItem.jsx
@@ -80,19 +80,7 @@ export default function CustomContent(props, ref) {
             width: hasHideIcon ? 'calc(100% - 30px)' : '100%',
           }}
         >
-          <Typography
-          variant='tree'
-          sx={{
-                display: 'inlineBlock',
-                width: '20ch',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }
-          }
-          >
-            {label}
-          </Typography>
+          <Typography variant='tree'>{label}</Typography>
         </Box>
         {hasHideIcon &&
          <Box display='flex' sx={{display: 'contents', width: '30px'}}>