diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index b4893d7f6..e08e8d835 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -34,6 +34,14 @@
&__input-group {
min-width: 300px;
+
+ input {
+ margin-bottom: var(--margins-md);
+ }
+
+ input:last-child {
+ margin-bottom: 0px;
+ }
}
}
@@ -106,7 +114,6 @@
input {
padding: 8px;
- margin-bottom: 15px;
border: 0;
outline: none;
border-radius: 4px;
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 6e3985eef..91720b9ab 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -223,11 +223,11 @@ label {
padding: var(--margins-lg);
- font-family: $session-font-default;
+ font-family: var(--font-default);
text-align: center;
line-height: 18px;
- font-size: $session-font-md;
- font-weight: 700;
+ font-size: var(--font-size-lg);
+ font-weight: 500;
&.reverse {
flex-direction: row-reverse;
@@ -275,7 +275,7 @@ label {
.session-id-editable {
width: 30vw;
- max-width: 700px;
+ max-width: 400px;
}
}
@@ -298,6 +298,7 @@ label {
.session-button {
margin: var(--margins-xs);
+ font-weight: 500;
}
&__center {
@@ -329,7 +330,6 @@ label {
.session-confirm {
&-wrapper {
.session-modal__body .session-modal__centered {
- margin: var(--margins-lg);
text-align: center;
}
}
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index da84c0c0e..f2e4e3010 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -33,26 +33,6 @@
display: none;
}
- &-item {
- display: flex;
- align-items: center;
- min-height: 3rem;
- font-size: 0.8rem;
- 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);
- transition: var(--default-duration);
- cursor: pointer;
-
- &:hover {
- background-color: var(--right-panel-item-background-hover-color);
- }
- }
-
// no double border (top and bottom) between two elements
&-item + &-item {
border-top: none;
diff --git a/ts/components/SessionHeaderSearchInput.tsx b/ts/components/SessionHeaderSearchInput.tsx
index 755643fbf..9fbbd2ade 100644
--- a/ts/components/SessionHeaderSearchInput.tsx
+++ b/ts/components/SessionHeaderSearchInput.tsx
@@ -7,6 +7,7 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
padding: 0 26px 0 30px;
margin-inline-start: 8px;
margin-inline-end: 8px;
+ margin-bottom: 15px;
outline: 0;
height: 32px;
width: calc(100% - 16px);
diff --git a/ts/components/conversation/SessionRightPanel.tsx b/ts/components/conversation/SessionRightPanel.tsx
index cb0849def..7a836dbb7 100644
--- a/ts/components/conversation/SessionRightPanel.tsx
+++ b/ts/components/conversation/SessionRightPanel.tsx
@@ -161,6 +161,26 @@ const StyledLeaveButton = styled.div`
}
`;
+const StyledGroupSettingsItem = styled.div`
+ display: flex;
+ align-items: center;
+ min-height: 3rem;
+ font-size: var(--font-size-md);
+ 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);
+ transition: var(--default-duration);
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--right-panel-item-background-hover-color);
+ }
+`;
+
// tslint:disable: cyclomatic-complexity
// tslint:disable: max-func-body-length
export const SessionRightPanelWithDetails = () => {
@@ -267,7 +287,7 @@ export const SessionRightPanelWithDetails = () => {
>
)}
{showUpdateGroupNameButton && (
-
{
@@ -275,11 +295,11 @@ export const SessionRightPanelWithDetails = () => {
}}
>
{isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')}
-
+
)}
{showAddRemoveModeratorsButton && (
<>
- {
@@ -287,8 +307,8 @@ export const SessionRightPanelWithDetails = () => {
}}
>
{window.i18n('addModerators')}
-
-
+ {
@@ -296,12 +316,12 @@ export const SessionRightPanelWithDetails = () => {
}}
>
{window.i18n('removeModerators')}
-
+
>
)}
{showUpdateGroupMembersButton && (
- {
@@ -309,7 +329,7 @@ export const SessionRightPanelWithDetails = () => {
}}
>
{window.i18n('groupMembers')}
-
+
)}
{hasDisappearingMessages && (
diff --git a/ts/components/dialog/AdminLeaveClosedGroupDialog.tsx b/ts/components/dialog/AdminLeaveClosedGroupDialog.tsx
index 56935f430..abb95aeda 100644
--- a/ts/components/dialog/AdminLeaveClosedGroupDialog.tsx
+++ b/ts/components/dialog/AdminLeaveClosedGroupDialog.tsx
@@ -4,11 +4,17 @@ import { getConversationController } from '../../session/conversations';
import { adminLeaveClosedGroup } from '../../state/ducks/modalDialog';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal';
+import styled from 'styled-components';
type Props = {
conversationId: string;
};
+const StyledWarning = styled.p`
+ max-width: 500px;
+ line-height: 1.3333;
+`;
+
export const AdminLeaveClosedGroupDialog = (props: Props) => {
const convo = getConversationController().get(props.conversationId);
const titleText = `${window.i18n('leaveGroup')} ${convo.getRealSessionUsername()}`;
@@ -34,7 +40,7 @@ export const AdminLeaveClosedGroupDialog = (props: Props) => {
return (
- {warningAsAdmin}
+ {warningAsAdmin}
{
isSelected={selectedContacts.includes(member)}
onSelect={addTo}
onUnselect={removeFrom}
+ disableBg={true}
/>
))
) : (
diff --git a/ts/components/dialog/ModeratorsRemoveDialog.tsx b/ts/components/dialog/ModeratorsRemoveDialog.tsx
index 4dedd4fc6..61a82c50a 100644
--- a/ts/components/dialog/ModeratorsRemoveDialog.tsx
+++ b/ts/components/dialog/ModeratorsRemoveDialog.tsx
@@ -96,6 +96,7 @@ export const RemoveModeratorsDialog = (props: Props) => {
const updatedList = modsToRemove.filter(m => m !== selectedMember);
setModsToRemove(updatedList);
}}
+ disableBg={true}
/>
))}
diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx
index ecdf1e69e..519027bec 100644
--- a/ts/components/dialog/OnionStatusPathDialog.tsx
+++ b/ts/components/dialog/OnionStatusPathDialog.tsx
@@ -45,6 +45,7 @@ const StyledOnionNodeList = styled.div`
const StyledOnionDescription = styled.p`
min-width: 400px;
width: 0;
+ line-height: 1.3333;
`;
const StyledVerticalLine = styled.div`
diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx
index b571d49ed..fb8cd6758 100644
--- a/ts/components/dialog/SessionSeedModal.tsx
+++ b/ts/components/dialog/SessionSeedModal.tsx
@@ -11,6 +11,7 @@ import { useDispatch } from 'react-redux';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { getCurrentRecoveryPhrase } from '../../util/storage';
+import styled from 'styled-components';
interface PasswordProps {
setPasswordValid: (val: boolean) => any;
@@ -93,6 +94,15 @@ interface SeedProps {
onClickCopy?: () => any;
}
+const StyledRecoveryPhrase = styled.i`
+ margin-bottom: var(--margins-md);
+`;
+
+const StyledQRImage = styled.div`
+ width: fit-content;
+ margin: 0 auto;
+`;
+
const Seed = (props: SeedProps) => {
const { recoveryPhrase, onClickCopy } = props;
const i18n = window.i18n;
@@ -114,18 +124,32 @@ const Seed = (props: SeedProps) => {
return (
<>
-
+
{i18n('recoveryPhraseSavePromptMain')}
-
+
{recoveryPhrase}
-
+
-
+
-
-
+
+
{
);
};
+const StyledSeedModalContainer = styled.div`
+ margin: var(--margins-md) var(--margins-sm);
+`;
+
interface ModalInnerProps {
onClickOk?: () => any;
}
@@ -192,13 +220,15 @@ const SessionSeedModalInner = (props: ModalInnerProps) => {
onClose={onClose}
showExitIcon={true}
>
-
-
- {hasPassword && !passwordValid ? (
-
- ) : (
-
- )}
+
+
+
+ {hasPassword && !passwordValid ? (
+
+ ) : (
+
+ )}
+
)}
>
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index f3dcefa35..f04171d44 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -134,7 +134,7 @@ export const classicDark: ThemeColorVariables = {
'--suggestions-text-color': 'var(--text-primary-color)',
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
- '--input-background-color': 'var(--background-secondary-color)',
+ '--input-background-color': 'var(--transparent-color)',
'--input-background-hover-color': 'var(--background-primary-color)',
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index ebe61bdfe..69772a3a4 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -134,7 +134,7 @@ export const classicLight: ThemeColorVariables = {
'--suggestions-text-color': 'var(--text-primary-color)',
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
- '--input-background-color': 'var(--background-secondary-color)',
+ '--input-background-color': 'var(--transparent-color)',
'--input-background-hover-color': 'var(--background-secondary-color)',
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index 6e23625ca..2de8563e6 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -135,7 +135,7 @@ export const oceanDark: ThemeColorVariables = {
'--suggestions-text-color': 'var(--text-primary-color)',
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
- '--input-background-color': THEMES.OCEAN_DARK.COLOR3,
+ '--input-background-color': 'var(--transparent-color)',
'--input-background-hover-color': 'var(--background-secondary-color)',
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index 854f78fcb..fd2e30f6e 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -135,7 +135,7 @@ export const oceanLight: ThemeColorVariables = {
'--suggestions-text-color': 'var(--text-primary-color)',
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
- '--input-background-color': THEMES.OCEAN_LIGHT.COLOR5,
+ '--input-background-color': 'var(--transparent-color)',
'--input-background-hover-color': 'var(--background-secondary-color)',
'--input-text-placeholder-color': 'var(--text-secondary-color)',
'--input-text-color': 'var(--text-primary-color)',