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

Darken availability and troubleshooter

dark
Bailey Pumfleet 2021-11-28 11:02:09 +00:00
parent a80394dd57
commit 68e6ec5a6b
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/ui/form/Schedule.tsx
View File

@ -77,7 +77,7 @@ const TimeRangeField = ({ name }: TimeRangeFieldProps) => {
/>
)}
/>
<span>-</span>
<span className="dark:text-gray-300">-</span>
<Controller
name={`${name}.end`}
render={({ field: { onChange, value } }) => (
@ -130,7 +130,7 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
onChange={(e) => (e.target.checked ? replace([defaultDayRange]) : replace([]))}
className="inline-block border-gray-300 rounded-sm focus:ring-neutral-500 text-neutral-900"
/>
<span className="inline-block text-sm capitalize">{weekday}</span>
<span className="inline-block text-sm capitalize dark:text-gray-200">{weekday}</span>
</label>
</div>
<div className="flex-grow">
@ -148,7 +148,9 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
/>
</div>
))}
<span className="block text-sm text-gray-500">{!fields.length && t("no_availability")}</span>
<span className="block text-sm text-gray-500 dark:text-gray-300">
{!fields.length && t("no_availability")}
</span>
</div>
<div>
<Button
@ -167,7 +169,7 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
const Schedule = ({ name }: { name: string }) => {
const { i18n } = useLocale();
return (
<fieldset className="divide-y divide-gray-200">
<fieldset className="divide-y divide-gray-200 dark:divide-gray-500">
{weekdayNames(i18n.language).map((weekday, num) => (
<ScheduleBlock key={num} name={name} weekday={weekday} day={num} />
))}

8
pages/availability/index.tsx
View File

@ -51,8 +51,10 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
await createSchedule(values);
}}
className="col-span-3 space-y-2 lg:col-span-2">
<div className="px-4 py-5 bg-white border border-gray-200 divide-y rounded-sm sm:p-6">
<h3 className="mb-5 text-base font-medium leading-6 text-gray-900">{t("change_start_end")}</h3>
<div className="px-4 py-5 bg-white border border-gray-200 divide-y rounded-sm sm:p-6 dark:bg-gray-700 dark:border-gray-500 dark:divide-gray-500">
<h3 className="mb-5 text-base font-medium leading-6 text-gray-900 dark:text-white">
{t("change_start_end")}
</h3>
<Schedule name="schedule" />
</div>
<div className="text-right">
@ -61,7 +63,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
</Form>
<div className="col-span-3 ml-2 lg:col-span-1 min-w-40">
<div className="px-4 py-5 border border-gray-200 rounded-sm sm:p-6 ">
<h3 className="text-base font-medium leading-6 text-gray-900">
<h3 className="text-base font-medium leading-6 text-gray-900 dark:text-white">
{t("something_doesnt_look_right")}
</h3>
<div className="max-w-xl mt-2 text-sm text-gray-500">

26
pages/availability/troubleshoot.tsx
View File

@ -51,12 +51,12 @@ const AvailabilityView = ({ user }: { user: User }) => {
}, [selectedDate]);
return (
<div className="bg-white max-w-xl overflow-hidden shadow rounded-sm">
<div className="px-4 py-5 sm:p-6">
<div className="max-w-xl overflow-hidden bg-white border border-gray-200 rounded-sm shadow dark:bg-gray-600 dark:border-gray-500">
<div className="px-4 py-5 sm:p-6 dark:text-white">
{t("overview_of_day")}{" "}
<input
type="date"
className="inline border-none h-8 p-0"
className="inline h-8 p-0 border-none dark:bg-gray-600"
defaultValue={selectedDate.format("YYYY-MM-DD")}
onChange={(e) => {
setSelectedDate(dayjs(e.target.value));
@ -64,8 +64,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
/>
<small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small>
<div className="mt-4 space-y-4">
<div className="bg-brand overflow-hidden rounded-sm">
<div className="px-4 sm:px-6 py-2 text-white">
<div className="overflow-hidden rounded-sm bg-brand">
<div className="px-4 py-2 text-white sm:px-6">
{t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
</div>
</div>
@ -73,14 +73,14 @@ const AvailabilityView = ({ user }: { user: User }) => {
<Loader />
) : availability.length > 0 ? (
availability.map((slot) => (
<div key={slot.start} className="bg-neutral-100 overflow-hidden rounded-sm">
<div className="px-4 py-5 sm:p-6 text-black">
<div key={slot.start} className="overflow-hidden rounded-sm bg-neutral-100 dark:bg-gray-700">
<div className="px-4 py-5 text-black dark:text-white sm:p-6">
{t("calendar_shows_busy_between")}{" "}
<span className="font-medium text-neutral-800" title={slot.start}>
<span className="font-medium text-neutral-800 dark:text-gray-200" title={slot.start}>
{dayjs(slot.start).format("HH:mm")}
</span>{" "}
{t("and")}{" "}
<span className="font-medium text-neutral-800" title={slot.end}>
<span className="font-medium text-neutral-800 dark:text-gray-200" title={slot.end}>
{dayjs(slot.end).format("HH:mm")}
</span>{" "}
{t("on")} {dayjs(slot.start).format("D")}{" "}
@ -89,13 +89,13 @@ const AvailabilityView = ({ user }: { user: User }) => {
</div>
))
) : (
<div className="bg-neutral-100 overflow-hidden rounded-sm">
<div className="px-4 py-5 sm:p-6 text-black">{t("calendar_no_busy_slots")}</div>
<div className="overflow-hidden rounded-sm bg-neutral-100 dark:bg-gray-700">
<div className="px-4 py-5 text-black dark:text-white sm:p-6">{t("calendar_no_busy_slots")}</div>
</div>
)}
<div className="bg-brand overflow-hidden rounded-sm">
<div className="px-4 sm:px-6 py-2 text-white">
<div className="overflow-hidden rounded-sm bg-brand">
<div className="px-4 py-2 text-white sm:px-6">
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
</div>
</div>