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

fix dark mode gradient #2412

Merged
merged 2 commits into from
Apr 8, 2024
Merged

fix dark mode gradient #2412

merged 2 commits into from
Apr 8, 2024

Conversation

pvicensSpacedev
Copy link
Collaborator

Summary of Changes

Fixed gradient for long mobile posts

Demo or Before/After Pics

Screenshot 2024-04-08 at 17 04 21

Edge Cases

List any common edge cases that you have considered and tested.

Testing Steps

Provide steps on how the reviewer can test the changes.

Checklist

Please make sure to review and check all of the following:

  • I've tested the changes and all tests pass.
  • (if web) I've tested the changes on various desktop screen sizes to ensure responsiveness.
  • (if mobile) I've tested the changes on both light and dark modes.

Copy link

vercel bot commented Apr 8, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
gallery ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 8, 2024 8:33pm

@github-actions github-actions bot added the mobile label Apr 8, 2024
Copy link

github-actions bot commented Apr 8, 2024

Bundle Sizes

Compared against cc0f4c0

Route: No significant changes found

Dynamic import: No significant changes found

@@ -50,14 +53,15 @@ export function PostListCaption({ feedPostRef }: Props) {
}, []);

const shouldShowGradient = textHeight > 0 && !isExpanded;
const gradientColors = colorScheme === 'dark' ? ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 1)'] : ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)'];
Copy link
Contributor

Choose a reason for hiding this comment

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

could we put this in a useMemo? arrays and objects in JS will be recomputed in react unless memoized

better yet could we do something like this:

// mobile/src/hooks/useGradientColorScheme.ts
export function useGradientColorScheme() {
  const { colorScheme } = useColorScheme();
  return useMemo(() => colorScheme === 'dark' ? ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 1)'] : ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)'], [colorScheme])
}

@Robinnnnn Robinnnnn merged commit fe289b5 into main Apr 8, 2024
9 checks passed
@Robinnnnn Robinnnnn deleted the pato/fix-dark-mode-gradient branch April 8, 2024 20:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants