More improvements

apps/admin-x-design-system/src/global/form/Form.tsx

@@ -41,6 +41,7 @@ const Form: React.FC<FormProps> = ({
     if (marginBottom) {
         classes = clsx(
             classes,
+            (margins === 'xs' && 'mb-4'),
             (margins === 'sm' && 'mb-7'),
             (margins === 'md' && 'mb-10'),
             (margins === 'lg' && 'mb-12')
@@ -50,6 +51,7 @@ const Form: React.FC<FormProps> = ({
     if (marginTop) {
         classes = clsx(
             classes,
+            (margins === 'xs' && 'mt-4'),
             (margins === 'sm' && 'mt-7'),
             (margins === 'md' && 'mt-10'),
             (margins === 'lg' && 'mt-12')

apps/admin-x-design-system/src/global/modal/Modal.tsx

@@ -156,7 +156,7 @@ const Modal: React.FC<ModalProps> = ({
 
     const buttons: ButtonProps[] = [];
 
-    let contentClasses;
+    let contentClasses = '[&_p]:text-pretty';
 
     const removeModal = () => {
         confirmIfDirty(dirty, () => {
@@ -196,7 +196,7 @@ const Modal: React.FC<ModalProps> = ({
         align === 'center' && 'mx-auto',
         align === 'left' && 'mr-auto',
         align === 'right' && 'ml-auto',
-        size !== 'bleed' && 'rounded',
+        size !== 'bleed' && 'rounded-xl',
         formSheet ? 'shadow-md' : 'shadow-xl',
         (animate && !formSheet && !animationFinished && align === 'center') && 'animate-modal-in',
         (animate && !formSheet && !animationFinished && align === 'right') && 'animate-modal-in-from-right',
@@ -342,6 +342,7 @@ const Modal: React.FC<ModalProps> = ({
     );
 
     contentClasses = clsx(
+        contentClasses,
         paddingClasses,
         'py-0'
     );

apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx

@@ -83,7 +83,9 @@ const AddNewsletterModal: React.FC<RoutingModalProps> = () => {
         }}
     >
         <Form
+            gap='sm'
             marginBottom={false}
+            margins='sm'
             marginTop
         >
             <TextField

apps/admin-x-settings/src/components/settings/general/InviteUserModal.tsx

@@ -220,7 +220,6 @@ const InviteUserModal = NiceModal.create(() => {
                         id='role'
                         options={allowedRoleOptions}
                         selectedOption={role}
-                        separator={true}
                         title="Role"
                         onSelect={(value) => {
                             setRole(value as RoleType);

apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx

@@ -194,6 +194,7 @@ const AddRecommendationModal: React.FC<RoutingModalProps & AddRecommendationModa
         <p className="mt-4">You can recommend <strong>any site</strong> your audience will find valuable, not just those published on Ghost.</p>
         <Form
             marginBottom={false}
+            margins='xs'
             marginTop
         >
             <TextField

ghost/admin/app/components/modal-import-members.hbs

@@ -108,7 +108,7 @@
     <div class="modal-footer">
         {{#if (eq this.state 'INIT')}}
             <button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
-                <span>Close</span>
+                <span>Cancel</span>
             </button>
         {{/if}}
 

ghost/admin/app/components/modal-member-tier.hbs

@@ -53,7 +53,7 @@
                             @disabled={{false}}
                             @update={{this.updateExpiry}}
                         />
-                        {{svg-jar "arrow-down-small"}}
+                        <span class="ember-power-select-status-icon"></span>
                     </span>
                     {{#if (eq this.expiryAt "custom")}}
                         <GhDatePicker

ghost/admin/app/components/modals/confirm-unsaved-changes.hbs

@@ -7,9 +7,9 @@
     <div class="modal-body">
         <p>
             Hey there! It looks like you didn't save the changes you made.
+            <br>
+            Save before you go!
         </p>
-
-        <p>Save before you go!</p>
     </div>
 
     <div class="modal-footer">

ghost/admin/app/styles/components/modals-new.css

@@ -17,7 +17,7 @@
     --epm-animation-modal-out: var(--epm-animation-modal-out-duration) ease-out
         var(--epm-animation-modal-out-delay) forwards epm-modal-out;
     --epm-backdrop-opacity: 0.6;
-    --epm-backdrop-background: #15171A;
+    --epm-backdrop-background: #626d7933;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -67,8 +67,9 @@
     align-items: unset;
 }
 
+.epm-modal-container,
 .epm-modal-container.background-blur {
-    backdrop-filter: blur(4px);
+    backdrop-filter: blur(3px);
 }
 
 .epm-animating .epm-modal-container {
@@ -169,7 +170,7 @@
     padding: 32px;
     background-color: #fff;
     background-clip: padding-box;
-    border-radius: 8px;
+    border-radius: 12px;
     box-shadow:
         0 2.8px 2.2px rgba(0, 0, 0, 0.02),
         0 6.7px 5.3px rgba(0, 0, 0, 0.028),
@@ -186,8 +187,8 @@
 
 .modal-content .close {
     position: absolute;
-    top: 16px;
+    top: 24px;
-    right: 16px;
+    right: 24px;
     z-index: 9999;
     margin: 0;
     padding: 0;
@@ -208,12 +209,12 @@
 
 .modal-header {
     position: relative;
-    margin-bottom: 22px;
+    margin-bottom: 16px;
 }
 
 .modal-header h1 {
     display: inline-block;
-    margin: -5px 25px 0 0;
+    margin: -5px 32px 0 0;
     font-size: 2.4rem;
     line-height: 1.25em;
     font-weight: 700;
@@ -254,6 +255,11 @@
     font-size: 1.4rem;
     line-height: 1.5em;
     color: var(--black);
+    text-wrap: pretty;
+}
+
+.modal-body label {
+    font-weight: 500;
 }
 
 .modal-body .gh-input {
@@ -266,11 +272,64 @@
     border-radius: 8px;
 }
 
+.modal-body .gh-input,
+.modal-body select,
+.modal-body .gh-date-time-picker-date,
+.modal-body .gh-date-time-picker-time,
+.modal-body .ember-power-select-multiple-trigger {
+    min-height: 38px;
+    padding: 4px 12px;
+    font-size: 1.4rem;
+    color: var(--black);
+    background-color: var(--grey-150);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    transition-property: color, background-color,border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+}
+
+.modal-body .gh-input:hover,
+.modal-body select:hover,
+.modal-body .gh-date-time-picker-date:hover,
+.modal-body .gh-date-time-picker-time:hover,
+.modal-body .ember-power-select-multiple-trigger:hover {
+    background-color: var(--grey-100);
+}
+
+.modal-body .gh-input:focus,
+.modal-body .gh-input:focus-visible,
+.modal-body .ember-basic-dropdown-trigger[aria-expanded=true] .gh-date-time-picker-date,
+.modal-body .gh-date-time-picker-time:focus-within {
+    background-color: var(--white);
+    border: 1px solid var(--green);
+    box-shadow: 0 0 0 2px rgba(48,207,67,.25);
+    outline: none;
+}
+
+.modal-body .gh-select .ember-power-select-status-icon {
+    top: 50%;
+    right: 16px;
+    margin-top: -5px;
+    width: 8px;
+    height: 8px;
+    border-color: var(--black);
+}
+
+.modal-body .for-checkbox .input-toggle-component {
+    background-color: transparent;
+}
+
 .modal-body .gh-input-group .gh-input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 
+.modal-body .gh-input-group .gh-btn {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
 .modal-footer {
     display: flex;
     justify-content: flex-end;
@@ -282,12 +341,25 @@
 }
 
 .modal-footer .gh-btn {
-    min-width: 100px;
+    min-width: auto;
     text-align: center;
+    font-weight: 700;
+    transition: all .15s cubic-bezier(.4,0,.2,1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.modal-footer .gh-btn:not(^="gh-btn-") {
+    border-color: var(--grey-300);
+    color: var(--black);
 }
 
 .modal-footer .gh-btn:not(:first-child) {
-    margin-left: 12px;
+    margin-left: 8px;
+}
+
+.modal-footer .gh-btn:hover {
+    border-color: var(--black);
+    background-color: transparent;
 }
 
 .modal-footer-hint {

ghost/admin/app/styles/components/modals.css

@@ -28,8 +28,8 @@
     left: 0;
     z-index: 50;
     height: 100vh;
-    background: #15171A;
+    background: #626d7933;
-    opacity: 0.6;
+    backdrop-filter: blur(3px);
 }
 
 .fullscreen-modal {
@@ -147,7 +147,7 @@
     padding: 32px;
     background-color: #fff;
     background-clip: padding-box;
-    border-radius: 4px;
+    border-radius: 12px;
     box-shadow:
         0 2.8px 2.2px rgba(0, 0, 0, 0.02),
         0 6.7px 5.3px rgba(0, 0, 0, 0.028),

ghost/admin/app/styles/patterns/buttons.css

@@ -116,17 +116,20 @@ fieldset[disabled] .gh-btn {
     color: #fff;
     fill: #fff;
     background: var(--green);
+    border-color: var(--green);
 }
 
 .gh-btn-green:hover {
     color: #fff !important;
     background: color-mod(var(--green) l(-4%)) !important;
+    border-color: color-mod(var(--green) l(-4%)) !important;
 }
 
 /* When clicked or focused with keyboard */
 .gh-btn-green:active,
 .gh-btn-green:focus {
     background: color-mod(var(--green) l(-7%)) !important;
+    border-color: color-mod(var(--green) l(-7%)) !important;
 }
 
 
@@ -713,4 +716,4 @@ Usage: CTA buttons grouped together horizontally.
     margin: 0 !important;
     border-radius: 999px !important;
     border: 1px solid var(--main-bg-color);
-}
+}