[SALAD-23180] WebApp: Mobile UI for demand notification modals (#1239)

* GetNotifiedDemandChangesModal: background image - improved * Modals: Mobile UI styles - added
SaladTechnologies · Dec 9, 2024 · cc36047 · cc36047
1 parent c2b14b1
commit cc36047
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 30 deletions.
diff --git a/packages/web-app/src/components/ModalWithOverlay/ModalWithOverlay.tsx b/packages/web-app/src/components/ModalWithOverlay/ModalWithOverlay.tsx
@@ -20,6 +20,9 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
     fontFamily: theme.fontMallory,
     top: '0px',
     left: '0px',
+    '@media (max-height: 670px)': {
+      alignItems: 'flex-start',
+    },
   },
   modalContainer: {
     position: 'relative',

diff --git a/...r-views/DemandMonitorPage/GetNotifiedDemandChangesModal/GetNotifiedDemandChangesModal.tsx b/...r-views/DemandMonitorPage/GetNotifiedDemandChangesModal/GetNotifiedDemandChangesModal.tsx
@@ -1,6 +1,5 @@
 import { Button } from '@saladtechnologies/garden-components'
 import type CSS from 'csstype'
-import { Img } from 'react-image'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import type { SaladTheme } from '../../../../SaladTheme'
@@ -10,23 +9,38 @@ import type { DemandedHardwarePerformance } from '../../DemandMonitorStore'
 import saladBackgroundUrl from './assets/background.png'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
+  modalWrapper: {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    maxWidth: '700px',
+    maxHeight: '430px',
+  },
   modalContent: {
     position: 'relative',
-    width: '100%',
+    width: '80%',
     display: 'flex',
     backgroundColor: theme.darkBlue,
-    padding: '48px 48px 72px 180px',
+    padding: '48px 64px 72px 24px',
     flexDirection: 'column',
     alignItems: 'flex-start',
-    maxWidth: '800px',
     boxSizing: 'border-box',
+    '@media (max-width: 812px)': {
+      padding: '24px 16px 36px 16px',
+      width: '100%',
+    },
   },
   title: {
     color: theme.green,
     fontWeight: 700,
     display: 'flex',
     flexDirection: 'column',
     fontSize: '28px',
+    '@media (max-width: 812px)': {
+      fontSize: '20px',
+    },
   },
   subtitle: {
     color: theme.green,
@@ -50,10 +64,23 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
     textDecoration: 'underline',
     cursor: 'pointer',
   },
+  saladImageWrapper: {
+    position: 'relative',
+    height: '500px',
+    width: '35%',
+    '@media (max-width: 812px)': {
+      display: 'none',
+    },
+  },
   saladImage: {
     position: 'absolute',
     top: '0px',
-    left: '0px',
+    right: '0px',
+    width: '100%',
+    height: '100%',
+    backgroundImage: `url(${saladBackgroundUrl})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'contain',
   },
   closeIcon: {
     position: 'absolute',
@@ -108,36 +135,40 @@ const _GetNotifiedDemandChangesModal = ({
 
   return (
     <ModalWithOverlay onCloseClick={onCloseClick}>
-      <div className={classes.modalContent}>
-        <h1 className={classes.title}>Get Notified Of Demand Changes</h1>
-        <p className={classes.description}>
-          You can set up alerts to be notified when the demand level of a GPU reaches your sweet spot, even at a
-          specific priority tier.
-        </p>
-        <div>
-          <h2 className={classes.subtitle}>Already have an account?</h2>
+      <div className={classes.modalWrapper}>
+        <div className={classes.saladImageWrapper}>
+          <div className={classes.saladImage} />
+        </div>
+        <div className={classes.modalContent}>
+          <h1 className={classes.title}>Get Notified Of Demand Changes</h1>
           <p className={classes.description}>
-            Setting up alerts is easier and more powerful while{' '}
-            <span onClick={onLoginClick} className={classes.link}>
-              logged in
-            </span>
+            You can set up alerts to be notified when the demand level of a GPU reaches your sweet spot, even at a
+            specific priority tier.
           </p>
-        </div>
-        <h2 className={classes.subtitle}>Not yet a chef? No problem!</h2>
-        <p className={classes.description}>
-          No need to create an account, simply select the GPU you wish to get alerts for and click continue.
-        </p>
-        <div className={classes.controlsWrapper}>
-          <div className={classes.dropdownWrapper}>
-            <div className={classes.dropdown}>
-              {demandHardwareOptions && <DropdownLight options={demandHardwareOptions} />}
-            </div>
+          <div>
+            <h2 className={classes.subtitle}>Already have an account?</h2>
+            <p className={classes.description}>
+              Setting up alerts is easier and more powerful while{' '}
+              <span onClick={onLoginClick} className={classes.link}>
+                logged in
+              </span>
+            </p>
           </div>
-          <div className={classes.continueButtonWrapper}>
-            <Button variant="secondary" onClick={onContinuesClick} label="Continue" width={100} />
+          <h2 className={classes.subtitle}>Not yet a chef? No problem!</h2>
+          <p className={classes.description}>
+            No need to create an account, simply select the GPU you wish to get alerts for and click continue.
+          </p>
+          <div className={classes.controlsWrapper}>
+            <div className={classes.dropdownWrapper}>
+              <div className={classes.dropdown}>
+                {demandHardwareOptions && <DropdownLight options={demandHardwareOptions} />}
+              </div>
+            </div>
+            <div className={classes.continueButtonWrapper}>
+              <Button variant="secondary" onClick={onContinuesClick} label="Continue" width={100} />
+            </div>
           </div>
         </div>
-        <Img className={classes.saladImage} src={saladBackgroundUrl} alt="salad-background" />
       </div>
     </ModalWithOverlay>
   )