Fix modal styles

Vizzuality · Jul 25, 2023 · 7b5c031 · 7b5c031
1 parent 853a38a
commit 7b5c031
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 17 deletions.
diff --git a/src/components/modal-metadata/modal-metadata-styles.module.scss b/src/components/modal-metadata/modal-metadata-styles.module.scss
@@ -3,14 +3,14 @@
 
 .modal {
   padding: 0;
-  max-width: 90%;
-  height: 90vh;
+
+  max-width: 720px;
+  width: 90%;
+  height: auto;
 
   @media #{$tablet-landscape} {
-    padding: 50px 60px;
-    max-width: 620px;
-    width: 80%;
-    height: auto;
+    width: 50%;
+    min-width: 512px;
   }
 }
 

diff --git a/src/components/share-modal/share-modal-styles.module.scss b/src/components/share-modal/share-modal-styles.module.scss
@@ -5,14 +5,17 @@
 $tabsMarginBottom: 4px;
 $socialMediaIcon: 30px;
 
+
 .modal {
-  width: 90% !important;
-  max-width: 90% !important;
-  height: auto !important;
+  padding: 0;
+
+  max-width: 600px;
+  width: 90%;
+  height: auto;
 
   @media #{$tablet-landscape} {
-    max-width: 620px !important;
-    width: 600px !important;
+    width: 90%;
+    min-width: 512px;
   }
 }
 

diff --git a/src/containers/modals/aoi-history-modal/component.jsx b/src/containers/modals/aoi-history-modal/component.jsx
@@ -83,7 +83,7 @@ function AoiHistoryModalComponent({
             type="compound"
             className={styles.deleteAllButton}
             handleClick={handleRemoveAllLocalAoiRecords}
-            label={t('delete all areas')}
+            label={t('Delete all areas')}
           />
         )}
         <ul className={styles.aoiListContainer}>

diff --git a/src/containers/modals/help-modal/styles.module.scss b/src/containers/modals/help-modal/styles.module.scss
@@ -31,14 +31,13 @@
   height: 100%;
   padding: 24px;
   width: 100%;
-  overflow: hidden;
+  overflow-y: auto;
 
   .wrapper {
     align-items: center;
     display: flex;
     flex-direction: column;
-    height: 100%;
-    margin-top: 80px;
+    margin-top: 50px;
     padding: 32px;
     width: 100%;
 
@@ -84,7 +83,7 @@
       width: 100%;
 
       @media #{$tablet-portrait} {
-        width: 750px;
+        width: 800px;
         display: flex;
         text-align: left;
         justify-content: space-between;
@@ -93,7 +92,7 @@
       .storyElement {
         align-items: center;
         display: flex;
-        margin-right: 70px;
+        margin-right: 50px;
         &:last-of-type {
           margin-right: 0;
         }

diff --git a/src/containers/modals/prompt-modal/component.jsx b/src/containers/modals/prompt-modal/component.jsx
@@ -6,6 +6,7 @@ import styles from './styles.module';
 
 import { ReactComponent as WarningIcon } from 'icons/warning.svg';
 
+// Modal to display warnings and other alerts
 function PromptModalComponent({ title, isOpen, description, handleClose }) {
   return (
     <Modal isOpen={isOpen} onRequestClose={handleClose} theme={styles}>