Redesign Next Steps

[karenroldan]

What Does This PR Add/Change?

Context: pciE2j-1VQ-p2#comment-1674.

Links on the title are removed. A CTA button is added for tasks with links instead.

BEFORE

AFTER

Task 1: Long title with link. Task 2: Long details without link

All tasks with links

Testing Instructions

Working on CSS is another level 😅 I tried to fix all the possible scenarios! Tests are already updated according to the changes.

• Make sure that when clicking the button, you are redirected to the right page.
• The trigger to checkbox change is still there: make sure that the checkbox is also checked when clicking the button.

axe DevTools This will be my first time using this extension.

• Test URL
• No automatic issues found

Issues

Related to #
Closes #53

[karenroldan]

I see from Figma that the app icon for Slack is colored and the link icon is blueish. I tried overriding the color using CSS but the changes are not reflecting.

@dpasque can I ask for guidance on this? Do I need to add new SVG files?

cc: @john-legg

[dpasque]

@karenroldan hi! 😄

I tried overriding the color using CSS but the changes are not reflecting. @dpasque can I ask for guidance on this? Do I need to add new SVG files?

Yeah, you can't really override the SVG color with css easily, so you just need new SVG content! If you open the file in Figma, in the sidebar you can right click the item for the icon and click "copy as SVG". Although, it looks like the Slack icon might be an image in Figma.

For reference, here's the SVG code for the blue link icon:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_671_16950" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="2" width="16" height="16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8333 4.16667V2.5H17.5V9.16667H15.8333V5.345L9.33917 11.8392L8.16083 10.6608L14.655 4.16667H10.8333ZM15.8333 15.8333V10.8333H14.1667V15.8333H4.16667V5.83333H9.16667V4.16667H4.16667C3.24583 4.16667 2.5 4.9125 2.5 5.83333V15.8333C2.5 16.7542 3.24583 17.5 4.16667 17.5H14.1667C15.0875 17.5 15.8333 16.7542 15.8333 15.8333Z" fill="white"/>
</mask>
<g mask="url(#mask0_671_16950)">
<rect width="20" height="20" fill="#0675C4"/>
</g>
</svg>

And for Slack, we probably should try to use their official one from their media kit!

It looks like there's an SVG (towards the bottom) on their collection here: https://salesforce.widencollective.com/c/xt57vnlf

[karenroldan]

Yeah, you can't really override the SVG color with css easily, so you just need new SVG content!

Got it! Thanks, Dan!

I've added new SVG content for the external link and Slack. Changes can be found here: cbdeee6

[dpasque]

@karenroldan and @john-legg -- it's definitely non-blocking for this PR, but one thing I noticed was that these CTA card/buttons don't really scale down on mobile very well right now. MC doesn't even adapt to mobile lol, so it's not super important, but I was thinking we should probably go back and tweak that eventually -- it would be ideal to keep the site responsive!

@john-legg -- I didn't see any mock-ups re: the mobile design, did you have any ideas there? Just move the button underneath maybe?

[john-legg]

Per the Figma component guide, it looks like the these kind outline fake-button styles should have a hover effect

Our current color scheme is a bit off from the Figma ones

@karenroldan @dpasque apologies for confusion over new styles vs old styles. The component guides in the current Figma file are all updated for the "new" style, which Duplicate Search will be implementing. In the development guides, I kept the style of Report Issue the same to make iterations a bit simpler by not throwing in styling 😆

I plan to update the designs for Report Issue with the new styles, but if you'd like to make those changes (e.g. button styling) now, feel free to do so! If it causes too much confusion, I can also update them early. Let me know what you all prefer!

I didn't see any mock-ups re: the mobile design, did you have any ideas there? Just move the button underneath maybe?

Yes, that seems to be the best option based on experimentation. Thanks for bringing this up! I didn't even think about mobile for the new cards 😅 It would look something like this:

[karenroldan]

Thanks for the review, @john-legg and @dpasque. I will create another PR to reflect the changes for mobile!