diff --git a/packages/view/src/App.tsx b/packages/view/src/App.tsx index 5e9de8a7..ca4f88df 100644 --- a/packages/view/src/App.tsx +++ b/packages/view/src/App.tsx @@ -10,10 +10,9 @@ import { useAnalayzedData } from "hooks"; import { RefreshButton } from "components/RefreshButton"; import type { IDESentEvents } from "types/IDESentEvents"; import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeStore } from "store"; -import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const"; import { initializeIDEConnection, sendFetchAnalyzedDataCommand } from "services"; import { COMMIT_COUNT_PER_PAGE } from "constants/constants"; -import { createMuiTheme } from "theme"; +import { createMuiTheme, THEME_CONFIG } from "theme"; const App = () => { const initRef = useRef(false); @@ -57,7 +56,7 @@ const App = () => { if (loading) { return ( { const { branchList, selectedBranch, setSelectedBranch } = useBranchStore(); @@ -23,33 +23,12 @@ const BranchSelector = () => { return (

Branches:

- + {METRIC_TYPE.map((option) => ( void; }; -const ThemeIcons = ({ title, value, colors, theme, onClick }: ThemeIconsProps) => { +const ThemeIcons = ({ title, colors, theme, onClick }: ThemeIconsProps) => { + const formatThemeName = (name: string) => name.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()); + return (
- {Object.values(colors).map((color, index) => ( -
- ))} +
+
-

{title}

+

{formatThemeName(title)}

); }; @@ -46,7 +50,7 @@ const ThemeSelector = () => { const handleTheme = (value: ThemeName) => { setTheme(value); sendUpdateThemeCommand(value); - document.documentElement.setAttribute("theme", value); + setIsOpen(false); }; useEffect(() => { @@ -61,35 +65,30 @@ const ThemeSelector = () => { }; }, []); - useEffect(() => { - document.documentElement.setAttribute("theme", theme); - }, [theme]); - return (
- setIsOpen(true)} /> + setIsOpen(true)}> + + {isOpen && (

Theme

- setIsOpen(false)} - /> + setIsOpen(false)}> + +
- {Object.entries(THEME_INFO).map(([_, themeInfo]) => ( + {(Object.entries(THEME_CONFIG) as ThemeList).map(([themeName, themeConfig]) => ( { - handleTheme(themeInfo.value); - setIsOpen(false); - }} + colors={themeConfig.colors} + onClick={() => handleTheme(themeName)} /> ))}
diff --git a/packages/view/src/components/ThemeSelector/ThemeSelector.type.ts b/packages/view/src/components/ThemeSelector/ThemeSelector.type.ts deleted file mode 100644 index 2d0500d3..00000000 --- a/packages/view/src/components/ThemeSelector/ThemeSelector.type.ts +++ /dev/null @@ -1,11 +0,0 @@ -export type ThemeInfo = { - [key in "githru" | "hacker-blue" | "aqua" | "cotton-candy" | "mono"]: { - title: string; - value: key; - colors: { - primary: string; - secondary: string; - tertiary: string; - }; - }; -}; diff --git a/packages/view/src/styles/_radius.scss b/packages/view/src/styles/_radius.scss new file mode 100644 index 00000000..f434fd01 --- /dev/null +++ b/packages/view/src/styles/_radius.scss @@ -0,0 +1,6 @@ +$radius-xs: 4px; +$radius-sm: 8px; +$radius-md: 12px; +$radius-lg: 16px; +$radius-xl: 24px; +$radius-full: 9999px; diff --git a/packages/view/src/styles/_spacing.scss b/packages/view/src/styles/_spacing.scss new file mode 100644 index 00000000..245741fc --- /dev/null +++ b/packages/view/src/styles/_spacing.scss @@ -0,0 +1,7 @@ +$spacing-xs: 0.25rem; +$spacing-sm: 0.5rem; +$spacing-md: 0.75rem; +$spacing-lg: 1rem; +$spacing-xl: 1.25rem; +$spacing-2xl: 1.5rem; +$spacing-3xl: 2.5rem; diff --git a/packages/view/src/styles/app.scss b/packages/view/src/styles/app.scss index 5ebd7460..98ca2e2d 100644 --- a/packages/view/src/styles/app.scss +++ b/packages/view/src/styles/app.scss @@ -2,3 +2,5 @@ @import "font"; @import "reset"; @import "utils"; +@import "radius"; +@import "spacing"; diff --git a/packages/view/src/theme/components/index.ts b/packages/view/src/theme/components/index.ts new file mode 100644 index 00000000..5d3d88d6 --- /dev/null +++ b/packages/view/src/theme/components/index.ts @@ -0,0 +1,4 @@ +export * from "./muiIconButton"; +export * from "./muiSelect"; +export * from "./muiTooltip"; +export * from "./muiChip"; diff --git a/packages/view/src/theme/components/muiChip.ts b/packages/view/src/theme/components/muiChip.ts new file mode 100644 index 00000000..60611aec --- /dev/null +++ b/packages/view/src/theme/components/muiChip.ts @@ -0,0 +1,21 @@ +import type { Theme } from "@mui/material/styles"; +import type { BaseTheme } from "@mui/material/styles/createThemeNoVars"; + +export const muiChip: NonNullable["MuiChip"] = { + styleOverrides: { + root: ({ theme }: { theme: Theme }) => ({ + justifyContent: "space-between", + backgroundColor: theme.palette.grey[300], + color: theme.palette.grey[700], + }), + + deleteIcon: ({ theme }: { theme: Theme }) => ({ + color: theme.palette.grey[600], + fontSize: "1.25rem", + + "&:hover": { + color: theme.palette.grey[700], + }, + }), + }, +}; diff --git a/packages/view/src/theme/components/muiIconButton.ts b/packages/view/src/theme/components/muiIconButton.ts new file mode 100644 index 00000000..67bb79bd --- /dev/null +++ b/packages/view/src/theme/components/muiIconButton.ts @@ -0,0 +1,12 @@ +import type { Theme } from "@mui/material/styles"; + +export const muiIconButton = { + styleOverrides: { + root: ({ theme }: { theme: Theme }) => ({ + color: theme.palette.common.white, + "&:hover": { + color: theme.palette.grey[700], + }, + }), + }, +}; diff --git a/packages/view/src/theme/components/muiSelect.ts b/packages/view/src/theme/components/muiSelect.ts new file mode 100644 index 00000000..fc90b269 --- /dev/null +++ b/packages/view/src/theme/components/muiSelect.ts @@ -0,0 +1,60 @@ +import type { Theme } from "@mui/material/styles"; +import type { BaseTheme } from "@mui/material/styles/createThemeNoVars"; + +export const muiSelect: NonNullable["MuiSelect"] = { + styleOverrides: { + root: ({ theme }: { theme: Theme }) => ({ + height: "1.875rem", + minWidth: 110, + borderRadius: "9999px", + border: `1px solid ${theme.palette.grey[300]}`, + backgroundColor: theme.palette.grey[200], + color: theme.palette.common.white, + fontSize: "0.875rem", + textAlign: "left", + + "&:hover": { + backgroundColor: theme.palette.grey[300], + }, + + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }), + + icon: ({ theme }: { theme: Theme }) => ({ + right: "0.5rem", + color: theme.palette.common.white, + }), + }, + + defaultProps: { + MenuProps: { + PaperProps: { + sx: (theme: Theme) => ({ + "&.MuiPaper-root": { + marginTop: "0.5rem", + border: `1px solid ${theme.palette.grey[300]}`, + borderRadius: "4px", + backgroundColor: theme.palette.grey[100], + color: theme.palette.common.white, + }, + "& .MuiList-root": { + padding: 0, + }, + "& .MuiMenuItem-root": { + paddingLeft: "14px", + fontSize: "0.875rem", + + "&:hover": { + backgroundColor: theme.palette.grey[300], + }, + }, + "& .Mui-selected": { + backgroundColor: `${theme.palette.grey[300]} !important`, + }, + }), + }, + }, + }, +}; diff --git a/packages/view/src/theme/components/muiTooltip.ts b/packages/view/src/theme/components/muiTooltip.ts new file mode 100644 index 00000000..69a8f927 --- /dev/null +++ b/packages/view/src/theme/components/muiTooltip.ts @@ -0,0 +1,18 @@ +import type { Theme } from "@mui/material/styles"; +import type { BaseTheme } from "@mui/material/styles/createThemeNoVars"; + +export const muiTooltip: NonNullable["MuiTooltip"] = { + styleOverrides: { + tooltip: ({ theme }: { theme: Theme }) => ({ + backgroundColor: theme.palette.grey[300], + }), + arrow: ({ theme }: { theme: Theme }) => ({ + color: theme.palette.grey[300], + }), + }, + + defaultProps: { + arrow: true, + placement: "top", + }, +}; diff --git a/packages/view/src/theme/muiTheme.ts b/packages/view/src/theme/muiTheme.ts index 0efb9151..3ff9d71b 100644 --- a/packages/view/src/theme/muiTheme.ts +++ b/packages/view/src/theme/muiTheme.ts @@ -2,9 +2,10 @@ import { createTheme } from "@mui/material/styles"; import type { ThemeName } from "./theme.type"; import { BACKGROUND_COLORS, COMMON_COLORS, GREY_COLORS, SYSTEM_COLORS, THEME_CONFIG } from "./theme.const"; +import { muiChip, muiIconButton, muiSelect, muiTooltip } from "./components"; -export const createMuiTheme = (theme: ThemeName) => { - const themeColors = THEME_CONFIG[theme].colors; +export const createMuiTheme = (themeName: ThemeName) => { + const themeColors = THEME_CONFIG[themeName].colors; return createTheme({ cssVariables: true, @@ -15,5 +16,11 @@ export const createMuiTheme = (theme: ThemeName) => { background: BACKGROUND_COLORS, common: COMMON_COLORS, }, + components: { + MuiIconButton: muiIconButton, + MuiSelect: muiSelect, + MuiTooltip: muiTooltip, + MuiChip: muiChip, + }, }); }; diff --git a/packages/view/src/theme/theme.type.ts b/packages/view/src/theme/theme.type.ts index 49587c45..cb516575 100644 --- a/packages/view/src/theme/theme.type.ts +++ b/packages/view/src/theme/theme.type.ts @@ -1,20 +1,20 @@ import type { ColorPartial, CommonColors as MuiCommonColors, - PaletteColorOptions, + SimplePaletteColorOptions, TypeBackground, } from "@mui/material/styles/createPalette"; export type ThemeName = "githru" | "hacker-blue" | "aqua" | "cotton-candy" | "mono"; export interface ThemeColors { - primary: PaletteColorOptions; - secondary: PaletteColorOptions; + primary: SimplePaletteColorOptions; + secondary: SimplePaletteColorOptions; } export interface SystemColors { - error: PaletteColorOptions; - success: PaletteColorOptions; + error: SimplePaletteColorOptions; + success: SimplePaletteColorOptions; } export type GreyColors = ColorPartial; @@ -22,3 +22,4 @@ export type BackgroundColors = Partial; export type CommonColors = Partial; export type ThemeConfig = Record; +export type ThemeList = [ThemeName, ThemeConfig[ThemeName]][];