refactor: Alter layout and copy of Feedback component in Footer #3542
Conversation
|
In draft state to prototype solutions, then I'll tidy up UI elements and push up for review. |
|
Removed vultr server and associated DNS entries |
|
Option 1 will be taken forward from Trello Ticket feedback |
| @@ -52,8 +54,9 @@ const FeedbackForm: React.FC<FormProps> = ({ inputs, handleSubmit }) => { | |||
| return ( | |||
| <Formik initialValues={initialValues} onSubmit={handleSubmit}> | |||
| <StyledForm> | |||
| <FeedbackDataDisclaimer /> | |||
There was a problem hiding this comment.
Split this <FeedbackDisclaimer> into two imports for each disclaimer, one focused on personal / financial data as <FeedbackDataDisclaimer> and one focused on the monitoring of the feedback <FeedbackMonitoringDisclaimer>.
Situated them in the same file as they both serve similar functions and contextually relevant, but seperate enough in structure to have as separate components.
Be good to have thoughts on this pattern...
There was a problem hiding this comment.
Generally, if we have a shared content/structure it can make sense to make a component that handles structure/style, and passed in content via a prop (or in this case, I think children would be more appropriate).
This would mean that we wouldn't have to repeat this structure / style markdown -
<Box>
<Typography variant="body2">
...
</Typography>
</Box>We could instead use a pattern like this -
// FeedbackDisclaimer.tsx
<Box>
<Typography variant="body2">
{children}
</Typography>
</Box>// FeedbackFrom.tsx
<Disclaimer>
Some content here!
</Disclaimer>
<Disclaimer>
Some other content here!
</Disclaimer>There was a problem hiding this comment.
@DafyddLlyr thanks! Switched it to this. It felt interesting cause the text was contextually linked but had a different structure, with a link in the text. Just passed it now as it is. Hope this is cleaner
| @@ -52,8 +54,9 @@ const FeedbackForm: React.FC<FormProps> = ({ inputs, handleSubmit }) => { | |||
| return ( | |||
| <Formik initialValues={initialValues} onSubmit={handleSubmit}> | |||
| <StyledForm> | |||
| <FeedbackDataDisclaimer /> | |||
There was a problem hiding this comment.
Generally, if we have a shared content/structure it can make sense to make a component that handles structure/style, and passed in content via a prop (or in this case, I think children would be more appropriate).
This would mean that we wouldn't have to repeat this structure / style markdown -
<Box>
<Typography variant="body2">
...
</Typography>
</Box>We could instead use a pattern like this -
// FeedbackDisclaimer.tsx
<Box>
<Typography variant="body2">
{children}
</Typography>
</Box>// FeedbackFrom.tsx
<Disclaimer>
Some content here!
</Disclaimer>
<Disclaimer>
Some other content here!
</Disclaimer>
What does this PR do?
This PR alters the
<Feedback>component which sits within the footer of a public facing service.It is connected to the Trello ticket: https://trello.com/c/bpbCvQzH/2969-update-the-feedback-message-within-the-editor-to-warn-users-that-it-is-not-monitored-daily
I have prototype 3 solutions:
Option [1]
Option [2]
Option [3]