Refactor: Update Transfer Notice design (#6963)

impress-org · Sep 25, 2023 · b03c07b · b03c07b
1 parent af04447
commit b03c07b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 26 deletions.
diff --git a/...rmBuilder/resources/js/form-builder/src/components/onboarding/transfer/TransferNotice.tsx b/...rmBuilder/resources/js/form-builder/src/components/onboarding/transfer/TransferNotice.tsx
@@ -14,13 +14,8 @@ export default function TransferNotice() {
 
     return (
         <div className="givewp-transfer-notice-container">
-            <div>
-                <div className="givewp-transfer-next-step">
-                    {__('Next step', 'give')}
-                </div>
-            </div>
-            <div>
-                {__('When you are satisfied with the new form builder, you can move all donation data from the existing form to this one.', 'give')}
+            <div style={{flex: 1}}>
+                {__('Once you\'re happy with your new form, permanently transfer your existing donation data to this new form.', 'give')}
             </div>
             <div>
                 <button

diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_transfer.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_transfer.scss
@@ -64,41 +64,32 @@
     z-index: 99999999;
     position: fixed;
     bottom: 0;
-    left: 10%;
-    right: 10%;
+    left: 15%;
+    right: 15%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    background-color: var(--givewp-blue-600);
+    background-color: var(--givewp-blue-500);
     color: #fff;
-    padding: 15px;
+    padding: var(--givewp-spacing-2) var(--givewp-spacing-6);
     font-weight: 500;
     font-size: 0.875rem;
     gap: 10px;
 
-    .givewp-transfer-next-step {
-        flex-grow: 0;
-        font-size: 0.75rem;
-        font-weight: bold;
-        line-height: 1.33;
-        letter-spacing: 0.06px;
-        color: var(--givewp-blue-600);
-        background-color: #fff;
-        border-radius: 4px;
-        padding: 0.25rem 0.5rem;
-    }
-
     .givewp-transfer-button {
         all: unset;
         font-weight: bold;
-        color: #fff;
+        color: var(--givewp-grey-900);
+        background-color: #fff;
         cursor: pointer;
+        border-radius: 4px;
+        padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
     }
 
     .givewp-transfer-close-icon-container {
-        position: absolute;
-        right: 15px;
+        display: flex;
+        align-items: center;
 
         svg {
             fill: #fff;