feat: new styles implemented #534

mcturco · 2022-01-05T20:47:23Z

Currently working on a new version of the website with the new branding applied across all elements. Styles to match new brand have been added in tailwind config. In the process of making sure all typography and colors match new brand. Some small edits to spacing are being made here as well.

Also - wanted to make it known that there are going to be little changes in several files. If it makes more sense to separate these into several PRs, let me know! Just wanted to post the progress so far.

cc: @magicmatatjahu

UPDATE:
New styles have been implemented based on the current Design System styles 🎉

Here is a screenshot preview, but you may also view the changes via the deploy preview link below:

Some things that were edited:

tailwind css config file settings
New AsyncAPI logo added
New color palette
New font
Heading component (applies tailwind classes based on typeStyle prop, with ability to change the heading level)
Paragraph component (applies tailwind classes based on typeStyle prop)
TextLink component (applies tailwind classes by default for inline links)
The above 3 components have been applied throughout the website so that the typography remains consistent with the Design System

Do leave your feedback in this PR if you have it! 😄

Styles to match new brand have been added in tailwind config. In the process of making sure all typography and colors match new brand.

netlify · 2022-01-05T20:47:30Z

✔️ Deploy Preview for asyncapi-website ready!

🔨 Explore the source changes: b3dc206

🔍 Inspect the deploy log: https://app.netlify.com/sites/asyncapi-website/deploys/6225f5c6f344b60007a77d9f

😎 Browse the preview: https://deploy-preview-534--asyncapi-website.netlify.app

magicmatatjahu

I know that it's a draft PR but I see some problems.

I checked live preview and it's amazing 🚀 I am not sure but everything looks almost finished 😅 In the meantime, are you also working on a page for style guides (I ask because of the PR description)?

components/DemoAnimation.js

components/typography/Heading.js

tailwind.config.js

mcturco · 2022-01-07T17:19:47Z

In the meantime, are you also working on a page for style guides (I ask because of the PR description)?

@magicmatatjahu I have raised an issue for this so someone can help me set up the template. I tried doing it myself but I couldn't get it to work right. Here is the issue: #532

I think @yashsehgal is wanting to help out with it!

magicmatatjahu · 2022-01-10T16:25:42Z

@mcturco

@magicmatatjahu I have raised an issue for this so someone can help me set up the template. I tried doing it myself but I couldn't get it to work right. Here is the issue: #532

I think @yashsehgal is wanting to help out with it!

If you need help I can show you how to setup new page on video call :) When do you have time? Of course if @yashsehgal don't have problem with second guy with help 😅

mcturco · 2022-01-10T17:03:58Z

If you need help I can show you how to setup new page on video call :)

@magicmatatjahu yes! I would love that. I think @yashsehgal mentioned he was having issues with it on the issue I raised?

Perhaps you can help us both 😄

magicmatatjahu

Three more comments :)

components/typography/Heading.js

magicmatatjahu · 2022-01-11T12:17:35Z

components/typography/Heading.js

+    let classNames
+    const Tag = `${level}`;
+
+    if (typeStyle === 'heading-xl') {


Can I have question? What is a difference between heading and body? I mean e.g. heading-lg and body-lg?

Sure, heading is for heading type treatments and in most cases have a heavier weight and darker color than the paragraphs, which are called body to represent body copy. Here is a visual breakdown of these styles and the class names assigned to each.

The names in the bubble are the identifiers which will be passed into typeStyle within each component and the classnames below that identifier are the tailwind classnames that are assigned to each identifier.

Ok, thanks! :) However, can we use here switch cases syntax not if else?

components/typography/Paragraph.js

mcturco · 2022-02-07T22:26:03Z

Hi @magicmatatjahu 👋

I think this is about ready for review. There might be some small things that I might have missed but IMO I don't think we should wait much longer to merge these changes, for things like that we can just open separate PRs.

Initially, I thought it would be a good idea to merge this PR at the same time as #539 (brand guidelines pages), but honestly after thinking about it I don't see why the making of the brand guidelines pages have to hold up the release of this PR, but wondering what others think.

cc: @fmvilas @derberg

akshatnema · 2022-02-08T05:47:54Z

Hey @mcturco sorry for intervening in the PR 😅, as I am not much related to the PR and issue. Here are some of the changes I think you should need to consider:

Hovering the links in the Footer makes the text invisible - Maybe it's because, on hover, you have provided purple color to the text and on the black background, it's not visible. Here is my preview:

About Link got disappeared (because of color) when I put my cursor on it. The same happened with the link at the footer, specifying the trademark policies.

Responsive issue in Navbar in a window size of 14 inches - If you open the dropdown menu of Community in Navbar and make your screen size of 1330px * 698px, you will see that the dropdown menu is not perfectly visible in the whole screen. You probably can assign the height in percentage or just decrease some padding/margin between the options so that it gets corrected. Here's the preview:

mcturco · 2022-02-23T18:33:32Z

