Fixed error message of the date-time-picker not breaking onto next line (#20221)

REF DES-261

- Also updated error message copy of both the date-time-picker and the
date-picker to be friendlier.

ghost/admin/app/components/gh-date-time-picker.hbs

@@ -37,7 +37,7 @@
         >
         <small class="gh-date-time-picker-timezone" data-test-date-time-picker-timezone>{{this.timezone}}</small>
     </div>
-    {{#if this.hasError}}
-        <div class="gh-date-time-picker-error" data-test-date-time-picker-error>{{this.dateError}}{{this.timeError}}</div>
-    {{/if}}
 </div>
+{{#if this.hasError}}
+    <div class="gh-date-time-picker-error" data-test-date-time-picker-error>{{this.dateError}}{{this.timeError}}</div>
+{{/if}}

ghost/admin/app/components/members/filter-value.hbs

@@ -118,7 +118,7 @@
     <GhDatePicker
         @value={{@filter.value}}
         @maxDate={{now}}
-        @maxDateError="Must be in the past"
+        @maxDateError="Please choose a past date."
         @onChange={{fn @setFilterValue @filter}}
         data-test-input="members-filter-value"
     />

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

@@ -99,17 +99,16 @@
 
 .gh-date-time-picker-timezone {
     font-size: 1.1rem;
-    font-weight: 300;
+    color: var(--midgrey);
-    color: color-mod(var(--midgrey) l(+17%));
     margin-left: -30px;
 }
 
 .gh-date-time-picker-error {
     display: block;
+    padding-top: 4px;
     font-size: 1.3rem;
     line-height: 1.4em;
-    font-weight: 300;
+    color: var(--red-d1);
-    color: var(--red);
 }
 
 .gh-publish-send-to {

ghost/admin/app/validators/post.js

@@ -190,12 +190,12 @@ export default BaseValidator.create({
 
             // draft/published must be in past
             if ((status === 'draft' || status === 'published') && publishedAtBlogTZ.isSameOrAfter(now)) {
-                model.errors.add('publishedAtBlogDate', 'Must be in the past');
+                model.errors.add('publishedAtBlogDate', 'Please choose a past date and time.');
                 this.invalidate();
 
             // scheduled must be in the future when first scheduling
             } else if ((model.changedAttributes().status || model.changedAttributes().publishedAtUTC) && status === 'scheduled' && !isInFuture) {
-                model.errors.add('publishedAtBlogDate', 'Must be in the future');
+                model.errors.add('publishedAtBlogDate', 'Please choose a future date and time.');
                 this.invalidate();
             }
         }

ghost/admin/tests/acceptance/editor-test.js

@@ -153,7 +153,7 @@ describe('Acceptance: Editor', function () {
                 await blur('[data-test-date-time-picker-time-input]');
 
                 expect(find('[data-test-date-time-picker-error]').textContent.trim(), 'inline error response for future time')
-                    .to.equal('Must be in the past');
+                    .to.equal('Please choose a past date and time.');
 
                 // closing the PSM will reset the invalid date/time
                 await click('[data-test-psm-trigger]');

ghost/admin/tests/integration/components/gh-date-picker-test.js

@@ -333,12 +333,12 @@ describe('Integration: Component: gh-date-picker', function () {
             this.set('date', moment('2022-02-22 22:22:22.000')).toDate();
             this.set('maxDate', moment('2022-02-25 12:00:00.000').toDate());
 
-            await render(hbs`<GhDatePicker @value={{this.date}} @maxDate={{this.maxDate}} @maxDateError="Must be in the past" @onChange={{this.onChange}} />`);
+            await render(hbs`<GhDatePicker @value={{this.date}} @maxDate={{this.maxDate}} @maxDateError="Please choose a past date." @onChange={{this.onChange}} />`);
 
             await fillIn('[data-test-date-picker-input]', '2022-02-28');
             await blur('[data-test-date-picker-input]');
 
-            expect(find('[data-test-date-picker-error]')).to.have.text('Must be in the past');
+            expect(find('[data-test-date-picker-error]')).to.have.text('Please choose a past date.');
         });
     });