Applied most style changes from the new figma design #327

Mink-Mink · 2023-09-29T16:49:20Z

You can see the figma stylesheet here https://www.figma.com/file/q7DDvvkSKfYpT0yheLexht/AI-Safety-ccc-ccstan99

Most of the changes are there
I didn't add a gray "tree" structure to the collapsable question sections because that seemed more complex
Also didn't move search bar into the header because it's unclear to me how that would interact with the tags page (do we put tag filtering there? Do we make logic so that if someone types a question in there they get switched back to the base page?)
Added a back button to the tags page - it wasn't in the design, but needing to edit the URL or click on stampy icon is really unintuitive when wanting to go back to the base question page without picking a tag
See comments below for screenshots of the new look
As you can see in the dialogue post, currently it highlights only a part of the row; this is down to how the form there is structured, but it seemed like a bit too much of a refactor for me to attempt right away.
Blank space, in case I remember something later.

Note from @Aprillion: Related to issue #285

See here for intended design https://www.figma.com/file/q7DDvvkSKfYpT0yheLexht/AI-Safety-ccc-ccstan99

Mink-Mink · 2023-09-29T16:52:30Z

Mink-Mink · 2023-09-29T16:52:59Z

Mink-Mink · 2023-09-29T16:53:20Z

Mink-Mink · 2023-09-29T16:53:47Z

Mink-Mink · 2023-09-29T16:54:32Z

Mink-Mink · 2023-09-29T16:55:23Z

Mink-Mink · 2023-09-29T16:55:54Z

Mink-Mink · 2023-09-29T16:56:42Z

Mink-Mink · 2023-09-29T16:57:07Z

Mink-Mink · 2023-09-29T16:58:03Z

Black border here is due to the screenshotting software, it's clean.

Aprillion · 2023-09-30T07:17:29Z

app/root.css

  --bgColorHighlight: #c0d3e4;
  --bgColorTableRows: #e8f7fe;
  --colorLink: #79f;
  --colorLinkVisited: #8ac;
-  --colorTooltip: #d1d1d1;
+  --colorTooltip: rgba(48, 115, 183, 0.1);


could you please find a better background for .answer .link-popup? transparent --colorTooltip is no good for that:

@ccstan99 - I didn't find the popup styles in Figma - I'm happy if @Mink-Mink will pick from existing bg colors unless you have some new color in mind and just forgot to specify it yet

No transparency please. No new color. Feel free to pick from the existing bg color.

Aprillion · 2023-09-30T07:48:43Z

app/components/icons-generated/Undo.js

+    {...props}
+  >
+    <path
+      className="tag_svg__gray"


good try 👍 but this needs to be set in the SVG file itself as class="gray", not a manual change in generated file

I pushed a fix commit to your forked repo, please pull before making more changes, thanks!

ccstan99 · 2023-10-01T00:01:04Z

A few other minor things:

"Show me even more (more) questions about AI Safety..." background should be transparent not darker gray.
(Please fix typo for us: deduplicate "more more")
Question titles should be bolded to contrast from answers.
All tags border outline should be blue (same color as text) not gray.

If they can be easily incorporated, please also match Figma for

Size of tags text on tags page
"None of these: Request an answer to my exact question above" should be styled
Title of popup dialogues should be larger & bold
Please use Figma specified colors for background & foreground.

ccstan99 · 2023-10-01T01:41:53Z

Also, you were referring to a slightly out-of-date Figma file. Please use this for reference. Thanks!

Aprillion

adding a few more color changes to match the Figma designs from #285 (only where I noticed some differences while I was trying to find color for the popups, now reusing --bgColorHighlight for both hover in search results and popups)

approving from code review perspective, we can merge if designers won't have any more major objections (minor fixes can be done later if we won't notice them right now)

deployed to https://stampy-ui.aprillion.workers.dev/

ccstan99

This is much improved, thank you! I'm happy for this to be approved & merged but let’s keep the original issue with link to Figma file open. I’ll add any items still outstanding to that issue.

ccstan99 · 2023-10-01T19:32:42Z

One last glaring thing if we're able to sneak it easily into this PR... Can we please remove the border outline around "Show me even more questions about AI Safety..."? The highlight on hover is fine but there's no need to draw that much attention to it otherwise.

Aprillion · 2023-10-05T18:35:34Z

border removed, merging now and let's solve follow-up issues in future PRs

Mink-Mink added 5 commits September 29, 2023 18:37

Correct css styling in accordance with new figma model

d639db5

See here for intended design https://www.figma.com/file/q7DDvvkSKfYpT0yheLexht/AI-Safety-ccc-ccstan99

Add bold title header to dialog menu

8d2bb05

Add back button to tags page

3faddc0

Change default search placeholder

f76d65c

Correct colors on dark theme

78d4b1b

Aprillion mentioned this pull request Sep 29, 2023

UI facelift #285

Closed

StampyAI deleted a comment from Mink-Mink Sep 29, 2023

fix gray class in svg file

895091a

Aprillion requested changes Sep 30, 2023

View reviewed changes

Mink-Mink and others added 3 commits October 1, 2023 15:02

Style tags, question answers, show more answers

bc41471

update colors from latest Figma

f00b800

fix possible questions multiline alignment

3bd7d7b

Aprillion previously approved these changes Oct 1, 2023

View reviewed changes

ccstan99 previously approved these changes Oct 1, 2023

View reviewed changes

Merge remote-tracking branch 'origin/master'

c209100

Aprillion dismissed stale reviews from ccstan99 and themself via e8bfe86 October 5, 2023 18:33

remove border from see more button

e8bfe86

Aprillion approved these changes Oct 5, 2023

View reviewed changes

Aprillion merged commit 964d457 into StampyAI:master Oct 5, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Applied most style changes from the new figma design #327

Applied most style changes from the new figma design #327

Mink-Mink commented Sep 29, 2023 •

edited by Aprillion

Loading

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Aprillion Sep 30, 2023

ccstan99 Sep 30, 2023

Aprillion Sep 30, 2023

ccstan99 commented Oct 1, 2023

ccstan99 commented Oct 1, 2023

Aprillion left a comment •

edited

Loading

ccstan99 left a comment •

edited

Loading

ccstan99 commented Oct 1, 2023 •

edited

Loading

Aprillion commented Oct 5, 2023

Applied most style changes from the new figma design #327

Applied most style changes from the new figma design #327

Conversation

Mink-Mink commented Sep 29, 2023 • edited by Aprillion Loading

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Mink-Mink commented Sep 29, 2023

Aprillion Sep 30, 2023

Choose a reason for hiding this comment

ccstan99 Sep 30, 2023

Choose a reason for hiding this comment

Aprillion Sep 30, 2023

Choose a reason for hiding this comment

ccstan99 commented Oct 1, 2023

ccstan99 commented Oct 1, 2023

Aprillion left a comment • edited Loading

Choose a reason for hiding this comment

ccstan99 left a comment • edited Loading

Choose a reason for hiding this comment

ccstan99 commented Oct 1, 2023 • edited Loading

Aprillion commented Oct 5, 2023

Mink-Mink commented Sep 29, 2023 •

edited by Aprillion

Loading

Aprillion left a comment •

edited

Loading

ccstan99 left a comment •

edited

Loading

ccstan99 commented Oct 1, 2023 •

edited

Loading