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

Merge pull request #10 from yougotwill/theming_left_pane

Browse source 
WIP Theming - Left pane
This commit is contained in:
Will G 2022-09-19 12:00:40 +10:00 committed by GitHub
parent 3c4fc8d919 2262e7dc77
commit 1b48997ca8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
102 changed files with 982 additions and 999 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
about.html
View file

@ -18,8 +18,8 @@
<style>
body {
text-align: center;
background-color: rgba(0, 0, 0);
color: white;
background-color: var(--background-primary-color);
color: var(--text-primary-color);
font-size: 14px;
}
@ -29,7 +29,7 @@
}
a {
color: white;
color: var(--text-primary-color);
}
</style>
</head>

2
debug_log.html
View file

@ -17,7 +17,7 @@
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
<style>
body {
background-color: #000;
background-color: var(--background-primary-color);
}
</style>
</head>

4
package.json
View file

@ -47,8 +47,8 @@
"scripts": {
"start-prod": "cross-env NODE_ENV=production NODE_APP_INSTANCE=devprod$MULTI electron .",
"build-everything": "yarn clean && yarn protobuf && grunt && yarn sass && tsc && yarn parcel-util-worker",
"build-everything:watch": "yarn clean && yarn protobuf && grunt && yarn sass && yarn parcel-util-worker && tsc -w",
"build-everything": "yarn clean && yarn protobuf && grunt && yarn sass && tsc && yarn parcel-util-worker",
"build-everything:watch": "yarn clean && yarn protobuf && grunt && yarn sass && yarn parcel-util-worker && tsc -w",
"protobuf": "pbjs --target static-module --wrap commonjs --out ts/protobuf/compiled.js protos/*.proto && pbts --out ts/protobuf/compiled.d.ts ts/protobuf/compiled.js --force-long",
"sass": "rimraf 'stylesheets/dist/' && parcel build --target sass --no-autoinstall --no-cache",

2
preload.js
View file

@ -29,7 +29,7 @@ window.sessionFeatureFlags = {
useTestNet: Boolean(
process.env.NODE_APP_INSTANCE && process.env.NODE_APP_INSTANCE.includes('testnet')
),
useSettingsThemeSwitcher: false,
useSettingsThemeSwitcher: true,
debug: {
debugFileServerRequests: false,
debugNonSnodeRequests: false,

1
stylesheets/_avatar.scss
View file

@ -9,6 +9,7 @@
img {
object-fit: cover;
border-radius: 50%;
// TODO Theming update
border: 1px solid var(--color-avatar-border-color);
}
}

3
stylesheets/_conversation.scss
View file

@ -55,13 +55,14 @@
}
.session-icon-button {
background-color: var(--color-accent);
background-color: var(--button-icon-background-color);
box-shadow: none;
filter: brightness(1.05);
svg path {
transition: var(--default-duration);
opacity: 0.6;
// TODO Theming remove
fill: var(--color-text-opposite);
}
}

2
stylesheets/_global.scss
View file

@ -254,7 +254,7 @@ $loading-height: 16px;
}
}
.session-text-logo {
filter: brightness(0) saturate(100%);
filter: var(--session-logo-text-current-filter);
}
}

2
stylesheets/_index.scss
View file

@ -6,7 +6,7 @@
.inbox.index {
display: flex;
background-color: var(--color-inbox-background);
background-color: var(--background-primary-color);
}
.edit-profile-dialog,

2
stylesheets/_mentions.scss
View file

@ -26,5 +26,5 @@
}
.module-conversation-list-item--mentioned-us {
border-left: 4px solid var(--color-session-green-color) !important;
border-left: 4px solid var(--conversation-tab-color-strip-color) !important;
}

1
stylesheets/_modal.scss
View file

@ -178,6 +178,7 @@
position: relative;
.module-avatar {
// TODO Theming update
box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow);
}

31
stylesheets/_modules.scss
View file

@ -42,7 +42,7 @@
display: inline-block;
position: absolute;
bottom: 4px;
@include color-svg('../images/error.svg', var(--color-destructive));
@include color-svg('../images/error.svg', var(--danger-color));
}
.module-message__error--outgoing {
@ -316,7 +316,7 @@
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: var(--color-text);
color: var(--text-primary-color);
// width of avatar (28px) and our 6px left margin
max-width: calc(100% - 34px);
@ -327,7 +327,7 @@
display: flex;
align-items: center;
-webkit-user-select: text;
user-select: text;
cursor: pointer;
.module-contact-name__profile-name {
@ -347,6 +347,7 @@
}
.module-conversation-header__expiration__clock-icon {
// TODO Theming update
@include color-svg('../images/timer.svg', var(--color-gray-color));
height: 20px;
width: 20px;
@ -393,7 +394,7 @@
.module-message-detail__delete-button {
@include button-reset;
background-color: var(--color-destructive);
background-color: var(--danger-color);
color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border-radius: 5px;
@ -421,7 +422,7 @@
}
.module-message-detail__contact__error {
color: var(--color-destructive);
color: var(--danger-color);
font-weight: 300;
}
@ -633,17 +634,17 @@
cursor: pointer;
&:hover {
background-color: var(--color-dark-gray-color);
background-color: var(--conversation-tab-background-hover-color);
}
&--is-blocked {
border-left: 4px solid var(--color-destructive) !important;
border-left: 4px solid var(--danger-color) !important;
}
}
.module-conversation-list-item__unread-count {
color: var(--color-white-color);
background-color: var(--color-session-green-color);
background-color: var(--unread-messages-alert-background-color);
color: var(--unread-messages-alert-text-color);
text-align: center;
padding-top: 1px;
@ -662,7 +663,7 @@
min-width: 16px;
line-height: 16px;
border-radius: 8px;
// TODO Theming Should we remove this?
box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
}
@ -704,7 +705,7 @@
.module-conversation-list-item__header__date--has-unread {
font-weight: 300;
color: var(--color-lighter-gray-color);
color: var(--conversation-tab-text-unread-color);
}
.module-conversation-list-item__message {
@ -720,7 +721,7 @@
font-size: var(--font-size-sm);
line-height: 18px;
color: var(--color-light-gray-color);
color: var(--conversation-tab-text-color);
height: 1.3em;
overflow: hidden;
@ -733,7 +734,7 @@
.module-conversation-list-item__message__text--has-unread {
font-weight: 400;
color: var(--color-lighter-gray-color);
color: var(--conversation-tab-text-unread-color);
}
// Module: Image
@ -894,7 +895,7 @@
.module-typing-animation__dot {
border-radius: 50%;
background-color: var(--color-gray-color);
background-color: var(--text-secondary-color);
height: 6px;
width: 6px;
@ -903,7 +904,7 @@
.module-typing-animation__dot--light {
border-radius: 50%;
background-color: var(--color-white-color);
background-color: var(--background-primary-color);
height: 6px;
width: 6px;

184
stylesheets/_session.scss
View file

@ -72,148 +72,6 @@ textarea {
margin-inline-end: 5px;
}
.session-button {
@mixin transparent-background($textAndBorderColor) {
background-color: Transparent;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
color: $textAndBorderColor;
border: 1px solid $textAndBorderColor;
}
width: auto;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
user-select: none;
white-space: nowrap;
cursor: pointer;
transition: var(--default-duration);
background-color: var(--color-transparent-color);
&.disabled {
cursor: not-allowed;
}
&.default,
&.square,
&.brand {
color: var(--color-foreground-primary);
&:not(.disabled):hover {
background: var(--color-clickable-hovered);
}
&.green {
background-color: var(--color-accent-button);
color: var(--color-text-opposite);
}
&.white {
color: var(--color-text);
}
&.primary {
background-color: var(--color-background-primary);
color: var(--color-white-color);
.session-icon {
fill: var(--color-foreground-primary);
}
}
&.secondary {
background-color: var(--color-darkest-gray-color);
}
&.success {
/* TODO is this correct? */
background-color: var(--color-text);
}
&.danger {
background-color: var(--color-destructive);
}
&.danger-alt {
background-color: var(--color-destructive-alt);
}
&.warning {
background-color: var(--color-light-gray-color);
}
}
&.brand-outline,
&.default-outline,
&.square-outline {
border: none;
&.green {
@include transparent-background(var(--color-button-green));
}
&.white {
@include transparent-background(var(--color-text));
}
&.primary {
@include transparent-background(var(--color-dark-gray-color));
}
&.secondary {
@include transparent-background(var(--color-darkest-gray-color));
}
&.danger {
@include transparent-background(var(--color-destructive));
}
&.warning {
@include transparent-background(var(--color-warning));
}
&.warning,
&.danger,
&.secondary,
&.primary,
&.white,
&.green {
&.disabled {
@include transparent-background(var(--color-text-subtle));
&:hover {
@include transparent-background(var(--color-text-subtle));
}
}
}
}
&.brand {
min-width: 165px;
height: 34px;
align-items: center;
padding: 0px var(--margins-lg);
font-size: $session-font-md;
font-family: $session-font-accent;
border-radius: 500px;
&:not(.disabled):hover {
color: var(--color-text);
border-color: var(--color-text);
}
}
&.default,
&.square,
&.default-outline,
&.square-outline {
border-radius: 2px;
height: 33px;
padding: 0px 18px;
font-size: $session-font-sm;
}
&.square,
&.square-outline {
border-radius: 0px;
}
& > *:hover:not(svg) {
filter: brightness(80%);
}
}
.session-label {
color: var(--color-white-color);
padding: var(--margins-sm);
@ -269,7 +127,7 @@ textarea {
font-size: $session-font-md;
&-text {
color: var(--color-text-subtle);
color: var(--text-primary-color);
font-weight: 400;
font-size: $session-font-sm;
line-height: $session-font-sm;
@ -342,6 +200,7 @@ label {
.conversation-header {
.module-avatar img {
// TODO Theming Update
box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2);
}
@ -364,37 +223,17 @@ label {
visibility: hidden;
}
.session-button div[role='button'] {
cursor: pointer;
}
.Toastify__toast {
background: var(--color-cell-background);
color: var(--color-text);
background: var(--modal-background-color);
color: var(--modal-text-color);
border-left: 4px solid var(--primary-color);
.Toastify__close-button {
color: subtle(var(--color-text));
}
@mixin set-toast-theme($color) {
border-left: 4px solid $color;
}
&--success {
/* TODO is this correct? */
@include set-toast-theme(var(--color-session-green-color));
}
&--info {
@include set-toast-theme(var(--color-darker-gray-color));
}
&--warning {
@include set-toast-theme(var(--color-warning));
}
&--error {
/* TODO is this correct?*/
@include set-toast-theme(var(--color-warning));
color: var(--modal-text-color);
}
.Toastify__progress-bar {
background-color: rgba(var(--color-text-rgb), 0.1);
background-color: var(--toast-progress-color);
}
}
@ -693,7 +532,7 @@ label {
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--color-session-green-color);
background: var(--primary-color);
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div:nth-child(1) {
@ -836,17 +675,18 @@ input {
width: 40px;
border-radius: 50%;
opacity: 1;
background-color: var(--color-cell-background);
background-color: var(--button-icon-background-color);
box-shadow: var(--color-session-shadow);
svg path {
transition: var(--default-duration);
opacity: 0.6;
fill: var(--color-text);
fill: var(--button-icon-stroke-color);
}
&:hover svg path {
opacity: 1;
fill: var(--button-icon-stroke-hover-color);
}
}
}
@ -872,7 +712,7 @@ input {
}
&-disabled {
border: 1px solid var(--color-darker-gray-color) !important;
border: 1px solid var(--border-color) !important;
}
}
}

6
stylesheets/_session_constants.scss
View file

@ -176,9 +176,3 @@ $session-transition-duration: 0.25s;
opacity: 1;
}
}
// //////////////////////////////////////////////
// ///////////////// Various ////////////////////
// //////////////////////////////////////////////
$composition-container-height: 60px;

64
stylesheets/_session_conversation.scss
View file

@ -43,6 +43,9 @@
width: 25vw;
z-index: 5;
background-color: var(--background-primary-color);
border-left: 1px solid var(--border-color);
&.show {
transform: none;
transition: transform 0.3s ease-in-out;
@ -68,13 +71,13 @@
align-items: center;
justify-content: space-between;
height: var(--main-view-header-height);
background: var(--color-cell-background);
background: var(--background-primary-color);
.close-button {
float: left;
}
.session-button.default.danger {
.session-button.danger {
display: flex;
}
}
@ -118,9 +121,8 @@
background-color: inherit;
outline: none;
position: relative;
border-left: var(--border-session);
border-top: var(--border-session);
background-color: var(--background-secondary-color);
border-top: 1px solid var(--border-color);
}
.conversation-info-panel {
@ -137,7 +139,7 @@
&.show {
display: flex;
background: var(--color-inbox-background);
background: var(--background-primary-color);
}
}
}
@ -159,8 +161,7 @@
align-items: center;
padding: 0px var(--margins-md);
min-height: min-content;
background: var(--color-cell-background);
border-top: var(--border-session);
border-top: 1px solid var(--border-color);
z-index: 1;
.session-icon-button {
@ -184,51 +185,6 @@
width: 30px;
}
}
.send-message-input {
cursor: text;
display: flex;
align-items: center;
flex-grow: 1;
min-height: $composition-container-height;
padding: var(--margins-xs) 0;
z-index: 1;
background-color: inherit;
ul {
max-height: 70vh;
overflow: auto;
}
textarea {
font-family: $session-font-default;
min-height: calc($composition-container-height / 3);
max-height: 3 * $composition-container-height;
margin-right: var(--margins-md);
color: var(--color-text);
background: transparent;
resize: none;
display: flex;
flex-grow: 1;
outline: none;
border: none;
font-size: 14px;
line-height: $session-font-h2;
letter-spacing: 0.5px;
}
&__emoji-overlay {
// Should have identical properties to the textarea above to line up perfectly.
position: absolute;
font-size: 14px;
font-family: $session-font-default;
margin-left: 2px;
line-height: $session-font-h2;
letter-spacing: 0.5px;
color: var(--color-transparent-color);
}
}
}
.session-emoji-panel {
@ -325,7 +281,7 @@
}
.session-recording {
height: $composition-container-height;
height: var(--composition-container-height);
display: flex;
justify-content: space-between;
align-items: center;

34
stylesheets/_session_group_panel.scss
View file

@ -3,8 +3,6 @@
flex-direction: column;
height: 100vh;
width: -webkit-fill-available;
background: var(--color-cell-background);
border-left: var(--border-session);
align-items: center;
@ -30,10 +28,7 @@
margin: var(--margins-md) 0;
min-height: 4rem;
width: inherit;
color: var(--color-text);
background: var(--color-cell-background);
border: var(--border-session);
color: var(--text-secondary-color);
text-align: center;
display: none;
}
@ -43,10 +38,10 @@
align-items: center;
min-height: 3rem;
font-size: 0.8rem;
color: var(--color-text);
background: var(--color-cell-background);
border-top: var(--border-session);
border-bottom: var(--border-session);
color: var(--right-panel-item-text-color);
background-color: var(--right-panel-item-background-color);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
width: -webkit-fill-available;
padding: 0 var(--margins-md);
@ -54,7 +49,7 @@
cursor: pointer;
&:hover {
background: var(--color-clickable-hovered);
background-color: var(--right-panel-item-background-hover-color);
}
}
@ -63,18 +58,6 @@
border-top: none;
}
// bottom button
.session-button.square-outline.danger {
margin-top: auto;
width: 100%;
border: none;
height: $composition-container-height;
flex-shrink: 0;
align-items: center;
border: none;
border-top: var(--border-session);
}
.module-empty-state {
text-align: center;
}
@ -98,8 +81,7 @@
}
&__tab {
color: var(--color-text);
color: var(--text-primary-color);
font-weight: bold;
font-size: 0.9rem;
padding: 0.6rem;
@ -115,7 +97,7 @@
margin: 0 auto;
width: 70%;
padding-top: 0.5rem;
border-bottom: var(--border-unread);
border-bottom: 4px solid var(--primary-color);
}
}
}

