Fix rental table styling in dark mode
This commit is contained in:
parent
c957b156d8
commit
d9225e36d7
@ -6,6 +6,8 @@ import clsx from 'clsx'
|
|||||||
import { Container } from '@/components/Container'
|
import { Container } from '@/components/Container'
|
||||||
import exteriorFront from '@/images/photos/exterior-front.png'
|
import exteriorFront from '@/images/photos/exterior-front.png'
|
||||||
import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
|
import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
|
||||||
|
import React from 'react'
|
||||||
|
import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
|
||||||
|
|
||||||
function SocialLink({
|
function SocialLink({
|
||||||
className,
|
className,
|
||||||
@ -107,42 +109,42 @@ export default function Rental() {
|
|||||||
<table className="min-w-full divide-y divide-gray-300">
|
<table className="min-w-full divide-y divide-gray-300">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"></th>
|
<th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0"></th>
|
||||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Half day (4 hr)</th>
|
<TableHeading>Half day (4 hr)</TableHeading>
|
||||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">All day</th>
|
<TableHeading>All day</TableHeading>
|
||||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Deposit</th>
|
<TableHeading>Deposit</TableHeading>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-gray-200 ">
|
<tbody className="divide-y divide-gray-200 ">
|
||||||
<tr>
|
<tr>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Orcas non-profit organizations</td>
|
<TableLeftHeading>Orcas non-profit organizations</TableLeftHeading>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
|
<TableCell>$50 or 2 hours for $30*</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
|
<TableCell>$100</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
|
<TableCell>None†</TableCell>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">WSCC and OIYC Members</td>
|
<TableLeftHeading>WSCC and OIYC Members</TableLeftHeading>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
|
<TableCell>$50 or 2 hours for $30*</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
|
<TableCell>$100</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
|
<TableCell>None†</TableCell>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Off-island non-profit organizations</td>
|
<TableLeftHeading>Off-island non-profit organizations</TableLeftHeading>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
|
<TableCell>$50</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
|
<TableCell>$100</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
|
<TableCell>$300</TableCell>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Individuals and non-public use</td>
|
<TableLeftHeading>Individuals and non-public use</TableLeftHeading>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$40 per hour</td>
|
<TableCell>$40 per hour</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
|
<TableCell>$300</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
|
<TableCell>$300</TableCell>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Government sponsored activities</td>
|
<TableLeftHeading>Government sponsored activities</TableLeftHeading>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
|
<TableCell>$50</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
|
<TableCell>$50</TableCell>
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
|
<TableCell>None†</TableCell>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -168,6 +170,7 @@ export default function Rental() {
|
|||||||
The West Sound Community Hall may not be used for either personal or
|
The West Sound Community Hall may not be used for either personal or
|
||||||
organizational monetary gain or to promote business activities.
|
organizational monetary gain or to promote business activities.
|
||||||
The only exceptions to this restriction are:
|
The only exceptions to this restriction are:
|
||||||
|
</p>
|
||||||
|
|
||||||
<ol className="list-decimal ml-8 mt-5">
|
<ol className="list-decimal ml-8 mt-5">
|
||||||
<li>
|
<li>
|
||||||
@ -183,7 +186,6 @@ export default function Rental() {
|
|||||||
sponsoring nonprofit organization.)
|
sponsoring nonprofit organization.)
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Any individual or organizational nonpublic use of the hall which
|
Any individual or organizational nonpublic use of the hall which
|
||||||
|
25
src/components/Table.tsx
Normal file
25
src/components/Table.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
|
||||||
|
export function TableHeading({
|
||||||
|
children
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-zinc-100">{children}</th>
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TableLeftHeading({
|
||||||
|
children
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-zinc-100 sm:pl-0">{children}</td>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TableCell({
|
||||||
|
children
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-zinc-400">{children}</td>
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user