mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

added loader to dark mode

Browse source
This commit is contained in:
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

10
components/Loader.tsx
View file

@ -1,3 +1,7 @@
export default function Loader(){
return <div className="loader"><span className="loader-inner"></span></div>
}
export default function Loader() {
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 Slots from "./Slots";
import { ExclamationIcon } from "@heroicons/react/solid";
import React from "react";
import Loader from "@components/Loader";
const AvailableTimes = ({
date,
@ -49,7 +51,7 @@ const AvailableTimes = ({
</div>
)}
{!isFullyBooked && slots.length === 0 && !hasErrors && <div className="loader" />}
{!isFullyBooked && slots.length === 0 && !hasErrors && <Loader />}
{hasErrors && (
<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;
margin: 60px auto;
position: relative;
border: 4px solid #000;
border-width: 4px;
border-style: solid;
animation: loader 2s infinite ease;
}
@ -152,7 +153,6 @@
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #000;
animation: loader-inner 2s infinite ease-in;
}