mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
fix: emoji panel light mode support (#2292)
* fix: emoji panel light mode support * fix: link darkMode prop to redux state * fix: use getTheme selector directly
This commit is contained in:
parent
b46196f2c9
commit
511567bc78
2 changed files with 19 additions and 6 deletions
|
@ -2,14 +2,17 @@
|
|||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fromShadow {
|
||||
from {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -19,9 +22,11 @@
|
|||
0% {
|
||||
box-shadow: 0px 0px 0px 0px $session-color-danger-alt;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0px 0px 12px 0px rgba($session-color-danger-alt, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 0px rgba($session-color-danger-alt, 1);
|
||||
}
|
||||
|
@ -73,6 +78,7 @@
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.message-selection-overlay div[role='button'] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
@ -248,8 +254,8 @@
|
|||
& > section.emoji-mart {
|
||||
font-family: $session-font-default;
|
||||
font-size: $session-font-sm;
|
||||
background-color: $session-shade-4;
|
||||
border: 1px solid $session-shade-6-alt;
|
||||
background-color: var(--color-cell-background);
|
||||
border: 1px solid var(--color-session-border);
|
||||
border-radius: 8px;
|
||||
padding-bottom: $session-margin-sm;
|
||||
|
||||
|
@ -259,7 +265,7 @@
|
|||
span {
|
||||
font-family: $session-font-default;
|
||||
padding-top: $session-margin-sm;
|
||||
background-color: $session-shade-4;
|
||||
background-color: var(--color-cell-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -286,11 +292,11 @@
|
|||
left: calc(100% - 79px);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: $session-shade-4;
|
||||
background-color: var(--color-cell-background);
|
||||
transform: rotate(45deg);
|
||||
border-radius: 3px;
|
||||
transform: scaleY(1.4) rotate(45deg);
|
||||
border: 0.7px solid $session-shade-6-alt;
|
||||
border: 0.7px solid var(--color-session-border);
|
||||
clip-path: polygon(100% 100%, 7.2px 100%, 100% 7.2px);
|
||||
}
|
||||
}
|
||||
|
@ -327,9 +333,11 @@
|
|||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
@ -405,10 +413,12 @@
|
|||
&.primary {
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(100%);
|
||||
border: 2px solid #161819;
|
||||
}
|
||||
|
||||
background-color: $session-shade-1-alt;
|
||||
border: 2px solid #161819;
|
||||
}
|
||||
|
|
|
@ -2,6 +2,8 @@ import React from 'react';
|
|||
import classNames from 'classnames';
|
||||
import { Picker } from 'emoji-mart';
|
||||
import { Constants } from '../../session';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getTheme } from '../../state/selectors/theme';
|
||||
|
||||
type Props = {
|
||||
onEmojiClicked: (emoji: any) => void;
|
||||
|
@ -10,6 +12,7 @@ type Props = {
|
|||
|
||||
export const SessionEmojiPanel = (props: Props) => {
|
||||
const { onEmojiClicked, show } = props;
|
||||
const darkMode = useSelector(getTheme) === 'dark';
|
||||
|
||||
return (
|
||||
<div className={classNames('session-emoji-panel', show && 'show')}>
|
||||
|
@ -17,7 +20,7 @@ export const SessionEmojiPanel = (props: Props) => {
|
|||
backgroundImageFn={() => './images/emoji/emoji-sheet-twitter-32.png'}
|
||||
set={'twitter'}
|
||||
sheetSize={32}
|
||||
darkMode={true}
|
||||
darkMode={darkMode}
|
||||
color={Constants.UI.COLORS.GREEN}
|
||||
showPreview={true}
|
||||
title={''}
|
||||
|
|
Loading…
Reference in a new issue