[MBL-952] Design System Demo Page (Dark Mode)

[scottkicks]

📲 What

Extending our current debug menu to include a System Design page.
This screen will essentially be a copy/past (styling-wise) of all views/components listed in our current design system.

Used our existing design system as a reference. This is very incomplete so I did my best to capture all existing components other than icons.

If there is anything missing you'd like to see added, call it out!

🤔 Why

This came about as we considered the best approach for implementing Dark Mode.

This approach lets us move the existing components from our app/design system to the demo page first. From there it should be easy to update any one component to SwiftUI, Dark Mode, etc.

🛠 How

Added a new page to DesignSystemViewController to our Beta Tools VC. New snapshots were added for this new row as well.

• Built programmatically with UIKit. Once we get going on rebuilding using SwiftUI, it should be easy enough to rebuild this page if we want to later.
• This page represents our existing app design. I tried to keep it separate from our current implementation.
  It will look like duplicated code for now but this way, we can make changes here (adding new colors, components, and designs) w/o impacting the rest of the app.

I added our current color scheme to Xcode.assets with temporary dark mode color versions. Once we have proper Dark Mode designs it'll be easy to update and test these.

Focusing on colors for now since fonts will be much more complex and include dynamic view sizing.

👀 See

✅ Acceptance criteria

Make sure to remove the "Appearance" override in the info.plist. Otherwise, you won't see the dark mode color change.

• All components used currently in the app are represented on this new page and conform to existing stylings/colors. This should be a 1:1 copy-paste.
• Each component in this view should adapt to the device's dark mode settings.

⏰ TODO

• Add current dark mode colors. These are still technically in a Draft state, but they'll be a good place to start so let's get those with this if possible.

[codecov]

Codecov Report

Merging #1849 (dfaea23) into main (9d9566b) will decrease coverage by 0.54%.
The diff coverage is 1.72%.

@@            Coverage Diff             @@
##             main    #1849      +/-   ##
==========================================
- Coverage   84.59%   84.06%   -0.54%     
==========================================
  Files        1276     1280       +4     
  Lines      116017   116769     +752     
  Branches    30888    31019     +131     
==========================================
+ Hits        98149    98162      +13     
- Misses      16786    17525     +739     
  Partials     1082     1082              

Files Changed	Coverage Δ
...tures/DesignSystem/Colors/DesignSystemColors.swift	0.00% <0.00%> (ø)
...System/Controller/DesignSystemViewController.swift	0.00% <0.00%> (ø)
...ures/DesignSystem/Views/DemoCTAContainerView.swift	0.00% <0.00%> (ø)
...es/DesignSystem/Views/DemoShimmerLoadingView.swift	0.00% <0.00%> (ø)
...BetaTools/Controller/BetaToolsViewController.swift	39.51% <28.57%> (-0.32%)	⬇️
Library/ViewModels/BetaToolsViewModel.swift	76.14% <66.66%> (+0.18%)	⬆️
Library/ViewModels/BetaToolsViewModelTests.swift	100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[scottkicks]

I'm thinking of adding in all of the colors that we got from design that includes new light and dark mode colors and organizing them similarly to how Android has done it here.

Keeping the existing colors and naming, but setting ourselves up to easily apply the newer ones.

[ifosli]

I think we should add icons - I definitely think the kickstarter logo needs to be represented here (both because it feels important and because I didn't see anything else with that color). The logo is an icon, so if we're adding that, we might as well add one of our gray icons as well. Icons are just a UIImage with the tint color set. I'm not sure where we store these image assets but I'd be happy to help you look into it if you'd like. Apart from that, I like the variety of components!

[msadoon]

Great effort, some improvements can be made here.
I think it's still very demo'able.
I would say - if I did this, I wouldn't depend too much on a storyboard and purely have the in-app components in a programmatic SystemDesignViewController.
High level that would be copy paste the in-app component in the SystemDesignViewController without any layers in between. That kind of simplifies things in terms of updating the components later.
Feel free to reach out and discuss specifics/or if I can provide any clarity - let me know!

[msadoon]

Reading your comments here @scottkicks I'll leave this with you. Try to make sure the colours are as accurate as possible with the system design doc or the existing colours in-app. (You may already be doing this, just thought I'd point it out.)

[scottkicks]

I think we should add icons

@ifosli added a few icons :)