oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: updated colors context menu

This commit is contained in:
William Grant 2022-09-27 14:39:54 +10:00
parent 452991cd4a
commit ea95f78c5a
3 changed files with 127 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ts/components/SessionContextMenuContainer.tsx
View File

@ -7,27 +7,25 @@ export const SessionContextMenuContainer = styled.div.attrs({
// be sure it is more than the one set for the More Informations screen of messages
z-index: 30;
min-width: 200px;
/* TODO Theming Update */
box-shadow: 0 10px 16px 0 rgba(var(--color-black-color-rgb), 0.2),
0 6px 20px 0 rgba(var(--color-black-color-rgb), 0.19) !important;
background-color: var(--color-received-message-background);
box-shadow: 0px 0px 10px var(--context-menu-shadow-color) !important;
background-color: var(--context-menu-background-color);
&.react-contexify__theme--dark {
background-color: var(--color-received-message-background);
background-color: var(--context-menu-background-color);
}
.react-contexify__item {
background: var(--color-received-message-background);
background: var(--context-menu-background-color);
}
.react-contexify__item:not(.react-contexify__item--disabled):hover
> .react-contexify__item__content {
background: var(--color-accent);
color: var(--color-text-menu-highlighted);
background: var(--context-menu-background-hover-color);
color: var(--context-menu-text-hover-color);
}
.react-contexify__item__content {
transition: var(--default-duration);
color: var(--color-text);
color: var(--context-menu-text-color);
}
&.react-contexify__submenu {

17
ts/themes/SessionTheme.tsx
View File

@ -505,6 +505,8 @@ export const SessionGlobalStyles = createGlobalStyle`
/* Chat (Interaction) Buttons */
/* Also used for Reaction Bar Buttons */
/* Used for Link Preview Attachment Icons */
/* Used for Media Grid Item Play Button */
--chat-buttons-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--chat-buttons-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--chat-buttons-icon-color: var(--text-primary-color);
@ -553,7 +555,7 @@ export const SessionGlobalStyles = createGlobalStyle`
/* TODO Theming Consolidate with code */
/* Conversation Tab */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item etc. */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items etc. */
--conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@ -635,6 +637,19 @@ export const SessionGlobalStyles = createGlobalStyle`
--session-logo-text-dark-filter: none;
--session-logo-text-current-filter: var(--session-logo-text-light-filter);
/* Right Click / Context Menu) */
--context-menu-background-color: var(--background-primary-color);
--context-menu-background-hover-color: var(--primary-color);
--context-menu-text-color: var(--text-primary-color);
--context-menu-text-hover-color: var(--black-color);
--context-menu-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
/* Message Link Preview */
/* Also used for Images */
/* Also used for the Media Grid Items */
/* Also used for Staged Generic Attachments */
/* Same for all Themes */
--message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);
};
`;

104
ts/themes/switchTheme.tsx
View File

@ -357,6 +357,32 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
function loadClassicDark(primaryColor?: PrimaryColorStateType) {
@ -703,6 +729,32 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
function loadOceanLight(primaryColor?: PrimaryColorStateType) {
@ -1055,6 +1107,32 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
function loadOceanDark(primaryColor?: PrimaryColorStateType) {
@ -1397,6 +1475,32 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
export async function switchTheme(theme: ThemeStateType) {