@colijnit/inphoto 300.1.1 → 300.1.2

package/icons/lock_solid_full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M256 160L256 224L384 224L384 160C384 124.7 355.3 96 320 96C284.7 96 256 124.7 256 160zM192 224L192 160C192 89.3 249.3 32 320 32C390.7 32 448 89.3 448 160L448 224C483.3 224 512 252.7 512 288L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 288C128 252.7 156.7 224 192 224z"/></svg>

package/index.d.ts

@@ -18,11 +18,12 @@ import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { DataServiceResponseData } from '@colijnit/ioneconnector/build/model/data-service-response-data';
 import { ExternalCatalogStartupInfoRequest } from '@colijnit/articleapi/build/model/external-catalog-startup-info-request';
 import { ExternalCatalogStartupInfo } from '@colijnit/articleapi/build/model/external-catalog-startup-info';
-import * as i7 from '@colijnit/configurator';
+import * as i7$1 from '@colijnit/configurator';
 import { ConfigurationResultObject, ConfiguringService, ConfiguratorEventService } from '@colijnit/configurator';
 import { ExternalSourceArticleClickInterface } from '@colijnit/articleapi/build/interface/external-source-article-click.interface';
 import { Font } from 'three/examples/jsm/loaders/FontLoader.js';
 import * as i2$1 from '@angular/forms';
+import * as i7 from '@angular/cdk/drag-drop';
 import * as i4 from '@angular/common';
 import * as i5 from '@colijnit/utilities';
 