@magicmatatjahu Thank you for the tips!

Check now and see if that's better 😄

magicmatatjahu

Two comments about switch case :)

components/typography/Heading.js

components/typography/Paragraph.js

components/navigation/BlogPostItem.js

magicmatatjahu · 2022-02-23T20:34:04Z

@mcturco 👌🏼 Lets see what other people will think :) Could you write about that PR on Slack as we discussed?

akshatnema · 2022-02-25T09:50:03Z

Hey @mcturco, I saw the preview right now. Really, great work done by you in typography, styling, and design. You nailed it ✨. Overall, PR looks top-notch and fully complete. Just look like a few finishing touches are needed and then, this PR will boom the website 💥. Here are some suggestions from my side:

URL Text Link not visible on hover

Yep, I completely understand that you have made a default styling for all the links on the website, but I think we have to make the hover effect of this link the same as that of About, Blog, etc. in the footer.

A Very Fine Line Gap on top of Navbar

This error is still on the website right now as well. Looks like there is a very fine gap between the top and navbar of the website. I don't know why it is there and how to resolve it. I will just suggest, if you find this error, kindly resolve it 😄.

Extra indentation for title in docs

I'm not sure why you put extra spacing on the left of the title. Is it made intentionally? From my point of view, it should be left-aligned as it is right now on the website.

mcturco · 2022-02-25T15:32:26Z

Hey @akshatnema, thank you so much for your kind words and your review ❤️

Yep, I completely understand that you have made a default styling for all the links on the website, but I think we have to make the hover effect of this link the same as that of About, Blog, etc. in the footer.

Good find! I have updated the code with your suggestion 😄

This error is still on the website right now as well. Looks like there is a very fine gap between the top and navbar of the website. I don't know why it is there and how to resolve it. I will just suggest, if you find this error, kindly resolve it 😄.

I don't see this on my end, even when checking in other browsers (chrome, firefox, safari). Either way, because this is a current problem on the website, we should probably raise a separate issue and debug it there.

I'm not sure why you put extra spacing on the left of the title. Is it made intentionally? From my point of view, it should be left-aligned as it is right now on the website.

Thank you for finding this bug! That definitely wasn't intentional... not sure how that happened, must have been while merging changes. Just fixed that as well!

magicmatatjahu · 2022-02-28T16:06:48Z

Seriously, Missy needs more feedback. it's a big change and we don't want to merge with two reviews.

cc @derberg @boyney123 @fmvilas @alequetzalli

fmvilas · 2022-02-28T17:14:27Z

The roadmap page isn't still visible? Any idea why?

magicmatatjahu · 2022-02-28T17:16:25Z

The roadmap page isn't still visible? Any idea why?

