Skip to content

Commit 8056a26

Browse files
viv-helixdjoseph-apphelix
viv-helix
authored and
djoseph-apphelix
committed
fix: patch timezone bug and improve design elements
1 parent 8a4352b commit 8056a26

File tree

5 files changed

+127
-23
lines changed

5 files changed

+127
-23
lines changed

‎src/release-notes/ReleaseNotes.jsx‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,24 @@ const ReleaseNotes = () => {
4444
errors,
4545
} = useReleaseNotes();
4646

47+
const getTzName = (date) => {
48+
try {
49+
const { timeZone } = Intl.DateTimeFormat().resolvedOptions();
50+
const parts = new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' }).formatToParts(date);
51+
const shortName = (parts.find(p => p.type === 'timeZoneName') || {}).value;
52+
if (shortName && !/^GMT[+-]/i.test(shortName)) {
53+
return shortName;
54+
}
55+
if (timeZone) {
56+
const human = timeZone.split('/').pop().replace(/_/g, ' ');
57+
return `${human} Time`;
58+
}
59+
return '';
60+
} catch (e) {
61+
return '';
62+
}
63+
};
64+
4765
useEffect(() => {
4866
const handleBeforeUnload = (e) => {
4967
if (isFormOpen) {
@@ -98,6 +116,7 @@ const ReleaseNotes = () => {
98116
variant="primary"
99117
iconBefore={AddIcon}
100118
size="sm"
119+
className="new-post-button"
101120
onClick={() => handleOpenUpdateForm(REQUEST_TYPES.add_new_update)}
102121
>
103122
{intl.formatMessage(messages.newPostButton)}
@@ -114,21 +133,21 @@ const ReleaseNotes = () => {
114133
>
115134
<Layout.Element>
116135
<article>
117-
<section className="release-notes-list p-4.5">
136+
<section className="release-notes-list pt-5">
118137
{groups.map((g) => (
119138
<div key={g.key} className="mb-4">
120139
{g.items.map((post) => (
121140
<div id={`note-${post.id}`} key={post.id} className="release-note-item mb-4 pb-4">
122141
<div className="d-flex justify-content-between align-items-start">
123142
<div>
124-
<h3 className="mb-4 pb-4">{moment(post.published_at).format('MMMM D, YYYY')}</h3>
143+
<h2 className="mb-4 pb-4">{moment(post.published_at).format('MMMM D, YYYY')}</h2>
125144
{post.published_at && moment(post.published_at).isAfter(moment()) && (
126145
<OverlayTrigger
127-
placement="top"
146+
placement="right"
128147
overlay={(
129-
<Tooltip id={`scheduled-tooltip-${post.id}`}>
148+
<Tooltip className="scheduled-tooltip" id={`scheduled-tooltip-${post.id}`}>
130149
{intl.formatMessage(messages.scheduledTooltip, {
131-
date: moment(post.published_at).format('MMMM D, YYYY h:mm A z'),
150+
date: `${moment(post.published_at).format('MMMM D, YYYY h:mm A')} ${getTzName(new Date(post.published_at))}`,
132151
})}
133152
</Tooltip>
134153
)}
@@ -138,21 +157,22 @@ const ReleaseNotes = () => {
138157
className="mr-1 p-0 justify-content-start scheduled-icon"
139158
src={ClockIcon}
140159
alt={intl.formatMessage(messages.scheduledTooltip, {
141-
date: moment(post.published_at).format('MMMM D, YYYY h:mm A z'),
160+
date: `${moment(post.published_at).format('MMMM D, YYYY h:mm A')} ${getTzName(new Date(post.published_at))}`,
142161
})}
143162
/>
144-
<span>{intl.formatMessage(messages.scheduledLabel)}</span>
163+
<span className="post-scheduled">{intl.formatMessage(messages.scheduledLabel)}</span>
145164
</div>
146165
</OverlayTrigger>
147166
)}
148167
<div className="d-flex align-items-center mb-1 justify-content-between">
149-
<h6 className="m-0">{post.title}</h6>
168+
<h3 className="m-0">{post.title}</h3>
150169
{administrator && (
151170
<div className="ml-3 d-flex">
152171
<IconButtonWithTooltip
153172
tooltipContent={intl.formatMessage(messages.editButton)}
154173
src={EditOutline}
155174
iconAs={Icon}
175+
className="edit-notes-hover"
156176
onClick={() => handleOpenUpdateForm(REQUEST_TYPES.edit_update, post)}
157177
data-testid="release-note-edit-button"
158178
disabled={isFormOpen}
@@ -161,6 +181,7 @@ const ReleaseNotes = () => {
161181
tooltipContent={intl.formatMessage(messages.deleteButton)}
162182
src={DeleteOutline}
163183
iconAs={Icon}
184+
className="delete-notes-hover"
164185
onClick={() => handleOpenDeleteForm(post)}
165186
data-testid="release-note-delete-button"
166187
disabled={isFormOpen}

‎src/release-notes/ReleaseNotes.scss‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,10 @@
5959
color: #000000 ;
6060
}
6161

62-
.pgn__icon { color: inherit ; }
62+
.pgn__icon {
63+
max-width: 20px !important;
64+
max-height: 20px !important;
65+
}
6366
}
6467

6568
.release-note-item {
@@ -113,3 +116,43 @@
113116
background: none;
114117
border: none;
115118
}
119+
120+
.edit-notes-hover:hover{
121+
background-color: #D3D3D3;
122+
}
123+
124+
.delete-notes-hover:hover{
125+
background-color: #D3D3D3;
126+
}
127+
128+
.post-title {
129+
font-size: 22px;
130+
}
131+
132+
.post-scheduled {
133+
line-height: 0;
134+
font-size: 14px;
135+
margin-top: 4px;
136+
}
137+
138+
.new-post-button .pgn__icon {
139+
color: inherit;
140+
}
141+
142+
.pgn__modal-header .pgn__modal-title {
143+
color: #00262B;
144+
font-size: 24px;
145+
}
146+
147+
.pgn__form-text-default {
148+
color: #00262B;
149+
font-weight: bold;
150+
}
151+
152+
.notes-label input {
153+
border-radius: 0 !important;
154+
}
155+
156+
.sub-header-title {
157+
font-size: 40px;
158+
}

‎src/release-notes/messages.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,22 @@ const messages = defineMessages({
7878
id: 'release-notes.error.deleting',
7979
defaultMessage: 'Something went wrong while deleting this post. Please try again.',
8080
},
81+
errorPublishDateRequired: {
82+
id: 'release-notes.form.error.publish_date.required',
83+
defaultMessage: 'Enter a publish date',
84+
},
85+
errorPublishTimeRequired: {
86+
id: 'release-notes.form.error.publish_time.required',
87+
defaultMessage: 'Enter a publish time',
88+
},
89+
errorTitleRequired: {
90+
id: 'release-notes.form.error.title.required',
91+
defaultMessage: 'Enter a title',
92+
},
93+
errorDescriptionRequired: {
94+
id: 'release-notes.form.error.description.required',
95+
defaultMessage: 'Enter post content',
96+
},
8197
});
8298

8399
export default messages;

‎src/release-notes/sidebar/ReleaseNotesSidebar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ReleaseNotesSidebar = ({ notes }) => {
2424

2525
return (
2626
<aside className="release-notes-sidebar">
27-
<div className="m-0 p-0">
27+
<div className="pt-5">
2828
{groups.map((g) => (
2929
<div key={g.key} className="mb-3">
3030
<p className="mb-1">{g.label}</p>

‎src/release-notes/update-form/ReleaseNoteForm.jsx‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const ReleaseNoteForm = ({
2828
const tzName = React.useMemo(() => {
2929
try {
3030
const { timeZone } = Intl.DateTimeFormat().resolvedOptions();
31-
const parts = new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'long' }).formatToParts(new Date());
31+
const parts = new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' }).formatToParts(new Date());
3232
const longName = (parts.find(p => p.type === 'timeZoneName') || {}).value;
3333
if (longName && !/^GMT[+-]/i.test(longName)) {
3434
return longName;
@@ -49,12 +49,12 @@ const ReleaseNoteForm = ({
4949

5050
const validationSchema = Yup.object().shape({
5151
id: Yup.number(),
52-
title: Yup.string().required(),
53-
description: Yup.string().required(),
54-
publishDate: Yup.date().required(),
52+
title: Yup.string().required(intl.formatMessage(messages.errorTitleRequired)),
53+
description: Yup.string().required(intl.formatMessage(messages.errorDescriptionRequired)),
54+
publishDate: Yup.date().required(intl.formatMessage(messages.errorPublishDateRequired)),
5555
publishTime: Yup.string()
56-
.required()
57-
.matches(/^([01]\d|2[0-3]):[0-5]\d$/, 'Invalid value'),
56+
.required(intl.formatMessage(messages.errorPublishTimeRequired))
57+
.matches(/^([01]\d|2[0-3]):[0-5]\d$/, intl.formatMessage(messages.errorPublishTimeRequired)),
5858
});
5959

6060
const handleCancel = (e) => {
@@ -96,57 +96,76 @@ const ReleaseNoteForm = ({
9696
}}
9797
>
9898
{({
99-
values, handleSubmit, isValid, setFieldValue,
99+
values, handleSubmit, setFieldValue, errors, touched,
100100
}) => (
101101
<>
102102
<div className="row">
103103
<div className="col-md-6">
104104
<Form.Group className="mb-4 datepicker-field datepicker-custom">
105-
<Form.Control.Feedback className="datepicker-float-labels">
105+
<Form.Control.Feedback className="datepicker-float-labels mb-2">
106106
{intl.formatMessage(messages.publishDateLabel)}
107107
</Form.Control.Feedback>
108108
<div className="position-relative">
109109
<Form.Control
110110
type="date"
111111
name="publishDate"
112112
value={values.publishDate || ''}
113-
className="datepicker-custom-control p-0"
113+
className="datepicker-custom-control notes-label p-0"
114114
aria-label={intl.formatMessage(messages.publishDateLabel)}
115115
onChange={(e) => setFieldValue('publishDate', e.target.value)}
116+
isInvalid={touched.publishDate && !!errors.publishDate}
116117
/>
118+
{touched.publishDate && errors.publishDate && (
119+
<p className="invalid-feedback d-block">
120+
{errors.publishDate}
121+
</p>
122+
)}
117123
</div>
118124
</Form.Group>
119125
</div>
120126
<div className="col-md-6">
121127
<Form.Group className="mb-4 datepicker-field datepicker-custom">
122-
<Form.Control.Feedback className="datepicker-float-labels">
128+
<Form.Control.Feedback className="datepicker-float-labels mb-2">
123129
{publishTimeText}
124130
</Form.Control.Feedback>
125131
<div className="position-relative">
126132
<Form.Control
127133
type="time"
128134
name="publishTime"
129135
value={values.publishTime || ''}
130-
className="datepicker-custom-control p-0"
136+
className="datepicker-custom-control notes-label p-0"
131137
aria-label={intl.formatMessage(messages.publishTimeLabel)}
132138
step="60"
133139
onChange={(e) => setFieldValue('publishTime', e.target.value)}
140+
isInvalid={touched.publishTime && !!errors.publishTime}
134141
/>
142+
{touched.publishTime && errors.publishTime && (
143+
<p className="invalid-feedback d-block">
144+
{errors.publishTime}
145+
</p>
146+
)}
135147
</div>
136148
</Form.Group>
137149
</div>
138150
</div>
139151

140152
<Form.Group className="mb-3">
141-
<Form.Control.Feedback>
153+
<Form.Control.Feedback className="mb-2">
142154
{intl.formatMessage(messages.titleLabel)}
143155
</Form.Control.Feedback>
144156
<Form.Control
145157
name="title"
158+
className="notes-label"
146159
value={values.title}
147160
aria-label={intl.formatMessage(messages.titleLabel)}
148161
onChange={(e) => setFieldValue('title', e.target.value)}
162+
isInvalid={touched.title && !!errors.title}
149163
/>
164+
{touched.title && errors.title && (
165+
<p className="invalid-feedback d-block">
166+
{errors.title}
167+
</p>
168+
)}
150169
</Form.Group>
151170

152171
<Form.Group className="m-0 mb-3">
@@ -157,13 +176,18 @@ const ReleaseNoteForm = ({
157176
minHeight={200}
158177
onChange={(value) => setFieldValue('description', value)}
159178
/>
179+
{touched.description && errors.description && (
180+
<p className="invalid-feedback d-block">
181+
{errors.description}
182+
</p>
183+
)}
160184
</Form.Group>
161185

162186
<ActionRow>
163187
<Button variant="tertiary" type="button" onClick={handleCancel}>
164188
{intl.formatMessage(messages.cancelButton)}
165189
</Button>
166-
<Button variant="primary" onClick={handleSubmit} type="submit" disabled={!isValid}>
190+
<Button variant="primary" onClick={handleSubmit} type="submit">
167191
{intl.formatMessage(messages.saveButton)}
168192
</Button>
169193
</ActionRow>

0 commit comments

Comments
 (0)