From 464c7723a9e13c41bca5fdfc550b28352cf25996 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Sat, 24 Aug 2024 04:18:30 +0300 Subject: [PATCH 1/3] Changed dark mode colors, improved light mode colors and other UI components --- app/front-end/index.html | 60 +++++++++++-------- .../components/buttons/IconTitleButton.tsx | 7 ++- .../src/components/layouts/baseLayout.tsx | 9 ++- .../components/editorView/editorToolbar.tsx | 16 +++-- .../fileTreeItem/fileTreeItem.tsx | 2 +- .../filebarView/filebarGroupItem.tsx | 9 ++- .../toolbarView/toolbarGroupItem.tsx | 6 +- .../toolbarView/toolbarGroupsSelectorItem.tsx | 6 +- .../src/stores/themeContextProvider.tsx | 2 +- app/front-end/src/types/enums/colors.ts | 29 +++++---- 10 files changed, 91 insertions(+), 55 deletions(-) diff --git a/app/front-end/index.html b/app/front-end/index.html index 9d361df..425a916 100644 --- a/app/front-end/index.html +++ b/app/front-end/index.html @@ -11,9 +11,17 @@ } - + Kath @@ -21,34 +29,34 @@
+ // Set background color based on system color mode + setBackgroundColor(systemColorMode); + } + diff --git a/app/front-end/src/components/buttons/IconTitleButton.tsx b/app/front-end/src/components/buttons/IconTitleButton.tsx index 3c72a19..e02d80b 100644 --- a/app/front-end/src/components/buttons/IconTitleButton.tsx +++ b/app/front-end/src/components/buttons/IconTitleButton.tsx @@ -1,5 +1,5 @@ import { Colors } from '@/types'; -import { Box, IconButton, Typography } from '@mui/material'; +import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material'; interface Props { icon: React.ReactNode; @@ -30,6 +30,7 @@ interface Props { * @returns {JSX.Element} The `IconTitleButton` component rendering an icon button and an optional title. */ export const IconTitleButton: React.FC = ({ icon, title, width, height, borderRadius, onClick }) => { + const Theme = useTheme(); return ( = ({ icon, title, width, height, b height: height || '3rem', borderRadius: borderRadius || '1rem', transition: 'background-color 0.5s ease', - ':hover': { backgroundColor: 'rgba(216, 228, 232, 0.5)' }, // TODO: fix this to be responsive to theme + ':hover': { + backgroundColor: alpha(Theme.palette.primary.contrastText, 0.2), + }, // TODO: fix this to be responsive to theme }} onClick={onClick} > diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx index ea83118..4f64288 100644 --- a/app/front-end/src/components/layouts/baseLayout.tsx +++ b/app/front-end/src/components/layouts/baseLayout.tsx @@ -28,7 +28,14 @@ export const BaseLayout: React.FC = ({ children }) => { const Theme = useTheme(); const ThemeContext = useThemeContext(); return ( - + = ({ disabled, handleSa setIsSaving(true); handleSave(); }} - disabled={disabled} + disabled={disabled || isSaving} startIcon={ isSaving ? ( - + ) : saveStatus ? ( - + ) : ( ) } size='small' - variant='contained' + variant='outlined' + sx={{ + color: saveStatus === false ? Theme.palette.error.main : Theme.palette.primary.main, + borderColor: saveStatus === false ? Theme.palette.error.main : Theme.palette.primary.main, + '&:hover': { + borderColor: saveStatus === false ? Theme.palette.error.dark : Theme.palette.primary.dark, + }, + }} > Save diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx index 332636d..5b886b0 100644 --- a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx +++ b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx @@ -33,7 +33,7 @@ const StyledFileTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ fontWeight: 500, ['&.Mui-expanded ']: { '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': { - color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.dark, + color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.main, }, '&::before': { content: '""', diff --git a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx index bf7c334..8ce0086 100644 --- a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx +++ b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx @@ -1,7 +1,7 @@ import { useWorkspaceContext } from '@/features/editor/hooks'; import { FileTypes } from '@/types'; import { Close as CloseIcon } from '@mui/icons-material'; -import { Box, IconButton, Typography, useTheme } from '@mui/material'; +import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material'; export interface FilebarGroupItemProps { fileId: string; @@ -40,9 +40,12 @@ export const FilebarGroupItem: React.FC = ({ fileId, file pl: '1rem', pr: '0.5rem', bgcolor: Workspace.fileId === fileId ? Theme.palette.background.default : Theme.palette.action.selected, - borderRadius: '0rem 0rem 0.625rem 0.625rem', + borderRadius: '0rem', ':hover': { - backgroundColor: Theme.palette.background.paper, + backgroundColor: + Workspace.fileId === fileId + ? Theme.palette.background.default + : alpha(Theme.palette.background.default, 0.5), }, cursor: 'pointer', display: 'flex', diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx index 32ed57a..cdf4858 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx @@ -1,5 +1,5 @@ import { SvgIconComponent } from '@mui/icons-material'; -import { Box, Button, useTheme } from '@mui/material'; +import { alpha, Box, Button, useTheme } from '@mui/material'; export interface ToolbarGroupItemProps { group: string; @@ -44,11 +44,11 @@ export const ToolbarGroupItem: React.FC = ({ icon: Icon, onClick={() => onClick()} sx={{ color: Theme.palette.text.primary, - bgcolor: Theme.palette.background.default, + backgroundColor: alpha(Theme.palette.action.selected, 0.5), borderRadius: '0.625rem', px: '1rem', '&:hover': { - bgcolor: Theme.palette.action.hover, + backgroundColor: Theme.palette.action.selected, }, }} > diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupsSelectorItem.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupsSelectorItem.tsx index 0865c5d..54e78be 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupsSelectorItem.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupsSelectorItem.tsx @@ -1,4 +1,5 @@ import { Button, useTheme } from '@mui/material'; +import { alpha } from '@mui/system'; export interface ToolbarGroupsSelectorItemProps { id: string; @@ -42,12 +43,13 @@ export const ToolbarGroupsSelectorItem: React.FC sx={{ height: '100%', bgcolor: groupRef === id ? Theme.palette.background.paper : Theme.palette.action.selected, - borderRadius: '0.625rem 0.625rem 0rem 0rem', + borderRadius: '0rem', px: '3rem', fontWeight: 'bold', color: Theme.palette.text.primary, ':hover': { - backgroundColor: Theme.palette.background.paper, + backgroundColor: + groupRef === id ? Theme.palette.background.paper : alpha(Theme.palette.background.paper, 0.5), }, }} onClick={() => onClick()} diff --git a/app/front-end/src/stores/themeContextProvider.tsx b/app/front-end/src/stores/themeContextProvider.tsx index d0979b3..36f9cf0 100644 --- a/app/front-end/src/stores/themeContextProvider.tsx +++ b/app/front-end/src/stores/themeContextProvider.tsx @@ -62,6 +62,7 @@ export const ThemeContextProvider: React.FC = ({ children }) => { mode: mode as PaletteMode, primary: { main: mode === 'light' ? Colors.primaryLight : Colors.primaryDark, + contrastText: Colors.contrastTextLight, }, secondary: { main: mode === 'light' ? Colors.secondaryLight : Colors.secondaryDark, @@ -75,7 +76,6 @@ export const ThemeContextProvider: React.FC = ({ children }) => { paper: mode === 'light' ? Colors.backgroundSecondaryLight : Colors.backgroundSecondaryDark, }, action: { - hover: mode === 'light' ? Colors.secondaryLight : Colors.secondaryDark, selected: mode === 'light' ? Colors.backgroundActiveLight : Colors.backgroundActiveDark, }, error: { diff --git a/app/front-end/src/types/enums/colors.ts b/app/front-end/src/types/enums/colors.ts index dfbb119..176a7b7 100644 --- a/app/front-end/src/types/enums/colors.ts +++ b/app/front-end/src/types/enums/colors.ts @@ -6,7 +6,7 @@ * ensure consistency in styling and theming throughout the application. * * The enum includes: - * + * * **Light Mode Colors:** * - `primaryLight`: Primary color for light mode, typically used for main UI elements. * - `secondaryLight`: Secondary color for light mode, used for supporting elements. @@ -15,7 +15,7 @@ * - `backgroundPrimaryLight`: Primary background color for light mode. * - `backgroundSecondaryLight`: Secondary background color for light mode. * - `backgroundActiveLight`: Background color for active states in light mode. - * + * * **Dark Mode Colors:** * - `primaryDark`: Primary color for dark mode, typically used for main UI elements. * - `secondaryDark`: Secondary color for dark mode, used for supporting elements. @@ -24,13 +24,13 @@ * - `backgroundPrimaryDark`: Primary background color for dark mode. * - `backgroundSecondaryDark`: Secondary background color for dark mode. * - `backgroundActiveDark`: Background color for active states in dark mode. - * + * * **Global Colors:** * - `error`: Color used to indicate error states or messages. * - `success`: Color used to indicate success states or messages. * - `warning`: Color used to indicate warning states or messages. * - `info`: Color used to indicate informational messages. - * + * * @enum {string} * @property {string} primaryLight - The primary color used in light mode. * @property {string} secondaryLight - The secondary color used in light mode. @@ -54,18 +54,23 @@ * @example * // Example usage of Colors * import { Colors } from './path/to/colors'; - * + * * const headerStyle = { * backgroundColor: Colors.primaryLight, * color: Colors.textPrimaryLight, * }; - * + * * const errorMessageStyle = { * color: Colors.error, * }; */ + +/* eslint-disable @typescript-eslint/no-duplicate-enum-values */ +// Some values are duplicated for now, this way we can keep values organized and future-proof + export enum Colors { // Light mode + mainNavigationBackgroundLight = '#4C7380', primaryLight = '#4C7380', secondaryLight = '#D8E4E8', @@ -77,17 +82,19 @@ export enum Colors { backgroundActiveLight = '#CDCDCD', // Dark mode - primaryDark = '#203238', - secondaryDark = '#212829', + mainNavigationBackgroundDark = '#1C2427', + primaryDark = '#6AA1AD', + secondaryDark = '#222C30', textPrimaryDark = '#F6F6F6', textSecondaryDark = '#B9B9B9', - backgroundPrimaryDark = '#252525', - backgroundSecondaryDark = '#222222', - backgroundActiveDark = '#353535', + backgroundPrimaryDark = '#292929', + backgroundSecondaryDark = '#252525', + backgroundActiveDark = '#313131', // Global + contrastTextLight = '#F9FBFB', error = '#FF6961', success = '#77DD77', warning = '#FFB347', From 1d0cae19c06dac004bb465c7f27d27103c01a776 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Sun, 25 Aug 2024 01:28:22 +0300 Subject: [PATCH 2/3] Updated colors for light and dark modes, made a new favicon --- app/front-end/index.html | 2 +- app/front-end/public/Kath_Favicon.svg | 1 + app/front-end/public/Kath_OnlyLogo.svg | 20 ------------------- .../components/buttons/IconTitleButton.tsx | 2 +- .../fileTreeItem/fileTreeItem.tsx | 12 ++++++----- .../src/stores/themeContextProvider.tsx | 2 +- app/front-end/src/types/enums/colors.ts | 11 ++++++---- 7 files changed, 18 insertions(+), 32 deletions(-) create mode 100644 app/front-end/public/Kath_Favicon.svg delete mode 100644 app/front-end/public/Kath_OnlyLogo.svg diff --git a/app/front-end/index.html b/app/front-end/index.html index 425a916..d0fc71b 100644 --- a/app/front-end/index.html +++ b/app/front-end/index.html @@ -10,7 +10,7 @@ font-family: 'Nunito', sans-serif; } - + \ No newline at end of file diff --git a/app/front-end/public/Kath_OnlyLogo.svg b/app/front-end/public/Kath_OnlyLogo.svg deleted file mode 100644 index e499051..0000000 --- a/app/front-end/public/Kath_OnlyLogo.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/app/front-end/src/components/buttons/IconTitleButton.tsx b/app/front-end/src/components/buttons/IconTitleButton.tsx index e02d80b..4f9d877 100644 --- a/app/front-end/src/components/buttons/IconTitleButton.tsx +++ b/app/front-end/src/components/buttons/IconTitleButton.tsx @@ -42,7 +42,7 @@ export const IconTitleButton: React.FC = ({ icon, title, width, height, b transition: 'background-color 0.5s ease', ':hover': { backgroundColor: alpha(Theme.palette.primary.contrastText, 0.2), - }, // TODO: fix this to be responsive to theme + }, }} onClick={onClick} > diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx index 5b886b0..78fb186 100644 --- a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx +++ b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx @@ -16,7 +16,8 @@ import React from 'react'; import { FileTreeItemLabel } from '.'; const StyledFileTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({ - color: theme.palette.mode === 'light' ? theme.palette.grey[800] : theme.palette.grey[400], + //color: theme.palette.mode === 'light' ? theme.palette.grey[800] : theme.palette.grey[400], + color: theme.palette.text.secondary, position: 'relative', [`& .${treeItemClasses.groupTransition}`]: { marginLeft: theme.spacing(3.5), @@ -33,7 +34,7 @@ const StyledFileTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ fontWeight: 500, ['&.Mui-expanded ']: { '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': { - color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.main, + color: theme.palette.primary.main, }, '&::before': { content: '""', @@ -43,15 +44,16 @@ const StyledFileTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ top: '44px', height: 'calc(100% - 48px)', width: '1.5px', - backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], + backgroundColor: theme.palette.secondary.main, }, }, '&:hover': { backgroundColor: alpha(theme.palette.primary.main, 0.1), - color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white', + color: theme.palette.primary.main, }, ['&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused']: { - backgroundColor: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.dark, + backgroundColor: + theme.palette.mode === 'light' ? alpha(theme.palette.primary.main, 0.7) : alpha(theme.palette.primary.main, 0.5), color: theme.palette.primary.contrastText, }, })); diff --git a/app/front-end/src/stores/themeContextProvider.tsx b/app/front-end/src/stores/themeContextProvider.tsx index 36f9cf0..b03af1c 100644 --- a/app/front-end/src/stores/themeContextProvider.tsx +++ b/app/front-end/src/stores/themeContextProvider.tsx @@ -62,7 +62,7 @@ export const ThemeContextProvider: React.FC = ({ children }) => { mode: mode as PaletteMode, primary: { main: mode === 'light' ? Colors.primaryLight : Colors.primaryDark, - contrastText: Colors.contrastTextLight, + contrastText: mode === 'light' ? Colors.contrastTextLight : Colors.contrastTextDark, }, secondary: { main: mode === 'light' ? Colors.secondaryLight : Colors.secondaryDark, diff --git a/app/front-end/src/types/enums/colors.ts b/app/front-end/src/types/enums/colors.ts index 176a7b7..18e8d87 100644 --- a/app/front-end/src/types/enums/colors.ts +++ b/app/front-end/src/types/enums/colors.ts @@ -71,16 +71,18 @@ export enum Colors { // Light mode mainNavigationBackgroundLight = '#4C7380', - primaryLight = '#4C7380', + primaryLight = '#336e82', secondaryLight = '#D8E4E8', textPrimaryLight = '#404040', - textSecondaryLight = '#999999', + textSecondaryLight = '#525252', backgroundPrimaryLight = '#F9FBFB', backgroundSecondaryLight = '#EDEDED', backgroundActiveLight = '#CDCDCD', + contrastTextLight = '#F9FBFB', + // Dark mode mainNavigationBackgroundDark = '#1C2427', primaryDark = '#6AA1AD', @@ -91,10 +93,11 @@ export enum Colors { backgroundPrimaryDark = '#292929', backgroundSecondaryDark = '#252525', - backgroundActiveDark = '#313131', + backgroundActiveDark = '#333333', + + contrastTextDark = '#F9FBFB', // Global - contrastTextLight = '#F9FBFB', error = '#FF6961', success = '#77DD77', warning = '#FFB347', From d90b94b1e82a57fd1c8e061e62b5ba3535f8b5f7 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Mon, 26 Aug 2024 01:42:54 +0300 Subject: [PATCH 3/3] Fixed html gap on the right and at the bottom issue --- app/front-end/src/components/layouts/baseLayout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx index 4f64288..8ade53f 100644 --- a/app/front-end/src/components/layouts/baseLayout.tsx +++ b/app/front-end/src/components/layouts/baseLayout.tsx @@ -30,8 +30,8 @@ export const BaseLayout: React.FC = ({ children }) => { return ( = ({ children }) => { Version 1.0.02 {/* TODO: add application context provider to get values of it */} - +