{this.state.error && (
<>
{showResetElements ? (
-
{window.i18n('maxPasswordAttempts')}
+
{window.i18n('maxPasswordAttempts')}
) : (
-
{this.state.error}
+
{this.state.error}
)}
)}
@@ -174,7 +183,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
{showResetElements && (
@@ -182,6 +191,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
@@ -196,10 +206,12 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
{
this.setState({ clearDataView: false });
}}
@@ -209,4 +221,18 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
}
}
-export const SessionPasswordPrompt = withTheme(SessionPasswordPromptInner);
+export const SessionPasswordPrompt = () => {
+ useEffect(() => {
+ if ((window as any).theme === 'dark') {
+ switchHtmlToDarkTheme();
+ } else {
+ switchHtmlToLightTheme();
+ }
+ }, []);
+
+ return (
+
+
+
+ );
+};
diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx
index 2dd1a9beb..1d6b6aefe 100644
--- a/ts/components/basic/SessionToggle.tsx
+++ b/ts/components/basic/SessionToggle.tsx
@@ -2,19 +2,19 @@ import React from 'react';
import { updateConfirmModal } from '../../state/ducks/modalDialog';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
-import { whiteColor } from '../../themes/SessionTheme';
const StyledKnob = styled.div<{ active: boolean }>`
position: absolute;
- top: 0.5px;
- left: 0.5px;
+ top: ${props => (props.active ? '1px' : '0.5px')};
+ left: ${props => (props.active ? '2px' : '0.5px')};
height: 21px;
width: 21px;
border-radius: 28px;
- /* TODO Theming update */
- background-color: ${whiteColor};
+ background-color: var(--toggle-switch-ball-color);
box-shadow: ${props =>
- props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'};
+ props.active
+ ? '-2px 1px 3px var(--toggle-switch-ball-shadow-color);'
+ : '2px 1px 3px var(--toggle-switch-ball-shadow-color);'};
transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
@@ -24,17 +24,22 @@ const StyledKnob = styled.div<{ active: boolean }>`
const StyledSessionToggle = styled.div<{ active: boolean }>`
width: 51px;
height: 25px;
- border: 1px solid #e5e5ea; // TODO Theming update
+ background-color: (--toggle-switch-off-background-color);
+ border: 1px solid var(--toggle-switch-off-border-color);
border-radius: 16px;
position: relative;
cursor: pointer;
- background-color: var(--color-transparent-color);
transition: var(--default-duration);
background-color: ${props =>
- props.active ? 'var(--color-accent)' : 'var(--color-clickable-hovered)'};
- border-color: ${props => (props.active ? 'var(--color-accent)' : 'var(--color-cell-background)')};
+ props.active
+ ? 'var(--toggle-switch-on-background-color)'
+ : 'var(--toggle-switch-off-background-color)'};
+ border-color: ${props =>
+ props.active
+ ? 'var(--toggle-switch-on-border-color)'
+ : 'var(--toggle-switch-off-border-color)'};
`;
type Props = {
diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx
index f1aaefc23..19be88a5a 100644
--- a/ts/components/conversation/SessionMessagesListContainer.tsx
+++ b/ts/components/conversation/SessionMessagesListContainer.tsx
@@ -68,19 +68,6 @@ const StyledMessagesContainer = styled.div<{}>`
height: 40px;
width: 40px;
border-radius: 50%;
- opacity: 1;
- background-color: var(--color-cell-background);
- box-shadow: var(--color-session-shadow);
-
- svg path {
- transition: var(--default-duration);
- opacity: 0.6;
- fill: var(--color-text);
- }
-
- &:hover svg path {
- opacity: 1;
- }
}
`;
diff --git a/ts/components/conversation/SessionRecording.tsx b/ts/components/conversation/SessionRecording.tsx
index 97c576b54..6e3cc7239 100644
--- a/ts/components/conversation/SessionRecording.tsx
+++ b/ts/components/conversation/SessionRecording.tsx
@@ -127,7 +127,7 @@ export class SessionRecording extends React.Component {
)}
@@ -174,6 +174,7 @@ export class SessionRecording extends React.Component {
iconSize={'large'}
iconRotation={90}
onClick={this.onSendVoiceMessage}
+ margin={'var(--margins-sm)'}
/>
)}
diff --git a/ts/components/conversation/composition/CompositionButtons.tsx b/ts/components/conversation/composition/CompositionButtons.tsx
index 6f3046daf..921893ed8 100644
--- a/ts/components/conversation/composition/CompositionButtons.tsx
+++ b/ts/components/conversation/composition/CompositionButtons.tsx
@@ -1,54 +1,77 @@
import React from 'react';
+import styled from 'styled-components';
import { SessionIconButton } from '../../icon';
+const StyledChatButtonContainer = styled.div`
+ .session-icon-button {
+ svg {
+ background-color: var(--chat-buttons-background-color);
+ }
+
+ &:hover svg {
+ background-color: var(--chat-buttons-background-hover-color);
+ }
+ }
+`;
+
export const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
return (
-
+
+
+
);
};
export const StartRecordingButton = (props: { onClick: () => void }) => {
return (
-
- );
-};
-
-export const ToggleEmojiButton = React.forwardRef
void }>(
- (props, ref) => {
- return (
+
+
+ );
+};
+
+export const ToggleEmojiButton = React.forwardRef void }>(
+ (props, ref) => {
+ return (
+
+
+
);
}
);
export const SendMessageButton = (props: { onClick: () => void }) => {
return (
-
+
void }) => {
onClick={props.onClick}
dataTestId="send-message-button"
/>
-
+
);
};
diff --git a/ts/components/conversation/message/message-content/MessageReactBar.tsx b/ts/components/conversation/message/message-content/MessageReactBar.tsx
index 15c236d9d..68c2f2c25 100644
--- a/ts/components/conversation/message/message-content/MessageReactBar.tsx
+++ b/ts/components/conversation/message/message-content/MessageReactBar.tsx
@@ -12,7 +12,7 @@ type Props = {
};
const StyledMessageReactBar = styled.div`
- background-color: var(--color-received-message-background);
+ background-color: var(--emoji-reaction-bar-background-color);
border-radius: 25px;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
@@ -26,9 +26,10 @@ const StyledMessageReactBar = styled.div`
align-items: center;
.session-icon-button {
- border-color: transparent !important;
- box-shadow: none !important;
margin: 0 4px;
+ &:hover svg {
+ background-color: var(--chat-buttons-background-hover-color);
+ }
}
`;
@@ -44,7 +45,7 @@ const ReactButton = styled.span`
font-size: 24px;
:hover {
- background-color: var(--color-compose-view-button-background);
+ background-color: var(--chat-buttons-background-hover-color);
}
`;
@@ -79,11 +80,11 @@ export const MessageReactBar = (props: Props): ReactElement => {
))}
diff --git a/ts/components/conversation/message/message-item/GroupInvitation.tsx b/ts/components/conversation/message/message-item/GroupInvitation.tsx
index 8b3d7ea1a..8fafccf9f 100644
--- a/ts/components/conversation/message/message-item/GroupInvitation.tsx
+++ b/ts/components/conversation/message/message-item/GroupInvitation.tsx
@@ -25,8 +25,8 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
{
acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx
index 1814fec37..b774395f6 100644
--- a/ts/components/dialog/SessionConfirm.tsx
+++ b/ts/components/dialog/SessionConfirm.tsx
@@ -64,7 +64,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
const cancelText = props.cancelText || window.i18n('cancel');
const showHeader = !!props.title;
- const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle';
+ const messageSubText = messageSub ? 'session-confirm-main-message' : undefined;
const onClickOkHandler = async () => {
if (onClickOk) {
@@ -120,11 +120,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
)}
-
+
diff --git a/ts/components/dialog/SessionPasswordDialog.tsx b/ts/components/dialog/SessionPasswordDialog.tsx
index 09a8daa39..4bbb8cb03 100644
--- a/ts/components/dialog/SessionPasswordDialog.tsx
+++ b/ts/components/dialog/SessionPasswordDialog.tsx
@@ -140,7 +140,7 @@ export class SessionPasswordDialog extends React.Component
{
<>
{message && (
<>
- {message}
+ {message}
)}
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
index 1a3430c71..8bf5abdd6 100644
--- a/ts/components/icon/SessionIconButton.tsx
+++ b/ts/components/icon/SessionIconButton.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
import { SessionIcon, SessionIconProps } from '../icon';
import _ from 'lodash';
import { SessionNotificationCount } from './SessionNotificationCount';
+import styled from 'styled-components';
interface SProps extends SessionIconProps {
onClick?: (e: React.MouseEvent) => void;
@@ -15,6 +16,26 @@ interface SProps extends SessionIconProps {
style?: object;
}
+const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolean }>`
+ background-color: var(--button-icon-background-color);
+
+ svg path {
+ transition: var(--default-duration);
+ ${props =>
+ !props.color &&
+ `fill:
+ ${
+ props.isSelected
+ ? 'var(--button-icon-stroke-selected-color)'
+ : 'var(--button-icon-stroke-color)'
+ };`}
+ }
+
+ &:hover svg path {
+ ${props => !props.color && `fill: var(--button-icon-stroke-hover-color);`}
+ }
+`;
+
const SessionIconButtonInner = React.forwardRef((props, ref) => {
const {
iconType,
@@ -43,8 +64,10 @@ const SessionIconButtonInner = React.forwardRef((props,
};
return (
- ((props,
iconPadding={iconPadding}
/>
{Boolean(notificationCount) && }
-
+
);
});
diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx
index 74f7bbc60..fc4e9c6c6 100644
--- a/ts/components/leftpane/ActionsPanel.tsx
+++ b/ts/components/leftpane/ActionsPanel.tsx
@@ -101,7 +101,6 @@ const Section = (props: { type: SectionType }) => {
iconSize="medium"
dataTestId="message-section"
iconType={'chatBubble'}
- iconColor={undefined}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
@@ -113,7 +112,6 @@ const Section = (props: { type: SectionType }) => {
iconSize="medium"
dataTestId="settings-section"
iconType={'gear'}
- iconColor={undefined}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
@@ -134,7 +132,6 @@ const Section = (props: { type: SectionType }) => {
iconSize="medium"
iconType={'moon'}
dataTestId="theme-section"
- iconColor={undefined}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
diff --git a/ts/components/leftpane/LeftPaneSettingSection.tsx b/ts/components/leftpane/LeftPaneSettingSection.tsx
index 25f24e9ec..db1549c4c 100644
--- a/ts/components/leftpane/LeftPaneSettingSection.tsx
+++ b/ts/components/leftpane/LeftPaneSettingSection.tsx
@@ -15,6 +15,33 @@ import { SessionIcon } from '../icon';
import { SessionSettingCategory } from '../settings/SessionSettings';
import { resetConversationExternal } from '../../state/ducks/conversations';
+const StyledSettingsSectionTitle = styled.strong`
+ font-family: var(--font-font-accent);
+ font-size: var(--font-size-md);
+`;
+
+const StyledSettingsListItem = styled.div<{ active: boolean }>`
+ background-color: ${props =>
+ props.active
+ ? 'var(--settings-tab-background-selected-color)'
+ : 'var(--settings-tab-background-color)'};
+ color: var(--settings-tab-text-color);
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 74px;
+ line-height: 1.4;
+ padding: 0px var(--margins-md);
+ flex-shrink: 0;
+ cursor: pointer;
+ transition: var(--default-duration) !important;
+
+ :hover {
+ background: var(--settings-tab-background-hover-color);
+ }
+`;
+
const getCategories = () => {
return [
{
@@ -92,9 +119,7 @@ const LeftPaneSettingsCategoryRow = (props: {
}
}}
>
-
+
{title}
@@ -123,29 +148,6 @@ const StyledContentSection = styled.div`
overflow-y: auto;
`;
-const StyledSettingsSectionTitle = styled.strong`
- font-family: var(--font-font-accent);
- font-size: var(--font-size-md);
-`;
-
-const StyledSettingsListItem = styled.div<{ active: boolean }>`
- background: ${props => (props.active ? 'var(--color-conversation-item-selected)' : 'none')};
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- height: 74px;
- line-height: 1.4;
- padding: 0px var(--margins-md);
- flex-shrink: 0;
- cursor: pointer;
- transition: var(--default-duration) !important;
-
- :hover {
- background: var(--color-clickable-hovered);
- }
-`;
-
export const LeftPaneSettingSection = () => {
return (
diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx
index 713592ae9..cb407d9be 100644
--- a/ts/components/lightbox/Lightbox.tsx
+++ b/ts/components/lightbox/Lightbox.tsx
@@ -14,6 +14,7 @@ import { Flex } from '../basic/Flex';
import { SessionIconButton, SessionIconType } from '../icon';
import * as MIME from '../../types/MIME';
import { isUndefined } from 'lodash';
+import styled from 'styled-components';
const Colors = {
TEXT_SECONDARY: '#bbb',
@@ -127,6 +128,17 @@ const styles = {
},
};
+const StyledIconButton = styled.div`
+ .session-icon-button {
+ opacity: 0.4;
+ transition: opacity var(--default-duration);
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+`;
+
interface IconButtonProps {
onClick?: () => void;
style?: React.CSSProperties;
@@ -162,14 +174,16 @@ const IconButton = ({ onClick, type }: IconButtonProps) => {
}
return (
-
+
+
+
);
};
diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx
index ed9830868..4dd0a59aa 100644
--- a/ts/components/settings/BlockedList.tsx
+++ b/ts/components/settings/BlockedList.tsx
@@ -18,20 +18,28 @@ const BlockedEntriesContainer = styled.div`
overflow: auto;
min-height: 40px;
max-height: 100%;
- background: var(--color-input-background); // TODO theming update
`;
const BlockedEntriesRoundedContainer = styled.div`
overflow: hidden;
+ background: var(--background-secondary-color);
+ border: 1px solid var(--border-color);
border-radius: 16px;
padding: var(--margins-lg);
- background: var(--color-input-background); // TODO theming update
+ margin: 0 var(--margins-lg);
`;
const BlockedContactsSection = styled.div`
display: flex;
flex-direction: column;
min-height: 0;
+
+ background: var(--settings-tab-background-color);
+ color: var(--settings-tab-text-color);
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+
+ margin-bottom: var(--margins-lg);
`;
const BlockedContactListTitle = styled.div`
@@ -50,10 +58,6 @@ export const StyledBlockedSettingItem = styled.div<{ clickable: boolean }>`
font-size: var(--font-size-md);
padding: var(--margins-lg);
- background: var(--color-cell-background);
- color: var(--color-text);
- border-bottom: var(--border-session);
-
cursor: ${props => (props.clickable ? 'pointer' : 'unset')};
`;
@@ -143,18 +147,20 @@ export const BlockedContactsList = () => {
iconRotation={expanded ? 0 : 180}
dataTestId="reveal-blocked-user-settings"
/>
-
)}
{expanded && !noBlockedNumbers ? (
-
+ <>
+
+
+
) : null}
);
diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx
index a6ed9f0ad..9ca8d3003 100644
--- a/ts/components/settings/SessionSettingListItem.tsx
+++ b/ts/components/settings/SessionSettingListItem.tsx
@@ -26,7 +26,6 @@ export const StyledDescriptionSettingsItem = styled.div`
font-size: var(--font-size-sm);
font-weight: 400;
max-width: 700px;
- color: var(--color-text-subtle);
`;
export const StyledTitleSettingsItem = styled.div`
@@ -47,10 +46,12 @@ const StyledDescriptionContainer = styled(StyledDescriptionSettingsItem)`
export const StyledSettingItem = styled.div`
font-size: var(--font-size-md);
padding: var(--margins-lg);
+ margin-bottom: var(--margins-lg);
- background: var(--color-cell-background);
- color: var(--color-text);
- border-bottom: var(--border-session);
+ background: var(--settings-tab-background-color);
+ color: var(--settings-tab-text-color);
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
`;
const StyledSettingItemInline = styled(StyledSettingItem)`
@@ -61,9 +62,12 @@ const StyledSettingItemInline = styled(StyledSettingItem)`
`;
const StyledSettingItemClickable = styled(StyledSettingItemInline)`
+ cursor: pointer;
:hover {
- background: var(--color-clickable-hovered);
- cursor: pointer;
+ background: var(--settings-tab-background-hover-color);
+ }
+ :active {
+ background: var(--settings-tab-background-selected-color);
}
`;
diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx
index fadee22b5..5f0537e3f 100644
--- a/ts/components/settings/SessionSettings.tsx
+++ b/ts/components/settings/SessionSettings.tsx
@@ -61,21 +61,33 @@ const StyledSpanSessionInfo = styled.span`
opacity: 0.4;
transition: var(--default-duration);
user-select: text;
+ cursor: pointer;
- :hover {
+ &:hover {
opacity: 1;
}
`;
const SessionInfo = () => {
- const openOxenWebsite = () => {
- void shell.openExternal('https://oxen.io/');
- };
return (
- v{window.versionInfo.version}
+ {
+ void shell.openExternal(
+ `https://github.com/oxen-io/session-desktop/releases/tag/v${window.versionInfo.version}`
+ );
+ }}
+ >
+ v{window.versionInfo.version}
+
-
+ {
+ void shell.openExternal('https://oxen.io/');
+ }}
+ />
{window.versionInfo.commitHash}
@@ -84,18 +96,22 @@ const SessionInfo = () => {
const StyledPasswordInput = styled.input`
width: 100%;
- background: var(--color-input-background);
- color: var(--color-text);
+ background: var(--text-box-background-color);
+ color: var(--text-box-text-user-color);
padding: var(--margins-xs) var(--margins-md);
margin-bottom: var(--margins-lg);
outline: none;
- border: none;
- border-radius: 2px;
+ border: 1px solid var(--border-color);
+ border-radius: 7px;
text-align: center;
font-size: 24px;
letter-spacing: 5px;
font-family: var(--font-default);
+
+ ::placeholder {
+ color: var(--text-box-text-control-color);
+ }
`;
const StyledH3 = styled.h3`
@@ -123,7 +139,7 @@ const PasswordLock = ({
autoFocus={true}
/>
- {pwdLockError && {pwdLockError}
}
+ {pwdLockError && {pwdLockError}
}