0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix UX issues.

Browse source
This commit is contained in:
Pushkar Anand 2020-09-13 22:31:36 +05:30
parent 92f37ede48
commit d13448a18c
3 changed files with 43 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/power_settings.tsx Normal file
View file

@ -0,0 +1,21 @@
import React from 'react';
export default function PowerSettings(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}
>
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
</svg>
);
}
PowerSettings.defaultProps = {
height: 24,
width: 24,
viewBox: '0 0 24 24',
}

24
src/pages/_app.tsx
View file

@ -4,9 +4,12 @@ import Navbar from 'components/Navbar';
import constants from 'utils/strings/constants';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import Spinner from 'react-bootstrap/Spinner';
import { clearKeys } from 'utils/storage/sessionStorage';
import { clearData, getData, LS_KEYS } from 'utils/storage/localStorage';
import { useRouter } from 'next/router';
import Container from 'components/Container';
import PowerSettings from 'components/power_settings';
const GlobalStyles = createGlobalStyle`
html, body {
@ -34,6 +37,10 @@ const GlobalStyles = createGlobalStyle`
:root {
--primary: #e26f99,
};
svg {
fill: currentColor;
}
`;
const Image = styled.img`
@ -48,6 +55,7 @@ const FlexContainer = styled.div`
export default function App({ Component, pageProps }) {
const router = useRouter();
const [user, setUser] = useState();
const [loading, setLoading] = useState(false);
useEffect(() => {
const user = getData(LS_KEYS.USER);
@ -55,9 +63,14 @@ export default function App({ Component, pageProps }) {
console.log(`%c${constants.CONSOLE_WARNING_STOP}`, 'color: red; font-size: 52px;');
console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
router.events.on('routeChangeStart', () => {
setLoading(true);
});
router.events.on('routeChangeComplete', () => {
const user = getData(LS_KEYS.USER);
setUser(user);
setLoading(false);
});
}, []);
@ -76,10 +89,17 @@ export default function App({ Component, pageProps }) {
{constants.COMPANY_NAME}
</FlexContainer>
{user && <Button variant='link' onClick={logout}>
<span className="material-icons">power_settings_new</span>
<PowerSettings />
</Button>}
</Navbar>
<Component />
{loading
? <Container>
<Spinner animation="border" role="status" variant="primary">
<span className="sr-only">Loading...</span>
</Spinner>
</Container>
: <Component />
}
</>
);
}

1
src/pages/_document.tsx
View file

@ -35,7 +35,6 @@ export default class MyDocument extends Document {
<Html>
<Head>
<title>ente.io | Privacy friendly alternative to Google Photos</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="icon" href="/icon.png" type="image/png"/>
</Head>
<body>