m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-19 15:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Header button updates.

Browse Source
This commit is contained in:
Mike Cao 2020-09-20 03:28:05 -07:00
parent 3c0b718fd7
commit 5524d504f4
6 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/Button.module.css
View File

@ -61,7 +61,7 @@
} }
.light:hover { .light:hover {
background: var(--gray75); background: inherit;
} }
.button:disabled { .button:disabled {

3
components/common/UserButton.js
View File

@ -9,6 +9,7 @@ import useDocumentClick from 'hooks/useDocumentClick';
import User from 'assets/user.svg'; import User from 'assets/user.svg';
import Chevron from 'assets/chevron-down.svg'; import Chevron from 'assets/chevron-down.svg';
import styles from './UserButton.module.css'; import styles from './UserButton.module.css';
import classNames from 'classnames';
export default function UserButton() { export default function UserButton() {
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
@ -52,7 +53,7 @@ export default function UserButton() {
<div ref={ref} className={styles.container}> <div ref={ref} className={styles.container}>
<Button <Button
icon={<User />} icon={<User />}
className={styles.button} className={classNames({ [styles.open]: showMenu })}
onClick={() => setShowMenu(state => !state)} onClick={() => setShowMenu(state => !state)}
size="large" size="large"
variant="light" variant="light"

13
components/common/UserButton.module.css
View File

@ -4,11 +4,6 @@
cursor: pointer; cursor: pointer;
} }
.button {
display: flex;
flex-wrap: nowrap;
}
.username { .username {
border-bottom: 1px solid var(--gray500); border-bottom: 1px solid var(--gray500);
} }
@ -20,3 +15,11 @@
.menu { .menu {
z-index: 100; z-index: 100;
} }
.open {
background: var(--gray200);
}
.open:hover {
background: var(--gray200);
}

2
components/layout/Header.js
View File

@ -36,8 +36,8 @@ export default function Header() {
</div> </div>
<div className="col-12 col-md-12 col-lg-3"> <div className="col-12 col-md-12 col-lg-3">
<div className={styles.buttons}> <div className={styles.buttons}>
<LanguageButton menuAlign="right" />
<ThemeButton /> <ThemeButton />
<LanguageButton menuAlign="right" />
{user && <UserButton />} {user && <UserButton />}
</div> </div>
</div> </div>

8
components/settings/LanguageButton.js
View File

@ -1,4 +1,5 @@
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import classNames from 'classnames';
import Head from 'next/head'; import Head from 'next/head';
import Menu from 'components/common/Menu'; import Menu from 'components/common/Menu';
import Button from 'components/common/Button'; import Button from 'components/common/Button';
@ -46,7 +47,12 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
)} )}
</Head> </Head>
<div ref={ref} className={styles.container}> <div ref={ref} className={styles.container}>
<Button icon={<Globe />} onClick={toggleMenu} variant="light"> <Button
icon={<Globe />}
className={classNames({ [styles.open]: showMenu })}
onClick={toggleMenu}
variant="light"
>
<div className={styles.text}>{selectedLocale}</div> <div className={styles.text}>{selectedLocale}</div>
</Button> </Button>
{showMenu && ( {showMenu && (

8
components/settings/LanguageButton.module.css
View File

@ -11,3 +11,11 @@
.text { .text {
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
.open {
background: var(--gray200);
}
.open:hover {
background: var(--gray200);
}