From dda9067e013c72dbae0b384c8755febe11217b7c Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 5 Oct 2022 19:02:28 +1100 Subject: [PATCH] feat: theme editprofile, onion status and seed modals styled qr code and cleanup --- stylesheets/_index.scss | 12 +--- stylesheets/_modal.scss | 72 ------------------- stylesheets/_session.scss | 9 ++- ts/components/dialog/EditProfileDialog.tsx | 9 ++- .../dialog/OnionStatusPathDialog.tsx | 2 +- ts/components/dialog/SessionSeedModal.tsx | 4 +- 6 files changed, 17 insertions(+), 91 deletions(-) diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 8a06158f7..f48a4bac0 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -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; diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 75c5bfe53..9e3df3e82 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -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 { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4728c1fa0..aac71a326 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -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 { diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx index 0633af4ff..4c19d2e49 100644 --- a/ts/components/dialog/EditProfileDialog.tsx +++ b/ts/components/dialog/EditProfileDialog.tsx @@ -34,7 +34,12 @@ interface State { const QRView = ({ sessionID }: { sessionID: string }) => { return (
- +
); }; @@ -153,7 +158,7 @@ export class EditProfileDialog extends React.Component<{}, State> { }} role="button" > - + diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx index ef808c684..ecdf1e69e 100644 --- a/ts/components/dialog/OnionStatusPathDialog.tsx +++ b/ts/components/dialog/OnionStatusPathDialog.tsx @@ -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); diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx index 51887a5c2..b571d49ed 100644 --- a/ts/components/dialog/SessionSeedModal.tsx +++ b/ts/components/dialog/SessionSeedModal.tsx @@ -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');