From 9ae23b62549af11fbedc53a5f6c04b197ac0819e Mon Sep 17 00:00:00 2001
From: Gabriel Cardona <2278918+gcardonag@users.noreply.github.com>
Date: Tue, 26 Sep 2023 20:17:11 -0400
Subject: [PATCH] Adds updates to SelectedTap modal to address sizing and
placement
---
src/components/SelectedTap/SelectedTap.css | 5 +-
src/components/SelectedTap/SelectedTap.js | 58 +++++++------------
.../SelectedTap/SelectedTap.module.scss | 10 +++-
3 files changed, 31 insertions(+), 42 deletions(-)
diff --git a/src/components/SelectedTap/SelectedTap.css b/src/components/SelectedTap/SelectedTap.css
index 8d731c73..b45dc019 100644
--- 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
index 97bb3c94..d75e6223 100644
--- 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'
}}
>
{/*