feat: adds theming to support multiple instances of the platform #1242

thisislawatts · 2021-10-09T12:46:47Z

PR Checklist

- Latest master branch merged
- PR title descriptive (can be used in release notes)

PR Type

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Description

Eventually the community-platform service will be installed as multiple instances to help grow communities around fixing fashion and sustainable living. This PR represents a step towards that goal by moving the styling out of individual components to a higher level abstraction represented by the type PlatformTheme.

Adds a theme switcher to the DevSiteHeader component, which is mainly for demo purposes to demonstrate how the site can be themed for different instances.

For the reviewer:

😬 Sorry for the many files being changed in this PR, a lot of this is small and repetitive changes so that components fetch their style from the Theme store rather than a hardcoded style file.

Screenshots/Videos

cypress · 2021-10-09T13:16:54Z

Test summary

26 • 30 • 0 • 14 • 1

Run details


Project	onearmy-community-platform
Status	Failed
Commit	`045d719`
Started	Dec 8, 2021 5:28 PM
Ended	Dec 8, 2021 5:37 PM
Duration	09:18 💡
OS	Linux Ubuntu - 20.04
Browser	Multiple

View run in Cypress Dashboard ➡️

Failures

Run group: 2x-chrome (Linux, Chrome )
	settings.spec.ts	1
1	[Settings] > [Focus Workplace] > [Editing a new Profile]
	howto/write.spec.ts	4
1	[How To] > [Create a how-to] > [By Authenticated]
2	[How To] > [Create a how-to] > [Warning on leaving page]
3	[How To] > [Edit a how-to] > [By Authenticated]
4	[How To] > [Edit a how-to] > [By Owner]
	howto/read.spec.ts	5
1	[How To] > [List how-tos] > [By Everyone]
2	[How To] > [List how-tos] > [By Authenticated]
3	[How To] > [Filter with Tag] > [By Everyone]
4	[How To] > [Read a How-to] > [By Authenticated}
5	[How To] > [Read a How-to] > [By Owner]
This comment includes only the first 10 test failures. See all 15 failures in the Cypress Dashboard.
Run group: 2x-firefox (Linux, Firefox )
	settings.spec.ts	1
1	[Settings] > [Focus Workplace] > [Editing a new Profile]
	howto/write.spec.ts	4
1	[How To] > [Create a how-to] > [By Authenticated]
2	[How To] > [Create a how-to] > [Warning on leaving page]
3	[How To] > [Edit a how-to] > [By Authenticated]
4	[How To] > [Edit a how-to] > [By Owner]
	howto/read.spec.ts	5
1	[How To] > [List how-tos] > [By Everyone]
2	[How To] > [List how-tos] > [By Authenticated]
3	[How To] > [Filter with Tag] > [By Everyone]
4	[How To] > [Read a How-to] > [By Authenticated}
5	[How To] > [Read a How-to] > [By Owner]
This comment includes only the first 10 test failures. See all 15 failures in the Cypress Dashboard.

Flakiness

	src/integration/sign-up.spec.ts		1
1	[Sign-up - new user] > sign in as new user

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

thisislawatts · 2021-10-10T13:05:23Z

src/App.tsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'


Lift primary application out of src/index into a standalone App so it can be wrapped in MobX observer method to ensure all children can be correctly re-rendered by MobX state changes.

thisislawatts · 2021-10-10T13:06:27Z

package.json

