diff --git a/app/assets/icons/ic-account-circle.svg b/app/assets/icons/ic-account-circle.svg new file mode 100644 index 000000000..53abd5a94 --- /dev/null +++ b/app/assets/icons/ic-account-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/javascripts/components/AccountMenu/User.tsx b/app/assets/javascripts/components/AccountMenu/User.tsx index 07e5f58ac..1dc2b2af4 100644 --- a/app/assets/javascripts/components/AccountMenu/User.tsx +++ b/app/assets/javascripts/components/AccountMenu/User.tsx @@ -1,6 +1,5 @@ import { observer } from 'mobx-react-lite'; import { AppState } from '@/ui_models/app_state'; -import { PasswordWizardType } from '@/types'; import { WebApplication } from '@/ui_models/application'; import { User } from '@standardnotes/snjs/dist/@types/services/api/responses'; @@ -10,22 +9,12 @@ type Props = { } const User = observer(({ - appState, - application, - }: Props) => { - const { server, closeAccountMenu } = appState.accountMenu; + appState, + application, +}: Props) => { + const { server } = appState.accountMenu; const user = application.getUser(); - const openPasswordWizard = () => { - closeAccountMenu(); - application.presentPasswordWizard(PasswordWizardType.ChangePassword); - }; - - const openSessionsModal = () => { - closeAccountMenu(); - appState.openSessionsModal(); - }; - return (
{appState.sync.errorMessage && ( @@ -56,12 +45,6 @@ const User = observer(({
- - Change Password - - - Manage Sessions -
); }); diff --git a/app/assets/javascripts/components/AccountMenu/index.tsx b/app/assets/javascripts/components/AccountMenu/index.tsx index cf8c45b2f..0213e5c5b 100644 --- a/app/assets/javascripts/components/AccountMenu/index.tsx +++ b/app/assets/javascripts/components/AccountMenu/index.tsx @@ -51,25 +51,12 @@ const AccountMenu = observer(({ application, appState }: Props) => { application={application} appState={appState} /> - {!showLogin && !showRegister && ( + {!showLogin && !showRegister && user && (
- {user && ( - - )} - - - - -
)} diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx index bbd43d7f0..e72804ae2 100644 --- a/app/assets/javascripts/components/Icon.tsx +++ b/app/assets/javascripts/components/Icon.tsx @@ -28,6 +28,7 @@ import DownloadIcon from '../../icons/ic-download.svg'; import InfoIcon from '../../icons/ic-info.svg'; import CheckIcon from '../../icons/ic-check.svg'; import CheckBoldIcon from '../../icons/ic-check-bold.svg'; +import AccountCircleIcon from '../../icons/ic-account-circle.svg'; import { toDirective } from './utils'; import { FunctionalComponent } from 'preact'; @@ -61,7 +62,8 @@ const ICONS = { download: DownloadIcon, info: InfoIcon, check: CheckIcon, - "check-bold": CheckBoldIcon, + 'check-bold': CheckBoldIcon, + 'account-circle': AccountCircleIcon, }; export type IconType = keyof typeof ICONS; diff --git a/app/assets/javascripts/views/footer/footer-view.pug b/app/assets/javascripts/views/footer/footer-view.pug index 6970a442d..94bbb985f 100644 --- a/app/assets/javascripts/views/footer/footer-view.pug +++ b/app/assets/javascripts/views/footer/footer-view.pug @@ -1,28 +1,37 @@ .sn-component #footer-bar.sk-app-bar.no-edges.no-bottom-edge .left - .sk-app-bar-item( + .sk-app-bar-item.ml-0( click-outside='ctrl.clickOutsideAccountMenu()', is-open='ctrl.showAccountMenu', ng-click='ctrl.accountMenuPressed()' - ) - .sk-app-bar-item-column - .sk-circle.small( - ng-class="ctrl.hasError ? 'danger' : (ctrl.user ? 'info' : 'neutral')" + ) + .w-8.h-8.flex.items-center.justify-center.cursor-pointer.rounded-full( + ng-class="ctrl.showAccountMenu ? 'bg-border' : '' " + ) + .w-5.h-5( + ng-class="ctrl.hasError ? 'danger' : (ctrl.user ? 'info' : 'neutral')" ) - .sk-app-bar-item-column - .sk-label.title(ng-class='{red: ctrl.hasError}') Account + icon( + type="account-circle" + class-name="hover:color-info w-5 h-5 max-h-5" + ) account-menu( ng-click='$event.stopPropagation()', app-state='ctrl.appState' application='ctrl.application' ng-if='ctrl.showAccountMenu', ) - .sk-app-bar-item( + .sk-app-bar-item.ml-0-important( ng-click='ctrl.clickPreferences()' ng-if='ctrl.appState.enableUnfinishedFeatures' ) - .sk-label.title Preferences + .w-8.h-8.flex.items-center.justify-center.cursor-pointer + .h-5 + icon( + type="tune" + class-name="rounded hover:color-info" + ) .sk-app-bar-item a.no-decoration.sk-label.title( href='https://standardnotes.com/help', diff --git a/app/assets/stylesheets/_footer.scss b/app/assets/stylesheets/_footer.scss index eb2d65cb5..5b813b3e9 100644 --- a/app/assets/stylesheets/_footer.scss +++ b/app/assets/stylesheets/_footer.scss @@ -34,17 +34,6 @@ border-bottom: 2px solid var(--sn-stylekit-info-color); } } - - svg { - width: 12px; - height: 12px; - fill: var(--sn-stylekit-secondary-foreground-color); - - &:hover { - fill: var(--sn-stylekit-info-color) !important; - color: var(--sn-stylekit-info-color) !important; - } - } } #account-switcher-icon { diff --git a/app/assets/stylesheets/_main.scss b/app/assets/stylesheets/_main.scss index f57cc05db..b54211c3a 100644 --- a/app/assets/stylesheets/_main.scss +++ b/app/assets/stylesheets/_main.scss @@ -115,7 +115,7 @@ p { background-color: var(--sn-stylekit-background-color); } -$footer-height: 32px; +$footer-height: 2rem; #resizer-overlay { position: absolute; diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index c066f10b6..1c853c81e 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -154,6 +154,13 @@ @extend .font-bold; } +.ml-0-important { + margin-left: 0rem !important; +} + +.ml-3 { + margin-left: 0.75rem; +} .ml-4 { margin-left: 1rem; } @@ -222,6 +229,10 @@ min-height: 1.5rem; } +.max-h-5 { + max-height: 1.25rem; +} + .border-danger { border-color: var(--sn-stylekit-danger-color); }