oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

fix: emoji panel light mode support (#2292)

Browse source 
* fix: emoji panel light mode support

* fix: link darkMode prop to redux state

* fix: use getTheme selector directly
This commit is contained in:
Will G 2022-05-11 16:01:33 +10:00 committed by GitHub
parent b46196f2c9
commit 511567bc78
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
stylesheets/_session_conversation.scss
View file

@ -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;
}

5
ts/components/conversation/SessionEmojiPanel.tsx
View file

@ -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={''}