Merge pull request #19 from newfold-labs/update/improve-modal-styles

Update UI
newfold-labs · Jul 9, 2024 · 1ccd416 · 1ccd416
2 parents 7aa6aa4 + defa2e6
commit 1ccd416
Show file tree

Hide file tree

Showing 4 changed files with 300 additions and 228 deletions.
diff --git a/includes/DeactivationSurvey.php b/includes/DeactivationSurvey.php
@@ -79,12 +79,6 @@ public function __construct() {
 				__( 'Need Help? Check the <a href="%s">help center</a> for support.', 'wp-module-deactivation' ),
 				'/wp-admin/admin.php?page=' . container()->plugin()->id . '#/help'
 			),
-			'durationOption1'              => __( '1 Hour','wp-module-deactivation' ),
-			'durationOption1Value'         => __( '1_hour','wp-module-deactivation' ),
-			'durationOption2'              => __( '24 Hours','wp-module-deactivation' ),
-			'durationOption2Value'         => __( '24_hours','wp-module-deactivation' ),
-			'durationOption3'              => __( 'Until I turn it back on','wp-module-deactivation' ),
-			'durationOption3Value'         => __( 'until_manual','wp-module-deactivation' ),
 		);
 
 		// Merge defaults with container values from plugin

diff --git a/static/css/deactivation-survey.css b/static/css/deactivation-survey.css
@@ -17,6 +17,10 @@
     display: flex;
     justify-content: center;
     z-index: 100000;
+    --nfd-deactivation-overlay: rgba(43, 46, 56, 0.9);
+    --nfd-deactivation-background: #F8F8F8;
+    --nfd-deactivation-title: #242424;
+    --nfd-deactivation-text: #6C6B6B;
 }
 
 #nfd-deactivation-survey * {
@@ -39,137 +43,95 @@
 
 .nfd-deactivation-survey__overlay {
     animation: nfd-fade-in 200ms both;
-    background-color: rgba(43, 46, 56, 0.9);
+    background-color: var(--nfd-deactivation-overlay);
 }
 
 .nfd-deactivation-survey__disabled {
     z-index: 2;
 }
 
 .nfd-deactivation-survey__container {
-    animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both;
-    background-color: white;
-    border-radius: 5px;
+    background-color: var(--nfd-deactivation-background);
     color: #3C434A;
-    max-height: 80vh;
-    max-width: 1024px;
+    max-height: 90dvh;
+    max-width: 780px;
+    border-radius: 5px;
     position: relative;
-    width: 80vw;
+    overflow-y: auto;
+    overflow-x: hidden;
+    animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both;
 }
 
 .nfd-deactivation__content {
-    align-items: center;
-    background-color: #f9f9f6;
     display:flex;
     flex-direction: column;
-    justify-content: space-between;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-}
-
-.nfd-deactivation-form {
-    width: 100%;
+    gap: 1.5rem;
+    width: 700px;
+    min-height: 500px;
+    padding: 2rem;
 }
 
 .nfd-deactivation__header,
 .nfd-deactivation__body,
-.nfd-deactivation__footer-content,
-.nfd-deactivation-fieldset {
-    padding: 0 4rem;
-    margin: 0 auto;
-    max-width: 90%;
-}
-
-.nfd-deactivation__header {
-    margin-top: 2rem;
-    text-align: center;
-    width: 100%;
-}
-
-.nfd-deactivation__body {
-    margin: 1rem auto;
-    text-align: left;
-    width: 100%;
-}
-
 .nfd-deactivation__footer {
-    background-color: #fff;
-    border-top: 1px solid #dcdcde;
-    margin-top: 1rem;
-    width: 100%;
-}
-
-.nfd-deactivation__footer-content {
-    padding-top: .5rem;
-    padding-bottom: .5rem
+    margin: 0 auto;
+    max-width: 99%;
 }
 
