From 89bef4af99da90df608dbdaad42d87544eb27038 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 10 Mar 2024 06:50:45 +0200
Subject: [PATCH] New: Wider modal for Interactive Search and Manual Import

---
 frontend/src/Components/Modal/Modal.css                | 10 +++++++++-
 frontend/src/Components/Modal/Modal.css.d.ts           |  1 +
 frontend/src/Episode/EpisodeDetailsModal.js            |  2 +-
 frontend/src/Helpers/Props/sizes.js                    |  4 ++--
 .../src/InteractiveImport/InteractiveImportModal.tsx   |  2 +-
 .../src/Series/Search/SeasonInteractiveSearchModal.js  |  2 +-
 6 files changed, 15 insertions(+), 6 deletions(-)

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/Episode/EpisodeDetailsModal.js b/frontend/src/Episode/EpisodeDetailsModal.js
index cd2e20e74..0e9583e3a 100644
--- a/frontend/src/Episode/EpisodeDetailsModal.js
+++ b/frontend/src/Episode/EpisodeDetailsModal.js
@@ -37,7 +37,7 @@ class EpisodeDetailsModal extends Component {
     return (
       <Modal
         isOpen={isOpen}
-        size={sizes.EXTRA_LARGE}
+        size={sizes.EXTRA_EXTRA_LARGE}
         closeOnBackgroundClick={this.state.closeOnBackgroundClick}
         onModalClose={onModalClose}
       >
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.tsx b/frontend/src/InteractiveImport/InteractiveImportModal.tsx
index 37b26012e..11dc8e6ae 100644
--- a/frontend/src/InteractiveImport/InteractiveImportModal.tsx
+++ b/frontend/src/InteractiveImport/InteractiveImportModal.tsx
@@ -47,7 +47,7 @@ function InteractiveImportModal(props: InteractiveImportModalProps) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       closeOnBackgroundClick={false}
       onModalClose={onModalClose}
     >
diff --git a/frontend/src/Series/Search/SeasonInteractiveSearchModal.js b/frontend/src/Series/Search/SeasonInteractiveSearchModal.js
index a2210222a..861c9113c 100644
--- a/frontend/src/Series/Search/SeasonInteractiveSearchModal.js
+++ b/frontend/src/Series/Search/SeasonInteractiveSearchModal.js
@@ -15,7 +15,7 @@ function SeasonInteractiveSearchModal(props) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       closeOnBackgroundClick={false}
       onModalClose={onModalClose}
     >