feat: dark mode (#32)

This commit is contained in:
Ludvig Lundgren 2021-09-26 16:52:37 +02:00 committed by GitHub
parent 974ca95d80
commit 66048c5533
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 1736 additions and 1992 deletions

View file

@ -1,11 +1,11 @@
import {useMutation} from "react-query";
import { useMutation } from "react-query";
import APIClient from "../../api/APIClient";
import {Form} from "react-final-form";
import {PasswordField, TextField} from "../../components/inputs";
import {useRecoilState} from "recoil";
import {isLoggedIn} from "../../state/state";
import {useHistory} from "react-router-dom";
import {useEffect} from "react";
import { Form } from "react-final-form";
import { PasswordField, TextField } from "../../components/inputs";
import { useRecoilState } from "recoil";
import { isLoggedIn } from "../../state/state";
import { useHistory } from "react-router-dom";
import { useEffect } from "react";
import logo from "../../logo.png"
interface loginData {
@ -18,7 +18,7 @@ function Login() {
let history = useHistory();
useEffect(() => {
if(loggedIn) {
if (loggedIn) {
// setLoading(false);
history.push('/');
} else {
@ -38,7 +38,7 @@ function Login() {
}
return (
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
<img
className="mx-auto h-12 w-auto"
@ -48,7 +48,7 @@ function Login() {
</div>
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
<div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
<Form
initialValues={{
@ -57,11 +57,11 @@ function Login() {
}}
onSubmit={onSubmit}
>
{({handleSubmit, values}) => {
{({ handleSubmit, values }) => {
return (
<form className="space-y-6" onSubmit={handleSubmit}>
<TextField name="username" label="Username" autoComplete="username" />
<PasswordField name="password" label="password" autoComplete="current-password"/>
<PasswordField name="password" label="password" autoComplete="current-password" />
{/*<div className="flex items-center justify-between">*/}
{/* <div className="flex items-center">*/}
@ -86,7 +86,7 @@ function Login() {
<div>
<button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
Sign in
</button>

View file

@ -9,18 +9,18 @@ function Logout() {
const [loggedIn, setLoggedIn] = useRecoilState(isLoggedIn);
let history = useHistory();
const [_, removeCookie] = useCookies(['user_session']);
const [,, removeCookie] = useCookies(['user_session']);
useEffect(() => {
APIClient.auth.logout().then(r => {
removeCookie("user_session", "")
removeCookie("user_session")
setLoggedIn(false);
history.push('/login');
})
}, [loggedIn, history, removeCookie, setLoggedIn])
return (
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="min-h-screen bg-gray-50 dark:bg-gray-800 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<p>Logged out</p>
</div>
)