Revert "feat: add dark mode (#2322)" (#2339)

This reverts commit d751fc6.
ipfs · Feb 27, 2025 · a85bdc2 · a85bdc2
1 parent 830a30d
commit a85bdc2
Show file tree

Hide file tree

Showing 18 changed files with 92 additions and 411 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -9,27 +9,24 @@ import getStore from '../src/bundles/index.js'
 import i18n from '../src/i18n.js'
 import DndBackend from '../src/lib/dnd-backend.js'
 import { HeliaProvider, ExploreProvider } from 'ipld-explorer-components/providers'
-import { ThemeProvider } from '../src/context/theme-provider.tsx'
 
 /**
  * @type {import('@storybook/addons').BaseAnnotations}
  */
 const baseAnnotations = {
   decorators: [
     (Story) => (
-      <ThemeProvider>
-        <Provider store={getStore(undefined)}>
-          <I18nextProvider i18n={i18n} >
-            <DndProvider backend={DndBackend}>
-              <HeliaProvider>
-                <ExploreProvider>
-                  <Story />
-                </ExploreProvider>
-              </HeliaProvider>
-            </DndProvider>
-          </I18nextProvider>
-        </Provider>
-      </ThemeProvider>
+      <Provider store={getStore(undefined)}>
+        <I18nextProvider i18n={i18n} >
+          <DndProvider backend={DndBackend}>
+            <HeliaProvider>
+              <ExploreProvider>
+                <Story />
+              </ExploreProvider>
+            </HeliaProvider>
+          </DndProvider>
+        </I18nextProvider>
+      </Provider>
     )
   ],
   /**

diff --git a/src/App.js b/src/App.js
@@ -18,8 +18,6 @@ import Notify from './components/notify/Notify.js'
 import Connected from './components/connected/Connected.js'
 import TourHelper from './components/tour/TourHelper.js'
 import FilesExploreForm from './files/explore-form/files-explore-form.tsx'
-import { ThemeProvider, ThemeContext } from './context/theme-provider.tsx'
-import { ThemeToggle } from './components/theme-toggle/toggle.tsx'
 
 export class App extends Component {
   static propTypes = {
@@ -34,8 +32,6 @@ export class App extends Component {
     isOver: PropTypes.bool.isRequired
   }
 
-  static contextType = ThemeContext
-
   constructor (props) {
     super(props)
     props.doSetupLocalStorage()
@@ -67,49 +63,44 @@ export class App extends Component {
   render () {
     const { t, route: Page, ipfsReady, doFilesNavigateTo, routeInfo: { url }, connectDropTarget, canDrop, isOver, showTooltip } = this.props
     return connectDropTarget(
-      <div>
-        <ThemeProvider>
-          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-          <div className='sans-serif h-100 relative' onClick={getNavHelper(this.props.doUpdateUrl)}>
-            {/* Tinted overlay that appears when dragging and dropping an item */}
-            { canDrop && isOver && <div className='h-100 top-0 right-0 fixed appOverlay' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
-            <div className='flex flex-row-reverse-l flex-column-reverse justify-end justify-start-l' style={{ minHeight: '100vh' }}>
-              <div className='flex-auto-l'>
-                <div className='flex items-center ph3 ph4-l webui-header' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
-                  <div className='joyride-app-explore' style={{ width: 560 }}>
-                    <FilesExploreForm onBrowse={doFilesNavigateTo} />
-                  </div>
-                  <div className='dn flex-ns flex-auto items-center justify-end'>
-                    <TourHelper />
-                    <Connected className='joyride-app-status' />
-                    <div className='pa3'>
-                      <ThemeToggle />
-                    </div>
-                  </div>
-                </div>
-                <main className='bg-white pv3 pa3 pa4-l'>
-                  { (ipfsReady || url === '/welcome' || url.startsWith('/settings'))
-                    ? <Page />
-                    : <ComponentLoader />
-                  }
-                </main>
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      <div className='sans-serif h-100 relative' onClick={getNavHelper(this.props.doUpdateUrl)}>
+        {/* Tinted overlay that appears when dragging and dropping an item */}
+        { canDrop && isOver && <div className='h-100 top-0 right-0 fixed appOverlay' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
+        <div className='flex flex-row-reverse-l flex-column-reverse justify-end justify-start-l' style={{ minHeight: '100vh' }}>
+          <div className='flex-auto-l'>
+            <div className='flex items-center ph3 ph4-l' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
+              <div className='joyride-app-explore' style={{ width: 560 }}>
+                <FilesExploreForm onBrowse={doFilesNavigateTo} />
               </div>
-              <div className='navbar-container flex-none-l bg-navy'>
-                <NavBar />
+              <div className='dn flex-ns flex-auto items-center justify-end'>
+                <TourHelper />
+                <Connected className='joyride-app-status' />
               </div>
             </div>
-            <ReactJoyride
-              run={showTooltip}
-              steps={appTour.getSteps({ t })}
-              styles={appTour.styles}
-              callback={this.handleJoyrideCb}
-              scrollToFirstStep
-              disableOverlay
-              locale={getJoyrideLocales(t)}
-            />
-            <Notify />
+            <main className='bg-white pv3 pa3 pa4-l'>
+              { (ipfsReady || url === '/welcome' || url.startsWith('/settings'))
+                ? <Page />
+                : <ComponentLoader />
+              }
+            </main>
+          </div>
+          <div className='navbar-container flex-none-l bg-navy'>
+            <NavBar />
           </div>
-        </ThemeProvider>
+        </div>
+
+        <ReactJoyride
+          run={showTooltip}
+          steps={appTour.getSteps({ t })}
+          styles={appTour.styles}
+          callback={this.handleJoyrideCb}
+          scrollToFirstStep
+          disableOverlay
+          locale={getJoyrideLocales(t)}
+        />
+
+        <Notify />
       </div>
     )
   }

diff --git a/src/components/api-address-form/ApiAddressForm.js b/src/components/api-address-form/ApiAddressForm.js
@@ -3,14 +3,12 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 import Button from '../button/button.tsx'
 import { checkValidAPIAddress } from '../../bundles/ipfs-provider.js'
-import { useTheme } from '../../hooks/theme'
 
 const ApiAddressForm = ({ t, doUpdateIpfsApiAddress, ipfsApiAddress, ipfsInitFailed }) => {
   const [value, setValue] = useState(asAPIString(ipfsApiAddress))
   const initialIsValidApiAddress = !checkValidAPIAddress(value)
   const [showFailState, setShowFailState] = useState(initialIsValidApiAddress || ipfsInitFailed)
   const [isValidApiAddress, setIsValidApiAddress] = useState(initialIsValidApiAddress)
-  const { isDarkTheme } = useTheme()
 
   // Updates the border of the input to indicate validity
   useEffect(() => {
@@ -48,14 +46,12 @@ const ApiAddressForm = ({ t, doUpdateIpfsApiAddress, ipfsApiAddress, ipfsInitFai
         onChange={onChange}
         onKeyPress={onKeyPress}
         value={value}
-        style={{ background: isDarkTheme ? 'var(--filter-peers-dark)' : '', border: isDarkTheme ? '0.4px solid var(--border-color)' : '' }}
       />
       <div className='tr'>
         <Button
           minWidth={100}
           height={40}
           className='mt2 mt0-l ml2-l tc'
-          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={!isValidApiAddress || value === ipfsApiAddress}>
           {t('actions.submit')}
         </Button>

diff --git a/src/components/box/Box.js b/src/components/box/Box.js
@@ -1,17 +1,14 @@
 import React from 'react'
-import { useTheme } from '../../hooks/theme'
 import ErrorBoundary from '../error/ErrorBoundary.js'
 
 export const Box = ({
   className = 'pa4',
   style,
-  themed,
   children,
   ...props
 }) => {
-  const { isDarkTheme } = useTheme()
   return (
-    <section className={className} style={{ background: isDarkTheme ? 'var(--element-bg)' : 'var(--element-bg-light)', ...style }}>
+    <section className={className} style={{ background: '#fbfbfb', ...style }}>
       <ErrorBoundary>
         {children}
       </ErrorBoundary>

diff --git a/src/components/public-gateway-form/PublicGatewayForm.js b/src/components/public-gateway-form/PublicGatewayForm.js
@@ -3,14 +3,13 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 import Button from '../button/button.tsx'
 import { checkValidHttpUrl, checkViaImgSrc, DEFAULT_PATH_GATEWAY } from '../../bundles/gateway.js'
-import { useTheme } from '../../hooks/theme'
 
 const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
   const [value, setValue] = useState(publicGateway)
   const initialIsValidGatewayUrl = !checkValidHttpUrl(value)
   const [showFailState, setShowFailState] = useState(initialIsValidGatewayUrl)
   const [isValidGatewayUrl, setIsValidGatewayUrl] = useState(initialIsValidGatewayUrl)
-  const { isDarkTheme } = useTheme()
+
   // Updates the border of the input to indicate validity
   useEffect(() => {
     setShowFailState(!isValidGatewayUrl)
@@ -61,7 +60,6 @@ const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
         onChange={onChange}
         onKeyPress={onKeyPress}
         value={value}
-        style={{ background: isDarkTheme ? 'var(--filter-peers-dark)' : '', border: isDarkTheme ? '0.4px solid var(--border-color)' : '' }}
       />
       <div className='tr'>
         <Button
@@ -70,7 +68,6 @@ const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
           height={40}
           bg='bg-charcoal'
           className='tc'
-          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={value === DEFAULT_PATH_GATEWAY}
           onClick={onReset}>
           {t('app:actions.reset')}
@@ -80,7 +77,6 @@ const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
           minWidth={100}
           height={40}
           className='mt2 mt0-l ml2-l tc'
-          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={!isValidGatewayUrl || value === publicGateway}>
           {t('actions.submit')}
         </Button>

diff --git a/src/components/public-subdomain-gateway-form/PublicSubdomainGatewayForm.js b/src/components/public-subdomain-gateway-form/PublicSubdomainGatewayForm.js
@@ -3,13 +3,11 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 import Button from '../button/button.tsx'
 import { checkValidHttpUrl, checkSubdomainGateway, DEFAULT_SUBDOMAIN_GATEWAY } from '../../bundles/gateway.js'
-import { useTheme } from '../../hooks/theme'
 
 const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicSubdomainGateway }) => {
   const [value, setValue] = useState(publicSubdomainGateway)
   const initialIsValidGatewayUrl = !checkValidHttpUrl(value)
   const [isValidGatewayUrl, setIsValidGatewayUrl] = useState(initialIsValidGatewayUrl)
-  const { isDarkTheme } = useTheme()
 
   // Updates the border of the input to indicate validity
   useEffect(() => {
@@ -66,7 +64,6 @@ const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicS
         onChange={onChange}
         onKeyPress={onKeyPress}
         value={value}
-        style={{ background: isDarkTheme ? 'var(--filter-peers-dark)' : '', border: isDarkTheme ? '0.4px solid var(--border-color)' : '' }}
       />
       <div className='tr'>
         <Button
@@ -75,7 +72,6 @@ const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicS
           height={40}
           bg='bg-charcoal'
           className='tc'
-          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={value === DEFAULT_SUBDOMAIN_GATEWAY}
           onClick={onReset}>
           {t('app:actions.reset')}
@@ -84,7 +80,6 @@ const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicS
           id='public-subdomain-gateway-submit-button'
           minWidth={100}
           height={40}
-          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           className='mt2 mt0-l ml2-l tc'
           disabled={!isValidGatewayUrl || value === publicSubdomainGateway}>
           {t('actions.submit')}

diff --git a/src/components/theme-toggle/theme-toggle.css b/src/components/theme-toggle/theme-toggle.css
diff --git a/src/components/theme-toggle/toggle.tsx b/src/components/theme-toggle/toggle.tsx