@@ -59,6 +60,7 @@ declare enum Icon {
     ImageSolidFull = "image_solid_full",
     InfoSolidFull = "info_solid_full",
     LightbulbRegularFull = "lightbulb_regular_full",
+    LockSolidFull = "lock_solid_full",
     PaintbrushRegular = "paintbrush_regular",
     PenToSquareSolidFull = "pen_to_square_solid_full",
     RotateLeftSharpSolidFull = "rotate_left_sharp_solid_full",
@@ -238,6 +240,7 @@ declare class InphotoEventService {
     unSelectObject: Subject<void>;
     updateProcessingImageData: Subject<boolean>;
     updateCanvasMaskColor: Subject<boolean>;
+    clearMarkedCanvas: Subject<void>;
     onGeneratedImageReceived: Subject<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<InphotoEventService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<InphotoEventService>;
@@ -792,11 +795,12 @@ declare class ImageEnhancer {
     dataService: InphotoDataService;
     private _appEventService;
     readonly icons: typeof Icon;
+    showClass(): boolean;
+    dragBoundary: string;
     selectedStyle: EventEmitter<EnhanceStyle>;
     createPromptWithImages: EventEmitter<PromptWithImages>;
     backButtonClicked: EventEmitter<void>;
     changeMarkerColor: EventEmitter<MaskImageColorInterface>;
-    showClass(): boolean;
     prompt: string;
     activeTab: number;
     showMaskInfoDialog: boolean;
@@ -810,7 +814,7 @@ declare class ImageEnhancer {
     closeDialog(): void;
     openDialog(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageEnhancer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ImageEnhancer, "co-image-enhancer", never, {}, { "selectedStyle": "selectedStyle"; "createPromptWithImages": "createPromptWithImages"; "backButtonClicked": "backButtonClicked"; "changeMarkerColor": "changeMarkerColor"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageEnhancer, "co-image-enhancer", never, { "dragBoundary": { "alias": "dragBoundary"; "required": false; }; }, { "selectedStyle": "selectedStyle"; "createPromptWithImages": "createPromptWithImages"; "backButtonClicked": "backButtonClicked"; "changeMarkerColor": "changeMarkerColor"; }, never, never, false, never>;
 }
 
 declare enum FileTypes {
@@ -1011,7 +1015,7 @@ declare class ImageEnhancerUploadModule {
 
 declare class ImageEnhancerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageEnhancerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ImageEnhancerModule, [typeof ImageEnhancer], [typeof i2.ListOfValuesModule, typeof PipeModule, typeof i2.IconModule, typeof ImageUploadModule, typeof i2.ButtonModule, typeof i2.InputTextareaModule, typeof ImageEnhancerStyleModule, typeof ImageEnhancerUploadModule], [typeof ImageEnhancer]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ImageEnhancerModule, [typeof ImageEnhancer], [typeof i2.ListOfValuesModule, typeof PipeModule, typeof i2.IconModule, typeof ImageUploadModule, typeof i2.ButtonModule, typeof i2.InputTextareaModule, typeof ImageEnhancerStyleModule, typeof ImageEnhancerUploadModule, typeof i7.CdkDragHandle, typeof i7.CdkDrag], [typeof ImageEnhancer]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ImageEnhancerModule>;
 }
 
@@ -1020,17 +1024,19 @@ declare class ImageHistoryComponent implements AfterViewInit, OnDestroy {
     iconService: InphotoIconCacheService;
     private _eventService;
     readonly icons: typeof Icon;
-    setImageAsBackground: EventEmitter<string>;
     private tilesRow?;
     showClass(): boolean;
     onResize(): void;
+    onEscape(): void;
+    onArrowLeft(event: KeyboardEvent): void;
+    onArrowRight(event: KeyboardEvent): void;
+    setImageAsBackground: EventEmitter<string>;
     displayedImages: string[];
     selectedImage: string;
     showFullImage: boolean;
     fullImage: string;
     canScrollLeft: boolean;
     canScrollRight: boolean;
-    private observer;
     private _subs;
     constructor(dataService: InphotoDataService, iconService: InphotoIconCacheService, _eventService: InphotoEventService);
     ngAfterViewInit(): void;
@@ -1041,8 +1047,14 @@ declare class ImageHistoryComponent implements AfterViewInit, OnDestroy {
     handleCloseFullImage(): void;
     handleRemoveImageFromHistory(event: string): void;
     handleDownloadImage(event: string): void;
+    handleDownloadFullImage(): void;
+    handleDeleteFullImage(): void;
     scroll(direction: number): void;
+    onWheel(event: WheelEvent): void;
     updateScrollState(): void;
+    showNextPrevImage(): void;
+    showNextLargeImage(): void;
+    private _getCurrentIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageHistoryComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ImageHistoryComponent, "co-image-history", never, {}, { "setImageAsBackground": "setImageAsBackground"; }, never, never, false, never>;
 }
@@ -1153,6 +1165,7 @@ declare class CanvasToolBarComponent {
     showActionButtons: boolean;
     showInfoIcon: boolean;
     title: string;
+    dragBoundary: string;
     changeEraseMode: EventEmitter<boolean>;
     cancelClick: EventEmitter<void>;
     processSegmentation: EventEmitter<void>;
@@ -1165,22 +1178,22 @@ declare class CanvasToolBarComponent {
     handleCancelClick(): void;
     processInpainted(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CanvasToolBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CanvasToolBarComponent, "co-canvas-tool-bar", never, { "canvasInpaintMode": { "alias": "canvasInpaintMode"; "required": false; }; "canvasEraseMode": { "alias": "canvasEraseMode"; "required": false; }; "showActionButtons": { "alias": "showActionButtons"; "required": false; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, { "changeEraseMode": "changeEraseMode"; "cancelClick": "cancelClick"; "processSegmentation": "processSegmentation"; "openInfoContainer": "openInfoContainer"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CanvasToolBarComponent, "co-canvas-tool-bar", never, { "canvasInpaintMode": { "alias": "canvasInpaintMode"; "required": false; }; "canvasEraseMode": { "alias": "canvasEraseMode"; "required": false; }; "showActionButtons": { "alias": "showActionButtons"; "required": false; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; }; }, { "changeEraseMode": "changeEraseMode"; "cancelClick": "cancelClick"; "processSegmentation": "processSegmentation"; "openInfoContainer": "openInfoContainer"; }, never, never, false, never>;
 }
 
 declare class CanvasToolBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CanvasToolBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CanvasToolBarModule, [typeof CanvasToolBarComponent], [typeof i2.ButtonModule, typeof i2.IconModule, typeof PipeModule], [typeof CanvasToolBarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CanvasToolBarModule, [typeof CanvasToolBarComponent], [typeof i2.ButtonModule, typeof i2.IconModule, typeof PipeModule, typeof i7.CdkDrag, typeof i7.CdkDragHandle], [typeof CanvasToolBarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CanvasToolBarModule>;
 }
 
 declare class PhotoEditorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PhotoEditorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PhotoEditorModule, [typeof PhotoEditorComponent], [typeof EditCanvasModule, typeof PipeModule, typeof ImageUploadModule, typeof i2.ButtonModule, typeof ImageEnhancerModule, typeof ImageHistoryModule, typeof ProcessLoaderModule, typeof i2.IconModule, typeof CanvasToolBarModule], [typeof PhotoEditorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PhotoEditorModule, [typeof PhotoEditorComponent], [typeof EditCanvasModule, typeof PipeModule, typeof ImageUploadModule, typeof i2.ButtonModule, typeof ImageEnhancerModule, typeof ImageHistoryModule, typeof ProcessLoaderModule, typeof i2.IconModule, typeof CanvasToolBarModule, typeof i7.DragDropModule], [typeof PhotoEditorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PhotoEditorModule>;
 }
 
-declare class PrepareStartingImageComponent implements OnDestroy {
+declare class PrepareStartingImageComponent {
     iconService: InphotoIconCacheService;
     private _connectorService;
     private _appEventService;
@@ -1191,18 +1204,18 @@ declare class PrepareStartingImageComponent implements OnDestroy {
     processedRoom: EventEmitter<SceneBuildObject>;
     segmentationJobId: EventEmitter<string>;
     imageReady: EventEmitter<string>;
+    continueToAI: EventEmitter<string>;
     disableSelectObjectsButton: boolean;
     showLoader: boolean;
     loadingTexts: string[];
-    private _subs;
     constructor(iconService: InphotoIconCacheService, _connectorService: InPhotoConnectorService, _appEventService: InphotoEventService);
-    ngOnDestroy(): void;
     handleCancelClick(): void;
     handleClearAllObjects(): void;
     handleSelectToClearObjects(): void;
+    handleContinueToAI(): void;
     private _handleRoomReceived;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrepareStartingImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PrepareStartingImageComponent, "co-prepare-starting-image", never, { "image": { "alias": "image"; "required": false; }; }, { "cancelClick": "cancelClick"; "processedRoom": "processedRoom"; "segmentationJobId": "segmentationJobId"; "imageReady": "imageReady"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrepareStartingImageComponent, "co-prepare-starting-image", never, { "image": { "alias": "image"; "required": false; }; }, { "cancelClick": "cancelClick"; "processedRoom": "processedRoom"; "segmentationJobId": "segmentationJobId"; "imageReady": "imageReady"; "continueToAI": "continueToAI"; }, never, never, false, never>;
 }
 
 declare class PrepareStartingImageModule {
@@ -1346,7 +1359,7 @@ declare class ThreedToAiModule {
 
 declare class InphotoThreedsceneModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<InphotoThreedsceneModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<InphotoThreedsceneModule, [typeof InphotoThreedSceneComponent], [typeof ImageUploadModule, typeof BackNextButtonsModule, typeof i2.ButtonModule, typeof PipeModule, typeof InphotoCatalogModule, typeof i2.IconModule, typeof i7.ConfiguratorModule, typeof SceneContextMenuModule, typeof ConfigurationSideBarMenuModule, typeof ThreedToAiModule], [typeof InphotoThreedSceneComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<InphotoThreedsceneModule, [typeof InphotoThreedSceneComponent], [typeof ImageUploadModule, typeof BackNextButtonsModule, typeof i2.ButtonModule, typeof PipeModule, typeof InphotoCatalogModule, typeof i2.IconModule, typeof i7$1.ConfiguratorModule, typeof SceneContextMenuModule, typeof ConfigurationSideBarMenuModule, typeof ThreedToAiModule], [typeof InphotoThreedSceneComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<InphotoThreedsceneModule>;
 }
 
@@ -1408,7 +1421,6 @@ declare class InPhotoComponent {
     appInitializerService: AppInitializerService;
     appEventService: InphotoEventService;
     private _cdk;
-    readonly RoutesEnum: typeof RoutesEnum;
     showClass(): boolean;
     set settings(input: any);
     showImageUpload: boolean;
@@ -1423,7 +1435,6 @@ declare class InPhotoComponent {
     aiDecorationImage: string;
     roomData: SceneBuildObject;
     segmentJobId: string;
-    useMock: boolean;
     constructor(appInitializerService: AppInitializerService, appEventService: InphotoEventService, _cdk: ChangeDetectorRef);
     handleCancelClick(): void;
     startPoint(): void;
@@ -1432,8 +1443,10 @@ declare class InPhotoComponent {
     handleStart3D(data: SceneBuildObject): void;
     handleSegmentationJobId(segmentJobId: string): void;
     handleSegmentOutput(image: string): void;
+    handleCancelSegmentClick(): void;
     handleMenuChange(event: any): void;
     handleAiDecoration(image?: string): void;
+    handleCancelCompleteClick(): void;
     closeReadyToOpen(): void;
     handleOpenCatalog(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InPhotoComponent, never>;
@@ -1500,6 +1513,7 @@ declare class ImageProcessCompleteComponent {
     get image(): string;
     handleStart3D: EventEmitter<SceneBuildObject>;
     handleAiDecorationClicked: EventEmitter<string>;
+    cancelClick: EventEmitter<void>;
     showLoader: boolean;
     loadingTexts: string[];
     private _image;
@@ -1507,9 +1521,10 @@ declare class ImageProcessCompleteComponent {
     constructor(iconService: InphotoIconCacheService, _connectorService: InPhotoConnectorService, _appEventService: InphotoEventService);
     handle3DClick(): void;
     handleAiClick(): void;
+    cancel(): void;
     private _handleRoomReceived;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageProcessCompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ImageProcessCompleteComponent, "co-image-process-complete", never, { "image": { "alias": "image"; "required": false; }; }, { "handleStart3D": "handleStart3D"; "handleAiDecorationClicked": "handleAiDecorationClicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageProcessCompleteComponent, "co-image-process-complete", never, { "image": { "alias": "image"; "required": false; }; }, { "handleStart3D": "handleStart3D"; "handleAiDecorationClicked": "handleAiDecorationClicked"; "cancelClick": "cancelClick"; }, never, never, false, never>;
 }
 
 declare class ImageProcessCompleteNextComponent {

package/lib/component/ai-prompt/style/_layout.scss

@@ -32,7 +32,7 @@
       }
 
       .prompt-text {
-       @include cfg.text();
+        @include cfg.text();
         margin-bottom: 10px;
       }
 

package/lib/component/back-next-buttons/style/_theme.scss

@@ -23,6 +23,7 @@
       }
 
       .next-button, .generate-button {
+        margin-left: auto;
         min-width: 300px;
         font-weight: bold;
         @include cfg.action-button(

package/lib/component/canvas-tool-bar/style/_layout.scss

@@ -16,6 +16,12 @@
       justify-content: space-around;
 
       .drag-indicator-icon {
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+
         @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-text));
       }
 

package/lib/component/image-enhancer/style/_layout.scss

@@ -38,37 +38,58 @@
     }
 
 
-    .collapse-menu {
-      border-radius: var(--co-inphoto-border-radius);
-      background: var(--co-inphoto-background-white);
-      box-sizing: border-box;
-      padding: 10px;
-      cursor: pointer;
-      display: grid;
-
-      .collapse-menu-item {
-        grid-area: 1 / 1;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s ease;
-
-        .collapse-menu-open, .collapse-close-open {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .collapse-menu-text {
-            @include cfg.text();
-          }
+    .image-enhancer-header {
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+
+      .drag-indicator-icon {
+        border-radius: var(--co-inphoto-border-radius);
+        background: var(--co-inphoto-background-white);
+        box-sizing: border-box;
+        padding: 10px;
+        cursor: grab;
 
-          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
+        &:active {
+          cursor: grabbing;
         }
+
       }
 
-      .collapse-menu-active {
-        opacity: 1;
-        pointer-events: auto;
+      .collapse-menu {
+        border-radius: var(--co-inphoto-border-radius);
+        background: var(--co-inphoto-background-white);
+        box-sizing: border-box;
+        padding: 10px;
+        cursor: pointer;
+        display: grid;
+
+        .collapse-menu-item {
+          grid-area: 1 / 1;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.2s ease;
+
+          .collapse-menu-open, .collapse-close-open {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .collapse-menu-text {
+              @include cfg.text();
+            }
+
+            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
+          }
+        }
+
+        .collapse-menu-active {
+          opacity: 1;
+          pointer-events: auto;
+        }
       }
+
     }
+
   }
 }

package/lib/component/image-enhancer/style/_theme.scss

@@ -2,14 +2,26 @@
 
 @include cfg.export-module('co-image-enhancer-theme') {
   .co-image-enhancer {
+    .enhancer-container {
+      background: rgba(255, 255, 255, 0.9);
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      width: 30%;
+      max-width: 30%;
+      box-sizing: border-box;
+      padding: 20px;
+      border-radius: var(--co-inphoto-border-radius);
+    }
+
+
     .image-enhancer-container {
       .header {
         .header-icon-container {
           margin-bottom: 10px;
 
           h2 {
-            font-size: var(--co-inphoto-font-size-head);
-            color: var(--co-inphoto-color-dark);
+            @include cfg.header-text();
           }
         }
       }

package/lib/component/image-enhancer-style/style/_theme.scss

@@ -18,10 +18,10 @@
           @include cfg.sub-header-text();
         }
       }
+    }
 
-      .tool-explainer-text {
-        @include cfg.text();
-      }
+    .tool-explainer-text {
+      @include cfg.text();
     }
 
     .button-container {

package/lib/component/image-history/style/_layout.scss

@@ -61,24 +61,79 @@
       inset: 0;
       z-index: 1000;
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
 
+      .dialog-container {
+        position: relative;
 
-      .close-dialog-button {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-        cursor: pointer;
+        .close-dialog-button, .dialog-prev-button, .dialog-next-button {
+          position: absolute;
 
-        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
+          cursor: pointer;
+          background: var(--co-inphoto-loader-background-dark);
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+
+          .co-icon {
+            flex: 1
+          }
+
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
+        }
+
+        .close-dialog-button {
+          top: 20px;
+          right: 20px;
+        }
+
+        .dialog-prev-button {
+          left: 20px;
+          top: 50%;
+        }
+
+        .dialog-next-button {
+          right: 20px;
+          top: 50%;
+        }
+
+        .dialog-toolbar {
+          position: absolute;
+          bottom: 20px;
+          right: 20px;
+          display: flex;
+          gap: 10px;
+
+          .co-button {
+            display: flex;
+            cursor: pointer;
+            box-sizing: border-box;
+            padding: 8px 15px;
+            background: var(--co-inphoto-loader-background-dark);
+            color: var(--co-inphoto-color-light);
+            border-radius: var(--co-inphoto-border-radius);
+            font-size: var(--co-inphoto-font-size-label);
+
+            .label {
+              margin-left: 10px;
+            }
+
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+          }
+        }
       }
 
+
       .large-image {
-        max-width: 90%;
-        max-height: 90%;
+        max-width: 100%;
+        max-height: 100%;
         object-fit: contain;
-        border-radius: 8px;
+        border-radius: var(--co-inphoto-border-radius);
       }
     }
   }

package/lib/component/image-process-complete/components/image-process-complete-next/style/_layout.scss

@@ -6,6 +6,7 @@
 
     .image-process-complete-next {
       .image-process-complete-dialog-next-step {
+        background: var(--co-inphoto-background-white);
         display: flex;
         align-items: start;
         justify-content: space-between;

package/lib/component/image-process-complete/style/_layout.scss

@@ -3,9 +3,15 @@
 @include cfg.export-module('co-image-process-complete-layout') {
   .co-image-process-complete {
     .image-process-complete {
-      height: 100vh;
-      width: 100vw;
-      background-size: cover;
+      background-size: contain;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      min-height: 100vh;
+      background-repeat: no-repeat;
+      background-position: center;
     }
 
     .image-process-complete-dialog {

package/lib/component/image-process-complete/style/_theme.scss

@@ -16,17 +16,21 @@
           background: var(--co-inphoto-header-icon-background);
           color: var(--co-inphoto-success-color);
           margin-right: 25px;
-          height: 55px;
-          width: 55px;
-          @include cfg.default-icon(var(--co-inphoto-icon-header), var(--co-inphoto-icon-header), var(--co-inphoto-success-color));
+          height: 50px;
+          width: 50px;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          border-radius: 50%;
+          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-success-color));
         }
 
         .header-info {
-          .header-head {
+          .header-text {
             @include cfg.header-text();
           }
 
-          .header-text {
+          .explain-text {
             @include cfg.text();
           }
         }
@@ -35,20 +39,21 @@
           margin-left: auto;
 
           .co-button {
-            text-align: center;
-            margin: 10px auto;
-            background-color: transparent;
-            color: var(--co-inphoto-color-dark);
-            font-size: var(--co-inphoto-button-font-size);
-            border: var(--co-inphoto-button-border);
-            border-radius: var(--co-inphoto-action-button-radius);
-            padding: var(--co-inphoto-button-padding);
-            font-weight: 600;
-
-            @include cfg.default-icon(var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-size), var(--co-inphoto-color-dark));
+            @include cfg.action-button(
+                    var(--co-inphoto-button-background),
+                    var(--co-inphoto-button-background),
+                    var(--co-inphoto-button-color),
+                    var(--co-inphoto-button-font-size),
+                    var(--co-inphoto-button-icon-size),
+                    var(--co-inphoto-button-icon-color),
+                    var(--co-inphoto-button-border),
+                    var(--co-inphoto-button-radius),
+                    var(--co-inphoto-button-padding)
+            );
 
             .label {
               margin-left: 15px;
+              font-weight: bold;
             }
           }
         }

package/lib/component/photo-editor/style/_layout.scss

@@ -10,16 +10,6 @@
       width: 100vw;
     }
 
-    .enhancer-container {
-      background: rgba(255, 255, 255, 0.9);
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      width: 30%;
-      max-width: 30%;
-      box-sizing: border-box;
-      padding: 20px;
-      border-radius: var(--co-inphoto-border-radius);
-    }
+
   }
 }