-.nfd-deactivation__content-title {
-    font-size: 2.5rem;
+.nfd-deactivation__header-title {
+    font-size: 2.1rem;
+    font-weight: 500;
     line-height: 1.1em;
+    margin: 0 0 .75rem;
+    color: var(--nfd-deactivation-title);
 }
 
-.nfd-deactivation__content-subtitle {
-    font-size: 1.25rem;
+.nfd-deactivation__header-subtitle {
+    font-size: 1.1rem;
     line-height: 1.25em;
+    margin: 0;
+    color: var(--nfd-deactivation-text);
 }
 
-.nfd-deactivation__helptext {
-    font-size: 1.0rem;
-    padding-right: 3rem;
-    text-align: left;
-}
-
-.nfd-deactivation-survey__content {
-    padding: 1.5rem;
+.nfd-deactivation__cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
 .nfd-deactivation__card {
-    align-items: center;
-    background-color: #fff;
-    border: none;
-    border-radius: 3px;
-    box-shadow: 0 0 15px #e2e2df;
-    display: flex;
-    flex-wrap: wrap;
-    gap: .5rem;
-    justify-content: left;
-    margin: 0 auto 1rem;
-    max-width: 100%;
-    padding: 1rem 2rem;
+    background-color: white;
     text-align: left;
+    padding: 10px;
+    border: 1px solid #EBECF4;
+    border-radius: 4px;
 }
 
 .nfd-deactivation__card-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: #111111;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--nfd-deactivation-title);
 }
 
 .nfd-deactivation__card-desc {
-    color: #000000;
-}
-
-.nfd-deactivation-fieldset {
-    border-top: 1px solid #dcdcde;
-    display: flex;
-    flex-direction: column;
-    padding-top: 1rem;
-    text-align: left;
-    gap: .75rem;
+    color: var(--nfd-deactivation-text);
 }
 
 .nfd-deactivation-label {
     font-size: 1rem;
     font-weight: 600;
 }
+
 .nfd-deactivation-textarea {
     font-size: 1rem;
     padding: .5em;
     min-height: 10vh;
     width: 100%;
 }
 
-
 .nfd-deactivation-survey__container button[aria-label="Close dialog"] {
     border: none;
     background-color: transparent;
@@ -183,50 +145,65 @@
     top: 5px;
 }
 
-.nfd-deactivation-survey__content-header h3 {
-    color: #3C434A;
-    font-size: 1rem;
-    margin: 0 0 .45rem;
+.nfd-deactivation-form {
+    width: 100%;
 }
 
-.nfd-deactivation-survey__content form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-top: 1.5rem;
-    width: 100%;
+.nfd-deactivation-form .nfd-deactivation__body {
+    width: 85%;
 }
 
-.nfd-deactivation-survey__content form label {
+.nfd-deactivation-fieldset {
+    border-top: 1px solid #dcdcde;
+    padding-top: 1rem;
+    text-align: left;
+}
+
+.nfd-deactivation-form label {
     display: inline-block;
+    font-weight: 500;
     margin-bottom: 8px;
 }
 
-.nfd-deactivation-survey__content form textarea {
+.nfd-deactivation-form textarea {
     border-color: #8B8F94;
     max-height: 150px;
-    min-height: 60px;
+    min-height: 75px;
     padding: 8px;
     width: 100%;
 }
 
-.nfd-deactivation-survey__content form textarea::placeholder {
+.nfd-deactivation-form textarea::placeholder {
     font-size: 13px;
 }
 
-.nfd-deactivation-survey__content-actions {
-    align-items: center;
+.nfd-deactivation__footer {
+    padding-top: 1.3rem;
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+}
+
+.nfd-deactivation__footer-actions {
     display: flex;
+    flex-direction: column;
+    justify-content: center;
     gap: 1rem;
-    justify-content: space-between;
 }
 
-.nfd-deactivation-survey__content-actions > div {
-    align-items: center;
+.nfd-deactivation__footer-actions > div {
     display: flex;
+    justify-content: center;
+    align-items: center;
     gap: .75rem;
 }
 
+.nfd-deactivation__helptext p {
+    color: var(--nfd-deactivation-text);
+    font-size: .9rem;
+    margin: 0;
+}
+
 .nfd-deactivation-survey-action {
     background-color: transparent;
     border: none;
@@ -268,28 +245,52 @@
     width: 20%;
 }
 
+.nfd-deactivation__step {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    color: #8b8e9a;
+    font-size: 16px;
+    letter-spacing: 2.5px;
+    user-select: none;
+}
+
 /* mobile */
-@media screen and (max-width: 600px) {
-    .nfd-deactivation-survey__container,
-    .nfd-deactivation-survey__container[data-step="1"] {
-        max-height: 100vh;
-        max-width: 100vw;
-        width: 100%;
+@media screen and (max-width: 780px) {
+    .nfd-deactivation-survey__container {
+        max-width: 95vw;
     }
 
-    .nfd-deactivation__header,
-    .nfd-deactivation__body,
-    .nfd-deactivation__footer-content,
-    .nfd-deactivation-fieldset {
-        padding: 0 2rem;
+    .nfd-deactivation__content {
+        max-width: 100%;
+        padding: 1.2rem;
+        gap: 1rem;
     }
-}
 
-@media screen and (max-width: 600px) {
-    .nfd-deactivation-survey__container {
-      overflow: scroll;
+    .nfd-deactivation__header-title {
+        font-size: 1.6rem;
+    }
+
+    .nfd-deactivation__header-subtitle {
+        font-size: 1rem;
+    }
+
+    .nfd-deactivation__cards {
+        gap: .75rem;
+    }
+
+    .nfd-deactivation__card-title {
+        font-size: .9rem;
+    }
+
+    .nfd-deactivation-form .nfd-deactivation__body {
+        width: 99%;
     }
-  }
+
+    .nfd-deactivation-form textarea {
+        max-height: 75px;
+    }
+}
 
 /* animations */
 @keyframes nfd-submitting {