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

refactor: finished converting sass colors in _session.scss

Browse Source 
moved react-contextify overwrites to styled compeonts, consolidated some grays and semanic colors, for rgba colors we need to set css variables with RGB values since nothing else is supported
pull/2521/head
William Grant 3 years ago
parent b6cb283cdc
commit 2d23d3d850
12 changed files with 225 additions and 200 deletions
Show Stats Download Patch File Download Diff File

3
stylesheets/_global.scss
Unescape Escape View File

@ -166,7 +166,8 @@ $loading-height: 16px;
width: $loading-height;
border-radius: 2 * $loading-height;
border: solid 3px;
border-color: var(--color-light-blue-color) var(--color-light-blue-color) var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
border-color: var(--color-light-blue-color) var(--color-light-blue-color)
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
animation: rotate 1s linear infinite;
}

3
stylesheets/_modules.scss
Unescape Escape View File

@ -820,8 +820,7 @@
background-image: linear-gradient(
to bottom,
var(--color-transparent-color),
/* TODO does this work */
var(--color-transparent-color) 9%,
/* TODO does this work */ var(--color-transparent-color) 9%,
rgba(0, 0, 0, 0.6)
);
position: absolute;

71
stylesheets/_session.scss
Unescape Escape View File

@ -128,14 +128,14 @@ textarea {
}
&.primary {
background-color: var(--color-background-primary);
color: white;
color: var(--color-white-color);
.session-icon {
fill: var(--color-foreground-primary);
}
}
&.secondary {
background-color: $session-color-secondary;
background-color: var(--color-darkest-gray-color);
}
&.success {
/* TODO is this correct? */
@ -148,7 +148,7 @@ textarea {
background-color: var(--color-destructive-alt);
}
&.warning {
background-color: $session-color-warning;
background-color: var(--color-light-gray-color);
}
}
@ -167,13 +167,13 @@ textarea {
@include transparent-background(var(--color-dark-gray-color));
}
&.secondary {
@include transparent-background($session-color-secondary);
@include transparent-background(var(--color-darkest-gray-color));
}
&.danger {
@include transparent-background(var(--color-destructive));
}
&.warning {
@include transparent-background($session-color-warning-alt);
@include transparent-background(var(--color-warning));
}
&.warning,
&.danger,
@ -227,7 +227,7 @@ textarea {
}
.session-label {
color: white;
color: var(--color-white-color);
padding: var(--margins-sm);
width: 100%;
border-radius: 2px;
@ -236,16 +236,18 @@ textarea {
background-color: var(--color-dark-gray-color);
}
&.secondary {
background-color: $session-color-secondary;
background-color: var(--color-darkest-gray-color);
}
&.success {
/* TODO is this correct? */
background-color: var(--color-text); }
/* TODO is this correct? */
background-color: var(--color-text);
}
&.danger {
background-color: var(--color-destructive);
}
/* TODO Is this correct? */
&.warning {
background-color: $session-color-warning-alt;
background-color: var(--color-warning);
}
}
@ -360,7 +362,7 @@ label {
.conversation-header {
.module-avatar img {
box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2);
box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2);
}
.search-icon {
@ -401,13 +403,14 @@ label {
@include set-toast-theme(var(--color-session-green-color));
}
&--info {
@include set-toast-theme($session-color-info);
@include set-toast-theme(var(--color-darker-gray-color));
}
&--warning {
@include set-toast-theme($session-color-warning-alt);
@include set-toast-theme(var(--color-warning));
}
&--error {
@include set-toast-theme($session-color-error);
/* TODO is this correct?*/
@include set-toast-theme(var(--color-warning));
}
.Toastify__progress-bar {
@ -563,40 +566,6 @@ label {
}
}
.react-contexify {
// be sure it is more than the one set for the More Informations screen of messages
z-index: 30;
min-width: 200px;
box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
background-color: var(--color-received-message-background);
&.react-contexify__theme--dark {
background-color: var(--color-received-message-background);
}
.react-contexify__item {
background: var(--color-received-message-background);
}
.react-contexify__item:not(.react-contexify__item--disabled):hover
> .react-contexify__item__content {
background: var(--color-accent);
color: var(--color-text-menu-highlighted);
}
.react-contexify__item__content {
transition: var(--default-duration);
color: var(--color-text);
}
&.react-contexify__submenu {
top: -28px !important; // height of an item element
}
.react-contexify__submenu-arrow {
line-height: 16px; // center the arrow for submenu
}
}
.session-dropdown {
position: relative;
width: 100%;
@ -709,14 +678,14 @@ label {
display: flex;
justify-content: center;
background: white;
background: var(--color-white-color);
padding: 0.5rem;
svg {
width: 135px;
height: 135px;
border-radius: 3px;
padding: var(--margins-xs);
background-color: white;
background-color: var(--color-white-color);
}
}
@ -824,7 +793,7 @@ label {
width: $session-modal-size-sm;
height: $session-modal-size-sm;
padding: var(--margins-xs);
background-color: white;
background-color: var(--color-white-color);
border-radius: 3px;
}

10
stylesheets/_session_constants.scss
Unescape Escape View File

@ -99,24 +99,14 @@ $session-shade-1-alt: #0f1011;
$session-shade-2: #161616;
$session-shade-3: #191818;
$session-shade-5: #222325;
$session-shade-6: #232323;
$session-shade-6-alt: #2c2c2c;
$session-shade-7: #2e2e2e;
$session-shade-9: #313131;
$session-shade-10: #3e3e3e;
$session-shade-11: #3f3f3f;
$session-shade-12: #3f4146;
$session-shade-14: #535865;
$session-shade-15: #5b6c72;
$session-shade-18: #141414;
// Semantic Colors
$session-color-info: $session-shade-11;
$session-color-error: #edd422;
$session-color-warning: var(--color-light-gray-color);
$session-color-warning-alt: #ff9d00;
$session-color-secondary: $session-shade-6;
// Opacity and Shadow
$session-shadow-opacity: 0.15;
$session-overlay-opacity: 0.3;

6
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -52,7 +52,8 @@
position: relative;
&::before {
border: solid 3px;
border-color: var(--color-light-blue-color) var(--color-light-blue-color) var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
border-color: var(--color-light-blue-color) var(--color-light-blue-color)
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
}
}
@ -130,8 +131,7 @@
background-image: linear-gradient(
to bottom,
var(--color-transparent-color),
/* TODO does this work? */
var(--color-transparent-color) 9%,
/* TODO does this work? */ var(--color-transparent-color) 9%,
rgba(0, 0, 0, 0.02) 17%,
rgba(0, 0, 0, 0.05) 24%,
rgba(0, 0, 0, 0.08) 31%,

40
ts/components/SessionContextMenuContainer.tsx
Unescape Escape View File

@ -0,0 +1,40 @@
import styled from 'styled-components';
export const SessionContextMenuContainer = styled.div.attrs({
// custom props
})`
.react-contexify {
// be sure it is more than the one set for the More Informations screen of messages
z-index: 30;
min-width: 200px;
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);
&.react-contexify__theme--dark {
background-color: var(--color-received-message-background);
}
.react-contexify__item {
background: var(--color-received-message-background);
}
.react-contexify__item:not(.react-contexify__item--disabled):hover
> .react-contexify__item__content {
background: var(--color-accent);
color: var(--color-text-menu-highlighted);
}
.react-contexify__item__content {
transition: var(--default-duration);
color: var(--color-text);
}
&.react-contexify__submenu {
top: -28px !important; // height of an item element
}
.react-contexify__submenu-arrow {
line-height: 16px; // center the arrow for submenu
}
}
`;

91
ts/components/calling/CallButtons.tsx
Unescape Escape View File

@ -8,6 +8,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { getHasOngoingCallWithPubkey } from '../../state/selectors/call';
import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
import styled from 'styled-components';
import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
const videoTriggerId = 'video-menu-trigger-id';
const audioTriggerId = 'audio-menu-trigger-id';
@ -108,20 +109,22 @@ const VideoInputMenu = ({
camerasList: Array<InputItem>;
}) => {
return (
<Menu id={triggerId} animation={animation.fade}>
{camerasList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectCameraByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{camerasList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectCameraByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
@ -133,20 +136,22 @@ const AudioInputMenu = ({
audioInputsList: Array<InputItem>;
}) => {
return (
<Menu id={triggerId} animation={animation.fade}>
{audioInputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioInputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{audioInputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioInputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};
@ -158,20 +163,22 @@ const AudioOutputMenu = ({
audioOutputsList: Array<InputItem>;
}) => {
return (
<Menu id={triggerId} animation={animation.fade}>
{audioOutputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioOutputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
{audioOutputsList.map(m => {
return (
<Item
key={m.deviceId}
onClick={() => {
void CallManager.selectAudioOutputByDeviceId(m.deviceId);
}}
>
{m.label.substr(0, 40)}
</Item>
);
})}
</Menu>
</SessionContextMenuContainer>
);
};

93
ts/components/conversation/message/message-content/MessageContextMenu.tsx
Unescape Escape View File

@ -26,6 +26,7 @@ import { StateType } from '../../../../state/reducer';
import { getMessageContextMenuProps } from '../../../../state/selectors/conversations';
import { saveAttachmentToDisk } from '../../../../util/attachmentsUtil';
import { sendMessageReaction } from '../../../../util/reactions';
import { SessionContextMenuContainer } from '../../../SessionContextMenuContainer';
import { SessionEmojiPanel, StyledEmojiPanel } from '../../SessionEmojiPanel';
import { MessageReactBar } from './MessageReactBar';
@ -292,49 +293,55 @@ export const MessageContextMenu = (props: Props) => {
/>
</StyledEmojiPanelContainer>
)}
<Menu
id={contextMenuId}
onShown={onContextMenuShown}
onHidden={onContextMenuHidden}
animation={animation.fade}
>
{enableReactions && (
<MessageReactBar action={onEmojiClick} additionalAction={onShowEmoji} />
)}
{attachments?.length ? (
<Item onClick={saveAttachment}>{window.i18n('downloadAttachment')}</Item>
) : null}
<Item onClick={copyText}>{window.i18n('copyMessage')}</Item>
{(isSent || !isOutgoing) && <Item onClick={onReply}>{window.i18n('replyToMessage')}</Item>}
{(!isPublic || isOutgoing) && (
<Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item>
)}
{showRetry ? <Item onClick={onRetry}>{window.i18n('resend')}</Item> : null}
{isDeletable ? (
<>
<Item onClick={onSelect}>{selectMessageText}</Item>
</>
) : null}
{isDeletable && !isPublic ? (
<>
<Item onClick={onDelete}>{deleteMessageJustForMeText}</Item>
</>
) : null}
{isDeletableForEveryone ? (
<>
<Item onClick={onDeleteForEveryone}>{unsendMessageText}</Item>
</>
) : null}
{weAreAdmin && isPublic ? <Item onClick={onBan}>{window.i18n('banUser')}</Item> : null}
{weAreAdmin && isPublic ? <Item onClick={onUnban}>{window.i18n('unbanUser')}</Item> : null}
{weAreAdmin && isPublic && !isSenderAdmin ? (
<Item onClick={addModerator}>{window.i18n('addAsModerator')}</Item>
) : null}
{weAreAdmin && isPublic && isSenderAdmin ? (
<Item onClick={removeModerator}>{window.i18n('removeFromModerators')}</Item>
) : null}
</Menu>
<SessionContextMenuContainer>
<Menu
id={contextMenuId}
onShown={onContextMenuShown}
onHidden={onContextMenuHidden}
animation={animation.fade}
>
{enableReactions && (
<MessageReactBar action={onEmojiClick} additionalAction={onShowEmoji} />
)}
{attachments?.length ? (
<Item onClick={saveAttachment}>{window.i18n('downloadAttachment')}</Item>
) : null}
<Item onClick={copyText}>{window.i18n('copyMessage')}</Item>
{(isSent || !isOutgoing) && (
<Item onClick={onReply}>{window.i18n('replyToMessage')}</Item>
)}
{(!isPublic || isOutgoing) && (
<Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item>
)}
{showRetry ? <Item onClick={onRetry}>{window.i18n('resend')}</Item> : null}
{isDeletable ? (
<>
<Item onClick={onSelect}>{selectMessageText}</Item>
</>
) : null}
{isDeletable && !isPublic ? (
<>
<Item onClick={onDelete}>{deleteMessageJustForMeText}</Item>
</>
) : null}
{isDeletableForEveryone ? (
<>
<Item onClick={onDeleteForEveryone}>{unsendMessageText}</Item>
</>
) : null}
{weAreAdmin && isPublic ? <Item onClick={onBan}>{window.i18n('banUser')}</Item> : null}
{weAreAdmin && isPublic ? (
<Item onClick={onUnban}>{window.i18n('unbanUser')}</Item>
) : null}
{weAreAdmin && isPublic && !isSenderAdmin ? (
<Item onClick={addModerator}>{window.i18n('addAsModerator')}</Item>
) : null}
{weAreAdmin && isPublic && isSenderAdmin ? (
<Item onClick={removeModerator}>{window.i18n('removeFromModerators')}</Item>
) : null}
</Menu>
</SessionContextMenuContainer>
</StyledMessageContextMenu>
);
};

47
ts/components/menu/ConversationHeaderMenu.tsx
Unescape Escape View File

@ -26,6 +26,7 @@ import _ from 'lodash';
import { ContextConversationId } from '../leftpane/conversation-list-item/ConversationListItem';
import { getSelectedConversationKey } from '../../state/selectors/conversations';
import { useSelector } from 'react-redux';
import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
export type PropsConversationHeaderMenu = {
triggerId: string;
@ -41,28 +42,30 @@ export const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
}
return (
<ContextConversationId.Provider value={selectedConversation}>
<Menu id={triggerId} animation={animation.fade}>
<AcceptMenuItem />
<DeclineMenuItem />
<DisappearingMessageMenuItem />
<NotificationForConvoMenuItem />
<PinConversationMenuItem />
<BlockMenuItem />
<CopyMenuItem />
<MarkAllReadMenuItem />
<ChangeNicknameMenuItem />
<ClearNicknameMenuItem />
<DeleteMessagesMenuItem />
<AddModeratorsMenuItem />
<RemoveModeratorsMenuItem />
<BanMenuItem />
<UnbanMenuItem />
<UpdateGroupNameMenuItem />
<LeaveGroupMenuItem />
<InviteContactMenuItem />
<DeleteContactMenuItem />
<ShowUserDetailsMenuItem />
</Menu>
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
<AcceptMenuItem />
<DeclineMenuItem />
<DisappearingMessageMenuItem />
<NotificationForConvoMenuItem />
<PinConversationMenuItem />
<BlockMenuItem />
<CopyMenuItem />
<MarkAllReadMenuItem />
<ChangeNicknameMenuItem />
<ClearNicknameMenuItem />
<DeleteMessagesMenuItem />
<AddModeratorsMenuItem />
<RemoveModeratorsMenuItem />
<BanMenuItem />
<UnbanMenuItem />
<UpdateGroupNameMenuItem />
<LeaveGroupMenuItem />
<InviteContactMenuItem />
<DeleteContactMenuItem />
<ShowUserDetailsMenuItem />
</Menu>
</SessionContextMenuContainer>
</ContextConversationId.Provider>
);
};

39
ts/components/menu/ConversationListItemContextMenu.tsx
Unescape Escape View File

@ -20,6 +20,7 @@ import {
ShowUserDetailsMenuItem,
UnbanMenuItem,
} from './Menu';
import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
export type PropsContextConversationItem = {
triggerId: string;
@ -29,24 +30,26 @@ const ConversationListItemContextMenu = (props: PropsContextConversationItem) =>
const { triggerId } = props;
return (
<Menu id={triggerId} animation={animation.fade}>
<AcceptMenuItem />
<DeclineMenuItem />
<NotificationForConvoMenuItem />
<PinConversationMenuItem />
<BlockMenuItem />
<CopyMenuItem />
<MarkAllReadMenuItem />
<ChangeNicknameMenuItem />
<ClearNicknameMenuItem />
<DeleteMessagesMenuItem />
<BanMenuItem />
<UnbanMenuItem />
<InviteContactMenuItem />
<DeleteContactMenuItem />
<LeaveGroupMenuItem />
<ShowUserDetailsMenuItem />
</Menu>
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
<AcceptMenuItem />
<DeclineMenuItem />
<NotificationForConvoMenuItem />
<PinConversationMenuItem />
<BlockMenuItem />
<CopyMenuItem />
<MarkAllReadMenuItem />
<ChangeNicknameMenuItem />
<ClearNicknameMenuItem />
<DeleteMessagesMenuItem />
<BanMenuItem />
<UnbanMenuItem />
<InviteContactMenuItem />
<DeleteContactMenuItem />
<LeaveGroupMenuItem />
<ShowUserDetailsMenuItem />
</Menu>
</SessionContextMenuContainer>
);
};

9
ts/components/menu/MessageRequestBannerContextMenu.tsx
Unescape Escape View File

@ -3,6 +3,7 @@ import { animation, Menu } from 'react-contexify';
import _ from 'lodash';
import { HideBannerMenuItem } from './Menu';
import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
export type PropsContextConversationItem = {
triggerId: string;
@ -12,9 +13,11 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) =>
const { triggerId } = props;
return (
<Menu id={triggerId} animation={animation.fade}>
<HideBannerMenuItem />
</Menu>
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
<HideBannerMenuItem />
</Menu>
</SessionContextMenuContainer>
);
};

13
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -3,7 +3,9 @@ import React from 'react';
import { createGlobalStyle } from 'styled-components';
const white = '#ffffff';
const whiteRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba
const black = '#000000';
const blackRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba
const warning = '#e7b100';
const destructive = '#ff453a';
const destructiveAlt = '#ff4538';
@ -374,13 +376,15 @@ export const SessionGlobalStyles = createGlobalStyle`
/* COLORS NOT CHANGING BETWEEN THEMES */
--color-black-color: ${black};
--color-light-black-color: ${`rgba(${black}, 0.2)`};
--color-lighter-black-color: ${`rgba(${black}, 0.15)`};
--color-darkest-black-color: ${`rgba(${black}, 0.6)`};
--color-black-color-rgb: ${blackRGB};
--color-light-black-color: ${`rgba(${blackRGB}, 0.2)`};
--color-lighter-black-color: ${`rgba(${blackRGB}, 0.15)`};
--color-darkest-black-color: ${`rgba(${blackRGB}, 0.6)`};
--color-session-green-color: ${sessionGreenColor};
--color-white-color: ${white};
--color-darkest-white-color: ${`rgba(${white}, 0.85)`};
--color-white-color-rgb: ${whiteRGB};
--color-darkest-white-color: ${`rgba(${whiteRGB}, 0.85)`};
--color-gray-color: ${grayColor};
--color-light-gray-color: ${lightGrayColor};
@ -432,7 +436,6 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-button-green: ${lightButtonGreen};
--color-modal-background: ${lightModalBackground};
--color-avatar-border-color: ${avatarBorderColor};
};
`;

Write Preview
Loading…
Cancel
Save