diff --git a/src/app/molecules/popup-window/PopupWindow.scss b/src/app/molecules/popup-window/PopupWindow.scss index e3a588b..8dcf220 100644 --- a/src/app/molecules/popup-window/PopupWindow.scss +++ b/src/app/molecules/popup-window/PopupWindow.scss @@ -70,9 +70,6 @@ & .context-menu__item > button { border-radius: var(--bo-radius); - & .text { - color: var(--tc-surface-normal); - } & .ic-raw { @include dir.side(margin, 0, var(--sp-tight)); } diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx index 40328d9..8d587e6 100644 --- a/src/app/organisms/navigation/SideBar.jsx +++ b/src/app/organisms/navigation/SideBar.jsx @@ -4,7 +4,6 @@ import './SideBar.scss'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import colorMXID from '../../../util/colorMXID'; -import logout from '../../../client/action/logout'; import { selectTab, openInviteList, openSearch, openSettings, } from '../../../client/action/navigation'; @@ -13,14 +12,11 @@ import { abbreviateNumber } from '../../../util/common'; import ScrollView from '../../atoms/scroll/ScrollView'; import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar'; -import ContextMenu, { MenuItem, MenuHeader, MenuBorder } from '../../atoms/context-menu/ContextMenu'; import HomeIC from '../../../../public/res/ic/outlined/home.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg'; import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import InviteIC from '../../../../public/res/ic/outlined/invite.svg'; -import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; -import PowerIC from '../../../../public/res/ic/outlined/power.svg'; function ProfileAvatarMenu() { const mx = initMatrix.matrixClient; @@ -48,31 +44,12 @@ function ProfileAvatarMenu() { }, []); return ( - ( - <> - {mx.getUserId()} - {/* ''}>Profile */} - {/* ''}>Notification settings */} - { hideMenu(); openSettings(); }} - > - Settings - - - Logout - - )} - render={(toggleMenu) => ( - - )} + ); } diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 7a075d8..e31af8f 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/src/app/organisms/settings/Settings.jsx @@ -6,6 +6,7 @@ import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import settings from '../../../client/state/settings'; import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings'; +import logout from '../../../client/action/logout'; import Text from '../../atoms/text/Text'; import IconButton from '../../atoms/button/IconButton'; @@ -24,6 +25,7 @@ import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; import SunIC from '../../../../public/res/ic/outlined/sun.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg'; import InfoIC from '../../../../public/res/ic/outlined/info.svg'; +import PowerIC from '../../../../public/res/ic/outlined/power.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import CinnySVG from '../../../../public/res/svg/cinny.svg'; @@ -177,6 +179,10 @@ function Settings({ isOpen, onRequestClose }) { }]; const [selectedSection, setSelectedSection] = useState(settingSections[0]); + const handleLogout = () => { + if (confirm('Confirm logout')) logout(); + }; + return ( ( + drawer={( + <> + { + settingSections.map((section) => ( + setSelectedSection(section)} + iconSrc={section.iconSrc} + > + {section.name} + + )) + } setSelectedSection(section)} - iconSrc={section.iconSrc} + variant="danger" + onClick={handleLogout} + iconSrc={PowerIC} > - {section.name} + Logout - )) - } + + )} contentOptions={} > {selectedSection.render()} diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss index d1435d4..c3ec157 100644 --- a/src/app/organisms/settings/Settings.scss +++ b/src/app/organisms/settings/Settings.scss @@ -1,6 +1,16 @@ +@use '../../partials/flex'; @use '../../partials/dir'; .settings-window { + & .pw__drawer__content { + @extend .cp-fx__column; + min-height: 100%; + padding-bottom: var(--sp-extra-tight); + + & > .pw-content-selector:last-child { + margin-top: auto; + } + } & .pw__content-container { min-height: 100%; }