Increase the width of the Edit Replica modal

The width of the Edit Replica / Recreate Migration modal has been
increased so that it could fit inputs as large as the ones used in the
Wizard options pages.

This happens only if there's available space in the window, otherwise
the smaller (previous) width will be used.

This PR also provides a smaller app bundle size since some duplicate
background images were removed and instead a generic one was created and
is used everywhere where the background image is required. This removal
was needed in order to properly increase the width of the Edit Replica
modal while keeping the background image (used in the modal's title
bar).

src/components/modules/DetailsModule/DetailsPageHeader/DetailsPageHeader.tsx

@@ -26,7 +26,7 @@ import type { User as UserType } from "@src/@types/User";
 
 import notificationStore from "@src/stores/NotificationStore";
 
-import backgroundImage from "./images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import logoImage from "./images/logo.svg";
 
 const Wrapper = styled.div<any>`

src/components/modules/NavigationModule/Navigation/Navigation.tsx

@@ -24,7 +24,7 @@ import configLoader from "@src/utils/Config";
 
 import { navigationMenu } from "@src/constants";
 import { ThemeProps } from "@src/components/Theme";
-import backgroundImage from "./images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import cbsImage from "./images/cbsl-logo.svg";
 import cbsImageSmall from "./images/cbsl-logo-small.svg";
 import tinyLogo from "./images/logo-small.svg";

src/components/modules/TransferModule/TransferItemModal/TransferItemModal.tsx

@@ -102,6 +102,8 @@ const Buttons = styled.div<any>`
   justify-content: space-between;
 `;
 
+type Width = "normal" | "wide";
+
 type Props = {
   type?: "replica" | "migration";
   isOpen: boolean;
@@ -129,6 +131,7 @@ type State = {
   destinationFailedMessage: string | null;
   uploadedScripts: InstanceScript[];
   removedScripts: InstanceScript[];
+  width: Width;
 };
 
 @observer
@@ -146,12 +149,36 @@ class TransferItemModal extends React.Component<Props, State> {
     sourceFailed: false,
     destinationFailedMessage: null,
     removedScripts: [],
+    width: "normal",
   };
 
   scrollableRef: HTMLElement | null | undefined;
 
   UNSAFE_componentWillMount() {
     this.loadData(true);
+
+    this.updateAvailableWidth();
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.handleResize.bind(this));
+  }
+
+  handleResize() {
+    this.updateAvailableWidth();
+  }
+
+  updateAvailableWidth() {
+    const RESIZE_BREAKPOINT = 1100;
+    if (window.innerWidth < RESIZE_BREAKPOINT && this.state.width === "wide") {
+      this.setState({ width: "normal" });
+    } else if (
+      window.innerWidth >= RESIZE_BREAKPOINT &&
+      this.state.width === "normal"
+    ) {
+      this.setState({ width: "wide" });
+    }
   }
 
   get requiresWindowsImage() {
@@ -866,7 +893,11 @@ class TransferItemModal extends React.Component<Props, State> {
           width: "100%",
           alignItems: "center",
         }}
-        fieldWidth={ThemeProps.inputSizes.large.width}
+        fieldWidth={
+          this.state.width === "wide"
+            ? ThemeProps.inputSizes.wizard.width
+            : ThemeProps.inputSizes.large.width
+        }
         onScrollableRef={ref => {
           this.scrollableRef = ref;
         }}
@@ -910,7 +941,7 @@ class TransferItemModal extends React.Component<Props, State> {
           this.handleStorageChange(mapping);
         }}
         style={{ padding: "32px 32px 0 32px", width: "calc(100% - 64px)" }}
-        titleWidth={160}
+        titleWidth={this.state.width === "normal" ? 160 : 320}
         onScrollableRef={ref => {
           this.scrollableRef = ref;
         }}
@@ -930,7 +961,7 @@ class TransferItemModal extends React.Component<Props, State> {
         }}
         selectedNetworks={this.getSelectedNetworks()}
         style={{ padding: "32px 32px 0 32px", width: "calc(100% - 64px)" }}
-        titleWidth={160}
+        titleWidth={this.state.width === "normal" ? 160 : 320}
       />
     );
   }
@@ -1064,11 +1095,12 @@ class TransferItemModal extends React.Component<Props, State> {
           this.props.type === "replica" ? "Edit Replica" : "Recreate Migration"
         }`}
         onRequestClose={this.props.onRequestClose}
-        contentStyle={{ width: "800px" }}
+        contentWidth={this.state.width === "normal" ? "800px" : "1074px"}
         onScrollableRef={() => this.scrollableRef}
         fixedHeight={512}
       >
         <Panel