34
stylesheets/_session_left_pane.scss
View file

@ -7,36 +7,35 @@ $session-compose-margin: 20px;
&-name {
font-weight: bold;
font-size: var(--font-size-md);
color: var(--color-text-subtle);
}
}
&-list-item {
background: var(--conversation-tab-background-color);
transition: var(--default-duration);
&:hover {
background: var(--color-clickable-hovered);
background: var(--conversation-tab-background-hover-color);
}
&--is-selected {
background: var(--color-conversation-item-selected);
background: var(--conversation-tab-background-selected-color);
.module-conversation__user__profile-number,
.module-conversation__user__profile-name,
.module-conversation-list-item__message__text {
color: var(--color-text);
color: var(--conversation-tab-text-selected-color);
}
}
&--has-unread {
border-left: var(--border-unread);
background: var(--color-conversation-item-has-unread);
background: var(--conversation-tab-background-unread-color);
border-left: 4px solid var(--conversation-tab-color-strip-color);
}
&__unread-count {
color: var(--color-text);
background: var(--color-clickable-hovered);
background: var(--conversation-tab-bubble-background-color);
color: var(--conversation-tab-bubble-text-color);
position: static !important;
font-weight: 700 !important;
@ -52,9 +51,9 @@ $session-compose-margin: 20px;
}
&__message__text {
color: var(--color-light-gray-color);
color: var(--conversation-tab-text-color);
&--has-unread {
color: var(--color-text);
color: var(--conversation-tab-text-unread-color);
}
}
@ -65,7 +64,7 @@ $session-compose-margin: 20px;
&__header__name--with-unread .module-conversation__user__profile-number,
&__header__name--with-unread .module-conversation__user__profile-name {
color: var(--color-text);
color: var(--conversation-tab-text-unread-color);
}
}
}
@ -74,6 +73,8 @@ $session-compose-margin: 20px;
position: relative;
height: 100vh;
flex-shrink: 0;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
&-session {
display: flex;
@ -98,7 +99,7 @@ $session-compose-margin: 20px;
}
&-overlay {
background: var(--color-left-pane-overlay-background);
background: var(--background-primary-color);
display: flex;
flex-direction: column;
@ -132,6 +133,7 @@ $session-compose-margin: 20px;
}
.session-button {
min-width: 160px;
width: fit-content;
margin-top: 1rem;
margin-bottom: 3rem;
@ -163,11 +165,7 @@ $session-compose-margin: 20px;
.session-text-logo {
margin-top: 10px;
width: 250px;
filter: var(--filter-session-text);
transition: 0s;
.path {
fill: red;
}
filter: var(--session-logo-text-current-filter);
}
}

5
stylesheets/_session_signin.scss
View file

