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

cleanup theme object

Browse source
This commit is contained in:
audric 2021-08-30 14:26:58 +10:00
parent 8ebcb2d1e1
commit e85f351540
7 changed files with 7 additions and 295 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
stylesheets/_conversation.scss
View file

@ -144,97 +144,3 @@
padding-top: 40px;
padding-bottom: 40px;
}
// We need to use the wrapper because the conversation view calculates the height of all
// things in the composition area. A margin on an inner div won't be included in that
// height calculation.
.bottom-bar .quote-wrapper {
margin-inline-start: 37px;
margin-inline-end: 73px;
margin-top: 3px;
margin-bottom: -5px;
}
.bottom-bar .preview-wrapper {
margin-top: 3px;
margin-inline-start: 37px;
margin-inline-end: 73px;
margin-bottom: 2px;
}
.bottom-bar {
box-sizing: content-box;
$button-width: 36px;
@include themify($themes) {
border-top: themed('sessionBorder');
}
form.send {
margin-bottom: 0px;
background: $color-white;
&.video-attachment {
.image-container {
position: relative;
}
.outer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
.play.icon {
height: 30px;
width: 30px;
@include color-svg('../images/play.svg', white);
}
}
}
}
.attachment-previews {
padding: 0 36px;
margin-bottom: 3px;
.attachment-preview {
padding: 13px 10px 0;
}
img {
border: 2px solid #ddd;
border-radius: $border-radius;
max-height: 100px;
}
.close {
position: absolute;
top: 5px;
right: 2px;
background: #999;
&:hover {
background: $grey;
}
}
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 7px;
padding: 0px 15px;
}
.choose-file {
float: left;
height: 36px;
}
}

52
stylesheets/_quote.scss
View file