@@ -50,7 +50,6 @@
  "resolutions": {
    "__NOTE__": "2021-05-28 storybook clash: https://github.com/storybookjs/storybook/issues/6505",
    "webpack": "4.44.2",
-    "styled-components": "^4",


question Not sure what/why with this line item; removing unless someone says no…

I think that might have been related to storybook back when all package installs were hoisted to top-level, but as we now have nmHoistingLimits: workspaces I expect fine to remove

thisislawatts · 2021-10-10T13:10:31Z

src/components/Avatar/index.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react'

-import { Image, ImageProps } from 'rebass'
+import { Image, ImageProps } from 'rebass/styled-components'


suggestion: We have a mixture of styled-components and vanilla Rebass components which use: https://emotion.sh/

Rebass does allow you to specifically use styled-component compatible variants, so we are switching everywhere to use those instead. https://rebassjs.org/guides/styled-components

We can easily reverse this decision and switch towards Emotion dropping Styled Components but this needs to be consistent!

I remember at one time the lead frontend (Benj) had wanted to move to emotion, but as we had only just moved from material -> styled components seemed like one step too far. Would definitely be outside scope of the PR to make a switch so seems like a sensible option until such a time if we did decide (npm trends still has styled-components way more popular but I have no strong opinion on the matter otherwise)

davehakkens · 2021-10-13T22:00:33Z

wauw just saw this. Super nice! Good step towards replicating 💪

github-actions · 2021-10-15T19:47:54Z

Visit the preview URL for this PR (updated for commit 258d3d4):

https://onearmy-next--pr1242-feat-adds-support-fo-t7edcyll.web.app

_{(expires Mon, 20 Dec 2021 15:19:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

davehakkens · 2021-10-16T16:36:24Z

noticed a few missing things.

The map module displays both the mobile and Desktop menu.

Most buttons are still yellow on :hover for instance here the "create an event"

When signing up the input fields have a grey background. However when you select another theme they loose their background color (this might happen on other places as well) Below you can see original with PP theme. If you select FF theme they loose background color

thisislawatts · 2021-10-18T16:11:06Z

Thanks for taking a look around @davehakkens

Mobile vs Desktop menu. Will take a look. This was intermittment and I haven't yet been able to recreate locally. I will redeploy to staging and see how it looks.
Good catch, the :hover state for buttons with the new temporary themes hadn't changed :) Updated now to a dark red to demonstrate for Fixing Fashion.
The input backgrounds are currently coming from the theme's background definition, which for Precious Plastic is grey. Fixing Fashion instead used a flat white background, I've changed it in the attached screen grab to be magenta and better demonstrate the behaviour. Depending on what we decided the Fixing Fashion theme should be, we can decouple these items. If we kept the background as the grey then it would also not be an issue.

davehakkens · 2021-10-20T09:29:52Z

You know you can use this url to test live? https://onearmy-next--pr1242-feat-adds-support-fo-ohyps25w.web.app
nicee
Got it. Could see it causing some conflict in the future if its connected to the background color. Decoupling makes sense. That said, for us now we could also easily keep the background consistent for ourselves.

thisislawatts · 2021-11-20T15:14:16Z

@davehakkens Updated to add a variant for use on Project Kamp ✨

chrismclarke · 2021-12-09T05:03:36Z

src/assets/images/themes/unbranded/logo.svg

@@ -0,0 +1 @@
+<svg width="160" height="149" xmlns="http://www.w3.org/2000/svg"><g stroke="#F82F03" stroke-width="14.12" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></g></svg>


Really like idea of having an unbranded theme! Although definitely voting unbranded => wacky design a la 00s myspace

chrismclarke · 2021-12-09T05:05:59Z

src/components/DevSiteHeader/DevSiteHeader.tsx

 // we have 2 different dev sites, only show this component when on one and provide select
 const devSites = [
-  { value: 'localhost', label: 'Dev' },
+  { value: 'dev_site', label: 'Development' },


Thanks for fixing this, was wondering why I hadn't seen it recently :S

chrismclarke · 2021-12-09T05:26:03Z

src/pages/Howto/Content/HowtoList/HowToCard.tsx

@@ -71,4 +73,14 @@ export const HowToCard = (props: IProps) => (
  </Flex>
 )

+function formatCountryToISOCode(str) {
+  if (str === 'united kingdom') return 'gb'


Is this to fix the issues seen in dev console or related to #1211?
In either way I don't seem harm in it, but am confused as to why there is such a short/explicit list of countries?

chrismclarke · 2021-12-09T05:27:18Z

src/pages/Research/Content/Common/Research.form.tsx

@@ -51,7 +51,7 @@ const beforeUnload = function(e) {
 }

 const ResearchForm = observer((props: IProps) => {
-  const store = useResearchStore()
+  const researchStore = useResearchStore()


nice to be clear, thanks for this!

chrismclarke

Thanks for the huge amount of work that's gone into this, I can see how extracting as much of the hardcoded styles/text as you have really goes a long way to making the site re-usable for other sites.

A couple specific points of feedback:

Having to inject the themeProvider into every component feels a bit awkward, particularly when there's added boilerplate of having to define injected props or pass via commonStores. I know this is the pattern already inherited from the mobx setup, but I'm wondering if there might be more elegant solutions possible using either a useContext hook or better yet a custom modified/adapted useTheme hook like in some of the examples here: https://styled-components.com/docs/advanced

I wouldn't go as far as to say it's worth refactoring anything at this stage, but might be worth testing so we can provide as an option for new components moving forward.

Each of the current themes are pretty large in size, but contain mostly identical information. I'm expect this is mostly for the purpose of getting things to work quickly now and that they'll want freedom to diverge more in the future, but equally I think there's probably a lot of 'core' theming that's unlikely to change much and might worth separating out (e.g. spacing, font sizes etc.). Better yet splitting the theme across layout, typography, colors etc. might be useful. In either case I'd probably recommend we come up with a system that allows one theme to inherit from another (e.g. the core unbranded), and making changes on top instead of writing from scratch.

This again I'd recommend as a future task, as what's there currently is still really nice to have and a good base to work from.

Given that this PR touches pretty much every component in the codebase and we have no form of automated visual regression testing, I'd strongly suggest/request we have a deep manual review like you've already started @davehakkens - aware that really we want to test everything (from main pages, hovering stuff, clicking buttons, seeing popups while uploading a howto etc.).

Otherwise from the code side I'm happy to approve, overall the changes are a really nice addition to have and unlock a lot of exciting things for the future!!! Thanks again!

Looking forward to getting this merged once we get design sign-off from @davehakkens and can get the tests to pass

chrismclarke · 2021-12-09T06:08:12Z

As for the tests - I've just checked out and tried running locally. There's quite a lot of issues with some of the props inheritance (trying to use auxilary text type but typography is undefined and unable to access theme.typography.auxiliary) and mobx also unhappy about some of the nested structures (possibly related to https://github.com/styled-components/styled-components/issues/3117)

I think this is gonna take a deeper dive to untangle than I have time for right now, so I'll wait to hear back from @thisislawatts in case any of this is resolved in #1300 and if not we can perhaps troubleshoot on slack if useful

thisislawatts · 2021-12-09T06:38:49Z

Closing in favour of #1300, leaving this branch hanging around for a little longer for reference.

thisislawatts changed the title ~~wip: baby wake up brain drump~~ wip: themeable instances Oct 9, 2021

github-actions bot added Mod: Events 🎉 Mod: HowTo 📰 labels Oct 9, 2021

thisislawatts self-assigned this Oct 9, 2021

github-actions bot added Mod: Maps 🗺 Mod: Research 🔬 labels Oct 9, 2021

thisislawatts commented Oct 10, 2021

View reviewed changes

thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch from 0f11f53 to 93a8daa Compare October 10, 2021 14:13

thisislawatts changed the title ~~wip: themeable instances~~ feat: adds theming to power multiple instances Oct 14, 2021

thisislawatts changed the title ~~feat: adds theming to power multiple instances~~ feat: adds theming to support multiple instances of the platform Oct 14, 2021

thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch 2 times, most recently from 14183cf to 579afb0 Compare October 14, 2021 19:52

thisislawatts marked this pull request as ready for review October 14, 2021 19:52

thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch from ab4f643 to 2c4a9dc Compare October 15, 2021 15:51

thisislawatts added the Review allow-preview ✅ Has received manual check for malicious code and can be safely built for preview label Oct 15, 2021

thisislawatts requested review from chrismclarke and davehakkens October 15, 2021 19:42

thisislawatts mentioned this pull request Oct 24, 2021

feat: adds global one army footer #1249

Merged

5 tasks

thisislawatts added 3 commits December 7, 2021 18:56

feat: bump styled-components to latest version

45cbb82

feat: adds theme store and Precious Plastic theme

4c0cfae

feat: swith components to load from theme

163f67d

thisislawatts added 5 commits December 7, 2021 19:07

feat: adds example theme for Fixing Fashion and Unbranded variant

a5f1e78

fix: address type issue

c89c2f6

fix: type importing

f070728

fix: correct :hover colour for buttons

0e0d6ee

feat: add project Kamp theme

920dd3b

thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch from 258d3d4 to 920dd3b Compare December 7, 2021 18:09

thisislawatts added 2 commits December 8, 2021 18:17

fix: ref to theme

95ba43e

chore: remove unused

045d719

chrismclarke reviewed Dec 9, 2021

View reviewed changes

chrismclarke approved these changes Dec 9, 2021

View reviewed changes

chrismclarke self-requested a review December 9, 2021 06:08

thisislawatts closed this Dec 9, 2021

mariojsnunes deleted the feat/adds-support-for-multiple-themes branch July 1, 2024 06:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: adds theming to support multiple instances of the platform #1242

feat: adds theming to support multiple instances of the platform #1242

thisislawatts commented Oct 9, 2021 •

edited

Loading

cypress bot commented Oct 9, 2021 •

edited

Loading

thisislawatts Oct 10, 2021

thisislawatts Oct 10, 2021

chrismclarke Dec 9, 2021

thisislawatts Oct 10, 2021 •

edited

Loading

chrismclarke Dec 9, 2021

davehakkens commented Oct 13, 2021

github-actions bot commented Oct 15, 2021 •

edited

Loading

davehakkens commented Oct 16, 2021

thisislawatts commented Oct 18, 2021 •

edited

Loading

davehakkens commented Oct 20, 2021

thisislawatts commented Nov 20, 2021 •

edited

Loading

chrismclarke Dec 9, 2021

chrismclarke Dec 9, 2021

chrismclarke Dec 9, 2021

chrismclarke Dec 9, 2021

chrismclarke left a comment •

edited

Loading

chrismclarke commented Dec 9, 2021 •

edited

Loading

thisislawatts commented Dec 9, 2021

		@@ -0,0 +1 @@
		<svg width="160" height="149" xmlns="http://www.w3.org/2000/svg"><g stroke="#F82F03" stroke-width="14.12" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></g></svg>

feat: adds theming to support multiple instances of the platform #1242

feat: adds theming to support multiple instances of the platform #1242

Conversation

thisislawatts commented Oct 9, 2021 • edited Loading

Description

Screenshots/Videos

cypress bot commented Oct 9, 2021 • edited Loading

Test summary

Run details

Failures

Flakiness

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisislawatts Oct 10, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davehakkens commented Oct 13, 2021

github-actions bot commented Oct 15, 2021 • edited Loading

davehakkens commented Oct 16, 2021

thisislawatts commented Oct 18, 2021 • edited Loading

davehakkens commented Oct 20, 2021

thisislawatts commented Nov 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrismclarke left a comment • edited Loading

Choose a reason for hiding this comment

chrismclarke commented Dec 9, 2021 • edited Loading

thisislawatts commented Dec 9, 2021

thisislawatts commented Oct 9, 2021 •

edited

Loading

cypress bot commented Oct 9, 2021 •

edited

Loading

thisislawatts Oct 10, 2021 •

edited

Loading

github-actions bot commented Oct 15, 2021 •

edited

Loading

thisislawatts commented Oct 18, 2021 •

edited

Loading

thisislawatts commented Nov 20, 2021 •

edited

Loading

chrismclarke left a comment •

edited

Loading

chrismclarke commented Dec 9, 2021 •

edited

Loading