diff --git a/public/icons/logout.svg b/public/icons/logout.svg new file mode 100644 index 00000000..a28a25c8 --- /dev/null +++ b/public/icons/logout.svg @@ -0,0 +1,4 @@ + + + diff --git a/public/icons/profile.svg b/public/icons/profile.svg new file mode 100644 index 00000000..23c7e580 --- /dev/null +++ b/public/icons/profile.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Article/SharePopup.tsx b/src/components/Article/SharePopup.tsx index a5fe254f..2983bea7 100644 --- a/src/components/Article/SharePopup.tsx +++ b/src/components/Article/SharePopup.tsx @@ -28,7 +28,7 @@ export const SharePopup = (props: SharePopupProps) => { }) return ( - setIsVisible(value)}> + setIsVisible(value)}> { {editorMode()} } - variant="bordered" popupCssClass={styles.editorPopup} >
    diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx index ce645d6d..90909bea 100644 --- a/src/components/Nav/ProfilePopup.tsx +++ b/src/components/Nav/ProfilePopup.tsx @@ -5,8 +5,10 @@ import { getPagePath } from '@nanostores/router' import { useLocalize } from '../../context/localize' import { useSession } from '../../context/session' import { router } from '../../stores/router' +import { Icon } from '../_shared/Icon' import { Popup } from '../_shared/Popup' +import { clsx } from 'clsx' import styles from '../_shared/Popup/Popup.module.scss' type ProfilePopupProps = Omit @@ -16,30 +18,53 @@ export const ProfilePopup = (props: ProfilePopupProps) => { const { t } = useLocalize() return ( - +
    • - {t('Profile')} + + + {t('Profile')} +
    • - {t('Drafts')} + + + {t('Drafts')} +
    • - + + {t('Subscriptions')}
    • - {t('Comments')} + + + {t('Comments')} +
    • - {t('Bookmarks')} + + + {t('Bookmarks')} +
    • - {t('Settings')} + + + {t('Settings')} +
    • - signOut()}> + signOut()}> + {t('Logout')}
      • diff --git a/src/components/_shared/DropDown/DropDown.tsx b/src/components/_shared/DropDown/DropDown.tsx index 48115e5b..e32e7413 100644 --- a/src/components/_shared/DropDown/DropDown.tsx +++ b/src/components/_shared/DropDown/DropDown.tsx @@ -5,6 +5,7 @@ import { For, Show, createSignal } from 'solid-js' import { Popup } from '../Popup' +import popupStyles from '../Popup/Popup.module.scss' import styles from './DropDown.module.scss' export type Option = { @@ -56,16 +57,22 @@ export const DropDown = (props: Props) onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)} {...props.popupProps} > - - {(option) => ( -
      props.onChange(option)} - > - {option.title} -
      - )} -       +
        + + {(option) => ( +
      • + +
        • + )} +         +
      ) diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss index 5db976f9..5d27cd6e 100644 --- a/src/components/_shared/Popup/Popup.module.scss +++ b/src/components/_shared/Popup/Popup.module.scss @@ -8,10 +8,14 @@ .popup { background: var(--background-color); + border: 1px solid rgb(0 0 0 / 15%); + border-radius: 1.6rem; + box-shadow: 0 8px 16px 0 rgb(0 0 0 / 5%); color: var(--default-color); cursor: default; min-width: 144px; opacity: 1; + overflow: hidden; position: absolute; text-align: left; top: calc(100% + 11px); @@ -21,6 +25,7 @@ margin-bottom: 0; li { + margin: 0; position: relative; &:last-child { @@ -29,33 +34,19 @@ } } - &.bordered { - @include font-size(1.6rem); - - border: 2px solid #000; - padding: 2.4rem; - - ul li { - margin-bottom: 1.6rem; - - &:last-child { - margin-bottom: 0; - } - } - } - &.tiny { @include font-size(1.4rem); - box-shadow: 0 4px 60px rgb(0 0 0 / 10%); - padding: 1rem; + .action { + padding: 0.5rem 1rem; + } - ul li { - margin-bottom: 1rem; + li:first-child .action { + padding-top: 1rem; + } - &:last-child { - margin-bottom: 0; - } + li:last-child .action { + padding-bottom: 1rem; } } @@ -75,7 +66,6 @@ .topBorderItem { border-top: 2px solid; - padding-top: 1em; } a:link, @@ -83,26 +73,58 @@ border: none; white-space: nowrap; - &:hover { - .icon img { - filter: invert(0); - } + &:before { + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; } } .icon { display: inline-block; - width: 3.6rem; + margin-right: 1rem; + width: 2.4rem; img { display: inline-block; - filter: invert(1); - max-height: 2rem; - max-width: 2rem; + max-height: 2.4rem; + max-width: 2.4rem; transition: filter 0.3s; vertical-align: middle; } } + + .action { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 8px 16px; + font-size: inherit; + font-weight: 500; + text-align: left; + white-space: nowrap; + + &:hover { + background: var(--black-500); + color: var(--black-50) !important; + + .icon img { + filter: invert(1); + } + } + } + + li:first-child .action { + padding-top: 16px; + } + + li:last-child .action { + padding-bottom: 16px; + } } // TODO: animation diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx index e9e2a49c..1d9fb7b2 100644 --- a/src/components/_shared/Popup/Popup.tsx +++ b/src/components/_shared/Popup/Popup.tsx @@ -14,7 +14,7 @@ export type PopupProps = { children: JSX.Element onVisibilityChange?: (isVisible: boolean) => void horizontalAnchor?: HorizontalAnchor - variant?: 'bordered' | 'tiny' + variant?: 'tiny' closePopup?: boolean } @@ -54,7 +54,6 @@ export const Popup = (props: PopupProps) => { class={clsx(styles.popup, props.popupCssClass, { [styles.horizontalAnchorCenter]: horizontalAnchor === 'center', [styles.horizontalAnchorRight]: horizontalAnchor === 'right', - [styles.bordered]: props.variant === 'bordered', [styles.tiny]: props.variant === 'tiny', })} > diff --git a/src/components/_shared/ShareLinks/ShareLinks.module.scss b/src/components/_shared/ShareLinks/ShareLinks.module.scss index d65ee4aa..0066714d 100644 --- a/src/components/_shared/ShareLinks/ShareLinks.module.scss +++ b/src/components/_shared/ShareLinks/ShareLinks.module.scss @@ -7,9 +7,6 @@ white-space: nowrap; &:hover { - background: #000; - color: #fff; - .icon img { filter: invert(0); } @@ -17,7 +14,7 @@ .icon { display: inline-block; - width: 3.6rem; + width: 2rem; img { display: inline-block; diff --git a/src/components/_shared/ShareLinks/ShareLinks.tsx b/src/components/_shared/ShareLinks/ShareLinks.tsx index 0e1bd98f..fd7fd8bc 100644 --- a/src/components/_shared/ShareLinks/ShareLinks.tsx +++ b/src/components/_shared/ShareLinks/ShareLinks.tsx @@ -7,6 +7,7 @@ import { useSnackbar } from '../../../context/snackbar' import { Icon } from '../Icon' import { Popover } from '../Popover' +import popupStyles from '../Popup/Popup.module.scss' import styles from './ShareLinks.module.scss' type Props = { @@ -53,26 +54,42 @@ export const ShareLinks = (props: Props) => {
      • -
      • -
      • -
      • -
        • @@ -80,8 +97,12 @@ export const ShareLinks = (props: Props) => { - + } @@ -93,7 +114,7 @@ export const ShareLinks = (props: Props) => { {(triggerRef: (el) => void) => (
        - +
        )}