feat(modal): mejorar el estilo del modal y ajustar la posición del botón de retroceso

This commit is contained in:
Cesar Mendivil 2025-11-06 11:38:40 -07:00
parent c7a4f163b2
commit a06ffa8f79
3 changed files with 24 additions and 14 deletions

View File

@ -1,8 +1,17 @@
/* NewTransmissionModal - StreamYard style */
.modalWrapper {
position: relative;
}
.modalWrapper.hasBackButton :global(.modalHeader) {
padding-left: 56px;
}
.backButton {
position: absolute;
top: 16px;
top: 50%;
transform: translateY(-50%);
left: 16px;
display: flex;
align-items: center;
@ -15,7 +24,7 @@
color: #5f6368;
cursor: pointer;
transition: all 0.15s;
z-index: 1;
z-index: 10;
}
.backButton:hover {

View File

@ -211,17 +211,18 @@ const NewTransmissionModal: React.FC<Props> = ({ open, onClose, onCreate, onUpda
const showBackButton = view === 'add-destination'
return (
<Modal
open={open}
onClose={onClose}
title={modalTitle}
width="md"
>
{showBackButton && (
<button onClick={handleBackToMain} className={styles.backButton}>
<MdArrowBack size={20} />
</button>
)}
<div className={`${styles.modalWrapper} ${showBackButton ? styles.hasBackButton : ''}`}>
<Modal
open={open}
onClose={onClose}
title={modalTitle}
width="md"
>
{showBackButton && (
<button onClick={handleBackToMain} className={styles.backButton}>
<MdArrowBack size={20} />
</button>
)}
{view === 'main' && (
<>
@ -474,6 +475,7 @@ const NewTransmissionModal: React.FC<Props> = ({ open, onClose, onCreate, onUpda
</div>
)}
</Modal>
</div>
)
}

View File

@ -39,7 +39,6 @@
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid #e8eaed;
}
.modalTitle {