Updates styling

frontend/src/app/App.tsx

@@ -10,8 +10,8 @@ import InvokeTabs from '../features/tabs/InvokeTabs';
 import ImageUploader from '../common/components/ImageUploader';
 import { RootState, useAppSelector } from '../app/store';
 
-import ShowHideGalleryButton from '../features/tabs/ShowHideGalleryButton';
-import ShowHideOptionsPanelButton from '../features/tabs/ShowHideOptionsPanelButton';
+import FloatingGalleryButton from '../features/tabs/FloatingGalleryButton';
+import FloatingOptionsPanelButtons from '../features/tabs/FloatingOptionsPanelButtons';
 import { createSelector } from '@reduxjs/toolkit';
 import { GalleryState } from '../features/gallery/gallerySlice';
 import { OptionsState } from '../features/options/optionsSlice';
@@ -72,8 +72,8 @@ const App = () => {
         <div className="app-console">
           <Console />
         </div>
-        {shouldShowGalleryButton && <ShowHideGalleryButton />}
-        {shouldShowOptionsPanelButton && <ShowHideOptionsPanelButton />}
+        {shouldShowGalleryButton && <FloatingGalleryButton />}
+        {shouldShowOptionsPanelButton && <FloatingOptionsPanelButtons />}
       </ImageUploader>
     </div>
   ) : (

frontend/src/features/options/ProcessButtons/InvokeButton.tsx

@@ -1,5 +1,7 @@
 import { useHotkeys } from 'react-hotkeys-hook';
-import { BsImageFill } from 'react-icons/bs';
+import { BsImageFill, BsPlayFill } from 'react-icons/bs';
+import { FaPlay, FaPlayCircle } from 'react-icons/fa';
+import { IoPlay } from 'react-icons/io5';
 import { generateImage } from '../../../app/socketio/actions';
 import { useAppDispatch, useAppSelector } from '../../../app/store';
 import IAIButton, {
@@ -38,10 +40,10 @@ export default function InvokeButton(props: InvokeButton) {
     <IAIIconButton
       aria-label="Invoke"
       type="submit"
-      icon={<BsImageFill />}
+      icon={<FaPlay />}
       isDisabled={!isReady}
       onClick={handleClickGenerate}
-      className="invoke-btn"
+      className="invoke-btn invoke"
       tooltip="Invoke"
       tooltipPlacement="bottom"
       {...rest}

frontend/src/features/options/ProcessButtons/ProcessButtons.scss

@@ -7,6 +7,10 @@
 }
 
 .invoke-btn {
+  svg {
+    width: 18px !important;
+    height: 18px !important;
+  }
   @include Button(
     $btn-color: var(--accent-color),
     $btn-color-hover: var(--accent-color-hover),

frontend/src/features/tabs/FloatingGalleryButton.tsx

@@ -3,7 +3,7 @@ import { useAppDispatch } from '../../app/store';
 import IAIIconButton from '../../common/components/IAIIconButton';
 import { setShouldShowGallery } from '../gallery/gallerySlice';
 
-const ShowHideGalleryButton = () => {
+const FloatingGalleryButton = () => {
   const dispatch = useAppDispatch();
 
   const handleShowGallery = () => {
@@ -23,4 +23,4 @@ const ShowHideGalleryButton = () => {
   );
 };
 
-export default ShowHideGalleryButton;
+export default FloatingGalleryButton;

frontend/src/features/tabs/FloatingOptionsPanelButtons.tsx

@@ -24,7 +24,7 @@ const canInvokeSelector = createSelector(
   { memoizeOptions: { resultEqualityCheck: _.isEqual } }
 );
 
-const ShowHideOptionsPanelButton = () => {
+const FloatingOptionsPanelButtons = () => {
   const dispatch = useAppDispatch();
   const { shouldShowProcessButtons } = useAppSelector(canInvokeSelector);
 
@@ -53,4 +53,4 @@ const ShowHideOptionsPanelButton = () => {
   );
 };
 
-export default ShowHideOptionsPanelButton;
+export default FloatingOptionsPanelButtons;

frontend/src/features/tabs/InvokeWorkarea.scss

@@ -37,5 +37,11 @@
       border-radius: 0.5rem;
       padding: 1rem;
     }
+    .workarea-split-view-left {
+      padding-right: 0.5rem;
+    }
+    .workarea-split-view-right {
+      padding-left: 0.5rem;
+    }
   }
 }

frontend/src/styles/index.scss

@@ -40,7 +40,7 @@
 @use '../features/tabs/TextToImage/TextToImage.scss';
 @use '../features/tabs/ImageToImage/ImageToImage.scss';
 @use '../features/tabs/Inpainting/Inpainting.scss';
-@use '../features/tabs/FloatingShowHideButton.scss';
+@use '../features/tabs/FloatingButton.scss';
 
 // Component Shared
 @use '../common/components/IAINumberInput.scss';