+          contentWidth={this.state.width}
           navigationItems={navigationItems}
           content={this.renderContent()}
           onChange={navItem => {

src/components/smart/LoginPage/LoginPage.tsx

@@ -23,7 +23,7 @@ import LoginForm from "@src/components/modules/LoginModule/LoginForm";
 import userStore from "@src/stores/UserStore";
 import configStore from "@src/utils/Config";
 
-import backgroundImage from "./images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import cbsImage from "./images/cbsl-logo.svg";
 
 const Wrapper = styled.div<any>`

src/components/smart/SetupPage/SetupPage.tsx

@@ -16,7 +16,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { observer } from "mobx-react";
 
-import backgroundImage from "@src/components/smart/LoginPage/images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import configLoader from "@src/utils/Config";
 import {
   CustomerInfoBasic,

src/components/ui/Modal/Modal.tsx

@@ -17,26 +17,24 @@ import { observer } from "mobx-react";
 import styled from "styled-components";
 import Modal from "react-modal";
 import autobind from "autobind-decorator";
+import ReactTooltip from "react-tooltip";
 
 import KeyboardManager from "@src/utils/KeyboardManager";
 
 import { ThemeProps } from "@src/components/Theme";
-import headerBackground from "./images/header-background.png";
-import headerBackgroundWide from "./images/header-background-wide.png";
-import ReactTooltip from "react-tooltip";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 
 const headerHeight = 48;
 
-const Title = styled.div<any>`
+const Title = styled.div`
   height: ${headerHeight}px;
   font-size: 24px;
   font-weight: ${ThemeProps.fontWeights.light};
   text-align: center;
   line-height: 48px;
   color: white;
-  background: url("${props =>
-      props.wide ? headerBackgroundWide : headerBackground}")
-    center/contain no-repeat;
+  background: url("${backgroundImage}") center no-repeat;
+  background-size: cover;
 `;
 
 type Props = {
@@ -44,7 +42,7 @@ type Props = {
   isOpen: boolean;
   contentLabel?: string;
   onRequestClose?: () => void;
-  contentStyle?: { [prop: string]: any };
+  contentWidth?: React.CSSProperties["width"];
   topBottomMargin?: number;
   title?: string;
   componentRef?: (ref: any) => void;
@@ -180,12 +178,12 @@ class NewModal extends React.Component<Props> {
     scrollableNode.scrollTop = scrollTop + scrollOffset;
   }
 
-  renderTitle(contentWidth: string) {
+  renderTitle() {
     if (!this.props.title) {
       return null;
     }
 
-    return <Title wide={contentWidth === "800px"}>{this.props.title}</Title>;
+    return <Title>{this.props.title}</Title>;
   }
 
   render() {
@@ -216,10 +214,9 @@ class NewModal extends React.Component<Props> {
       },
     };
 
-    modalStyle.content = {
-      ...modalStyle.content,
-      ...this.props.contentStyle,
-    };
+    if (this.props.contentWidth) {
+      modalStyle.content!.width = this.props.contentWidth;
+    }
 
     const children = React.Children.map(this.props.children, child =>
       React.cloneElement(child as React.ReactElement<any>, {
@@ -249,7 +246,7 @@ class NewModal extends React.Component<Props> {
         }}
         ariaHideApp={false}
       >
-        {this.renderTitle(modalStyle.content.width as string)}
+        {this.renderTitle()}
         {children}
       </Modal>
     );

src/components/ui/Panel/Panel.tsx

@@ -51,8 +51,8 @@ const NavigationItemDiv = styled.div<any>`
         `
       : ""}
 `;
-const Content = styled.div<any>`
-  width: 576px;
+const Content = styled.div<{ width: "normal" | "wide" }>`
+  width: ${props => (props.width === "wide" ? "976px" : "576px")};
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -92,6 +92,7 @@ type Props = {
   selectedValue: string | null;
   onChange: (item: NavigationItem) => void;
   style?: any;
+  contentWidth?: "normal" | "wide";
   reloadLabel: string;
   onReloadClick: () => void;
 };
@@ -130,7 +131,9 @@ class Panel extends React.Component<Props> {
             </NavigationItemDiv>
           ))}
         </Navigation>
-        <Content>{this.props.content}</Content>
+        <Content width={this.props.contentWidth || "normal"}>
+          {this.props.content}
+        </Content>
         <ReloadButton
           onClick={() => {
             this.props.onReloadClick();