From 0d76fbcf0dfa38ba38670ae47425410c36d992d4 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 15 Oct 2023 18:44:53 +0300
Subject: [PATCH] New: XXL modal size

---
 .../src/Album/Search/AlbumInteractiveSearchModal.js    |  2 +-
 .../src/Artist/Search/ArtistInteractiveSearchModal.js  |  2 +-
 frontend/src/Components/Modal/Modal.css                | 10 +++++++++-
 frontend/src/Components/Modal/Modal.css.d.ts           |  1 +
 frontend/src/Helpers/Props/sizes.js                    |  4 ++--
 .../src/InteractiveImport/InteractiveImportModal.js    |  2 +-
 6 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Album/Search/AlbumInteractiveSearchModal.js b/frontend/src/Album/Search/AlbumInteractiveSearchModal.js
index 5049658a0..6ce488615 100644
--- a/frontend/src/Album/Search/AlbumInteractiveSearchModal.js
+++ b/frontend/src/Album/Search/AlbumInteractiveSearchModal.js
@@ -15,7 +15,7 @@ function AlbumInteractiveSearchModal(props) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       closeOnBackgroundClick={false}
       onModalClose={onModalClose}
     >
diff --git a/frontend/src/Artist/Search/ArtistInteractiveSearchModal.js b/frontend/src/Artist/Search/ArtistInteractiveSearchModal.js
index d7feee98d..9ce7e8f9a 100644
--- a/frontend/src/Artist/Search/ArtistInteractiveSearchModal.js
+++ b/frontend/src/Artist/Search/ArtistInteractiveSearchModal.js
@@ -14,7 +14,7 @@ function ArtistInteractiveSearchModal(props) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       closeOnBackgroundClick={false}
       onModalClose={onModalClose}
     >
diff --git a/frontend/src/Components/Modal/Modal.css b/frontend/src/Components/Modal/Modal.css
index 33f849945..f7a229501 100644
--- a/frontend/src/Components/Modal/Modal.css
+++ b/frontend/src/Components/Modal/Modal.css
@@ -63,6 +63,13 @@
   width: 1280px;
 }
 
+
+.extraExtraLarge {
+  composes: modal;
+
+  width: 1600px;
+}
+
 @media only screen and (max-width: $breakpointExtraLarge) {
   .modal.extraLarge {
     width: 90%;
@@ -90,7 +97,8 @@
   .modal.small,
   .modal.medium,
   .modal.large,
-  .modal.extraLarge {
+  .modal.extraLarge,
+  .modal.extraExtraLarge {
     max-height: 100%;
     width: 100%;
     height: 100% !important;
diff --git a/frontend/src/Components/Modal/Modal.css.d.ts b/frontend/src/Components/Modal/Modal.css.d.ts
index b6576c7de..e582ce0f9 100644
--- a/frontend/src/Components/Modal/Modal.css.d.ts
+++ b/frontend/src/Components/Modal/Modal.css.d.ts
@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'extraExtraLarge': string;
   'extraLarge': string;
   'large': string;
   'medium': string;
diff --git a/frontend/src/Helpers/Props/sizes.js b/frontend/src/Helpers/Props/sizes.js
index d7f85df5e..6ac15f3bd 100644
--- a/frontend/src/Helpers/Props/sizes.js
+++ b/frontend/src/Helpers/Props/sizes.js
@@ -3,5 +3,5 @@ export const SMALL = 'small';
 export const MEDIUM = 'medium';
 export const LARGE = 'large';
 export const EXTRA_LARGE = 'extraLarge';
-
-export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE];
+export const EXTRA_EXTRA_LARGE = 'extraExtraLarge';
+export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE, EXTRA_EXTRA_LARGE];
diff --git a/frontend/src/InteractiveImport/InteractiveImportModal.js b/frontend/src/InteractiveImport/InteractiveImportModal.js
index dda75152f..4d0e9f2f1 100644
--- a/frontend/src/InteractiveImport/InteractiveImportModal.js
+++ b/frontend/src/InteractiveImport/InteractiveImportModal.js
@@ -48,7 +48,7 @@ class InteractiveImportModal extends Component {
     return (
       <Modal
         isOpen={isOpen}
-        size={sizes.EXTRA_LARGE}
+        size={sizes.EXTRA_EXTRA_LARGE}
         closeOnBackgroundClick={false}
         onModalClose={onModalClose}
       >