maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made dark mode much more consistent and fixed a ton of dark mode problems with teams (#2258)

This commit is contained in:
Peer Richelsen 2022-03-24 14:15:24 +01:00 committed by GitHub
parent 767d1fb186
commit a15b93c276
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/api

@ -1 +1 @@
Subproject commit 11e1312e3a6c831b35745b2e8aef657048fd470a
Subproject commit 378cbf8f3a67ea7877296f1da02edb2b6e3efbce

2
apps/web/components/booking/DatePicker.tsx
View File

@ -229,7 +229,7 @@ function DatePicker({
className={
"mt-8 sm:mt-0 sm:min-w-[455px] " +
(date
? "w-full sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-800 md:w-1/3 "
? "w-full sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-700 md:w-1/3 "
: "w-full sm:pl-4")
}>
<div className="mb-4 flex text-xl font-light text-gray-600">

8
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -126,12 +126,12 @@ const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Pr
(selectedDate ? "max-w-5xl" : "max-w-3xl")
}>
{isReady && (
<div className="rounded-sm border-gray-200 bg-white dark:bg-gray-900 sm:dark:border-gray-600 md:border">
<div className="rounded-sm border-gray-200 bg-white dark:bg-gray-800 sm:dark:border-gray-600 md:border">
{/* mobile: details */}
<div className="block p-4 sm:p-8 md:hidden">
<div className="flex items-center">
<AvatarGroup
border="border-2 dark:border-gray-900 border-white"
border="border-2 dark:border-gray-800 border-white"
items={
[
{ image: profile.image, alt: profile.name, title: profile.name },
@ -176,11 +176,11 @@ const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Pr
<div className="px-4 sm:flex sm:p-4 sm:py-5">
<div
className={
"hidden pr-8 sm:border-r sm:dark:border-gray-800 md:flex md:flex-col " +
"hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
(selectedDate ? "sm:w-1/3" : "sm:w-1/2")
}>
<AvatarGroup
border="border-2 dark:border-gray-900 border-white"
border="border-2 dark:border-gray-800 border-white"
items={
[
{ image: profile.image, alt: profile.name, title: profile.name },

2
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -289,7 +289,7 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
<div className="px-4 py-5 sm:flex sm:p-4">
<div className="sm:w-1/2 sm:border-r sm:dark:border-gray-800">
<AvatarGroup
border="border-2 border-white dark:border-gray-900"
border="border-2 border-white dark:border-gray-800"
size={14}
items={[{ image: profile.image || "", alt: profile.name || "" }].concat(
eventType.users

2
apps/web/components/team/screens/Team.tsx
View File

@ -28,7 +28,7 @@ const Team = ({ team }: TeamPageProps) => {
"space-y-4",
"p-4",
"min-w-full sm:min-w-64 sm:max-w-64",
"bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8",
"bg-white dark:bg-neutral-800 dark:border-neutral-700 dark:bg-opacity-8",
"border border-neutral-200",
"hover:cursor-pointer",
"hover:border-brand dark:border-neutral-700 dark:hover:border-neutral-600",

4
apps/web/pages/[user].tsx
View File

@ -45,7 +45,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
username={(user.username as string) || ""}
// avatar={user.avatar || undefined}
/>
<div className="h-screen dark:bg-black">
<div className="h-screen dark:bg-neutral-900">
<main className="mx-auto max-w-3xl px-4 py-24">
<div className="mb-8 text-center">
<AvatarSSR user={user} className="mx-auto mb-4 h-24 w-24" alt={nameOrUsername}></AvatarSSR>
@ -72,7 +72,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
<div
key={type.id}
style={{ display: "flex" }}
className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-gray-800 dark:hover:border-neutral-600">
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
<Link

2
apps/web/pages/_document.tsx
View File

@ -24,7 +24,7 @@ class MyDocument extends Document<Props> {
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head>
<body className="bg-gray-100 dark:bg-black">
<body className="bg-gray-100 dark:bg-neutral-900">
<Main />
<NextScript />
</body>

6
apps/web/pages/team/[slug].tsx
View File

@ -33,7 +33,7 @@ function TeamPage({ team }: TeamPageProps) {
{team.eventTypes.map((type) => (
<li
key={type.id}
className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600">
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
<Link href={`${team.slug}/${type.slug}`}>
<a className="flex justify-between px-6 py-4">
@ -43,7 +43,7 @@ function TeamPage({ team }: TeamPageProps) {
</div>
<div className="mt-1">
<AvatarGroup
border="border-2 border-white"
border="border-2 border-white dark:border-neutral-800"
truncateAfter={4}
className="flex-shrink-0"
size={10}
@ -88,7 +88,7 @@ function TeamPage({ team }: TeamPageProps) {
<div className="relative mt-12">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-gray-200 dark:border-gray-900" />
<div className="w-full border-t border-gray-200 dark:border-gray-700" />
</div>
<div className="relative flex justify-center">
<span className="dark:bg-brand dark:text-brandcontrast bg-gray-100 px-2 text-sm text-gray-500">

2
apps/website

@ -1 +1 @@
Subproject commit d9c37b322081604f5dee0ca471cb0f5d895af8bc
Subproject commit b1b8ffda83a94760ab6763e02276c730c46a35fd

2
packages/ui/Button.tsx
View File

@ -69,7 +69,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
color === "secondary" &&
(disabled
? "border border-gray-200 text-gray-400 bg-white"
: "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900"),
: "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-800"),
color === "minimal" &&
(disabled
? "text-gray-400 bg-transparent"