@ -17,46 +17,6 @@
}
}
// This is related to the bottomBar quote&mention logic
.bottom-bar .module-quote {
margin: 0;
border-left-style: none;
@include themify($themes) {
background: themed('quoteBottomBarBackground');
}
.module-quote__primary__author {
@include themify($themes) {
color: themed('textColor');
}
}
.module-quote__primary__text {
@include themify($themes) {
color: themed('textColor');
}
a {
@include themify($themes) {
color: themed('textColor');
}
}
}
// close button when quoting a message
&__close {
&-container {
@include themify($themes) {
background: themed('backgroundPrimary');
}
}
&-button {
@include themify($themes) {
@include color-svg('../images/x.svg', themed('foregroundPrimary'));
}
}
}
}
// This is related to the quote logic inside messages
.module-quote {
&--outgoing {
@ -322,18 +282,6 @@
}
}
.bottom-bar .member-item {
@include themify($themes) {
border-bottom: themed('sessionBorder');
}
&:hover {
@include themify($themes) {
background: themed('clickableHovered');
}
}
}
// animate when user is scrolling to a quoted message
@keyframes blinker {
0% {

44
stylesheets/_session.scss
View file

@ -1039,50 +1039,6 @@ label {
transition: $session-transition-duration !important;
}
.bottom-bar {
.compose {
max-height: 200px;
}
.send-message-container {
display: flex;
flex-grow: 1;
height: 48px;
margin-bottom: -5px;
}
textarea.send-message {
@include themify($themes) {
background: themed('composeViewBackground');
color: themed('textColor');
}
border: none;
margin: 0px;
padding: 0px $session-margin-lg;
font-size: $session-font-md;
line-height: 1.3em;
align-self: center;
}
}
.bottom-bar form {
&.send {
@include themify($themes) {
background: themed('composeViewBackground');
}
}
&.active textarea {
border: none;
}
}
.dark-theme .bottom-bar .send-message[disabled='disabled'] {
@include themify($themes) {
background: themed('composeViewBackground');
}
}
.session-radio-group fieldset {
border: none;
margin-inline-start: $session-margin-sm;

12
stylesheets/themes.scss
View file

@ -41,7 +41,6 @@ $themes: (
buttonGreen: #272726,
// conversation view
composeViewBackground: #fcfcfc,
composeViewTextFieldBackground: #ededed,
receivedMessageBackground: #f5f5f5,
sentMessageBackground: $accentLightTheme,
receivedMessageText: $black,
@ -65,9 +64,6 @@ $themes: (
// context menu
contextMenuBackground: #f5f5f5,
filterSessionText: brightness(0) saturate(100%),
lastSeenIndicatorColor: #62656a,
lastSeenIndicatorTextColor: #070c14,
quoteBottomBarBackground: #f0f0f0,
),
dark: (
accent: $accentDarkTheme,
@ -91,9 +87,8 @@ $themes: (
foregroundPrimary: $white,
buttonGreen: $accentDarkTheme,
// conversation view
composeViewBackground: #1b1b1b,
composeViewTextFieldBackground: #141414,
receivedMessageBackground: #222325,
composeViewBackground: #171717,
receivedMessageBackground: #2d2d2d,
sentMessageBackground: $accentDarkTheme,
receivedMessageText: $white,
sentMessageText: $black,
@ -116,9 +111,6 @@ $themes: (
// context menu
contextMenuBackground: #212121,
filterSessionText: none,
lastSeenIndicatorColor: #353535,
lastSeenIndicatorTextColor: #a8a9aa,
quoteBottomBarBackground: #404040,
),
);

1
ts/components/session/conversation/SessionCompositionBox.tsx
View file

@ -55,6 +55,7 @@ import { connect } from 'react-redux';
import { StateType } from '../../../state/reducer';
import { getTheme } from '../../../state/selectors/theme';
import { removeAllStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments';
import { useTheme } from 'styled-components';
export interface ReplyingToMessageProps {
convoId: string;

68
ts/state/ducks/SessionTheme.tsx
View file

@ -12,8 +12,6 @@ const accentLightTheme = '#00e97b';
const accentDarkTheme = '#00f782';
const borderLightThemeColor = '#f1f1f1';
const borderDarkThemeColor = '#ffffff0F';
const borderHighContrastLightTheme = '#afafaf';
const borderHighContrastDarkTheme = '#484848';
// const borderAvatarColor = '#00000059';
// const borderLightTheme = '#f1f1f1';
@ -48,113 +46,53 @@ export const lightTheme: DefaultTheme = {
accentButton: black,
warning: warning,
destructive: destructive,
cellBackground: '#fcfcfc',
modalBackground: '#fcfcfc',
fakeChatBubbleBackground: '#f5f5f5',
// input
inputBackground: '#8E8E93331F',
// text
textColor: black,
textColorSubtle: `${black}99`,
textColorSubtleNoOpacity: '#52514f',
textColorOpposite: white,
textHighlight: `${black}33`,
textAccent: '#00c769',
// inbox
inboxBackground: white,
// buttons
backgroundPrimary: '#272726',
foregroundPrimary: white,
buttonGreen: '#272726',
// conversation view
composeViewBackground: '#fcfcfc',
composeViewTextFieldBackground: '#ededed',
receivedMessageBackground: '#f5f5f5',
composeViewButtonBackground: '#efefef',
sentMessageBackground: accentLightTheme,
receivedMessageText: black,
sentMessageText: white,
sessionShadow: `0 0 4px 0 ${black}5E`,
sessionShadowColor: `${black}5E`,
// left pane
conversationList: white,
conversationItemHasUnread: '#fcfcfc',
conversationItemSelected: '#f0f0f0',
clickableHovered: '#dfdfdf',
sessionBorder: `1px solid ${borderLightThemeColor}`,
sessionBorderColor: borderLightThemeColor,
sessionBorderHighContrast: `1px solid ${borderHighContrastLightTheme}`,
sessionUnreadBorder: `4px solid ${accentLightTheme}`,
leftpaneOverlayBackground: white,
recoveryPhraseBannerBackground: white,
// scrollbars
scrollBarTrack: '#fcfcfc',
scrollBarThumb: '#474646',
// pill divider:
pillDividerColor: `${black}1A`,
pillDividerTextColor: '#555555',
// context menu
contextMenuBackground: '#f5f5f5',
filterSessionText: 'brightness(0) saturate(100%)',
lastSeenIndicatorColor: '#62656a',
lastSeenIndicatorTextColor: '#070c14',
quoteBottomBarBackground: '#f0f0f0',
},
};
export const darkTheme = {
export const darkTheme: DefaultTheme = {
common,
colors: {
accent: accentDarkTheme,
accentButton: accentDarkTheme,
warning: warning,
destructive: destructive,
cellBackground: '#1b1b1b',
modalBackground: '#101011',
fakeChatBubbleBackground: '#212121',
// input
inputBackground: '#8e8e931F',
// text
textColor: white,
textColorSubtle: `${white}99`,
textColorSubtleNoOpacity: '#7f7d7d',
textColorOpposite: black,
textHighlight: `${accentDarkTheme}99`,
textAccent: accentDarkTheme,
// inbox
inboxBackground: 'linear-gradient(180deg, #171717 0%, #121212 100%)',
// buttons
backgroundPrimary: '#474646',
foregroundPrimary: white,
buttonGreen: accentDarkTheme,
// conversation view
composeViewBackground: '#1b1b1b',
composeViewTextFieldBackground: '#141414',
receivedMessageBackground: '#222325',
composeViewButtonBackground: '#232323',
sentMessageBackground: accentDarkTheme,
receivedMessageText: white,
sentMessageText: black,
sessionShadow: `0 0 4px 0 ${white}33`,
sessionShadowColor: `${white}33`,
// left pane
conversationList: '#1b1b1b',
conversationItemHasUnread: '#2c2c2c',
conversationItemSelected: '#404040',
clickableHovered: '#414347',
sessionBorder: `1px solid ${borderDarkThemeColor}`,
sessionBorderColor: borderDarkThemeColor,
sessionBorderHighContrast: `1px solid ${borderHighContrastDarkTheme}`,
sessionUnreadBorder: `4px solid ${accentDarkTheme}`,
leftpaneOverlayBackground: 'linear-gradient(180deg, #171717 0%, #121212 100%)',
recoveryPhraseBannerBackground: '#1f1f1f',
// scrollbars
scrollBarTrack: '#1b1b1b',
scrollBarThumb: '#474646',
// pill divider:
pillDividerColor: '#353535',
pillDividerTextColor: '#a0a0a0',
// context menu
contextMenuBackground: '#212121',
filterSessionText: 'none',
lastSeenIndicatorColor: '#353535',
lastSeenIndicatorTextColor: '#a8a9aa',
quoteBottomBarBackground: '#404040',

31
ts/styled.d.ts vendored
View file

@ -28,53 +28,24 @@ declare module 'styled-components' {
accentButton: string;
warning: string;
destructive: string;
cellBackground: string;
modalBackground: string;
fakeChatBubbleBackground: string;
// input
inputBackground: string;
// text
textColor: string;
textColorSubtle: string;
textColorSubtleNoOpacity: string;
textColorOpposite: string;
textHighlight: string;
textAccent: string;
// inbox
inboxBackground: string;
// buttons
backgroundPrimary: string;
foregroundPrimary: string;
buttonGreen: string;
// conversation view
composeViewBackground: string;
composeViewTextFieldBackground: string;
receivedMessageBackground: string;
composeViewButtonBackground: string;
sentMessageBackground: string;
receivedMessageText: string;
sentMessageText: string;
sessionShadow: string;
sessionShadowColor: string;
// left pane
conversationList: string;
conversationItemHasUnread: string;
conversationItemSelected: string;
clickableHovered: string;
sessionBorder: string;
sessionBorderColor: string;
sessionBorderHighContrast: string;
sessionUnreadBorder: string;
leftpaneOverlayBackground: string;
recoveryPhraseBannerBackground: string;
// scrollbars
scrollBarTrack: string;
scrollBarThumb: string;
// pill divider:
pillDividerColor: string;
pillDividerTextColor: string;
// context menu
contextMenuBackground: string;
filterSessionText: string;
lastSeenIndicatorColor: string;
lastSeenIndicatorTextColor: string;
quoteBottomBarBackground: string;