Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(campaign-interaction-steps): add save button to top of section #1610

Merged
merged 2 commits into from
Sep 11, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -389,9 +389,22 @@ const CampaignInteractionStepsForm: React.FC<InnerProps> = (props) => {
title="What do you want to discuss?"
subtitle="You can add scripts and questions and your texters can indicate responses from your contacts. For example, you might want to collect RSVPs to an event or find out whether to follow up about a different volunteer activity."
/>
<Box m={2}>
<ScriptPreviewButton campaignId={campaignId} />
</Box>
<div style={{ display: "flex", justifyContent: "space-between" }}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked through the onboarding and contributing docs but didn't see any guidance around css/styling, so I kept this as an inline change for simplicity's sake. I'm happy to change it if there's a convention I should be following, lmk!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah agree on no real convention. I've followed a rule of thumb of if it goes over one line - pull it out of the body. Curious if @hiemanshu has thoughts around this too.

Copy link
Contributor

@ajohn25 ajohn25 May 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: See if you can use a Grid with Grid items to get the same outcome. See example here . Inline CSS for the div with Box containers for the buttons feels mismatched I think.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no convention. We should pick one! My suggestion would be single style can go inline, anymore, goes to makeStyles hooks.

<Box m={2}>
<ScriptPreviewButton campaignId={campaignId} />
</Box>
<Box m={2}>
<Button
{...dataTest("interactionSubmit", true)}
variant="contained"
color="primary"
disabled={isSaveDisabled}
onClick={handleSave}
>
{finalSaveLabel}
</Button>
</Box>
</div>
{renderInvalidScriptFields()}
<InteractionStepCard
interactionStep={finalFree}
Expand Down