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.

Sign up for GitHub

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

Jump to bottom

refactor: update social card design #52

Merged
merged 8 commits into from
Jun 22, 2023
Merged

refactor: update social card design #52

merged 8 commits into from
Jun 22, 2023

Conversation

OgDev-01
Copy link
Contributor

@OgDev-01 OgDev-01 commented Jun 9, 2023

What type of PR is this? (check all applicable)

  • 🍕 Feature
  • 🐛 Bug Fix
  • 📝 Documentation Update
  • 🎨 Style
  • 🧑‍💻 Code Refactor
  • 🔥 Performance Improvements
  • ✅ Test
  • 🤖 Build
  • 🔁 CI
  • 📦 Chore (Release)
  • ⏩ Revert

Description

This PR updates the social card design

Related Tickets & Documents

closes #44

Mobile & Desktop Screenshots/Recordings

Insights Page

image image

Users

image image

Highlights

image image

Added tests?

  • 👍 yes
  • 🙅 no, because they aren't needed
  • 🙋 no, because I need help

Added to documentation?

  • 📜 README.md
  • 📓 docs.opensauced.pizza
  • 🍕 dev.to/opensauced
  • 📕 storybook
  • 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

@OgDev-01 OgDev-01 changed the title enhancement: update social card design refactor: update social card design Jun 9, 2023
brandonroberts
brandonroberts requested changes Jun 9, 2023
View reviewed changes
src/social-card/templates/insight-card.template.ts
</h1>
<p tw="font-medium text-48px tracking-tight"> ${pageName}: Insights </p>
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think we need : Insights here if its in the header above

Suggested change
<p tw="font-medium text-48px tracking-tight"> ${pageName}: Insights </p>
<p tw="font-medium text-48px tracking-tight"> ${pageName} </p>

@brandonroberts
Copy link
Contributor

We should remove the padding in between languages also to keep consistent with GitHub PR images

image

@bdougie
Copy link
Member

bdougie commented Jun 9, 2023

I'm thinking we might want to add the copy or previews text

@isabensusan
Copy link
Member

I think it'd look better if we used bold titles instead of semi-bold, and grey for the subtitles (see screenshot), just to ensure a clear content hierarchy, but honestly it's a small detail and it still looks good the way it is right now.

image

bdougie
bdougie requested changes Jun 14, 2023
View reviewed changes
Copy link
Member

@bdougie bdougie left a comment

Choose a reason for hiding this comment

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

I know it didn't make the design, but can we add the highlight copy back to the card (in grey). This was pretty useful and as long as we truncate the characters shown to 300, it should work.

@brandonroberts
Copy link
Contributor

@OgDev-01 can we get this pushed through soon?

@OgDev-01
Copy link
Contributor Author

a quick question @bdougie, are we replacing the username with the highlights copy or adding the copy below the username on the highlights card?

@bdougie
Copy link
Member

bdougie commented Jun 20, 2023

a quick question @bdougie, are we replacing the username with the highlights copy or adding the copy below the username on the highlights card?

Replace the user name.

@OgDev-01
Copy link
Contributor Author

Updated copy
image

cc: @bdougie @brandonroberts

jpmcb
jpmcb approved these changes Jun 20, 2023
View reviewed changes
Copy link
Member

@jpmcb jpmcb left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Very nice!! 👏🏼 🔥

jpmcb

I wonder what's going on with the bottom right of my card. Almost looks like the small green gets cut off early before it curves back up?

@brandonroberts brandonroberts merged commit 6a46be1 into beta Jun 22, 2023
5 checks passed
@brandonroberts brandonroberts deleted the 44-social-card-sedign-updates branch June 22, 2023 17:01
github-actions bot pushed a commit that referenced this pull request Jun 22, 2023
@OgDev-01 @open-sauced
chore(patch): release 2.2.1-beta.1 on beta channel [skip ci]
08463fb 
### [2.2.1-beta.1](v2.2.0...v2.2.1-beta.1) (2023-06-22)

### 🧑‍💻 Code Refactoring

* update social card design ([#52](#52)) ([6a46be1](6a46be1))
@github-actions
Copy link

🎉 This PR is included in version 2.2.1-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this pull request Jun 22, 2023
@brandonroberts
refactor: update social card design (#52) 6a46be1
93f2e51
github-actions bot pushed a commit that referenced this pull request Jul 12, 2023
@brandonroberts @open-sauced
chore(patch): release 2.2.1 [skip ci]
897b72b 
### [2.2.1](v2.2.0...v2.2.1) (2023-07-12)

### 🧑‍💻 Code Refactoring

* update social card design ([#52](#52)) ([6a46be1](6a46be1))
@github-actions
Copy link

🎉 This PR is included in version 2.2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brandonroberts brandonroberts brandonroberts approved these changes

@bdougie bdougie bdougie approved these changes

@jpmcb jpmcb jpmcb approved these changes

@isabensusan isabensusan Awaiting requested review from isabensusan

Assignees
No one assigned
Labels
released on @beta released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feature: Update Open Graph Social Card Designs
5 participants
@OgDev-01 @brandonroberts @bdougie @isabensusan @jpmcb