public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added loader to dark mode

pull/415/head
Peer Richelsen 2021-08-04 21:39:59 +02:00
parent 6977b74f35
commit 5ff7377797
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Loader.tsx
View File

@ -1,3 +1,7 @@
export default function Loader(){ export default function Loader() {
return <div className="loader"><span className="loader-inner"></span></div> return (
<div className="loader border-black dark:border-white">
<span className="loader-inner bg-black dark:bg-white"></span>
</div>
);
} }

4
components/booking/AvailableTimes.tsx
View File

@ -2,6 +2,8 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Slots from "./Slots"; import Slots from "./Slots";
import { ExclamationIcon } from "@heroicons/react/solid"; import { ExclamationIcon } from "@heroicons/react/solid";
import React from "react";
import Loader from "@components/Loader";
const AvailableTimes = ({ const AvailableTimes = ({
date, date,
@ -49,7 +51,7 @@ const AvailableTimes = ({
</div> </div>
)} )}
{!isFullyBooked && slots.length === 0 && !hasErrors && <div className="loader" />} {!isFullyBooked && slots.length === 0 && !hasErrors && <Loader />}
{hasErrors && ( {hasErrors && (
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4"> <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">

4
styles/globals.css
View File

@ -144,7 +144,8 @@
height: 30px; height: 30px;
margin: 60px auto; margin: 60px auto;
position: relative; position: relative;
border: 4px solid #000; border-width: 4px;
border-style: solid;
animation: loader 2s infinite ease; animation: loader 2s infinite ease;
} }
@ -152,7 +153,6 @@
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
background-color: #000;
animation: loader-inner 2s infinite ease-in; animation: loader-inner 2s infinite ease-in;
} }