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

Update feature card text colours #12738

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update feature card text colours #12738

wants to merge 2 commits into from
+97 −49

Conversation

cemms1
Copy link
Contributor

@cemms1 cemms1 commented Nov 1, 2024 •
edited
Loading

What does this change?

Updates the text colours on the FeatureCard overlay by using an optional prop on each Card component to control overriding the default text colour

Also reduces the brightness of the overlay background to increase contrast between text and background for readability purposes

Why?

Allows customisation of colours in Card components to allow the FeatureCard to use these components whilst also overriding the colours used in them.

The other option here is to use ContainerOverrides, however we also want FeatureCard components to be used in containers that allow ContainerOverrides so supplying separate feature card colours is the safest way to allow both of these to exist simultaneously.

Resolves this Trello ticket

Screenshots

Before After
before after
before2 after2
before3 after3

@cemms1 cemms1 force-pushed the cemms1/feature-card-text-colour branch from 826ca16 to 4e62965 Compare November 1, 2024 14:49
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 1, 2024 •
edited
Loading

Deploy build 38653 of Mobile::mobile-apps-rendering to CODE

All deployment options

From guardian/actions-riff-raff.

@cemms1 cemms1 self-assigned this Nov 1, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 1, 2024 •
edited
Loading

Deploy build 14478 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 1, 2024 •
edited
Loading

Size Change: +83 B (+0.01%)

Total Size: 933 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1000.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/1014.client.web.********************.js 3.97 kB 0 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B 0 B
dotcom-rendering/dist/1347.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1451.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/1752.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1877.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/1919.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/1989.client.web.********************.js 4.01 kB 0 B
dotcom-rendering/dist/2145.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/2186.client.web.********************.js 6.17 kB 0 B
dotcom-rendering/dist/2291.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2565.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/2613.client.web.********************.js 530 B 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/27.client.web.********************.js 6.01 kB 0 B
dotcom-rendering/dist/2706.client.web.********************.js 3 kB 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/3109.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3136.client.web.********************.js 3.55 kB -12 B (-0.34%)
dotcom-rendering/dist/3215.client.web.********************.js 158 B 0 B
dotcom-rendering/dist/3265.client.web.********************.js 44.3 kB 0 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/3284.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/3386.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/3469.client.web.********************.js 11.4 kB 0 B
dotcom-rendering/dist/3601.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/3641.client.web.********************.js 12.3 kB -2 B (-0.02%)
dotcom-rendering/dist/3657.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/3707.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/3728.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/3746.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3778.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/3992.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/4100.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/4198.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/4228.client.web.********************.js 11 kB +34 B (+0.31%)
dotcom-rendering/dist/4258.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/4273.client.web.********************.js 3.02 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/442.client.web.********************.js 4.27 kB 0 B
dotcom-rendering/dist/4449.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/4456.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/504.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/5127.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/5129.client.web.********************.js 5.17 kB 0 B
dotcom-rendering/dist/5153.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/5336.client.web.********************.js 3.33 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5677.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/5713.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/5752.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/5766.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/5941.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/6012.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/6044.client.web.********************.js 726 B 0 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B 0 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/6325.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/6459.client.web.********************.js 20.2 kB 0 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6520.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/6554.client.web.********************.js 12.8 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/6612.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7170.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/7304.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/7547.client.web.********************.js 4.27 kB +7 B (+0.16%)
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/8148.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/8355.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/8359.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/8429.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/8504.client.web.********************.js 827 B 0 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8768.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/8776.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/8826.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/8891.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/8946.client.web.********************.js 5.3 kB 0 B
dotcom-rendering/dist/8975.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9138.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/9171.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9493.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/9631.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9812.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/9835.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.7 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.46 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.71 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.23 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.97 kB +6 B (+0.2%)
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 540 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.21 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 967 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.6 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.41 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 kB +2 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.25 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.78 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.26 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.97 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.22 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.19 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.33 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.29 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 4.77 kB +38 B (+0.8%)
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.08 kB +10 B (+0.2%)
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 793 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 483 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 732 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.61 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.79 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.24 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.26 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.05 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.99 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 6.3 kB 0 B

compressed-size-action

@cemms1 cemms1 force-pushed the cemms1/feature-card-text-colour branch from cea3c33 to aebe143 Compare November 1, 2024 15:52
@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@cemms1 cemms1 marked this pull request as ready for review November 1, 2024 15:53
@cemms1 cemms1 requested a review from a team as a code owner November 1, 2024 15:53
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@cemms1 cemms1 marked this pull request as draft November 1, 2024 16:02
@cemms1 cemms1 force-pushed the cemms1/feature-card-text-colour branch from aebe143 to 708b1cf Compare November 1, 2024 16:10
@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@cemms1 cemms1 marked this pull request as ready for review November 1, 2024 16:49
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 1, 2024

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

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

@jamesmockett jamesmockett Awaiting requested review from jamesmockett

@Georges-GNM Georges-GNM Awaiting requested review from Georges-GNM

At least 1 approving review is required to merge this pull request.

Assignees

@cemms1 cemms1

Labels
dotcom-rendering fairground
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@cemms1