Adds updates to SelectedTap modal to address sizing and placement

phlask · Sep 27, 2023 · 9ae23b6 · 9ae23b6
1 parent 6e1561e
commit 9ae23b6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 42 deletions.
diff --git a/src/components/SelectedTap/SelectedTap.css b/src/components/SelectedTap/SelectedTap.css
@@ -56,14 +56,13 @@
 #tap-info-img-box-desktop {
   position: relative;
   width: 100%;
-  height: 25vw;
+  max-height: 200px;
   max-width: 100%;
-  max-height: var(--info-main-image-height-max);
   min-width: 100%;
-  min-height: var(--info-main-image-height-min);
   padding: 10px 10px 0 10px;
 }
 #tap-info-img {
+  position: relative;
   width: 100%;
   height: 100%;
   max-width: 100%;

diff --git a/src/components/SelectedTap/SelectedTap.js b/src/components/SelectedTap/SelectedTap.js
@@ -17,10 +17,12 @@ import sampleImg from '../images/phlask-tessellation.png';
 import sampleImg2x from '../images/phlask-tessellation@2x.png';
 import phlaskBlue from '../images/phlaskBlue.png';
 import phlaskGreen from '../images/phlaskGreen.png';
+import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg';
 import './SelectedTap.css';
 import styles from './SelectedTap.module.scss';
 
 import { Paper, SwipeableDrawer } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
 
 import SelectedTapMobile from '../SelectedTapMobile/SelectedTapMobile';
 import {
@@ -265,36 +267,31 @@ class SelectedTap extends React.Component {
               sx={{
                 position: 'absolute',
                 right: '32px',
-                top: '50%',
-                transform: 'translateY(-50%)'
+                top: '20px',
+                width: '708px',
+                height: '700px'
               }}
             >
 
               {/* <DialogTitle>Dialog Title</DialogTitle> */}
-
-              <div
-                ref={this.refSelectedTap}
-                id="tap-info-container"
-                className={`${this.props.infoWindowClass} ${styles.desktopContainer}`}
-                style={{}}
+
+              <IconButton
+                aria-label="close"
+                onClick={() => {
+                  this.toggleInfoWindow(false);
+                }}
+                sx={{
+                  position: 'absolute',
+                  left: 20,
+                  top: 20,
+                  color: theme => theme.palette.grey[500]
+                }}
+                size="large"
               >
-                <button
-                  className={styles.closeButton}
-                  aria-label="Close"
-                  onClick={() => {
-                    this.toggleInfoWindow(false);
-                  }}
-                >
+                <CloseIcon />
+              </IconButton>
+
 
-              <div id="close-arrow-desktop" className={styles.closeIconWrapper}>
-                <FontAwesomeIcon
-                  className={styles.closeIcon}
-                  color="#999"
-                  icon={faCaretLeft}
-                />
-              </div>
-            </button>
-            </div>
             {/* Location Name */}
             <div
               ref={this.refContentArea}
@@ -314,19 +311,9 @@ class SelectedTap extends React.Component {
                     tempImages.tapImg + ', ' + tempImages.tapImg2x + ' 2x'
                   }
                 ></img>
+              </div>
                   {/* Main Image */}
 
-                  <div id="tap-info-img-box-desktop">
-                    <img
-                      id="tap-info-img"
-                      src={tempImages.tapImg}
-                      srcSet={
-                        tempImages.tapImg + ', ' + tempImages.tapImg2x + ' 2x'
-                      }
-                      alt=""
-                    ></img>
-                  </div>
-
                   <div id="tap-head-info">
                     {/* Tap Type Icon */}
                     <div id="tap-type-icon-container">
@@ -393,7 +380,6 @@ class SelectedTap extends React.Component {
                       </div>
                     </div>
                   </div>
-                </div>
               </div>
             </Paper>
           </div>

diff --git a/src/components/SelectedTap/SelectedTap.module.scss b/src/components/SelectedTap/SelectedTap.module.scss
@@ -93,13 +93,14 @@
 
 .tapContent {
   position: relative;
+  top: 70px;
   width: 100%;
   height: 100%;
   height: fit-content;
   display: flex;
   flex-direction: column;
   max-width: 100%;
-  overflow-y: auto;
+  max-height: 200px;
 }
 
 .tapContentExpanded {
@@ -154,8 +155,11 @@
 }
 .desktopContainer {
   position: relative;
+  top: 20px;
+  // width: 708px;
+  // height: 860px;
   // width: 30%;
-  // min-width: 400px;
+  min-width: 400px;
   // max-height: calc(100vh - 220px);
   // margin: 16px 0 0 16px;
   animation-name: info-modal-in-desktop;
@@ -165,7 +169,7 @@
   transition: 0.6s all ease-in-out;
 
   .tapContent {
-    // max-height: calc(100vh - 220px);
+    top: 70px;
     border-radius: 5px;
     background-color: white;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);