Theme switcher in place

markrickert · markrickert · commit ce46a5792c78 · 2023-11-30T14:07:55.000-07:00
Started moving some of the hard-coded colors over to use the theming system.
diff --git a/src/components/common/Diff/Diff.js b/src/components/common/Diff/Diff.js
@@ -17,7 +17,7 @@ const copyPathPopoverContentOpts = {
 }
 
 const Container = styled.div`
-  border: 1px solid #e8e8e8;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 3px;
   margin-bottom: 16px;
   margin-top: 16px;
@@ -53,8 +53,8 @@ const DiffView = styled(RDiff)`
   }
 
   td.diff-gutter .diff-line-normal {
-    background-color: #cdffd8;
-    border-color: #bef5cb;
+    background-color: ${({ theme }) => theme.lightGreenBackground};
+    border-color: ${({ theme }) => theme.greenBorder};
   }
 
   td.diff-gutter:hover {
@@ -68,7 +68,7 @@ const DiffView = styled(RDiff)`
   }
 
   td.diff-code-insert .diff-code-edit {
-    background-color: #acf2bd;
+    background-color: ${({ theme }) => theme.darkGreenBackground};
   }
 
   td.diff-gutter-omit:before {
diff --git a/src/components/common/Diff/DiffLoading.js b/src/components/common/Diff/DiffLoading.js
@@ -34,7 +34,7 @@ const DiffLoader = () => (
 
 const Container = styled(motion.div)`
   margin-top: 16px;
-  border: 1px solid #e8e8e8;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 3px;
 `
 
diff --git a/src/components/common/Settings.js b/src/components/common/Settings.js
@@ -31,6 +31,8 @@ const Settings = ({
   packageName,
   language,
   onChangePackageNameAndLanguage,
+  themeName,
+  handleThemeToggle,
 }) => {
   const [popoverVisibility, setVisibility] = useState(false)
   const [newPackageName, setNewPackageName] = useState(packageName)
@@ -59,6 +61,8 @@ const Settings = ({
   const updateCheckboxValues = (checkboxValues) =>
     handleSettingsChange(checkboxValues)
 
+  const humanThemeName = themeName[0].toUpperCase() + themeName.substring(1)
+
   return (
     <Popover
       placement="bottomRight"
@@ -102,6 +106,10 @@ const Settings = ({
               </PackagesGroupContainer>
             </Radio.Group>
           </PlatformsContainer>
+          <h5>Theme:</h5>
+          <Button title={humanThemeName} onClick={handleThemeToggle}>
+            {humanThemeName}
+          </Button>
         </>
       }
       trigger="click"
diff --git a/src/components/common/TroubleshootingGuides.js b/src/components/common/TroubleshootingGuides.js
@@ -20,7 +20,7 @@ const Container = styled(motion.div)`
 
 const Content = styled(motion.div)`
   h4 {
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: 1px solid ${({ theme }) => theme.border};
     padding-bottom: 6px;
   }
 `
diff --git a/src/components/common/UsefulContentSection.js b/src/components/common/UsefulContentSection.js
@@ -27,7 +27,7 @@ const InnerContainer = styled.div`
   background-color: #fffbe6;
   border-width: 1px;
   border-left-width: 7px;
-  border-color: #ffe58f;
+  border-color: ${({ theme }) => theme.yellowBorder};
   border-style: solid;
   border-radius: 3px;
   transition: padding 0.25s ease-out;
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useDeferredValue } from 'react'
 import styled from '@emotion/styled'
+import { ThemeProvider } from '@emotion/react'
 import { Card, Input, Typography } from 'antd'
 import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
@@ -18,8 +19,10 @@ import {
 import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButton'
 import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
+import { lightTheme, darkTheme } from '../../theme'
 
 const Page = styled.div`
+  background-color: ${({ theme }) => theme.body};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30,7 +33,7 @@ const Page = styled.div`
 const Container = styled(Card)`
   width: 90%;
   border-radius: 3px;
-  border-color: #e8e8e8;
+  border-color: ${({ theme }) => theme.border};
 `
 
 const HeaderContainer = styled.div`
@@ -181,95 +184,108 @@ const Home = () => {
     setSettings(normalizedIncomingSettings)
   }
 
+  const [themeName, setThemeName] = useState('light')
+  const themeToggler = () => {
+    themeName === 'light' ? setThemeName('dark') : setThemeName('light')
+  }
+
   return (
-    <Page>
-      <Container>
-        <HeaderContainer>
-          <TitleContainer>
-            <LogoImg
-              alt="React Native Upgrade Helper logo"
-              title="React Native Upgrade Helper logo"
-              src={logo}
-            />
-            <a href={homepageUrl}>
-              <TitleHeader>React Native Upgrade Helper</TitleHeader>
-            </a>
-          </TitleContainer>
-
-          <SettingsContainer>
-            <StarButton
-              href="https://github.com/react-native-community/upgrade-helper"
-              data-icon="octicon-star"
-              data-show-count="true"
-              aria-label="Star react-native-community/upgrade-helper on GitHub"
-            >
-              Star
-            </StarButton>
-            {packageName === PACKAGE_NAMES.RN && (
-              <TroubleshootingGuidesButton />
-            )}
-            <Settings
-              handleSettingsChange={handleSettingsChange}
-              packageName={packageName}
-              onChangePackageNameAndLanguage={
-                handlePackageNameAndLanguageChange
-              }
-              language={language}
-            />
-          </SettingsContainer>
-        </HeaderContainer>
-
-        <AppDetailsContainer>
-          <AppNameField>
-            <Typography.Title level={5}>What's your app name?</Typography.Title>
-
-            <Input
-              size="large"
-              placeholder={DEFAULT_APP_NAME}
-              value={appName}
-              onChange={({ target }) => setAppName((value) => target.value)}
-            />
-          </AppNameField>
-
-          <AppPackageField>
-            <Typography.Title level={5}>
-              What's your app package?
-            </Typography.Title>
-
-            <Input
-              size="large"
-              placeholder={DEFAULT_APP_PACKAGE}
-              value={appPackage}
-              onChange={({ target }) => setAppPackage((value) => target.value)}
-            />
-          </AppPackageField>
-        </AppDetailsContainer>
-        <VersionSelector
-          key={packageName}
-          showDiff={handleShowDiff}
-          showReleaseCandidates={settings[SHOW_LATEST_RCS]}
-          packageName={packageName}
-          language={language}
-          isPackageNameDefinedInURL={isPackageNameDefinedInURL}
-        />
-      </Container>
-      {/*
+    <ThemeProvider theme={themeName === 'light' ? lightTheme : darkTheme}>
+      <Page>
+        <Container>
+          <HeaderContainer>
+            <TitleContainer>
+              <LogoImg
+                alt="React Native Upgrade Helper logo"
+                title="React Native Upgrade Helper logo"
+                src={logo}
+              />
+              <a href={homepageUrl}>
+                <TitleHeader>React Native Upgrade Helper</TitleHeader>
+              </a>
+            </TitleContainer>
+
+            <SettingsContainer>
+              <StarButton
+                href="https://github.com/react-native-community/upgrade-helper"
+                data-icon="octicon-star"
+                data-show-count="true"
+                aria-label="Star react-native-community/upgrade-helper on GitHub"
+              >
+                Star
+              </StarButton>
+              {packageName === PACKAGE_NAMES.RN && (
+                <TroubleshootingGuidesButton />
+              )}
+              <Settings
+                handleSettingsChange={handleSettingsChange}
+                packageName={packageName}
+                onChangePackageNameAndLanguage={
+                  handlePackageNameAndLanguageChange
+                }
+                language={language}
+                themeName={themeName}
+                handleThemeToggle={themeToggler}
+              />
+            </SettingsContainer>
+          </HeaderContainer>
+
+          <AppDetailsContainer>
+            <AppNameField>
+              <Typography.Title level={5}>
+                What's your app name?
+              </Typography.Title>
+
+              <Input
+                size="large"
+                placeholder={DEFAULT_APP_NAME}
+                value={appName}
+                onChange={({ target }) => setAppName((value) => target.value)}
+              />
+            </AppNameField>
+
+            <AppPackageField>
+              <Typography.Title level={5}>
+                What's your app package?
+              </Typography.Title>
+
+              <Input
+                size="large"
+                placeholder={DEFAULT_APP_PACKAGE}
+                value={appPackage}
+                onChange={({ target }) =>
+                  setAppPackage((value) => target.value)
+                }
+              />
+            </AppPackageField>
+          </AppDetailsContainer>
+          <VersionSelector
+            key={packageName}
+            showDiff={handleShowDiff}
+            showReleaseCandidates={settings[SHOW_LATEST_RCS]}
+            packageName={packageName}
+            language={language}
+            isPackageNameDefinedInURL={isPackageNameDefinedInURL}
+          />
+        </Container>
+        {/*
         Pass empty values for app name and package if they're the defaults to 
         hint to diffing components they don't need to further patch the 
         rn-diff-purge output.
       */}
-      <DiffViewer
-        shouldShowDiff={shouldShowDiff}
-        fromVersion={fromVersion}
-        toVersion={toVersion}
-        appName={deferredAppName !== DEFAULT_APP_NAME ? deferredAppName : ''}
-        appPackage={
-          deferredAppPackage !== DEFAULT_APP_PACKAGE ? deferredAppPackage : ''
-        }
-        packageName={packageName}
-        language={language}
-      />
-    </Page>
+        <DiffViewer
+          shouldShowDiff={shouldShowDiff}
+          fromVersion={fromVersion}
+          toVersion={toVersion}
+          appName={deferredAppName !== DEFAULT_APP_NAME ? deferredAppName : ''}
+          appPackage={
+            deferredAppPackage !== DEFAULT_APP_PACKAGE ? deferredAppPackage : ''
+          }
+          packageName={packageName}
+          language={language}
+        />
+      </Page>
+    </ThemeProvider>
   )
 }
 