It is never visible because someone could make a console log of our credentials (I guess, I haven't configured repo config myself).

fmvilas · 2022-02-28T17:38:47Z

Oh yeah, you're right. Cool, then I'll blindly say "LGTM 👍" 😄

boyney123 · 2022-03-04T15:05:36Z

Scanned through the 45 files of changes, couldn't see any obvious problems, also spent time looking at the preview (which looks amazing btw), can't find any problems either... so from what I can tell it's looking good!

magicmatatjahu

LGTM!

quetzalliwrites

🚢 🚢 🚢

mcturco · 2022-03-07T16:23:44Z

/rtm

new styles implemented (IP)

89550af

Styles to match new brand have been added in tailwind config. In the process of making sure all typography and colors match new brand.

mcturco added 7 commits January 6, 2022 11:39

Finish editing typography - home page

5b085a0

update footer links classes

0fe1383

more home page style edits

4524112

fix header width on blog page to match other pages

5c4deed

combing through docs styles

63fb70b

home page typography updates

2e3b060

fixing header styles and spacing on smaller screens

56678c6

magicmatatjahu requested changes Jan 7, 2022

View reviewed changes

components/DemoAnimation.js Outdated Show resolved Hide resolved

components/typography/Heading.js Outdated Show resolved Hide resolved

tailwind.config.js Outdated Show resolved Hide resolved

tailwind.config.js Show resolved Hide resolved

mcturco added 3 commits January 7, 2022 13:51

refactor Heading component

400224e

Add Paragraph component and implement on home page

ecc7f17

Adjust primary and secondary colors

43cc881

mcturco mentioned this pull request Jan 10, 2022

feat: add brand guidelines pages #539

Closed

magicmatatjahu reviewed Jan 11, 2022

View reviewed changes

mcturco and others added 8 commits January 11, 2022 10:29

refactoring suggestion for type components

e2c006c

Add TextLink typography component for consistent inline link styling

3c4c566

Style edits to menu items, re-format logo SVG to JSX

944269f

Update to color palette based on feedback of too much pink

0e8b4bc

New studio button style

06c55d5

streamline heading treatment labels

7e5a524

Merge branch 'master' into missy-new-styles

b193b04

Edits to new section styles from merge

42758fd

mcturco marked this pull request as ready for review February 7, 2022 22:24

Load Work Sans font from Google

f191ad2

magicmatatjahu reviewed Feb 23, 2022

View reviewed changes

components/typography/Heading.js Outdated Show resolved Hide resolved

components/typography/Paragraph.js Outdated Show resolved Hide resolved

magicmatatjahu reviewed Feb 23, 2022

View reviewed changes

components/navigation/BlogPostItem.js Outdated Show resolved Hide resolved

Bug fixes

a5256a3

Fixing errors

97ab599

mcturco mentioned this pull request Feb 28, 2022

Add twitter section on the Async API website #562

Closed

mcturco mentioned this pull request Feb 28, 2022

UI Audit: Website asyncapi-archived-repos/design-system#12

Open

fmvilas approved these changes Feb 28, 2022

View reviewed changes

derberg mentioned this pull request Mar 1, 2022

List of Proposals for GSoC 2022 asyncapi/community#272

Closed

boyney123 approved these changes Mar 4, 2022

View reviewed changes

Merge branch 'master' into missy-new-styles

d6d1534

fmvilas requested review from quetzalliwrites, asyncapi-bot-eve and derberg as code owners March 7, 2022 12:05

Merge branch 'master' into missy-new-styles

b3dc206

magicmatatjahu approved these changes Mar 7, 2022

View reviewed changes

quetzalliwrites approved these changes Mar 7, 2022

View reviewed changes

asyncapi-bot added the ready-to-merge label Mar 7, 2022

asyncapi-bot merged commit 4ee787b into asyncapi:master Mar 7, 2022

mcturco deleted the missy-new-styles branch March 7, 2022 16:24

fmvilas mentioned this pull request Aug 23, 2023

Website UI Kit design/dev project #2090

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new styles implemented #534

feat: new styles implemented #534

mcturco commented Jan 5, 2022 •

edited

Loading

netlify bot commented Jan 5, 2022 •

edited

Loading

magicmatatjahu left a comment

mcturco commented Jan 7, 2022

magicmatatjahu commented Jan 10, 2022 •

edited

Loading

mcturco commented Jan 10, 2022

magicmatatjahu left a comment

magicmatatjahu Jan 11, 2022

mcturco Jan 11, 2022

magicmatatjahu Feb 18, 2022

mcturco commented Feb 7, 2022

akshatnema commented Feb 8, 2022

mcturco commented Feb 23, 2022

magicmatatjahu left a comment

magicmatatjahu commented Feb 23, 2022

akshatnema commented Feb 25, 2022

URL Text Link not visible on hover

A Very Fine Line Gap on top of Navbar

Extra indentation for title in docs

mcturco commented Feb 25, 2022

magicmatatjahu commented Feb 28, 2022

fmvilas commented Feb 28, 2022

magicmatatjahu commented Feb 28, 2022 •

edited

Loading

fmvilas commented Feb 28, 2022

boyney123 commented Mar 4, 2022

magicmatatjahu left a comment

quetzalliwrites left a comment

mcturco commented Mar 7, 2022

feat: new styles implemented #534

feat: new styles implemented #534

Conversation

mcturco commented Jan 5, 2022 • edited Loading

netlify bot commented Jan 5, 2022 • edited Loading

magicmatatjahu left a comment

Choose a reason for hiding this comment

mcturco commented Jan 7, 2022

magicmatatjahu commented Jan 10, 2022 • edited Loading

mcturco commented Jan 10, 2022

magicmatatjahu left a comment

Choose a reason for hiding this comment

magicmatatjahu Jan 11, 2022

Choose a reason for hiding this comment

mcturco Jan 11, 2022

Choose a reason for hiding this comment

magicmatatjahu Feb 18, 2022

Choose a reason for hiding this comment

mcturco commented Feb 7, 2022

akshatnema commented Feb 8, 2022

mcturco commented Feb 23, 2022

magicmatatjahu left a comment

Choose a reason for hiding this comment

magicmatatjahu commented Feb 23, 2022

akshatnema commented Feb 25, 2022

URL Text Link not visible on hover

A Very Fine Line Gap on top of Navbar

Extra indentation for title in docs

mcturco commented Feb 25, 2022

magicmatatjahu commented Feb 28, 2022

fmvilas commented Feb 28, 2022

magicmatatjahu commented Feb 28, 2022 • edited Loading

fmvilas commented Feb 28, 2022

boyney123 commented Mar 4, 2022

magicmatatjahu left a comment

Choose a reason for hiding this comment

quetzalliwrites left a comment

Choose a reason for hiding this comment

mcturco commented Mar 7, 2022

mcturco commented Jan 5, 2022 •

edited

Loading

netlify bot commented Jan 5, 2022 •

edited

Loading

magicmatatjahu commented Jan 10, 2022 •

edited

Loading

magicmatatjahu commented Feb 28, 2022 •

edited

Loading