feat: theme editprofile, onion status and seed modals

styled qr code and cleanup
pull/2522/head
William Grant 3 years ago
parent a47e96ca34
commit dda9067e01

@ -10,10 +10,7 @@
}
.edit-profile-dialog,
.create-group-dialog,
.user-details-dialog,
.update-group-dialog,
.onion-status-dialog {
.update-group-dialog {
.content {
max-width: 100% !important;
}
@ -32,13 +29,6 @@
text-align: center;
}
.message {
font-style: italic;
color: var(--color-gray-color);
font-size: 12px;
margin-bottom: 16px;
}
.module-avatar {
display: block;
margin-bottom: 1em;

@ -37,7 +37,6 @@
}
}
.create-group-dialog,
.add-moderators-dialog,
.remove-moderators-dialog,
.invite-friends-dialog {
@ -70,7 +69,6 @@
}
}
.create-group-dialog,
.add-moderators-dialog,
.remove-moderators-dialog,
.edit-profile-dialog {
@ -168,11 +166,6 @@
.avatar-center-inner {
position: relative;
.module-avatar {
// TODO Theming update
box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow);
}
.qr-view-button {
cursor: pointer;
display: flex;
@ -215,10 +208,6 @@
border-radius: 5px;
text-align: center;
font-size: $session-font-md;
// TODO Theming - Is this redundant?
background-color: var(--input-background-color);
color: var(--input-text-color);
border: 1px solid var(--input-border-color);
}
&-uneditable {
@ -238,67 +227,6 @@
}
}
.onion-status-dialog {
.session-modal__header__title {
font-size: var(--font-size-lg);
}
.session-modal {
width: $session-modal-size-md;
&__header {
height: 68.45px;
}
}
.session-modal__body {
display: flex;
align-items: center;
flex-direction: column;
line-height: 1.5em;
.onionDescriptionContainer {
text-align: center;
margin-top: 0;
}
.onionPath {
display: flex;
align-items: center;
flex-direction: column;
margin: 2em auto;
.dotContainer:not(:last-child) {
padding-bottom: 2em;
}
.dotContainer {
display: flex;
align-items: center;
width: 100%;
p {
margin-bottom: 0 !important;
margin-top: 0;
margin-left: 2em;
text-align: left;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
}
}
}
.lineContainer {
height: 50px;
}
}
}
.reaction-list-modal {
.session-confirm-wrapper {
.session-modal__body {

@ -23,7 +23,7 @@
input,
textarea {
caret-color: var(--color-text) !important;
caret-color: var(--input-text-color) !important;
}
* {
@ -433,12 +433,13 @@ label {
width: 80px;
height: 80px;
border-radius: 100%;
background-color: rgba(var(--color-black-color-rgb), 0.72);
background-color: var(--lightbox-background-color);
opacity: 0;
transition: var(--default-duration);
&:after {
content: 'Edit';
color: var(--white-color);
}
&:hover {
@ -561,7 +562,6 @@ label {
}
}
// TODO Theming
#qr svg,
.qr-image svg {
width: $session-modal-size-sm;
@ -577,6 +577,8 @@ label {
.session-id-editable {
padding: var(--margins-lg);
background: var(--input-background-color);
color: var(--input-text-color);
textarea {
width: 30vh;
@ -596,6 +598,7 @@ label {
padding-left: 5px;
padding-right: 5px;
font-family: var(--font-default);
color: var(--input-text-placeholder-color);
}
&.group-id-editable-textarea {

@ -34,7 +34,12 @@ interface State {
const QRView = ({ sessionID }: { sessionID: string }) => {
return (
<div className="qr-image">
<QRCode value={sessionID} bgColor="#FFFFFF" fgColor="#1B1B1B" level="L" />
<QRCode
value={sessionID}
bgColor="var(--white-color)"
fgColor="var(--black-color)"
level="L"
/>
</div>
);
};
@ -153,7 +158,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
}}
role="button"
>
<SessionIconButton iconType="qr" iconSize="small" iconColor={'rgb(0, 0, 0)'} />
<SessionIconButton iconType="qr" iconSize="small" iconColor="var(--black-color)" />
</div>
</div>
</div>

@ -48,7 +48,7 @@ const StyledOnionDescription = styled.p`
`;
const StyledVerticalLine = styled.div`
background: rgba(#7a7a7a, 0.6);
background: var(--border-color);
position: absolute;
height: calc(100% - 2 * 15px);
margin: 15px calc(100% / 2 - 1px);

@ -96,8 +96,8 @@ interface SeedProps {
const Seed = (props: SeedProps) => {
const { recoveryPhrase, onClickCopy } = props;
const i18n = window.i18n;
const bgColor = '#FFFFFF';
const fgColor = '#1B1B1B';
const bgColor = 'var(--white-color)';
const fgColor = 'var(--black-color)';
const dispatch = useDispatch();
const hexEncodedSeed = mn_decode(recoveryPhrase, 'english');

Loading…
Cancel
Save