@ -5,9 +5,6 @@
background-color: var(--color-white-color);
}
&-content {
.session-button.brand-outline.brand.green:hover {
background-color: var(--color-accent);
}
&-accent {
&-text {
font-family: $session-font-accent;
@ -197,7 +194,7 @@
justify-content: center;
padding: 20px;
border-radius: 13px;
border: 1px solid subtle(var(--color-darker-gray-color));
border: 1px solid var(--border-color);
margin-bottom: 20px;
textarea {

6
stylesheets/_session_theme.scss
View file

@ -3,7 +3,7 @@
background: none !important;
}
.module-conversation-header {
background: var(--color-cell-background);
background: var(--background-primary-color);
}
.module-message {
@ -78,8 +78,8 @@
}
.inbox {
background: var(--color-inbox-background);
color: var(--color-text);
background: var(--background-primary-color);
color: var(--text-primary-color);
}
.conversation {

53
stylesheets/_theme_dark.scss
View file

@ -259,33 +259,35 @@
.module-empty-state {
color: var(--color-light-gray-color);
}
// TODO Theming Remove
// Module: Conversation List Item
.module-conversation-list-item--is-selected {
background-color: var(--color-dark-gray-color);
}
// .module-conversation-list-item--is-selected {
// background-color: var(--color-dark-gray-color);
// }
.module-conversation-list-item__unread-count {
color: var(--color-white-color);
background-color: var(--color-session-green-color);
box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
}
// .module-conversation-list-item__unread-count {
// color: var(--color-white-color);
// background-color: var(--color-session-green-color);
// box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
// }
.module-conversation-list-item__header__name {
color: var(--color-lighter-gray-color);
}
// .module-conversation-list-item__header__name {
// color: var(--color-lighter-gray-color);
// }
.module-conversation-list-item__header__date--has-unread {
color: var(--color-lighter-gray-color);
}
// .module-conversation-list-item__header__date--has-unread {
// color: var(--color-lighter-gray-color);
// }
.module-conversation-list-item__message__text {
color: var(--color-light-gray-color);
}
// .module-conversation-list-item__message__text {
// color: var(--color-light-gray-color);
// }
.module-conversation-list-item__message__text--has-unread {
color: var(--color-lighter-gray-color);
}
// .module-conversation-list-item__message__text--has-unread {
// color: var(--color-lighter-gray-color);
// }
// Module: Image
@ -359,11 +361,12 @@
// Module: Message Search Result
.module-message-search-result {
&:hover {
background-color: var(--color-dark-gray-color);
}
}
// TODO Theming remove
// .module-message-search-result {
// &:hover {
// background-color: var(--color-dark-gray-color);
// }
// }
.module-message__link-preview__icon-container__circle-background {
background-color: var(--color-light-gray-color);

3
ts/components/DebugLogView.tsx
View file

@ -6,7 +6,7 @@ import {
switchHtmlToLightTheme,
} from '../themes/SessionTheme';
import { fetch } from '../util/logging';
import { SessionButton } from './basic/SessionButton';
import { SessionButton, SessionButtonType } from './basic/SessionButton';
const StyledContent = styled.div`
background-color: var(--color-modal-background);
@ -52,6 +52,7 @@ const DebugLogButtons = (props: { content: string }) => {
<div className="buttons">
<SessionButton
text={window.i18n('saveLogToDesktop')}
buttonType={SessionButtonType.Simple}
onClick={() => {
if (props.content.length <= 20) {
// loading

7
ts/components/MemberListItem.tsx
View file

@ -39,8 +39,11 @@ const StyledSessionMemberItem = styled.button<{
props.selected && 'var(--color-conversation-item-selected) !important'};
:not(:last-child) {
border-bottom: var(--border-session);
border-bottom: var(--border-color);
}
background-color: ${props =>
props.selected ? 'var(--conversation-tab-background-selected-color) !important' : null};
`;
const StyledInfo = styled.div`
@ -98,7 +101,7 @@ export const MemberListItem = (props: {
style={
!inMentions && !disableBg
? {
backgroundColor: 'var(--color-cell-background)',
backgroundColor: 'var(--background-secondary-color)',
}
: {}
}

1
ts/components/SessionContextMenuContainer.tsx
View file

@ -7,6 +7,7 @@ export const SessionContextMenuContainer = styled.div.attrs({
// be sure it is more than the one set for the More Informations screen of messages
z-index: 30;
min-width: 200px;
/* TODO Theming Update */
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);

1
ts/components/SessionInboxView.tsx
View file

@ -47,7 +47,6 @@ type State = {
const StyledGutter = styled.div`
width: 380px !important;
transition: none;
background: var(--color-cell-background);
`;
export class SessionInboxView extends React.Component<any, State> {

28
ts/components/SessionPasswordPrompt.tsx
View file

@ -4,7 +4,7 @@ import classNames from 'classnames';
import { SessionIcon } from './icon';
import { withTheme } from 'styled-components';
import autoBind from 'auto-bind';
import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
import { SessionButton, SessionButtonColor } from './basic/SessionButton';
import { Constants } from '../session';
import { SessionSpinner } from './basic/SessionSpinner';
@ -172,22 +172,20 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
return (
<div className={classNames(showResetElements && 'button-group')}>
<SessionButton
text={window.i18n('unlock')}
buttonColor={SessionButtonColor.Primary}
onClick={this.initLogin}
/>
{showResetElements && (
<>
<SessionButton
text="Reset Database"
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Danger}
onClick={this.initClearDataView}
/>
</>
)}
<SessionButton
text={window.i18n('unlock')}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
onClick={this.initLogin}
/>
</div>
);
}
@ -195,21 +193,17 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
private renderClearDataViewButtons(): JSX.Element {
return (
<div className="button-group">
<SessionButton
text={window.i18n('clearAllData')}
buttonColor={SessionButtonColor.Danger}
onClick={window.clearLocalData}
/>
<SessionButton
text={window.i18n('cancel')}
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Primary}
onClick={() => {
this.setState({ clearDataView: false });
}}
/>
<SessionButton
text={window.i18n('clearAllData')}
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Danger}
onClick={window.clearLocalData}
/>
</div>
);
}

3
ts/components/SessionSearchInput.tsx
View file

@ -8,6 +8,7 @@ import { getOverlayMode } from '../state/selectors/section';
import { cleanSearchTerm } from '../util/cleanSearchTerm';
import { SessionIconButton } from './icon';
// TODO Theming possibly update to use Search Bar Component Colors
const StyledSearchInput = styled.div`
height: var(--search-input-height);
width: 100%;
@ -30,7 +31,7 @@ const StyledInput = styled.input`
font-family: var(--font-default);
text-overflow: ellipsis;
background: none;
color: var(--color-text);
color: var(--conversation-tab-text-color);
&:focus {
outline: none !important;

18
ts/components/SessionToastContainer.tsx
View file

@ -3,6 +3,15 @@ import { Slide, ToastContainer, ToastContainerProps } from 'react-toastify';
import styled from 'styled-components';
const SessionToastContainerPrivate = () => {
const WrappedToastContainer = ({
className,
...rest
}: ToastContainerProps & { className?: string }) => (
<div className={className}>
<ToastContainer {...rest} />
</div>
);
return (
<WrappedToastContainer
position="bottom-right"
@ -20,15 +29,6 @@ const SessionToastContainerPrivate = () => {
);
};
const WrappedToastContainer = ({
className,
...rest
}: ToastContainerProps & { className?: string }) => (
<div className={className}>
<ToastContainer {...rest} />
</div>
);
// tslint:disable-next-line: no-default-export
export const SessionToastContainer = styled(SessionToastContainerPrivate).attrs({
// custom props

18
ts/components/SessionWrapperModal.tsx
View file

@ -5,7 +5,7 @@ import { SessionIconButton } from './icon/';
// tslint:disable-next-line: no-submodule-imports
import useKey from 'react-use/lib/useKey';
import { SessionButton } from './basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
export type SessionWrapperModalType = {
title?: string;
@ -113,14 +113,18 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
{props.children}
<div className="session-modal__button-group">
{onClose && showClose ? (
<SessionButton onClick={props.onClose}>
{cancelText || window.i18n('close')}
{onConfirm ? (
<SessionButton buttonType={SessionButtonType.Simple} onClick={props.onConfirm}>
{confirmText || window.i18n('ok')}
</SessionButton>
) : null}
{onConfirm ? (
<SessionButton onClick={props.onConfirm}>
{confirmText || window.i18n('ok')}
{onClose && showClose ? (
<SessionButton
buttonType={SessionButtonType.Simple}
buttonColor={SessionButtonColor.Danger}
onClick={props.onClose}
>
{cancelText || window.i18n('close')}
</SessionButton>
) : null}
</div>

10
ts/components/avatar/Avatar.tsx
View file

@ -43,20 +43,20 @@ const Identicon = (props: Props) => {
};
const CrownWrapper = styled.div`
position: absolute;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0%;
right: 12%;
height: 20px;
width: 20px;
transform: translate(25%, 25%);
color: #f7c347;
background: var(--color-inbox-background);
background: var(--background-primary-color);
border-radius: 50%;
/* TODO Theming update? */
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
align-items: center;
justify-content: center;
`;
export const CrownIcon = () => {

5
ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
View file

@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import { COLORS } from '../../../themes/colors';
import { getInitials } from '../../../util/getInitials';
type Props = {
@ -20,7 +21,7 @@ const sha512FromPubkey = async (pubkey: string): Promise<string> => {
// key is the pubkey, value is the hash
const cachedHashes = new Map<string, number>();
const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
const avatarPlaceholderColors = Object.values(COLORS.PRIMARY);
function useHashBasedOnPubkey(pubkey: string) {
const [hash, setHash] = useState<number | undefined>(undefined);
@ -79,6 +80,7 @@ export const AvatarPlaceHolder = (props: Props) => {
if (loading || !hash) {
// return grey circle
// TODO Theming update
return (
<svg viewBox={viewBox}>
<g id="UrTavla">
@ -104,6 +106,7 @@ export const AvatarPlaceHolder = (props: Props) => {
const bgColor = avatarPlaceholderColors[bgColorIndex];
// TODO Theming Update
return (
<svg viewBox={viewBox}>
<g id="UrTavla">

2
ts/components/basic/MessageBodyHighlight.tsx
View file

@ -15,7 +15,7 @@ const renderNewLines: RenderTextCallbackType = ({ text, key, isGroup }) => (
const SnippetHighlight = styled.span`
font-weight: bold;
color: var(--color-text);
color: var(--text-primary-color);
`;
const renderEmoji = ({

5
ts/components/basic/PillContainer.tsx
View file

@ -40,10 +40,11 @@ const StyledPillInner = styled.div<PillContainerProps>`
margin: ${props => props.margin || ''};
border-radius: 300px;
cursor: ${props => (props.disableHover ? 'unset' : 'pointer')};
border: 1px solid var(--color-pill-divider);
border: 1px solid var(--border-color);
transition: var(--default-duration);
&:hover {
background: ${props => (props.disableHover ? 'none' : 'var(--color-clickable-hovered)')};
background: ${props =>
props.disableHover ? 'none' : 'var(--button-solid-background-hover-color)'};
}
`;

141
ts/components/basic/SessionButton.tsx
View file

@ -1,32 +1,114 @@
import React, { ReactNode } from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
export enum SessionButtonType {
Brand = 'brand',
BrandOutline = 'brand-outline',
Default = 'default',
DefaultOutline = 'default-outline',
Square = 'square',
SquareOutline = 'square-outline',
Outline = 'outline',
Simple = 'simple',
Solid = 'solid',
}
export enum SessionButtonShape {
Round = 'round',
Square = 'square',
}
// NOTE References ts/themes/colors.tsx
export enum SessionButtonColor {
Green = 'green',
Blue = 'blue',
Yellow = 'yellow',
Pink = 'pink',
Purple = 'purple',
Orange = 'orange',
Red = 'red',
White = 'white',
Primary = 'primary',
Secondary = 'secondary',
Success = 'success',
Danger = 'danger',
Warning = 'warning',
None = '',
None = 'transparent',
}
const StyledButton = styled.div<{
color: string | undefined;
buttonType: SessionButtonType;
buttonShape: SessionButtonShape;
}>`
width: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size-md);
font-weight: 700;
user-select: none;
white-space: nowrap;
cursor: pointer;
transition: var(--default-duration);
background-repeat: no-repeat;
overflow: hidden;
height: 34px;
padding: 0px 18px;
background-color: ${props =>
props.buttonType === SessionButtonType.Solid && props.color
? `var(--${props.color}-color)`
: `var(--button-${props.buttonType}-background-color)`};
color: ${props =>
props.color
? props.buttonType !== SessionButtonType.Solid
? `var(--${props.color}-color)`
: 'var(--white-color)'
: `var(--button-${props.buttonType}-text-color)`};
${props =>
props.buttonType === SessionButtonType.Outline &&
`outline: none; border: 1px solid ${
props.color ? `var(--${props.color}-color)` : 'var(--button-outline-border-color)'
}`};
${props =>
props.buttonType === SessionButtonType.Solid &&
'box-shadow: 0px 0px 6px var(--button-solid-shadow-color);'}
border-radius: ${props => (props.buttonShape === SessionButtonShape.Round ? '17px' : '6px')};
.session-icon {
fill: var(--background-primary-color);
}
& > *:hover:not(svg) {
filter: brightness(80%);
}
&.disabled {
cursor: not-allowed;
outline: none;
${props =>
props.buttonType === SessionButtonType.Solid
? 'background-color: var(--button-solid-disabled-color)'
: props.buttonType === SessionButtonType.Outline
? 'border: 1px solid var(--button-outline-disabled-color)'
: ''};
color: ${props =>
props.buttonType === SessionButtonType.Solid
? 'var(--button-solid-text-color)'
: `var(--button-${props.buttonType}-disabled-color)`};
}
&:not(.disabled) {
&:hover {
${props =>
props.buttonType &&
`background-color: var(--button-${props.buttonType}-background-hover-color);`};
${props => props.color && `color: var(--button-${props.buttonType}-text-color);`}
${props =>
props.buttonType === SessionButtonType.Outline &&
'outline: none; border: 1px solid var(--button-outline-border-hover-color);'};
}
}
`;
type Props = {
text?: string;
disabled?: boolean;
buttonType: SessionButtonType;
buttonColor: SessionButtonColor;
buttonShape: SessionButtonShape;
buttonColor?: SessionButtonColor; // will override theme
onClick: any;
children?: ReactNode;
margin?: string;
@ -34,7 +116,16 @@ type Props = {
};
export const SessionButton = (props: Props) => {
const { buttonType, dataTestId, buttonColor, text, disabled, onClick, margin } = props;
const {
buttonType,
buttonShape,
dataTestId,
buttonColor,
text,
disabled,
onClick,
margin,
} = props;
const clickHandler = (e: any) => {
if (onClick) {
@ -42,31 +133,33 @@ export const SessionButton = (props: Props) => {
onClick();
}
};
const buttonTypes = [];
const onClickFn = disabled ? () => null : clickHandler;
buttonTypes.push(buttonType);
if (buttonType.includes('-outline')) {
buttonTypes.push(buttonType.replace('-outline', ''));
}
return (
<div
className={classNames('session-button', ...buttonTypes, buttonColor, disabled && 'disabled')}
<StyledButton
color={buttonColor}
buttonShape={buttonShape}
buttonType={buttonType}
className={classNames(
'session-button',
buttonShape,
buttonType,
buttonColor ?? '',
disabled && 'disabled'
)}
role="button"
onClick={onClickFn}
data-testid={dataTestId}
style={{ margin }}
>
{props.children || text}
</div>
</StyledButton>
);
};
SessionButton.defaultProps = {
disabled: false,
buttonType: SessionButtonType.Default,
buttonColor: SessionButtonColor.Primary,
buttonShape: SessionButtonShape.Round,
buttonType: SessionButtonType.Outline,
onClick: null,
} as Partial<Props>;

19
ts/components/basic/SessionRadio.tsx
View file

@ -1,6 +1,5 @@
import React, { ChangeEvent } from 'react';
import styled from 'styled-components';
import { black } from '../../state/ducks/SessionTheme';
import { Flex } from '../basic/Flex';
// tslint:disable: react-unused-props-and-state
@ -16,7 +15,7 @@ type Props = {
const StyledInput = styled.input<{
filledSize: number;
outlineOffset: number;
selectedColor: string;
selectedColor?: string;
}>`
opacity: 0;
position: absolute;
@ -25,12 +24,11 @@ const StyledInput = styled.input<{
height: ${props => props.filledSize + props.outlineOffset}px;
:checked + label:before {
background: ${props => props.selectedColor};
background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
}
`;
const StyledLabel = styled.label<{
selectedColor: string;
filledSize: number;
outlineOffset: number;
beforeMargins?: string;
@ -44,7 +42,7 @@ const StyledLabel = styled.label<{
transition: var(--default-duration);
padding: ${props => props.filledSize}px;
outline: var(--color-text) solid 1px;
outline: var(--text-primary-color) solid 1px;
border: none;
outline-offset: ${props => props.outlineOffset}px;
${props => props.beforeMargins && `margin: ${props.beforeMargins};`};
@ -62,7 +60,6 @@ export const SessionRadio = (props: Props) => {
}
}
const selectedColor = 'var(--color-accent)';
const filledSize = 15 / 2;
const outlineOffset = 2;
@ -77,17 +74,15 @@ export const SessionRadio = (props: Props) => {
onChange={clickHandler}
filledSize={filledSize * 2}
outlineOffset={outlineOffset}
selectedColor={selectedColor}
/>
<StyledLabel
role="button"
onClick={clickHandler}
selectedColor={selectedColor}
filledSize={filledSize}
outlineOffset={outlineOffset}
beforeMargins={beforeMargins}
aria-label={label}
// TODO Theming does this need a selected color
>
{label}
</StyledLabel>
@ -101,13 +96,13 @@ const StyledInputOutlineSelected = styled(StyledInput)`
outline: none;
}
:checked + label:before {
outline: var(--color-text) solid 1px;
outline: var(--text-primary-color) solid 1px;
}
`;
const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`
:before {
background: ${props => props.selectedColor};
outline: ${black} solid 1px;
background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
outline: var(--transparent-color) solid 1px;
}
`;

10
ts/components/basic/SessionToast.tsx
View file

@ -5,6 +5,7 @@ import styled from 'styled-components';
import { noop } from 'lodash';
import { SessionIcon, SessionIconType } from '../icon';
// NOTE We don't change the color strip on the left based on the type. 16/09/2022
export enum SessionToastType {
Info = 'info',
Success = 'success',
@ -26,22 +27,22 @@ const TitleDiv = styled.div`
font-size: var(--font-size-md);
line-height: var(--font-size-md);
font-family: var(--font-default);
color: var(--color-text);
color: var(--text-primary-color);
text-overflow: ellipsis;
`;
const DescriptionDiv = styled.div`
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
color: var(--text-secondary-color);
text-overflow: ellipsis;
font-family: var(--font-default);
padding-bottom: var(--font-size-xs);
padding-top: var(--font-size-xs);
padding-top: var(--margins-xs);
`;
const IconDiv = styled.div`
flex-shrink: 0;
padding-inline-end: var(--margins-xs);
margin: 0 var(--margins-xs);
`;
export const SessionToast = (props: Props) => {
@ -78,6 +79,7 @@ export const SessionToast = (props: Props) => {
alignItems="center"
onClick={props?.onToastClick || noop}
data-testid="session-toast"
padding="var(--margins-sm) 0"
>
<IconDiv>
<SessionIcon iconType={toastIcon} iconSize={toastIconSize} />

5
ts/components/basic/SessionToggle.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { updateConfirmModal } from '../../state/ducks/modalDialog';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { white } from '../../state/ducks/SessionTheme';
import { whiteColor } from '../../themes/SessionTheme';
const StyledKnob = styled.div<{ active: boolean }>`
position: absolute;
@ -11,7 +11,8 @@ const StyledKnob = styled.div<{ active: boolean }>`
height: 21px;
width: 21px;
border-radius: 28px;
background-color: ${white};
/* TODO Theming update */
background-color: ${whiteColor};
box-shadow: ${props =>
props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'};

2
ts/components/basic/Text.tsx
View file

@ -16,7 +16,7 @@ const StyledDefaultText = styled.div<TextProps>`
padding: ${props => (props.padding ? props.padding : '')};
text-align: ${props => (props.textAlign ? props.textAlign : '')};
font-family: var(--font-default);
color: ${props => (props.subtle ? 'var(--color-text-subtle)' : 'var(--color-text)')};
color: ${props => (props.subtle ? 'var(--text-secondary-color)' : 'var(--text-primary-color)')};
white-space: ${props => (props.ellipsisOverflow ? 'nowrap' : null)};
overflow: ${props => (props.ellipsisOverflow ? 'hidden' : null)};
text-overflow: ${props => (props.ellipsisOverflow ? 'ellipsis' : null)};

8
ts/components/basic/YourSessionIDPill.tsx
View file

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { UserUtils } from '../../session/utils';
const StyledPillDividerLine = styled.div`
border-bottom: 1px solid var(--color-pill-divider);
border-bottom: 1px solid var(--border-color);
line-height: 0.1em;
flex-grow: 1;
height: 1px;
@ -13,8 +13,8 @@ const StyledPillDividerLine = styled.div`
const StyledPillSpan = styled.span`
padding: 5px 15px;
border-radius: 50px;
color: var(--color-pill-divider-text);
border: 1px solid var(--color-pill-divider);
color: var(--text-primary-color);
border: 1px solid var(--border-color);
`;
const StyledPillDivider = styled.div`
@ -39,8 +39,8 @@ const StyledYourSessionIDSelectable = styled.p`
text-align: center;
word-break: break-all;
font-weight: 300;
color: var(--color-text);
font-size: var(--font-size-sm);
color: var(--text-primary-color);
`;
export const YourSessionIDSelectable = () => {

7
ts/components/button/MenuButton.tsx
View file

@ -13,7 +13,7 @@ const StyledMenuButton = styled.button`
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-color);
background: var(--menu-button-background-color);
border-radius: 2px;
width: 51px;
@ -23,7 +23,7 @@ const StyledMenuButton = styled.button`
transition: var(--default-duration);
:hover {
background: var(--hover-bg-color);
background: var(--menu-button-background-hover-color);
}
`;
@ -43,6 +43,7 @@ export const MenuButton = () => {
return (
<StyledMenuButton
data-testid="new-conversation-button"
// TODO Theming Maybe move to StyleMenuInput
style={
{
'--bg-color': 'var(--color-accent-button)',
@ -55,7 +56,7 @@ export const MenuButton = () => {
<SessionIcon
iconSize="small"
iconType="plusFat"
iconColor="var(--fg-color)"
iconColor="var(--menu-button-icon-color)"
iconRotation={isToggled ? 45 : 0}
aria-label={window.i18n('chooseAnAction')}
/>

254
ts/components/calling/CallButtons.tsx
View file

@ -10,6 +10,47 @@ import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
import styled from 'styled-components';
import { SessionContextMenuContainer } from '../SessionContextMenuContainer';
const VideoInputMenu = ({
triggerId,
camerasList,
}: {
triggerId: string;
camerasList: Array<InputItem>;
}) => {
return (
<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>
);
};
const showVideoInputMenu = (
currentConnectedCameras: Array<InputItem>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedCameras.length === 0) {
ToastUtils.pushNoCameraFound();
return;
}
contextMenu.show({
id: videoTriggerId,
event: e,
});
};
const videoTriggerId = 'video-menu-trigger-id';
const audioTriggerId = 'audio-menu-trigger-id';
const audioOutputTriggerId = 'audio-output-menu-trigger-id';
@ -42,6 +83,47 @@ export const VideoInputButton = ({
);
};
const AudioInputMenu = ({
triggerId,
audioInputsList,
}: {
triggerId: string;
audioInputsList: Array<InputItem>;
}) => {
return (
<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>
);
};
const showAudioInputMenu = (
currentConnectedAudioInputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioInputs.length === 0) {
ToastUtils.pushNoAudioInputFound();
return;
}
contextMenu.show({
id: audioTriggerId,
event: e,
});
};
export const AudioInputButton = ({
currentConnectedAudioInputs,
isAudioMuted,
@ -70,6 +152,47 @@ export const AudioInputButton = ({
);
};
const AudioOutputMenu = ({
triggerId,
audioOutputsList,
}: {
triggerId: string;
audioOutputsList: Array<InputItem>;
}) => {
return (
<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>
);
};
const showAudioOutputMenu = (
currentConnectedAudioOutputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioOutputs.length === 0) {
ToastUtils.pushNoAudioOutputFound();
return;
}
contextMenu.show({
id: audioOutputTriggerId,
event: e,
});
};
export const AudioOutputButton = ({
currentConnectedAudioOutputs,
isAudioOutputMuted,
@ -101,87 +224,6 @@ export const AudioOutputButton = ({
);
};
const VideoInputMenu = ({
triggerId,
camerasList,
}: {
triggerId: string;
camerasList: Array<InputItem>;
}) => {
return (
<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>
);
};
const AudioInputMenu = ({
triggerId,
audioInputsList,
}: {
triggerId: string;
audioInputsList: Array<InputItem>;
}) => {
return (
<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>
);
};
const AudioOutputMenu = ({
triggerId,
audioOutputsList,
}: {
triggerId: string;
audioOutputsList: Array<InputItem>;
}) => {
return (
<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>
);
};
const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) => {
const dispatch = useDispatch();
@ -198,10 +240,10 @@ const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) =>
iconSize={60}
iconPadding="20px"
iconType="fullscreen"
backgroundColor="white"
backgroundColor="var(--white-color)"
borderRadius="50%"
onClick={showInFullScreen}
iconColor="black"
iconColor="var(--black-color)"
margin="10px"
/>
);
@ -222,57 +264,15 @@ export const HangUpButton = () => {
iconSize={60}
iconPadding="20px"
iconType="hangup"
backgroundColor="white"
backgroundColor="var(--white-color)"
borderRadius="50%"
onClick={handleEndCall}
iconColor="red"
iconColor="var(--red-color)"
margin="10px"
/>
);
};
const showAudioInputMenu = (
currentConnectedAudioInputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioInputs.length === 0) {
ToastUtils.pushNoAudioInputFound();
return;
}
contextMenu.show({
id: audioTriggerId,
event: e,
});
};
const showAudioOutputMenu = (
currentConnectedAudioOutputs: Array<any>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedAudioOutputs.length === 0) {
ToastUtils.pushNoAudioOutputFound();
return;
}
contextMenu.show({
id: audioOutputTriggerId,
event: e,
});
};
const showVideoInputMenu = (
currentConnectedCameras: Array<InputItem>,
e: React.MouseEvent<HTMLDivElement>
) => {
if (currentConnectedCameras.length === 0) {
ToastUtils.pushNoCameraFound();
return;
}
contextMenu.show({
id: videoTriggerId,
event: e,
});
};
const handleCameraToggle = async (
currentConnectedCameras: Array<InputItem>,
localStreamVideoIsMuted: boolean

4
ts/components/calling/CallInFullScreenContainer.tsx
View file

@ -21,8 +21,8 @@ const CallInFullScreenVisible = styled.div`
left: 0;
display: flex;
flex-direction: column;
background-color: black;
border: var(--session-border);
background-color: var(--black-color);
border: var(--border-color);
opacity: 1;
`;

6
ts/components/calling/DraggableCallContainer.tsx
View file

@ -15,13 +15,13 @@ import { SectionType } from '../../state/ducks/section';
export const DraggableCallWindow = styled.div`
position: absolute;
z-index: 9;
box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px var(--black-color);
max-height: 300px;
width: 12vw;
display: flex;
flex-direction: column;
background-color: var(--color-modal-background);
border: var(--session-border);
background-color: var(--modal-background-color);
border: var(--border-color);
`;
export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`

4
ts/components/calling/InConversationCallContainer.tsx
View file

@ -34,6 +34,7 @@ const InConvoCallWindow = styled.div`
padding: 1rem;
display: flex;
/* TODO Theming - Update? */
background-color: hsl(0, 0%, 15.7%);
flex-shrink: 1;
@ -68,7 +69,8 @@ const StyledCenteredLabel = styled.div`
transform: translateX(-50%);
height: min-content;
white-space: nowrap;
color: white;
/* TODO Theming - Update? */
color: var(--white-color);
text-shadow: 0px 0px 8px white;
z-index: 5;
`;

19
ts/components/calling/IncomingCallDialog.tsx
View file

@ -8,7 +8,7 @@ import { CallManager } from '../../session/utils';
import { callTimeoutMs } from '../../session/utils/calling/CallManager';
import { getHasIncomingCall, getHasIncomingCallFrom } from '../../state/selectors/call';
import { Avatar, AvatarSize } from '../avatar/Avatar';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal';
export const CallWindow = styled.div`
@ -20,8 +20,8 @@ export const CallWindow = styled.div`
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background-color: var(--color-modal-background);
border: var(--session-border);
background-color: var(--modal-background-color);
border: var(--border-color);
`;
const IncomingCallAvatarContainer = styled.div`
@ -80,14 +80,15 @@ export const IncomingCallDialog = () => {
</IncomingCallAvatarContainer>
<div className="session-modal__button-group">
<SessionButton
text={window.i18n('decline')}
buttonColor={SessionButtonColor.Danger}
onClick={handleDeclineIncomingCall}
text={window.i18n('accept')}
buttonType={SessionButtonType.Simple}
onClick={handleAcceptIncomingCall}
/>
<SessionButton
text={window.i18n('accept')}
onClick={handleAcceptIncomingCall}
buttonColor={SessionButtonColor.Green}
text={window.i18n('decline')}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={handleDeclineIncomingCall}
/>
</div>
</SessionWrapperModal>

4
ts/components/conversation/AddMentions.tsx
View file

@ -19,8 +19,8 @@ const StyledMentionAnother = styled.span`
`;
const StyledMentionedUs = styled(StyledMentionAnother)`
background-color: var(--color-text-accent);
color: black;
background-color: var(--primary-color);
color: var(--text-primary-color);
border-radius: 5px;
`;

13
ts/components/conversation/ConversationHeader.tsx
View file

@ -39,7 +39,12 @@ import {
useIsKickedFromGroup,
useIsRequest,
} from '../../hooks/useParamSelector';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import {
SessionButton,
SessionButtonColor,
SessionButtonShape,
SessionButtonType,
} from '../basic/SessionButton';
import { SessionIconButton } from '../icon';
import { ConversationHeaderMenu } from '../menu/ConversationHeaderMenu';
import { Flex } from '../basic/Flex';
@ -117,15 +122,17 @@ const SelectionOverlay = () => {
<div className="button-group">
{!isOnlyServerDeletable && (
<SessionButton
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Danger}
buttonShape={SessionButtonShape.Square}
buttonType={SessionButtonType.Solid}
text={deleteMessageButtonText}
onClick={onDeleteSelectedMessages}
/>
)}
<SessionButton
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Danger}
buttonShape={SessionButtonShape.Square}
buttonType={SessionButtonType.Solid}
text={deleteForEveryoneMessageButtonText}
onClick={onDeleteSelectedMessagesForEveryone}
/>

6
ts/components/conversation/ConversationRequestButtons.tsx
View file

@ -11,7 +11,7 @@ import {
getSelectedConversation,
hasSelectedConversationIncomingMessages,
} from '../../state/selectors/conversations';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
const handleDeclineConversationRequest = (convoId: string) => {
declineConversationWithConfirm(convoId, true);
@ -42,8 +42,7 @@ export const ConversationMessageRequestButtons = () => {
<ConversationRequestBanner>
<ConversationBannerRow>
<SessionButton
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Primary}
onClick={async () => {
await handleAcceptConversationRequest(selectedConversation.id);
}}
@ -52,7 +51,6 @@ export const ConversationMessageRequestButtons = () => {
/>
<SessionButton
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.BrandOutline}
text={window.i18n('decline')}
onClick={() => {
handleDeclineConversationRequest(selectedConversation.id);

9
ts/components/conversation/H5AudioPlayer.tsx
View file

@ -11,7 +11,7 @@ import {
isMessageSelectionMode,
} from '../../state/selectors/conversations';
import { getAudioAutoplay } from '../../state/selectors/userConfig';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionIcon } from '../icon';
const StyledSpeedButton = styled.div`
@ -25,10 +25,8 @@ const StyledSpeedButton = styled.div`
.session-button {
transition: none;
&:hover {
color: var(--color-text-opposite);
}
width: 34px;
padding: 0px;
}
`;
@ -126,7 +124,6 @@ export const AudioPlayerWithEncryptedFile = (props: {
setPlaybackSpeed(playbackSpeed === 1 ? 1.5 : 1);
}}
buttonType={SessionButtonType.Simple}
buttonColor={SessionButtonColor.None}
/>
</StyledSpeedButton>,
]}

36
ts/components/conversation/SessionRightPanel.tsx
View file

@ -27,6 +27,7 @@ import { SpacerLG } from '../basic/Text';
import { MediaItemType } from '../lightbox/LightboxGallery';
import { MediaGallery } from './media-gallery/MediaGallery';
import { getAbsoluteAttachmentPath } from '../../types/MessageAttachment';
import styled from 'styled-components';
async function getMediaGalleryProps(
conversationId: string
@ -141,6 +142,25 @@ const HeaderItem = () => {
);
};
const StyledLeaveButton = styled.div`
width: 100%;
.session-button {
margin-top: auto;
width: 100%;
min-height: calc(var(--composition-container-height) + 1px); // include border in height
flex-shrink: 0;
align-items: center;
border-top: 1px solid var(--border-color);
border-radius: 0px;
&:not(.disabled) {
&:hover {
background-color: var(--button-solid-background-hover-color);
}
}
}
`;
// tslint:disable: cyclomatic-complexity
// tslint:disable: max-func-body-length
export const SessionRightPanelWithDetails = () => {
@ -302,13 +322,15 @@ export const SessionRightPanelWithDetails = () => {
<MediaGallery documents={documents} media={media} />
{isGroup && (
// tslint:disable-next-line: use-simple-attributes
<SessionButton
text={leaveGroupString}
buttonColor={SessionButtonColor.Danger}
disabled={isKickedFromGroup || left}
buttonType={SessionButtonType.SquareOutline}
onClick={deleteConvoAction}
/>
<StyledLeaveButton>
<SessionButton
text={leaveGroupString}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
disabled={isKickedFromGroup || left}
onClick={deleteConvoAction}
/>
</StyledLeaveButton>
)}
</div>
);

2
ts/components/conversation/Timestamp.tsx
View file

@ -14,12 +14,12 @@ type Props = {
const UPDATE_FREQUENCY = 60 * 1000;
const TimestampContainerNotListItem = styled.div`
color: var(--text-secondary-color);
font-size: var(--font-size-xs);
line-height: 16px;
letter-spacing: 0.3px;
text-transform: uppercase;
user-select: none;
color: var(--color-text-subtle);
`;
const TimestampContainerListItem = styled(TimestampContainerNotListItem)`

2
ts/components/conversation/TypingAnimation.tsx
View file

@ -14,7 +14,7 @@ const StyledTypingContainer = styled.div`
const StyledTypingDot = styled.div<{ index: number }>`
border-radius: 50%;
background-color: var(--color-text-subtle); // TODO Theming update
background-color: var(--text-secondary-color);
height: 6px;
width: 6px;

6
ts/components/conversation/composition/CompositionBox.tsx
View file

@ -218,7 +218,7 @@ const StyledSendMessageInput = styled.div`
display: flex;
align-items: center;
flex-grow: 1;
min-height: var(--compositionContainerHeight);
min-height: var(--composition-container-height);
padding: var(--margins-xs) 0;
z-index: 1;
background-color: inherit;
@ -230,8 +230,8 @@ const StyledSendMessageInput = styled.div`
textarea {
font-family: var(--font-default);
min-height: calc(var(--compositionContainerHeight) / 3);
max-height: 3 * var(--compositionContainerHeight);
min-height: calc(var(--composition-container-height) / 3);
max-height: 3 * var(--composition-container-height);
margin-right: var(--margins-md);
color: var(--color-text);

2
ts/components/conversation/message/message-content/MessageReactions.tsx
View file

@ -37,7 +37,7 @@ const StyledReactionOverflow = styled.button`
span {
background-color: var(--color-received-message-background);
border: 1px solid var(--color-inbox-background);
border: 1px solid var(--border-color);
border-radius: 50%;
overflow: hidden;
margin-right: -9px;

9
ts/components/conversation/message/message-content/OutgoingMessageStatus.tsx
View file

@ -12,8 +12,9 @@ const MessageStatusSendingContainer = styled.div`
cursor: pointer;
`;
const iconColor = 'var(--text-primary-color)';
const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => {
const iconColor = 'var(--color-text)';
return (
<MessageStatusSendingContainer data-testid={dataTestId} data-testtype="sending">
<SessionIcon rotateDuration={2} iconColor={iconColor} iconType="sending" iconSize="tiny" />
@ -22,8 +23,6 @@ const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => {
};
const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => {
const iconColor = 'var(--color-text)';
return (
<MessageStatusSendingContainer data-testid={dataTestId} data-testtype="sent">
<SessionIcon iconColor={iconColor} iconType="circleCheck" iconSize="tiny" />
@ -32,8 +31,6 @@ const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => {
};
const MessageStatusRead = ({ dataTestId }: { dataTestId?: string }) => {
const iconColor = 'var(--color-text)';
return (
<MessageStatusSendingContainer data-testid={dataTestId} data-testtype="read">
<SessionIcon iconColor={iconColor} iconType="doubleCheckCircleFilled" iconSize="tiny" />
@ -53,7 +50,7 @@ const MessageStatusError = ({ dataTestId }: { dataTestId?: string }) => {
onClick={showDebugLog}
title={window.i18n('sendFailed')}
>
<SessionIcon iconColor={'var(--color-destructive'} iconType="error" iconSize="tiny" />
<SessionIcon iconColor={'var(--danger-color'} iconType="error" iconSize="tiny" />
</MessageStatusSendingContainer>
);
};

15
ts/components/dialog/AdminLeaveClosedGroupDialog.tsx
View file

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { SpacerLG } from '../basic/Text';
import { getConversationController } from '../../session/conversations';
import { adminLeaveClosedGroup } from '../../state/ducks/modalDialog';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal';
type Props = {
@ -37,8 +37,17 @@ export const AdminLeaveClosedGroupDialog = (props: Props) => {
<p>{warningAsAdmin}</p>
<div className="session-modal__button-group">
<SessionButton text={cancelText} onClick={closeDialog} />
<SessionButton text={okText} onClick={onClickOK} buttonColor={SessionButtonColor.Danger} />
<SessionButton
text={okText}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={onClickOK}
/>
<SessionButton
text={cancelText}
buttonType={SessionButtonType.Simple}
onClick={closeDialog}
/>
</div>
</SessionWrapperModal>
);

5
ts/components/dialog/BanOrUnbanUserDialog.tsx
View file

@ -141,8 +141,7 @@ export const BanOrUnBanUserDialog = (props: {
/>
<Flex container={true}>
<SessionButton
buttonType={SessionButtonType.Square}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Simple}
onClick={banOrUnBanUser}
text={buttonText}
disabled={inProgress}
@ -151,7 +150,7 @@ export const BanOrUnBanUserDialog = (props: {
<>
<SpacerSM />
<SessionButton
buttonType={SessionButtonType.Square}
buttonType={SessionButtonType.Simple}
buttonColor={SessionButtonColor.Danger}
onClick={startBanAndDeleteAllSequence}
text={i18n('banUserAndDeleteAll')}

8
ts/components/dialog/DeleteAccountModal.tsx
View file

@ -5,7 +5,7 @@ import { forceNetworkDeletion } from '../../session/apis/snode_api/SNodeAPI';
import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/syncUtils';
import { updateConfirmModal, updateDeleteAccountModal } from '../../state/ducks/modalDialog';
import { SpacerLG } from '../basic/Text';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionWrapperModal } from '../SessionWrapperModal';
@ -193,6 +193,7 @@ export const DeleteAccountModal = () => {
<SessionButton
text={window.i18n('entireAccount')}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={() => {
setDeleteEverythingWithNetwork(true);
}}
@ -201,7 +202,7 @@ export const DeleteAccountModal = () => {
<SessionButton
text={window.i18n('deviceOnly')}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Simple}
onClick={() => {
setDeleteDeviceOnly(true);
}}
@ -232,6 +233,7 @@ export const DeleteAccountModal = () => {
<SessionButton
text={window.i18n('iAmSure')}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={() => {
if (deleteDeviceOnly) {
void onDeleteEverythingLocallyOnly();
@ -244,7 +246,7 @@ export const DeleteAccountModal = () => {
<SessionButton
text={window.i18n('cancel')}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Simple}
onClick={() => {
dispatch(updateDeleteAccountModal(null));
}}

14
ts/components/dialog/EditProfileDialog.tsx
View file

@ -9,11 +9,10 @@ import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
import { ConversationModel } from '../../models/conversation';
import { getConversationController } from '../../session/conversations';
import { SpacerLG, SpacerMD } from '../basic/Text';
import autoBind from 'auto-bind';
import { editProfileModal } from '../../state/ducks/modalDialog';
import { uploadOurAvatar } from '../../interactions/conversationInteractions';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIconButton } from '../icon';
import { MAX_USERNAME_LENGTH } from '../registration/RegistrationStages';
@ -98,8 +97,6 @@ export class EditProfileDialog extends React.Component<{}, State> {
headerIconButtons={backButton}
showExitIcon={true}
>
<SpacerMD />
{viewQR && <QRView sessionID={sessionID} />}
{viewDefault && this.renderDefaultView()}
{viewEdit && this.renderEditView()}
@ -108,14 +105,12 @@ export class EditProfileDialog extends React.Component<{}, State> {
<YourSessionIDPill />
<YourSessionIDSelectable />
<SpacerLG />
<SessionSpinner loading={this.state.loading} />
{viewDefault || viewQR ? (
<SessionButton
text={window.i18n('editMenuCopy')}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.Simple}
onClick={() => {
window.clipboard.writeText(sessionID);
ToastUtils.pushCopiedToClipBoard();
@ -126,16 +121,13 @@ export class EditProfileDialog extends React.Component<{}, State> {
!this.state.loading && (
<SessionButton
text={window.i18n('save')}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.Simple}
onClick={this.onClickOK}
disabled={this.state.loading}
dataTestId="save-button-profile-update"
/>
)
)}
<SpacerLG />
</div>
</SessionWrapperModal>
</div>

11
ts/components/dialog/InviteContactsDialog.tsx
View file

@ -11,7 +11,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { updateInviteContactModal } from '../../state/ducks/modalDialog';
// tslint:disable-next-line: no-submodule-imports
import useKey from 'react-use/lib/useKey';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { MemberListItem } from '../MemberListItem';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { getPrivateContactsPubkeys } from '../../state/selectors/conversations';
@ -177,12 +177,17 @@ const InviteContactsDialogInner = (props: Props) => {
<SpacerLG />
<div className="session-modal__button-group">
<SessionButton text={cancelText} onClick={closeDialog} />
<SessionButton
text={okText}
buttonType={SessionButtonType.Simple}
disabled={!hasContacts}
onClick={onClickOK}
buttonColor={SessionButtonColor.Green}
/>
<SessionButton
text={cancelText}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={closeDialog}
/>
</div>
</SessionWrapperModal>

5
ts/components/dialog/ModeratorsAddDialog.tsx
View file

@ -5,7 +5,7 @@ import { Flex } from '../basic/Flex';
import { getConversationController } from '../../session/conversations';
import { useDispatch, useSelector } from 'react-redux';
import { updateAddModeratorsModal } from '../../state/ducks/modalDialog';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { sogsV3AddAdmin } from '../../session/apis/open_group_api/sogsv3/sogsV3AddRemoveMods';
@ -93,8 +93,7 @@ export const AddModeratorsDialog = (props: Props) => {
autoFocus={true}
/>
<SessionButton
buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Simple}
onClick={addAsModerator}
text={i18n('add')}
disabled={addingInProgress}

7
ts/components/dialog/ModeratorsRemoveDialog.tsx
View file

@ -105,15 +105,14 @@ export const RemoveModeratorsDialog = (props: Props) => {
<div className="session-modal__button-group">
<SessionButton
buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.Simple}
onClick={removeModsCall}
disabled={removingInProgress}
text={i18n('ok')}
/>
<SessionButton
buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Simple}
buttonColor={SessionButtonColor.Danger}
onClick={closeDialog}
disabled={removingInProgress}
text={i18n('cancel')}

13
ts/components/dialog/OnionStatusPathDialog.tsx
View file

@ -154,7 +154,7 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme
<ModalStatusLight
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
color={'var(--color-accent)'}
color={'var(--button-path-default-color)'}
/>
);
};
@ -195,15 +195,16 @@ export const ActionPanelOnionStatusLight = (props: {
const isOnline = useSelector(getIsOnline);
// Set icon color based on result
const red = 'var(--color-destructive)';
const green = 'var(--color-accent)';
const orange = 'var(--color-warning)';
const errorColor = 'var(--button-path-error-color)';
const defaultColor = 'var(--button-path-default-color)';
const connectingColor = 'var(--button-path-connecting-color)';
// start with red
let iconColor = red;
let iconColor = errorColor;
//if we are not online or the first path is not valid, we keep red as color
if (isOnline && firstPathLength > 1) {
iconColor = onionPathsCount >= 2 ? green : onionPathsCount >= 1 ? orange : red;
iconColor =
onionPathsCount >= 2 ? defaultColor : onionPathsCount >= 1 ? connectingColor : errorColor;
}
return (

9
ts/components/dialog/ReactClearAllModal.tsx
View file

@ -66,8 +66,6 @@ export const ReactClearAllModal = (props: Props): ReactElement => {
.get(convoId)
.toOpenGroupV2();
const confirmButtonColor = darkMode ? SessionButtonColor.Green : SessionButtonColor.Secondary;
const handleClose = () => {
dispatch(updateReactClearAllModal(null));
};
@ -99,15 +97,14 @@ export const ReactClearAllModal = (props: Props): ReactElement => {
<StyledButtonContainer className="session-modal__button-group">
<SessionButton
text={window.i18n('clear')}
buttonColor={confirmButtonColor}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={handleClearAll}
disabled={clearingInProgress}
/>
<SessionButton
text={window.i18n('cancel')}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.BrandOutline}
buttonType={SessionButtonType.Simple}
onClick={handleClose}
disabled={clearingInProgress}
/>

21
ts/components/dialog/ReactListModal.tsx
View file

@ -16,6 +16,7 @@ import { nativeEmojiData } from '../../util/emoji';
import { Reactions } from '../../util/reactions';
import { Avatar, AvatarSize } from '../avatar/Avatar';
import { Flex } from '../basic/Flex';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
import { ContactName } from '../conversation/ContactName';
import { MessageReactions } from '../conversation/message/message-content/MessageReactions';
@ -62,6 +63,11 @@ const StyledReactionBar = styled(Flex)`
margin-right: 8px;
}
}
.session-button {
font-weight: 400;
padding: 0px;
}
`;
const StyledReactionSender = styled(Flex)`
@ -77,12 +83,6 @@ const StyledReactionSender = styled(Flex)`
}
`;
const StyledClearButton = styled.button`
font-size: var(--font-size-sm);
color: var(--color-destructive);
border: none;
`;
type ReactionSendersProps = {
messageId: string;
currentReact: string;
@ -349,9 +349,12 @@ export const ReactListModal = (props: Props): ReactElement => {
)}
</p>
{isPublic && weAreModerator && (
<StyledClearButton onClick={handleClearReactions}>
{window.i18n('clearAll')}
</StyledClearButton>
<SessionButton
text={window.i18n('clearAll')}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={handleClearReactions}
/>
)}
</StyledReactionBar>
{senders && senders.length > 0 && (

10
ts/components/dialog/SessionConfirm.tsx
View file

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
import { updateConfirmModal } from '../../state/ducks/modalDialog';
import { SpacerLG } from '../basic/Text';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
import { SessionWrapperModal } from '../SessionWrapperModal';
@ -45,8 +45,8 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
title = '',
message = '',
messageSub = '',
okTheme = SessionButtonColor.Primary,
closeTheme = SessionButtonColor.Primary,
okTheme,
closeTheme = SessionButtonColor.Danger,
onClickOk,
onClickClose,
hideCancel = false,
@ -133,13 +133,15 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
<SessionButton
text={okText}
buttonColor={okTheme}
buttonType={SessionButtonType.Simple}
onClick={onClickOkHandler}
dataTestId="session-confirm-ok-button"
/>
{!hideCancel && (
<SessionButton
text={cancelText}
buttonColor={closeTheme}
buttonColor={!okTheme ? closeTheme : undefined}
buttonType={SessionButtonType.Simple}
onClick={onClickCancelHandler}
dataTestId="session-confirm-cancel-button"
/>

11
ts/components/dialog/SessionNicknameDialog.tsx
View file

@ -5,7 +5,7 @@ import _ from 'lodash';
import { SpacerLG } from '../basic/Text';
import { useDispatch } from 'react-redux';
import { changeNickNameModal } from '../../state/ducks/modalDialog';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal';
type Props = {
@ -70,11 +70,16 @@ export const SessionNicknameDialog = (props: Props) => {
/>
<div className="session-modal__button-group">
<SessionButton text={window.i18n('cancel')} onClick={onClickClose} />
<SessionButton
text={window.i18n('ok')}
buttonType={SessionButtonType.Simple}
onClick={saveNickname}
buttonColor={SessionButtonColor.Green}
/>
<SessionButton
text={window.i18n('cancel')}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={onClickClose}
/>
</div>
</SessionWrapperModal>

14
ts/components/dialog/SessionPasswordDialog.tsx
View file

@ -7,7 +7,7 @@ import { SpacerLG, SpacerSM } from '../basic/Text';
import autoBind from 'auto-bind';
import { sessionPassword } from '../../state/ducks/modalDialog';
import { LocalizerKeys } from '../../types/LocalizerKeys';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { matchesHash, validatePassword } from '../../util/passwordUtils';
@ -59,8 +59,6 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
]
: [window.i18n('enterPassword'), window.i18n('confirmPassword')];
const confirmButtonColor =
passwordAction === 'remove' ? SessionButtonColor.Danger : SessionButtonColor.Green;
// do this separately so typescript's compiler likes it
const localizedKeyAction: LocalizerKeys =
passwordAction === 'change'
@ -108,12 +106,18 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
{this.showError()}
<div className="session-modal__button-group">
<SessionButton text={window.i18n('cancel')} onClick={this.closeDialog} />
<SessionButton
text={window.i18n('ok')}
buttonColor={confirmButtonColor}
buttonColor={passwordAction === 'remove' ? SessionButtonColor.Danger : undefined}
buttonType={SessionButtonType.Simple}
onClick={this.setPassword}
/>
<SessionButton
text={window.i18n('cancel')}
buttonColor={passwordAction !== 'remove' ? SessionButtonColor.Danger : undefined}
buttonType={SessionButtonType.Simple}
onClick={this.closeDialog}
/>
</div>
</SessionWrapperModal>
);

30
ts/components/dialog/SessionSeedModal.tsx
View file

@ -8,7 +8,7 @@ import { mn_decode } from '../../session/crypto/mnemonic';
import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text';
import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
import { useDispatch } from 'react-redux';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { getCurrentRecoveryPhrase } from '../../util/storage';
@ -72,8 +72,17 @@ const Password = (props: PasswordProps) => {
<SpacerLG />
<div className="session-modal__button-group">
<SessionButton text={i18n('cancel')} onClick={onClose} />
<SessionButton text={i18n('ok')} onClick={confirmPassword} />
<SessionButton
text={i18n('ok')}
buttonType={SessionButtonType.Simple}
onClick={confirmPassword}
/>
<SessionButton
text={i18n('cancel')}
buttonType={SessionButtonType.Simple}
buttonColor={SessionButtonColor.Danger}
onClick={onClose}
/>
</div>
</>
);
@ -105,27 +114,26 @@ const Seed = (props: SeedProps) => {
return (
<>
<div className="session-modal__centered text-center">
<p className="session-modal__description">{i18n('recoveryPhraseSavePromptMain')}</p>
<SpacerXS />
<p className="session-modal__description" style={{ marginTop: '0px' }}>
{i18n('recoveryPhraseSavePromptMain')}
</p>
<i data-testid="recovery-phrase-seed-modal" className="session-modal__text-highlight">
{recoveryPhrase}
</i>
</div>
<SpacerLG />
<div className="qr-image">
<QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
</div>
<div className="session-modal__button-group">
<SessionButton
text={i18n('editMenuCopy')}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.Simple}
onClick={() => {
copyRecoveryPhrase(recoveryPhrase);
}}
/>
</div>
<SpacerLG />
<div className="qr-image">
<QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
</div>
</>
);
};

11
ts/components/dialog/UpdateGroupMembersDialog.tsx
View file

@ -5,7 +5,7 @@ import { ToastUtils, UserUtils } from '../../session/utils';
import _ from 'lodash';
import { SpacerLG, Text } from '../basic/Text';
import { updateGroupMembersModal } from '../../state/ducks/modalDialog';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { MemberListItem } from '../MemberListItem';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { useDispatch } from 'react-redux';
@ -243,10 +243,15 @@ export const UpdateGroupMembersDialog = (props: Props) => {
<SpacerLG />
<div className="session-modal__button-group">
<SessionButton text={cancelText} onClick={closeDialog} />
{weAreAdmin && (
<SessionButton text={okText} onClick={onClickOK} buttonColor={SessionButtonColor.Green} />
<SessionButton text={okText} onClick={onClickOK} buttonType={SessionButtonType.Simple} />
)}
<SessionButton
text={cancelText}
buttonColor={weAreAdmin ? SessionButtonColor.Danger : undefined}
buttonType={SessionButtonType.Simple}
onClick={closeDialog}
/>
</div>
</SessionWrapperModal>
);

12
ts/components/dialog/UpdateGroupNameDialog.tsx
View file

@ -8,7 +8,7 @@ import autoBind from 'auto-bind';
import { ConversationModel } from '../../models/conversation';
import { getConversationController } from '../../session/conversations';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { initiateOpenGroupUpdate } from '../../session/group/open-group';
import { initiateClosedGroupUpdate } from '../../session/group/closed-group';
import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
@ -129,12 +129,16 @@ export class UpdateGroupNameDialog extends React.Component<Props, State> {
) : null}
<div className="session-modal__button-group">
<SessionButton text={cancelText} onClick={this.closeDialog} />
<SessionButton
text={okText}
onClick={this.onClickOK}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.Simple}
/>
<SessionButton
text={cancelText}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Simple}
onClick={this.closeDialog}
/>
</div>
</SessionWrapperModal>

16
ts/components/dialog/UserDetailsDialog.tsx
View file

@ -10,7 +10,7 @@ import { ToastUtils } from '../../session/utils';
import { openConversationWithMessages } from '../../state/ducks/conversations';
import { updateUserDetailsModal, UserDetailsModalState } from '../../state/ducks/modalDialog';
import { Avatar, AvatarSize } from '../avatar/Avatar';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionIdEditable } from '../basic/SessionIdEditable';
import { SpacerLG } from '../basic/Text';
import { SessionWrapperModal } from '../SessionWrapperModal';
@ -73,21 +73,19 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => {
<SessionIdEditable editable={false} text={props.conversationId} />
<div className="session-modal__button-group__center">
<SessionButton
text={window.i18n('startConversation')}
buttonType={SessionButtonType.Simple}
onClick={onClickStartConversation}
/>
<SessionButton
text={window.i18n('editMenuCopy')}
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Simple}
onClick={() => {
copyToClipboard(props.conversationId);
ToastUtils.pushCopiedToClipBoard();
}}
/>
<SessionButton
text={window.i18n('startConversation')}
buttonType={SessionButtonType.Default}
buttonColor={SessionButtonColor.Green}
onClick={onClickStartConversation}
/>
</div>
</SessionWrapperModal>
);

4
ts/components/icon/DropDownAndToggleButton.tsx
View file

@ -12,8 +12,8 @@ type SProps = {
};
const StyledRoundedButton = styled.div<{ isMuted: boolean }>`
background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'white')};
color: ${props => (props.isMuted ? 'white' : 'black')};
background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'var(--white-color)')};
color: ${props => (props.isMuted ? 'var(--white-color)' : 'var(--black-color)')};
border-radius: 50%;
cursor: pointer;

10
ts/components/icon/SessionIcon.tsx
View file

@ -101,7 +101,7 @@ const animation = (props: {
}) => {
if (props.rotateDuration) {
return css`
${rotate} ${props.rotateDuration}s infinite linear;
${rotate} ${props.rotateDuration}s linear infinite;
`;
}
if (props.noScale) {
@ -127,13 +127,15 @@ const Svg = React.memo(styled.svg<StyledSvgProps>`
transform: ${props => `rotate(${props.iconRotation}deg)`};
animation: ${props => animation(props)};
border-radius: ${props => props.borderRadius};
background-color: ${props => (props.backgroundColor ? props.backgroundColor : '')};
background-color: ${props =>
props.backgroundColor ? props.backgroundColor : '--button-icon-background-color'};
border-radius: ${props => (props.borderRadius ? props.borderRadius : '')};
filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
fill: ${props => (props.iconColor ? props.iconColor : '--button-icon-stroke-color')};
padding: ${props => (props.iconPadding ? props.iconPadding : '')};
transition: inherit;
`);
//tslint:enable no-unnecessary-callback-wrapper
// tslint:enable no-unnecessary-callback-wrapper
const SessionSvg = (props: {
viewBox: string;
@ -150,7 +152,7 @@ const SessionSvg = (props: {
backgroundColor?: string;
iconPadding?: string;
}) => {
const colorSvg = props.iconColor;
const colorSvg = props.iconColor ? props.iconColor : '--button-icon-stroke-color';
const pathArray = props.path instanceof Array ? props.path : [props.path];
const propsToPick = {
width: props.width,

6
ts/components/icon/SessionNotificationCount.tsx
View file

@ -20,12 +20,12 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
font-family: var(--font-default);
border-radius: 50%;
font-weight: 700;
background: var(--color-destructive);
/* TODO Theming Update */
background: var(--unread-messages-alert-background-color);
transition: var(--default-duration);
opacity: ${props => (props.shouldRender ? 1 : 0)};
text-align: center;
color: white;
/* cursor: */
color: var(--unread-messages-alert-text-color);
`;
const StyledCount = styled.div<{ countOverflow: boolean }>`

1
ts/components/leftpane/ActionsPanel.tsx
View file

@ -65,6 +65,7 @@ const Section = (props: { type: SectionType }) => {
if (type === SectionType.Profile) {
dispatch(editProfileModal({}));
} else if (type === SectionType.Moon) {
// TODO Theming Toggle current theme light and dark mode with new system
const currentTheme = window.Events.getThemeSetting();
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

19
ts/components/leftpane/LeftPaneMessageSection.tsx
View file

@ -32,16 +32,6 @@ export interface Props {
overlayMode: OverlayMode | undefined;
}
const StyledConversationListContent = styled.div`
overflow-x: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
transition: none;
background: var(--color-conversation-list);
`;
const StyledLeftPaneContent = styled.div`
display: flex;
flex-direction: column;
@ -49,6 +39,15 @@ const StyledLeftPaneContent = styled.div`
overflow: hidden;
`;
const StyledConversationListContent = styled.div`
background: var(--background-primary-color);
overflow-x: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
transition: none;
`;
const ClosableOverlay = () => {
const overlayMode = useSelector(getOverlayMode);

2
ts/components/leftpane/LeftPaneSectionContainer.tsx
View file

@ -5,7 +5,7 @@ export const LeftPaneSectionContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
border-right: var(--border-session);
border-right: var(--border-color);
overflow-y: auto;
.session-icon-button {

186
ts/components/leftpane/LeftPaneSectionHeader.tsx
View file

@ -7,16 +7,106 @@ import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
import { Flex } from '../basic/Flex';
import { getFocusedSection, getOverlayMode } from '../../state/selectors/section';
import { SectionType } from '../../state/ducks/section';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionButton } from '../basic/SessionButton';
import { isSignWithRecoveryPhrase } from '../../util/storage';
import { MenuButton } from '../button/MenuButton';
const SectionTitle = styled.h1`
padding: 0 var(--margins-sm);
padding-top: var(--margins-xs);
padding-left: var(--margins-sm);
flex-grow: 1;
color: var(--color-text);
color: var(--text-primary-color);
`;
const StyledProgressBarContainer = styled.div`
width: 100%;
height: 5px;
flex-direction: row;
background: var(--border-color);
`;
const StyledProgressBarInner = styled.div`
background: var(--primary-color);
width: 90%;
transition: width 0.5s ease-in;
height: 100%;
`;
export const StyledBannerTitle = styled.div`
line-height: 1.3;
font-size: var(--font-size-md);
font-weight: bold;
margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm);
span {
color: var(--primary-color);
}
`;
export const StyledLeftPaneBanner = styled.div`
background: var(--background-primary-color);
display: flex;
flex-direction: column;
border-bottom: var(--border-color);
`;
const StyledBannerInner = styled.div`
p {
margin: 0;
}
.left-pane-banner___phrase {
margin-top: var(--margins-md);
}
.session-button {
margin-top: var(--margins-md);
}
`;
const BannerInner = () => {
const dispatch = useDispatch();
const showRecoveryPhraseModal = () => {
dispatch(disableRecoveryPhrasePrompt());
dispatch(recoveryPhraseModal({}));
};
return (
<StyledBannerInner>
<p>{window.i18n('recoveryPhraseRevealMessage')}</p>
<SessionButton
text={window.i18n('recoveryPhraseRevealButtonText')}
onClick={showRecoveryPhraseModal}
dataTestId="reveal-recovery-phrase"
/>
</StyledBannerInner>
);
};
export const LeftPaneBanner = () => {
const section = useSelector(getFocusedSection);
const isSignInWithRecoveryPhrase = isSignWithRecoveryPhrase();
if (section !== SectionType.Message || isSignInWithRecoveryPhrase) {
return null;
}
return (
<StyledLeftPaneBanner>
<StyledProgressBarContainer>
<StyledProgressBarInner />
</StyledProgressBarContainer>
<StyledBannerTitle>
{window.i18n('recoveryPhraseSecureTitle')} <span>90%</span>
</StyledBannerTitle>
<Flex flexDirection="column" justifyContent="space-between" padding={'var(--margins-sm)'}>
<BannerInner />
</Flex>
</StyledLeftPaneBanner>
);
};
export const LeftPaneSectionHeader = () => {
const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
const focusedSection = useSelector(getFocusedSection);
@ -49,93 +139,3 @@ export const LeftPaneSectionHeader = () => {
</Flex>
);
};
const BannerInner = () => {
const dispatch = useDispatch();
const showRecoveryPhraseModal = () => {
dispatch(disableRecoveryPhrasePrompt());
dispatch(recoveryPhraseModal({}));
};
return (
<StyledBannerInner>
<p>{window.i18n('recoveryPhraseRevealMessage')}</p>
<SessionButton
buttonType={SessionButtonType.Default}
text={window.i18n('recoveryPhraseRevealButtonText')}
onClick={showRecoveryPhraseModal}
dataTestId="reveal-recovery-phrase"
/>
</StyledBannerInner>
);
};
export const LeftPaneBanner = () => {
const section = useSelector(getFocusedSection);
const isSignInWithRecoveryPhrase = isSignWithRecoveryPhrase();
if (section !== SectionType.Message || isSignInWithRecoveryPhrase) {
return null;
}
return (
<StyledLeftPaneBanner>
<StyledProgressBarContainer>
<StyledProgressBarInner />
</StyledProgressBarContainer>
<StyledBannerTitle>
{window.i18n('recoveryPhraseSecureTitle')} <span>90%</span>
</StyledBannerTitle>
<Flex flexDirection="column" justifyContent="space-between" padding={'var(--margins-sm)'}>
<BannerInner />
</Flex>
</StyledLeftPaneBanner>
);
};
const StyledProgressBarContainer = styled.div`
width: 100%;
height: 5px;
flex-direction: row;
background: var(--color-session-border);
`;
const StyledProgressBarInner = styled.div`
background: var(--color-accent);
width: 90%;
transition: width 0.5s ease-in;
height: 100%;
`;
export const StyledBannerTitle = styled.div`
line-height: 1.3;
font-size: var(--font-size-md);
font-weight: bold;
margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm);
span {
color: var(--color-text-accent);
}
`;
export const StyledLeftPaneBanner = styled.div`
background: var(--color-recovery-phrase-banner-background);
display: flex;
flex-direction: column;
border-bottom: var(--session-border);
`;
const StyledBannerInner = styled.div`
p {
margin: 0;
}
.left-pane-banner___phrase {
margin-top: var(--margins-md);
}
.session-button {
margin-top: var(--margins-sm);
}
`;

17
ts/components/leftpane/MessageRequestsBanner.tsx
View file

@ -17,20 +17,20 @@ const StyledMessageRequestBanner = styled.div`
padding: 8px 12px; // adjusting for unread border always being active
align-items: center;
cursor: pointer;
background: var(--color-request-banner-background);
/* TODO Theming - Discuss with Connnor */
background: var(--conversation-tab-background-color);
transition: var(--default-duration);
&:hover {
background: var(--color-clickable-hovered);
background: var(--conversation-tab-background-hover-color);
}
`;
const StyledMessageRequestBannerHeader = styled.span`
font-weight: bold;
font-size: var(--font-size-md);
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
padding-left: var(--margins-xs);
margin-inline-start: 12px;
line-height: 18px;
@ -47,7 +47,8 @@ const StyledCircleIcon = styled.div`
const StyledUnreadCounter = styled.div`
font-weight: bold;
border-radius: var(--margins-sm);
background-color: var(--color-request-banner-unread-background);
background-color: var(--conversation-tab-bubble-background-color);
color: var(--conversation-tab-bubble-text-color);
margin-left: 10px;
min-width: 20px;
height: 20px;
@ -66,7 +67,8 @@ const StyledGridContainer = styled.div`
align-items: center;
border-radius: 50%;
justify-content: center;
background-color: var(--color-request-banner-icon-background);
/* TODO Theming - Is this right? */
background-color: var(--text-secondary-color);
`;
export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: SessionIconSize }) => {
@ -78,7 +80,8 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess
<SessionIcon
iconType={iconType}
iconSize={iconSize}
iconColor="var(--color-request-banner-icon)"
// TODO Theming - Is this right?
iconColor="var(--background-primary-color)"
/>
</StyledGridContainer>
</StyledCircleIcon>

2
ts/components/leftpane/conversation-list-item/ConversationListItem.tsx
View file

@ -64,7 +64,7 @@ const AvatarItem = () => {
}
return (
<div className="module-conversation-list-item__avatar-container">
<div>
<Avatar
size={AvatarSize.S}
pubkey={conversationId}

25
ts/components/leftpane/conversation-list-item/HeaderItem.tsx
View file

@ -31,11 +31,19 @@ const NotificationSettingIcon = (props: { isMessagesSection: boolean }) => {
return null;
case 'disabled':
return (
<SessionIcon iconType="mute" iconColor={'var(--color-text-subtle)'} iconSize="small" />
<SessionIcon
iconType="mute"
iconColor={'var(--conversation-tab-text-color)'}
iconSize="small"
/>
);
case 'mentions_only':
return (
<SessionIcon iconType="bell" iconColor={'var(--color-text-subtle)'} iconSize="small" />
<SessionIcon
iconType="bell"
iconColor={'var(--conversation-tab-text-color)'}
iconSize="small"
/>
);
default:
return null;
@ -71,7 +79,11 @@ const ListItemIcons = () => {
const pinIcon =
isMessagesSection && isPinned ? (
<SessionIcon iconType="pin" iconColor={'var(--color-text-subtle)'} iconSize="small" />
<SessionIcon
iconType="pin"
iconColor={'var(--conversation-tab-text-color)'}
iconSize="small"
/>
) : null;
return (
<StyledConversationListItemIconWrapper>
@ -82,9 +94,8 @@ const ListItemIcons = () => {
};
const MentionAtSymbol = styled.span`
background-color: var(--color-accent);
color: black;
background-color: var(--primary-color);
color: var(--conversation-tab-text-color);
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
@ -102,10 +113,10 @@ const MentionAtSymbol = styled.span`
height: 16px;
min-width: 16px;
border-radius: 8px;
/* transition: filter 0.25s linear; */
cursor: pointer;
:hover {
/* TODO Theming, should this be changed? */
filter: grayscale(0.7);
}
`;

8
ts/components/leftpane/overlay/OverlayClosedGroup.tsx
View file

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionButton } from '../../basic/SessionButton';
import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { MemberListItem } from '../../MemberListItem';
@ -22,7 +22,7 @@ import { VALIDATION } from '../../../session/constants';
const StyledMemberListNoContacts = styled.div`
font-family: var(--font-font-mono);
background: var(--color-cell-background);
background: var(--background-secondary-color);
text-align: center;
padding: 20px;
`;
@ -32,7 +32,7 @@ const StyledGroupMemberListContainer = styled.div`
width: 100%;
max-height: 400px;
overflow-y: auto;
border: var(--border-session);
border: var(--border-color);
`;
const NoContacts = () => {
@ -135,8 +135,6 @@ export const OverlayClosedGroup = () => {
<SpacerLG style={{ flexShrink: 0 }} />
<SessionButton
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
text={buttonText}
disabled={disableCreateButton}
onClick={onEnterPressed}

10
ts/components/leftpane/overlay/OverlayCommunity.tsx
View file

@ -3,7 +3,7 @@ import React, { useState } from 'react';
import { SessionJoinableRooms } from './SessionJoinableDefaultRooms';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionButton } from '../../basic/SessionButton';
import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { OverlayHeader } from './OverlayHeader';
@ -100,13 +100,7 @@ export const OverlayCommunity = () => {
/>
</div>
<SessionButton
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
text={buttonText}
disabled={!groupUrl}
onClick={onTryJoinRoom}
/>
<SessionButton text={buttonText} disabled={!groupUrl} onClick={onTryJoinRoom} />
<SessionSpinner loading={loading} />
<SessionJoinableRooms onJoinClick={onTryJoinRoom} alreadyJoining={loading} />

14
ts/components/leftpane/overlay/OverlayHeader.tsx
View file

@ -6,10 +6,10 @@ import { Flex } from '../../basic/Flex';
import { SpacerSM } from '../../basic/Text';
import { SessionIconButton } from '../../icon';
const StyledGreenBorder = styled.hr`
const StyledPrimaryBorder = styled.hr`
position: absolute;
color: var(--color-accent);
background-color: var(--color-accent);
color: var(--primary-color);
background-color: var(--primary-color);
height: 5px;
left: -10px;
@ -19,7 +19,9 @@ const StyledGreenBorder = styled.hr`
z-index: 1;
`;
const StyledWhiteBorder = styled.hr`
const StyledBackgroundBorder = styled.hr`
color: var(--background-primary-color);
background-color: var(--background-primary-color);
width: 100%;
position: relative;
height: 1px;
@ -63,9 +65,9 @@ export const OverlayHeader = ({ subtitle, title }: { title: string; subtitle: st
<StyledSubTitle>
{subtitle}
<StyledGreenBorder />
<StyledPrimaryBorder />
</StyledSubTitle>
<StyledWhiteBorder />
<StyledBackgroundBorder />
</>
);
};

4
ts/components/leftpane/overlay/OverlayMessage.tsx
View file

@ -2,7 +2,7 @@ import React, { useState } from 'react';
// tslint:disable: use-simple-attributes no-submodule-imports
import { useDispatch } from 'react-redux';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionButton } from '../../basic/SessionButton';
import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { OverlayHeader } from './OverlayHeader';
@ -128,8 +128,6 @@ export const OverlayMessage = () => {
<SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />
</Flex>
<SessionButton
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
text={buttonText}
disabled={disableNextButton}
onClick={handleMessageButtonClick}

69
ts/components/leftpane/overlay/OverlayMessageRequest.tsx
View file

@ -9,7 +9,7 @@ import {
} from '../../../state/selectors/conversations';
import { MemoConversationListItemWithDetails } from '../conversation-list-item/ConversationListItem';
import styled from 'styled-components';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../../state/ducks/section';
import { getConversationController } from '../../../session/conversations';
import { forceSyncConfigurationNowIfNeeded } from '../../../session/utils/syncUtils';
@ -21,6 +21,39 @@ import {
} from '../../../state/ducks/conversations';
import { updateConfirmModal } from '../../../state/ducks/modalDialog';
const MessageRequestListPlaceholder = styled.div`
color: var(--conversation-tab-text-color);
margin-bottom: auto;
`;
const MessageRequestListContainer = styled.div`
width: 100%;
overflow-y: auto;
border: var(--border-color);
margin-bottom: auto;
`;
/**
* A request needs to be be unapproved and not blocked to be valid.
* @returns List of message request items
*/
const MessageRequestList = () => {
const conversationRequests = useSelector(getConversationRequests);
return (
<MessageRequestListContainer>
{conversationRequests.map(conversation => {
return (
<MemoConversationListItemWithDetails
key={conversation.id}
isMessageRequest={true}
{...conversation}
/>
);
})}
</MessageRequestListContainer>
);
};
export const OverlayMessageRequest = () => {
useKey('Escape', closeOverlay);
const dispatch = useDispatch();
@ -98,7 +131,6 @@ export const OverlayMessageRequest = () => {
<SpacerLG />
<SessionButton
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.BrandOutline}
text={buttonText}
onClick={() => {
handleClearAllRequestsClick(messageRequests);
@ -116,36 +148,3 @@ export const OverlayMessageRequest = () => {
</div>
);
};
const MessageRequestListPlaceholder = styled.div`
color: var(--color-text);
margin-bottom: auto;
`;
const MessageRequestListContainer = styled.div`
width: 100%;
overflow-y: auto;
border: var(--border-session);
margin-bottom: auto;
`;
/**
* A request needs to be be unapproved and not blocked to be valid.
* @returns List of message request items
*/
const MessageRequestList = () => {
const conversationRequests = useSelector(getConversationRequests);
return (
<MessageRequestListContainer>
{conversationRequests.map(conversation => {
return (
<MemoConversationListItemWithDetails
key={conversation.id}
isMessageRequest={true}
{...conversation}
/>
);
})}
</MessageRequestListContainer>
);
};

11
ts/components/leftpane/overlay/choose-action/ContactRow.tsx
View file

@ -35,6 +35,7 @@ const AvatarItem = (props: Pick<Props, 'displayName' | 'id'>) => {
};
const StyledContactRowName = styled.div`
color: var(--text-primary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -47,14 +48,14 @@ const StyledRowContainer = styled.button`
padding: 0 var(--margins-lg);
transition: background-color var(--default-duration) linear;
cursor: pointer;
border-bottom: 1px var(--color-session-border) solid;
border-bottom: 1px var(--border-color) solid;
&:first-child {
border-top: 1px var(--color-session-border) solid;
border-top: 1px var(--border-color) solid;
}
:hover {
background-color: var(--color-clickable-hovered);
background-color: var(--conversation-tab-background-hover-color);
}
`;
@ -62,11 +63,11 @@ const StyledBreak = styled.div`
display: flex;
align-items: center;
padding: 0 var(--margins-lg);
color: var(--color-text-subtle);
color: var(--text-secondary-color);
font-size: var(--font-size-md);
height: 30px; // should also be changed in rowHeight
border-bottom: 1px var(--color-session-border) solid;
border-bottom: 1px var(--border-color) solid;
`;
export const ContactRowBreak = (props: { char: string; key: string; style: CSSProperties }) => {

8
ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
View file

@ -12,21 +12,21 @@ const StyledActionRow = styled.button`
border: none;
display: flex;
align-items: center;
border-bottom: 1px var(--color-session-border) solid;
border-bottom: 1px var(--border-color) solid;
transition-duration: 0.25s;
width: 100%;
&:first-child {
border-top: 1px var(--color-session-border) solid;
border-top: 1px var(--border-color) solid;
}
:hover {
background: var(--color-clickable-hovered);
background: var(--conversation-tab-background-hover-color);
}
`;
export const StyledChooseActionTitle = styled.span`
color: var(--color-text);
color: var(--text-primary-color);
font-size: 18px;
padding: var(--margins-xs) var(--margins-lg);
`;

1
ts/components/menu/ConversationListItemContextMenu.tsx
View file

@ -29,6 +29,7 @@ export type PropsContextConversationItem = {
const ConversationListItemContextMenu = (props: PropsContextConversationItem) => {
const { triggerId } = props;
// TODO Theming - Waiting on Session Components for correct colors
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>

1
ts/components/menu/MessageRequestBannerContextMenu.tsx
View file

@ -13,6 +13,7 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) =>
const { triggerId } = props;
return (
// TODO Theming - Waiting on Session Components for correct colors
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>
<HideBannerMenuItem />

8
ts/components/registration/SignInTab.tsx
View file

@ -1,7 +1,7 @@
import React, { useContext, useState } from 'react';
import { sanitizeSessionUsername } from '../../session/utils/String';
import { Flex } from '../basic/Flex';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SpacerLG } from '../basic/Text';
import {
@ -26,8 +26,6 @@ const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
return (
<SessionButton
onClick={props.onLinkDeviceButtonClicked}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
text={window.i18n('linkDevice')}
dataTestId="link-device"
/>
@ -38,8 +36,6 @@ const RestoreUsingRecoveryPhraseButton = (props: { onRecoveryButtonClicked: () =
return (
<SessionButton
onClick={props.onRecoveryButtonClicked}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
text={window.i18n('restoreUsingRecoveryPhrase')}
dataTestId="restore-using-recovery"
/>
@ -53,8 +49,6 @@ const ContinueYourSessionButton = (props: {
return (
<SessionButton
onClick={props.handleContinueYourSessionClick}
buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Green}
text={window.i18n('continueYourSession')}
disabled={props.disabled}
dataTestId="continue-session-button"

22
ts/components/registration/SignUpTab.tsx
View file

@ -1,7 +1,7 @@
import React, { useContext, useEffect, useState } from 'react';
import { sanitizeSessionUsername } from '../../session/utils/String';
import { Flex } from '../basic/Flex';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton } from '../basic/SessionButton';
import { SessionIdEditable } from '../basic/SessionIdEditable';
import { SessionIconButton } from '../icon';
import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages';
@ -16,25 +16,11 @@ export enum SignUpMode {
}
const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => {
return (
<SessionButton
onClick={createSessionID}
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
text={window.i18n('createSessionID')}
/>
);
return <SessionButton onClick={createSessionID} text={window.i18n('createSessionID')} />;
};
const ContinueSignUpButton = ({ continueSignUp }: { continueSignUp: any }) => {
return (
<SessionButton
onClick={continueSignUp}
buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Green}
text={window.i18n('continue')}
/>
);
return <SessionButton onClick={continueSignUp} text={window.i18n('continue')} />;
};
const SignUpDefault = (props: { createSessionID: () => void }) => {
@ -153,8 +139,6 @@ export const SignUpTab = () => {
/>
<SessionButton
onClick={signUpWithDetails}
buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Green}
text={window.i18n('getStarted')}
disabled={!enableCompleteSignUp}
/>

10
ts/components/search/MessageSearchResults.tsx
View file

@ -21,7 +21,7 @@ const StyledConversationTitleResults = styled.div`
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-text);
color: var(--conversation-tab-text-color);
`;
const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)`
@ -30,7 +30,7 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)
line-height: 14px;
overflow-x: hidden;
font-weight: 700;
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
`;
const StyledSearchResulsts = styled.div`
@ -46,7 +46,7 @@ const StyledSearchResulsts = styled.div`
cursor: pointer;
&:hover {
background-color: var(--color-clickable-hovered);
background-color: var(--conversation-tab-background-hover-color);
}
`;
@ -143,7 +143,7 @@ const ResultBody = styled.div`
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
max-height: 3.6em;
@ -167,7 +167,7 @@ const StyledTimestampContaimer = styled.div`
text-transform: uppercase;
color: var(--color-text-subtle);
color: var(--conversation-tab-text-color);
`;
export const MessageSearchResult = (props: MessageResultProps) => {

4
ts/components/search/SearchResults.tsx
View file

@ -18,7 +18,7 @@ const StyledSeparatorSection = styled.div`
margin-inline-start: 16px;
color: var(--color-text);
color: var(--text-secondary-color);
font-size: var(--font-size-sm);
font-weight: 400;
@ -28,7 +28,7 @@ const StyledSeparatorSection = styled.div`
const SearchResultsContainer = styled.div`
overflow-y: auto;
max-height: 100%;
color: var(--color-text);
color: var(--text-secondary-color);
flex-grow: 1;
width: -webkit-fill-available;
`;

3
ts/components/settings/BlockedList.tsx
View file

@ -6,7 +6,7 @@ import styled from 'styled-components';
import { useSet } from '../../hooks/useSet';
import { ToastUtils } from '../../session/utils';
import { BlockedNumberController } from '../../util';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SpacerLG } from '../basic/Text';
import { SessionIconButton } from '../icon';
import { MemberListItem } from '../MemberListItem';
@ -130,7 +130,6 @@ export const BlockedContactsList = () => {
{hasAtLeastOneSelected && expanded ? (
<SessionButton
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.BrandOutline}
text={window.i18n('unblockUser')}
onClick={unBlockThoseUsers}
dataTestId="unblock-button-settings-screen"

9
ts/components/settings/SessionNotificationGroupSettings.tsx
View file

@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
import styled from 'styled-components';
import { SettingsKey } from '../../data/settings-key';
import { Notifications } from '../../util/notifications';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton } from '../basic/SessionButton';
import { SessionRadioGroup } from '../basic/SessionRadioGroup';
import { SpacerLG } from '../basic/Text';
import { SessionSettingsItemWrapper, SessionToggleWithDescription } from './SessionSettingListItem';
@ -100,12 +100,7 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
/>
<StyledButtonContainer>
<SpacerLG />
<SessionButton
text={window.i18n('notificationPreview')}
buttonColor={SessionButtonColor.Green}
onClick={onClickPreview}
buttonType={SessionButtonType.BrandOutline}
/>
<SessionButton text={window.i18n('notificationPreview')} onClick={onClickPreview} />
</StyledButtonContainer>
</SessionSettingsItemWrapper>
) : null}

26
ts/components/settings/SessionSettingListItem.tsx
View file

@ -1,5 +1,10 @@
import React from 'react';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import {
SessionButton,
SessionButtonColor,
SessionButtonShape,
SessionButtonType,
} from '../basic/SessionButton';
import { SessionToggle } from '../basic/SessionToggle';
import { SessionConfirmDialogProps } from '../dialog/SessionConfirm';
import styled from 'styled-components';
@ -8,8 +13,9 @@ import { SessionIconButton } from '../icon';
type ButtonSettingsProps = {
title?: string;
description?: string;
buttonColor: SessionButtonColor;
buttonType: SessionButtonType;
buttonColor?: SessionButtonColor;
buttonType?: SessionButtonType;
buttonShape?: SessionButtonShape;
buttonText: string;
dataTestId?: string;
onClick: () => void;
@ -145,7 +151,16 @@ export const SessionToggleWithDescription = (props: {
};
export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
const { title, description, buttonColor, buttonType, buttonText, dataTestId, onClick } = props;
const {
title,
description,
buttonColor,
buttonType,
buttonShape,
buttonText,
dataTestId,
onClick,
} = props;
return (
<SessionSettingsItemWrapper title={title} description={description} inline={true}>
@ -153,8 +168,9 @@ export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
dataTestId={dataTestId}
text={buttonText}
buttonColor={buttonColor}
onClick={onClick}
buttonType={buttonType}
buttonShape={buttonShape}
onClick={onClick}
/>
</SessionSettingsItemWrapper>
);

5
ts/components/settings/SessionSettings.tsx
View file

@ -9,7 +9,7 @@ import { SessionNotificationGroupSettings } from './SessionNotificationGroupSett
import { CategoryConversations } from './section/CategoryConversations';
import { SettingsCategoryPrivacy } from './section/CategoryPrivacy';
import { SettingsCategoryAppearance } from './section/CategoryAppearance';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { Data } from '../../data/data';
import { matchesHash } from '../../util/passwordUtils';
import { SettingsCategoryPermissions } from './section/CategoryPermissions';
@ -126,8 +126,7 @@ const PasswordLock = ({
{pwdLockError && <div className="session-label warning">{pwdLockError}</div>}
<SessionButton
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.Simple}
text={window.i18n('ok')}
onClick={validatePasswordLock}
/>

5
ts/components/settings/section/CategoryHelp.tsx
View file

@ -1,6 +1,6 @@
import { ipcRenderer, shell } from 'electron';
import React from 'react';
import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionButtonShape } from '../../basic/SessionButton';
import { SessionSettingButtonItem, SessionSettingsTitleWithLink } from '../SessionSettingListItem';
@ -12,8 +12,7 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
onClick={() => {
ipcRenderer.send('show-debug-log');
}}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Square}
buttonShape={SessionButtonShape.Square}
buttonText={window.i18n('showDebugLog')}
title={window.i18n('reportIssue')}
description={window.i18n('shareBugDetails')}

7
ts/components/settings/section/CategoryPrivacy.tsx
View file

@ -5,7 +5,7 @@ import { Data, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
import { SettingsKey } from '../../../data/settings-key';
import { ConversationTypeEnum } from '../../../models/conversationAttributes';
import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionButtonColor } from '../../basic/SessionButton';
import { SpacerLG } from '../../basic/Text';
import { TypingBubble } from '../../conversation/TypingBubble';
import { PasswordAction } from '../../dialog/SessionPasswordDialog';
@ -99,8 +99,6 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => {
displayPasswordModal('set', props.onPasswordUpdated);
}}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('setPassword')}
dataTestId={'set-password-button'}
/>
@ -112,8 +110,6 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => {
displayPasswordModal('change', props.onPasswordUpdated);
}}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('changePassword')}
/>
)}
@ -125,7 +121,6 @@ export const SettingsCategoryPrivacy = (props: {
displayPasswordModal('remove', props.onPasswordUpdated);
}}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('removePassword')}
/>
)}

1
ts/state/ducks/theme.tsx
View file

@ -1,5 +1,6 @@
export const APPLY_THEME = 'APPLY_THEME';
// TODO Theming - should be classic-light and classic-dark
export type ThemeStateType = 'light' | 'dark' | 'ocean-light' | 'ocean-dark';
export const applyTheme = (theme: ThemeStateType) => {

Some files were not shown because too many files have changed in this diff Show more