Dark Theme\nCloses (#1)

GeorgeV220 · Jun 27, 2022 · ac48903 · ac48903
1 parent 029f1f6
commit ac48903
Show file tree

Hide file tree

Showing 15 changed files with 140 additions and 30 deletions.
diff --git a/app/utils/config.ts b/app/utils/config.ts
@@ -21,7 +21,7 @@ export const appConfig = new Store({
     },
     sourceList: DefaultSourceList,
     lolDirHasCJKChar: false,
-    darkTheme: false,
+    darkTheme: true,
     alwaysRequestLatestVersion: false,
     enableChinaCDN: false,
     startMinimized: false,

diff --git a/src/DarkTheme.ts b/src/DarkTheme.ts
@@ -0,0 +1,11 @@
+import { createTheme, darkThemePrimitives, DarkTheme } from 'baseui';
+
+  const overrides = {
+    colors: {
+        ...DarkTheme.colors,
+      background: '#1a1c1f',
+      color: '#ffffff',
+    },
+  };
+
+  export const darkTheme = createTheme(darkThemePrimitives, overrides);
diff --git a/src/app.tsx b/src/app.tsx
@@ -3,7 +3,7 @@ import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 
 import { Client as Styletron } from 'styletron-engine-atomic';
 import { Provider as StyletronProvider } from 'styletron-react';
-import { DarkTheme, LightTheme, BaseProvider } from 'baseui';
+import { LightTheme, BaseProvider } from 'baseui';
 import { SnackbarProvider, PLACEMENT } from 'baseui/snackbar';
 
 import AppContext from 'src/share/context';
@@ -16,6 +16,7 @@ import Toolbar from 'src/components/toolbar';
 import Home from 'src/modules/home';
 import Import from 'src/modules/import';
 import Settings from 'src/modules/settings';
+import { darkTheme } from './DarkTheme';
 
 const engine = new Styletron();
 
@@ -63,7 +64,7 @@ const App = () => {
     <AppContext.Provider value={contextValue}>
       <StyletronProvider value={engine}>
         <BaseProvider
-          theme={window.bridge.appConfig.get('darkTheme', false) ? DarkTheme : LightTheme}>
+          theme={window.bridge.appConfig.get('darkTheme', true) ? darkTheme : LightTheme}>
           <SnackbarProvider
             placement={PLACEMENT.bottom}
             overrides={{

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -19,6 +19,14 @@ export default function Footer() {
   };
 
   return (
+     // <div className={
+     // cn(s.footer,
+     //   css({
+     //     backgroundColor: theme.colors.background,
+     //     color: theme.colors.primary,
+     //   }),
+     //   )}
+     //>
     <div className={s.footer}>
       {process.env.IS_DEV
         ? `dev`

diff --git a/src/components/perk-showcase/index.tsx b/src/components/perk-showcase/index.tsx
@@ -9,6 +9,7 @@ import { Zap } from 'react-feather';
 
 import { IRuneItem } from '@interfaces/commonTypes';
 import { MainStyleIds } from 'src/share/constants/runes';
+import { useStyletron } from 'baseui';
 
 interface IProps {
   isAramMode?: boolean;
@@ -32,7 +33,7 @@ export default function PerkShowcase({
   const { primaryStyleId, subStyleId, selectedPerkIds } = perk;
   const pId = selectedPerkIds.find((i) => MainStyleIds[primaryStyleId].includes(+i));
   const el = useRef(null);
-
+  const [css, theme] = useStyletron();
   const shouldShowStatistics = perk.winRate?.length > 0 && perk.pickCount > 0;
 
   const displayPosition = (position = ``) => {
@@ -47,7 +48,13 @@ export default function PerkShowcase({
 
   return (
     <div
-      className={s.item}
+      className={
+        cn(
+          s.item,
+          css ({
+            backgroundColor: theme.colors.background,
+          }),
+        )}
       ref={el}
       onMouseEnter={() => onMouseEnter(perk, el.current)}
       onMouseLeave={onMouseLeave}>
@@ -71,7 +78,13 @@ export default function PerkShowcase({
         )}
       </div>
 
-      <div className={s.apply} title={t(`apply perk`)} onClick={onApply}>
+      <div className={
+        cn(
+          s.apply,
+          css ({
+            backgroundColor: theme.colors.background,
+          }),
+        )} title={t(`apply perk`)} onClick={onApply}>
         <Zap color={`#21A453`} size={36} />
       </div>
     </div>

diff --git a/src/components/perk-showcase/style.module.scss b/src/components/perk-showcase/style.module.scss
@@ -7,7 +7,6 @@
   user-select: none;
 
   &:hover {
-    background-color: #f6f6f6;
     cursor: pointer;
   }
 
@@ -69,7 +68,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #ffffff;
     -webkit-app-region: no-drag;
     //transition: all linear 0.2s;
 

diff --git a/src/components/rune-preview/index.tsx b/src/components/rune-preview/index.tsx
@@ -6,13 +6,15 @@ import cn from 'classnames';
 
 import { MainRuneMap, SubRuneMap, FragmentMap } from 'src/share/constants/runes';
 import { IRuneItem, ICSSProperties, ICoordinate } from '@interfaces/commonTypes';
+import { useStyletron } from 'baseui';
 
 interface IProps {
   perk: IRuneItem | null;
   coordinate: ICoordinate;
 }
 
 export default function RunePreview({ perk, coordinate }: IProps) {
+  const [css, theme] = useStyletron();
   const { primaryStyleId = 0, subStyleId = 0, selectedPerkIds } = perk ?? {
     primaryStyleId: 0,
     subStyleId: 0,
@@ -40,7 +42,11 @@ export default function RunePreview({ perk, coordinate }: IProps) {
             }
 
             return (
-              <div key={id} className={cn(s.runeImg, s[`rune-${id}`], selected && s.selected)} />
+              <div key={id} className={cn(s.runeImg, s[`rune-${id}`], selected && s.selected, 
+              css ({
+                backgroundColor: theme.colors.background,
+              }),
+              )} />
             );
           })}
         </div>
@@ -63,9 +69,16 @@ export default function RunePreview({ perk, coordinate }: IProps) {
   };
 
   return ReactDOM.createPortal(
-    <div style={style} className={cn(s.main, up && s.up)}>
+    <div style={style} className={cn(s.main, up && s.up, 
+      css ({
+        backgroundColor: theme.colors.background,
+      }),
+    )}>
       <span className={cn(s.bot, s.triangle)} />
-      <span className={cn(s.top, s.triangle)} />
+      <span className={cn(s.top, s.triangle, css ({
+        borderColor: ( theme.colors.background ),
+      }),
+      )} />
       <div className={s.col}>{mainIds.map(renderRow())}</div>
       <div className={s.col}>{subIds.map(renderRow())}</div>
       <div className={cn(s.col, s.fragment)}>{FragmentMap.map(renderRow(true))}</div>

diff --git a/src/components/rune-preview/style.module.scss b/src/components/rune-preview/style.module.scss
@@ -11,7 +11,6 @@ $imgGap: 0.4ex;
   border-radius: 4px;
   transition: top 0.1s linear;
   box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
-  background-color: #ffffff;
   display: flex;
 
   .col {
@@ -95,7 +94,7 @@ $imgGap: 0.4ex;
     }
 
     &.top {
-      border-color: #f6f6f6 transparent transparent;
+      border-color: transparent transparent;
       top: $topOffset;
     }
   }

diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
@@ -3,14 +3,16 @@ import s from './style.module.scss';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-
+import cn from 'classnames';
 import { StatefulTooltip } from 'baseui/tooltip';
 import { Settings, Minimize2, X } from 'react-feather';
+import { useStyletron } from 'baseui';
 
 const Toolbar = () => {
   const [t] = useTranslation();
   const history = useHistory();
-
+  const [css, theme] = useStyletron();
+
   const onHide = () => {
     window.bridge.sendMessage(`toggle-main-window`);
   };
@@ -21,19 +23,37 @@ const Toolbar = () => {
   return (
     <div className={s.toolbar}>
       <StatefulTooltip accessibilityType={'tooltip'} content={t(`minimize`)}>
-        <span className={s.icon} onClick={onHide}>
+        <span className={
+                cn(s.icon,
+                  css({
+                    color: theme.colors.primary,
+                  }),
+                )}
+               onClick={onHide}>
           <Minimize2 size={16} />
         </span>
       </StatefulTooltip>
 
       <StatefulTooltip accessibilityType={'tooltip'} content={t(`settings`)}>
-        <span className={s.icon} onClick={() => history.replace(`/settings`)}>
+        <span className={
+                cn(s.icon,
+                  css({
+                    color: theme.colors.primary,
+                  }),
+                )}
+                onClick={() => history.replace(`/settings`)}>
           <Settings size={16} />
         </span>
       </StatefulTooltip>
 
       <StatefulTooltip accessibilityType={'tooltip'} content={t(`close`)}>
-        <span className={s.icon} onClick={onClose}>
+        <span className={
+                cn(s.icon,
+                  css({
+                    color: theme.colors.primary,
+                  }),
+                )}
+                onClick={onClose}>
           <X size={16} />
         </span>
       </StatefulTooltip>

diff --git a/src/components/toolbar/style.module.scss b/src/components/toolbar/style.module.scss
@@ -28,7 +28,6 @@
     -webkit-app-region: no-drag;
 
     &:hover {
-      background-color: #e2e2e2;
       cursor: pointer;
     }
   }

diff --git a/src/index.scss b/src/index.scss
@@ -17,6 +17,7 @@
 html {
   height: 100vh;
   font-size: 16px;
+  background-color: #1a1c1f;
 }
 
 body {

diff --git a/src/modules/home/index.tsx b/src/modules/home/index.tsx
@@ -198,7 +198,20 @@ export default function Home({ onDirChange = _noop }: IProps) {
     !store.version || !lolDir || !selectedSources.length || fetchingSources;
 
   return (
-    <div className={s.container}>
+    //className={cn(
+    //  s.folderTip,
+    //  css({
+    //    backgroundColor: theme.colors.backgroundLightWarning,
+    //    borderRadius: theme.borders.radius300,
+    //  }),
+    //)}
+    <div className={cn(
+                    s.container,
+                    css({
+                      backgroundColor: theme.colors.background,
+                      color: theme.colors.primary,
+                    }),
+      )}>
       <h1 className={s.title}>
         <img src={logo} alt='' />
         <span>ChampR</span>

diff --git a/src/modules/popup/content.tsx b/src/modules/popup/content.tsx
@@ -25,6 +25,7 @@ import { ReactComponent as PinIcon } from 'src/assets/icons/push-pin.svg';
 import { IChampionInfo, IRuneItem, ICoordinate } from '@interfaces/commonTypes';
 import { makeChampMap } from './utils';
 import { createIpcPromise } from 'src/service/ipc';
+import cn from 'classnames';
 
 const Pin = styled(`button`, () => ({
   margin: `0 2ex 0 0`,
@@ -54,7 +55,7 @@ const getInitTab = () => {
 
 export function Content() {
   const [t] = useTranslation();
-  const [, theme] = useStyletron();
+  const [css, theme] = useStyletron();
   const sourceList: ISourceItem[] = window.bridge.appConfig.get(`sourceList`);
 
   const [activeTab, setActiveTab] = useState<ISourceItem[]>(getInitTab());
@@ -235,7 +236,15 @@ export function Content() {
     const source = sourceList.find((i) => i.value === pkgName);
 
     return (
-      <div className={s.main}>
+      <div className={
+            cn(
+              s.main,
+              css ({
+                backgroundColor: theme.colors.background,
+              }),
+            )
+          }
+        >
         {championDetail && (
           <div className={s.drag}>
             <StatefulPopover content={t(`pin/unpin`)} triggerType={TRIGGER_TYPE.hover}>
@@ -245,7 +254,12 @@ export function Content() {
             </StatefulPopover>
 
             <StatefulPopover content={t(`hide`)} triggerType={TRIGGER_TYPE.hover}>
-              <button className={s.close} onClick={onClose}>
+              <button className={cn(s.close, css(
+                  {  
+                    backgroundColor: theme.colors.background, 
+                  },
+                  ))
+                  } onClick={onClose}>
                 <X size={26} color={`#EA4C89`} />
               </button>
             </StatefulPopover>
@@ -294,7 +308,16 @@ export function Content() {
         )}
 
         {perkList[tabIdx] && (
-          <div className={s.list}>
+          <div className={
+            cn(
+              s.list,
+              css ({
+                color: theme.colors.primary,
+                backgroundColor: theme.colors.background,
+              }),
+            )
+          }
+        >
             {renderList(perkList[tabIdx], source?.isAram, source?.isURF)}
           </div>
         )}

diff --git a/src/modules/popup/index.tsx b/src/modules/popup/index.tsx
@@ -2,9 +2,10 @@ import React, { useEffect } from 'react';
 
 import { Client as Styletron } from 'styletron-engine-atomic';
 import { Provider as StyletronProvider } from 'styletron-react';
-import { DarkTheme, LightTheme, BaseProvider } from 'baseui';
+import { LightTheme, BaseProvider } from 'baseui';
 import initI18n from 'src/modules/i18n';
 import { Content } from './content';
+import { darkTheme } from 'src/DarkTheme';
 
 initI18n();
 const engine = new Styletron();
@@ -17,7 +18,7 @@ export default function Popup() {
   return (
     <StyletronProvider value={engine}>
       <BaseProvider
-        theme={window.bridge.appConfig.get('darkTheme', false) ? DarkTheme : LightTheme}>
+        theme={window.bridge.appConfig.get('darkTheme', true) ? darkTheme : LightTheme}>
         <Content />
       </BaseProvider>
     </StyletronProvider>