fix: modal styles (decentraland#1856)

* fix: modal styles * fix: linter
BlackBartty · Jun 21, 2023 · 0ed0b8c · 0ed0b8c
1 parent 132fca5
commit 0ed0b8c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/webapp/src/components/Modals/ListsLaunchModal/ListsLaunchModal.module.css b/webapp/src/components/Modals/ListsLaunchModal/ListsLaunchModal.module.css
@@ -8,32 +8,41 @@
 .modalDescription {
   text-align: center;
 }
-
-.launchModal:global(.ui.modal .actions > .button:first-child) {
+.ListsLaunchModal:global(.ui.modal .actions > .button:first-child) {
   width: 80%;
   align-self: center;
 }
-
-.launchModal:global(.ui.modal .actions .ui.button + .ui.button) {
+.ListsLaunchModal:global(.ui.modal .actions .ui.button + .ui.button) {
   margin: unset;
   width: 80%;
   align-self: center;
   color: white;
   border-color: white;
 }
 
-.launchModal:global(.ui.modal > .content) {
+.ListsLaunchModal:global(.ui.modal > .content) {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 18px;
   margin-bottom: 50px;
 }
 
-.launchModal:global(.ui.medium.image).listsLogo {
+.listsLogo {
   background-image: url('../../../images/empty-list.svg');
   background-repeat: no-repeat;
   background-size: cover;
   width: 80px;
   height: 80px;
 }
+
+@media (max-width: 768px) {
+  .actions {
+    gap: unset;
+  }
+
+  .ListsLaunchModal:global(.ui.modal .actions > .button:first-child),
+  .ListsLaunchModal:global(.ui.modal .actions .ui.button + .ui.button) {
+    width: 100%;
+  }
+}
diff --git a/webapp/src/components/Modals/ListsLaunchModal/ListsLaunchModal.tsx b/webapp/src/components/Modals/ListsLaunchModal/ListsLaunchModal.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Modal, Button, ModalNavigation } from 'decentraland-ui'
-import classNames from 'classnames'
 import { Link } from 'react-router-dom'
 import * as decentraland from '../../../modules/vendor/decentraland'
 import { AssetType } from '../../../modules/asset/types'
@@ -40,15 +39,15 @@ export const ListsLaunchModal = ({
 
   return (
     <Modal
-      className={styles.launchModal}
+      className={styles.ListsLaunchModal}
       open={isOpen}
       size={'small'}
       onClose={onClose}
       dimmer={{ className: styles.dimmerRemover }}
     >
       <ModalNavigation title={t('lists_ftu.title')} onClose={onClose} />
       <Modal.Content className={styles.content}>
-        <div className={classNames(styles.listsLogo, 'ui medium image')}></div>
+        <div className={styles.listsLogo}></div>
         <Modal.Description>
           <div className={styles.modalDescription}>
             {t('lists_ftu.description', {

diff --git a/webapp/src/components/Modals/SaveToListModal/SaveToListModal.module.css b/webapp/src/components/Modals/SaveToListModal/SaveToListModal.module.css
@@ -77,3 +77,7 @@
   flex-direction: column-reverse;
   gap: 10px;
 }
+
+.actions :global(.ui.button + .ui.button) {
+  margin: 0px;
+}
diff --git a/webapp/src/components/Modals/SaveToListModal/SaveToListModal.tsx b/webapp/src/components/Modals/SaveToListModal/SaveToListModal.tsx
@@ -294,6 +294,7 @@ const SaveToListModal = (props: Props) => {
       </Modal.Content>
       <Modal.Actions className={styles.actions}>
         <Button
+          fluid
           secondary
           disabled={isLoadingLists || isSavingPicks}
           data-testid={CREATE_LIST_BUTTON_DATA_TEST_ID}
@@ -303,6 +304,7 @@ const SaveToListModal = (props: Props) => {
           {t('save_to_list_modal.create_list')}
         </Button>
         <Button
+          fluid
           primary
           disabled={isLoadingLists || isSavingPicks || hasChanges}
           data-testid={SAVE_BUTTON_DATA_TEST_ID}