diff --git a/src/theme/index.js b/src/theme/index.js
@@ -0,0 +1,22 @@
+export const lightTheme = {
+  body: '#FFF',
+  //   text: '#363537',
+  //   toggleBorder: '#FFF',
+  //   background: '#363537',
+  border: '#e8e8e8',
+  greenBorder: '#bef5cb',
+  yellowBorder: '#ffe58f',
+  lightGreenBackground: '#cdffd8',
+  darkGreenBackground: '#acf2bd',
+}
+export const darkTheme = {
+  body: '#363537',
+  //   text: '#FAFAFA',
+  //   toggleBorder: '#6B8096',
+  //   background: '#999',
+  border: '#e8e8e8',
+  greenBorder: '#bef5cb',
+  yellowBorder: '#ffe58f',
+  lightGreenBackground: '#cdffd8',
+  darkGreenBackground: '#acf2bd',
+}

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ const copyPathPopoverContentOpts = {`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	const Container = styled.div`
`20`		`- border: 1px solid #e8e8e8;`
	`20`	`+ border: 1px solid ${({ theme }) => theme.border};`
`21`	`21`	`border-radius: 3px;`
`22`	`22`	`margin-bottom: 16px;`
`23`	`23`	`margin-top: 16px;`
@@ -53,8 +53,8 @@ const DiffView = styled(RDiff)`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`td.diff-gutter .diff-line-normal {`
`56`		`- background-color: #cdffd8;`
`57`		`- border-color: #bef5cb;`
	`56`	`+ background-color: ${({ theme }) => theme.lightGreenBackground};`
	`57`	`+ border-color: ${({ theme }) => theme.greenBorder};`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`td.diff-gutter:hover {`
@@ -68,7 +68,7 @@ const DiffView = styled(RDiff)`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`td.diff-code-insert .diff-code-edit {`
`71`		`- background-color: #acf2bd;`
	`71`	`+ background-color: ${({ theme }) => theme.darkGreenBackground};`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`td.diff-gutter-omit:before {`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const DiffLoader = () => (`
`34`	`34`
`35`	`35`	const Container = styled(motion.div)`
`36`	`36`	`margin-top: 16px;`
`37`		`- border: 1px solid #e8e8e8;`
	`37`	`+ border: 1px solid ${({ theme }) => theme.border};`
`38`	`38`	`border-radius: 3px;`
`39`	`39`	`
`40`	`40`
Original file line number	Diff line number	Diff line change
@@ -20,7 +20,7 @@ const Container = styled(motion.div)`
`20`	`20`
`21`	`21`	const Content = styled(motion.div)`
`22`	`22`	`h4 {`
`23`		`- border-bottom: 1px solid #e8e8e8;`
	`23`	`+ border-bottom: 1px solid ${({ theme }) => theme.border};`
`24`	`24`	`padding-bottom: 6px;`
`25`	`25`	`}`
`26`	`26`	`