From 9b049b27facf9fa676b25a59fd509db85592f4e5 Mon Sep 17 00:00:00 2001 From: jls47 Date: Tue, 22 Aug 2023 21:34:00 -0700 Subject: [PATCH 01/25] the rerender works! Added the type, the preference to the global store, and the new checkbox, along with styles. --- src/common/reducers/preferences.ts | 1 + src/common/types/index.ts | 3 + src/renderer/App/index.tsx | 15 +- src/renderer/lightTheme.ts | 133 ++++++++++++++++++ .../PreferencesPage/BehaviorSettings.tsx | 5 + src/static/locales/ar.json | 1 + src/static/locales/bg.json | 1 + src/static/locales/ca.json | 1 + src/static/locales/cs.json | 1 + src/static/locales/da.json | 1 + src/static/locales/de.json | 1 + src/static/locales/el.json | 1 + src/static/locales/en.json | 1 + src/static/locales/eo.json | 1 + src/static/locales/es.json | 1 + src/static/locales/fi.json | 1 + src/static/locales/fr.json | 1 + src/static/locales/in.json | 1 + src/static/locales/it.json | 1 + src/static/locales/ja.json | 1 + src/static/locales/ko.json | 1 + src/static/locales/nb.json | 1 + src/static/locales/nl.json | 1 + src/static/locales/pl.json | 1 + src/static/locales/pt_BR.json | 1 + src/static/locales/pt_PT.json | 1 + src/static/locales/ro.json | 1 + src/static/locales/ru.json | 1 + src/static/locales/sr.json | 1 + src/static/locales/sv.json | 1 + src/static/locales/tr.json | 1 + src/static/locales/uk.json | 1 + src/static/locales/zh.json | 1 + 33 files changed, 183 insertions(+), 2 deletions(-) create mode 100644 src/renderer/lightTheme.ts diff --git a/src/common/reducers/preferences.ts b/src/common/reducers/preferences.ts index ce42ac2a7..dbd2a7b13 100644 --- a/src/common/reducers/preferences.ts +++ b/src/common/reducers/preferences.ts @@ -22,6 +22,7 @@ export const initialState = { preferOptimizedPatches: false, disableBrowser: env.integrationTests ? true : false, enableTabs: false, + lightMode: false, } as PreferencesState; export default reducer(initialState, (on) => { diff --git a/src/common/types/index.ts b/src/common/types/index.ts index a60f90afe..d874b4403 100644 --- a/src/common/types/index.ts +++ b/src/common/types/index.ts @@ -450,6 +450,9 @@ export interface PreferencesState { /** when closing window, keep running in tray */ closeToTray: boolean; + /** toggle light mode on or off */ + lightMode: boolean; + /** notify when a download has been installed or updated */ readyNotification: boolean; diff --git a/src/renderer/App/index.tsx b/src/renderer/App/index.tsx index 6cc3e07de..9e78d5b66 100644 --- a/src/renderer/App/index.tsx +++ b/src/renderer/App/index.tsx @@ -3,6 +3,7 @@ const Profiler = require("react").unstable_Profiler; import { IntlProvider } from "react-intl"; import { hook } from "renderer/hocs/hook"; import { theme, ThemeProvider } from "renderer/styles"; +import { lightTheme } from "renderer/lightTheme"; import AppContents from "renderer/App/AppContents"; import { isEqual } from "underscore"; @@ -17,6 +18,7 @@ class App extends React.PureComponent { messages: {}, localeMessages: {}, fallbackMessages: {}, + lightMode: false, }; } @@ -41,11 +43,16 @@ class App extends React.PureComponent { }; realRender() { - const { localeVersion, locale, messages } = this.state; + const { localeVersion, locale, messages, lightMode } = this.state; + console.log(lightMode); + console.log(this.state); + console.log(global.ReduxStore.getState()); + console.log("tizzy"); + let lm = global.ReduxStore.getState().preferences.lightMode; return ( - + @@ -70,6 +77,7 @@ class App extends React.PureComponent { ...props.fallbackMessages, ...props.localeMessages, }, + lightMode: state.lightMode, }; } return null; @@ -84,6 +92,7 @@ interface Props { fallbackMessages: { [id: string]: string; }; + lightMode: boolean; } interface State { @@ -99,6 +108,7 @@ interface State { fallbackMessages: { [id: string]: string; }; + lightMode: boolean; } const emptyObj = {}; @@ -110,4 +120,5 @@ export default hook((map) => ({ return strings[lang] || strings[lang.substring(0, 2)] || emptyObj; }), fallbackMessages: map((rs) => rs.i18n.strings.en || emptyObj), + lightMode: map((rs) => rs.preferences.lightMode), }))(App); diff --git a/src/renderer/lightTheme.ts b/src/renderer/lightTheme.ts new file mode 100644 index 000000000..f7023763a --- /dev/null +++ b/src/renderer/lightTheme.ts @@ -0,0 +1,133 @@ +import { lighten } from "polished"; + +export const baseColors = { + codGray: "#f7f7f7", + darkMineShaft: "#d9d9d9", + lightMineShaft: "#e9e9e9", + zambezi: "#4e4545", + silverChalice: "#161616", + swissCoffee: "#746d6d", + ivory: "#272929", + + flushMahogany: "#f97b7b", + mintJulep: "#c1c252", + gossip: "#74a46c", + + shamrock: "#13916d", + amber: "#ffc200", + heliotrope: "#7c409a", + + carnation: "#bb2525", + vividTangerine: "#cc4b4a", +}; + +export const uiColors = { + background: "#a5a5a5", + + border: "#8b8d8d", + borderFocused: "#c5c5c6", + + // FIXME: no pure blacks + textShadow: "#b9b9ba", + boxShadow: "#989898", +}; + +const breadBackground = `#f4f4f4`; +const itemBackground = "#eedbdb"; + +export const colors = { + accent: baseColors.carnation, + lightAccent: baseColors.vividTangerine, + + error: baseColors.flushMahogany, + warning: baseColors.mintJulep, + success: baseColors.gossip, + + buy: baseColors.shamrock, + sale: "#34a0f2", + bundle: baseColors.heliotrope, + + explanation: itemBackground, + + meatBackground: breadBackground, + itemBackground, + + baseBackground: baseColors.codGray, + baseText: baseColors.ivory, + + inputBackground: uiColors.background, + inputFocusedBackground: lighten(0.1, uiColors.background), + inputSelectedBackground: lighten(0.2, uiColors.background), + inputText: "#3e3f3f", + inputPlaceholder: baseColors.silverChalice, + + inputBorder: uiColors.border, + inputBorderFocused: uiColors.borderFocused, + + inputTextShadow: uiColors.textShadow, + inputBoxShadow: uiColors.boxShadow, + inputBoxShadowFocused: "#1b1919", + + sidebarBackground: "#e9e9e9", + + sidebarBorder: lighten(0.03, breadBackground), + sidebarEntryFocusedBackground: lighten(0.05, breadBackground), + + dropdownBackground: lighten(0.15, baseColors.codGray), + + secondaryText: lighten(0.1, baseColors.silverChalice), + secondaryTextHover: baseColors.ivory, + + ternaryText: baseColors.zambezi, + + breadBackground, + breadBoxShadow: "#171717", + + filterBackground: "#4a4848", + filterBorder: "#333", + + filterTagBorder: "#777575", + filterTagBackground: "#5f5c5c", + filterTagText: "#e0dfdf", + + tooltipBackground: baseColors.swissCoffee, + tooltipText: baseColors.codGray, + + prefBorder: baseColors.zambezi, + + priceNormal: "#70f1c9", + priceSale: "#ffd700", + + windowBorder: baseColors.lightMineShaft, +}; + +export const fontSizes = { + small: "12px", + sidebar: "14px", + smaller: "14px", + baseText: "15px", + modal: "18px", + large: "16px", + larger: "18px", + huge: "19px", + huger: "23px", + enormous: "30px", +}; + +export const borderRadii = { + explanation: "4px", +}; + +export const widths = { + searchSidebar: "500px", + handle: "8px", + gridItem: "235px", +}; + +export const lightTheme = { + ...colors, + baseColors, + fontSizes, + borderRadii, + widths, +}; diff --git a/src/renderer/pages/PreferencesPage/BehaviorSettings.tsx b/src/renderer/pages/PreferencesPage/BehaviorSettings.tsx index ba8afdc56..a7d5a5efd 100644 --- a/src/renderer/pages/PreferencesPage/BehaviorSettings.tsx +++ b/src/renderer/pages/PreferencesPage/BehaviorSettings.tsx @@ -25,6 +25,11 @@ class BehaviorSettings extends React.PureComponent {

{T(["preferences.behavior"])}

+ +