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 exteriorFront from '@/images/photos/exterior-front.png'
|
||||
import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
|
||||
import React from 'react'
|
||||
import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
|
||||
|
||||
function SocialLink({
|
||||
className,
|
||||
@ -107,42 +109,42 @@ export default function Rental() {
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead>
|
||||
<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="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Half day (4 hr)</th>
|
||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">All day</th>
|
||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Deposit</th>
|
||||
<th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0"></th>
|
||||
<TableHeading>Half day (4 hr)</TableHeading>
|
||||
<TableHeading>All day</TableHeading>
|
||||
<TableHeading>Deposit</TableHeading>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tbody className="divide-y divide-gray-200 ">
|
||||
<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>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
|
||||
<TableLeftHeading>Orcas non-profit organizations</TableLeftHeading>
|
||||
<TableCell>$50 or 2 hours for $30*</TableCell>
|
||||
<TableCell>$100</TableCell>
|
||||
<TableCell>None†</TableCell>
|
||||
</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>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
|
||||
<TableLeftHeading>WSCC and OIYC Members</TableLeftHeading>
|
||||
<TableCell>$50 or 2 hours for $30*</TableCell>
|
||||
<TableCell>$100</TableCell>
|
||||
<TableCell>None†</TableCell>
|
||||
</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>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
|
||||
<TableLeftHeading>Off-island non-profit organizations</TableLeftHeading>
|
||||
<TableCell>$50</TableCell>
|
||||
<TableCell>$100</TableCell>
|
||||
<TableCell>$300</TableCell>
|
||||
</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>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$40 per hour</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
|
||||
<TableLeftHeading>Individuals and non-public use</TableLeftHeading>
|
||||
<TableCell>$40 per hour</TableCell>
|
||||
<TableCell>$300</TableCell>
|
||||
<TableCell>$300</TableCell>
|
||||
</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>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
|
||||
<TableLeftHeading>Government sponsored activities</TableLeftHeading>
|
||||
<TableCell>$50</TableCell>
|
||||
<TableCell>$50</TableCell>
|
||||
<TableCell>None†</TableCell>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -168,6 +170,7 @@ export default function Rental() {
|
||||
The West Sound Community Hall may not be used for either personal or
|
||||
organizational monetary gain or to promote business activities.
|
||||
The only exceptions to this restriction are:
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal ml-8 mt-5">
|
||||
<li>
|
||||
@ -183,7 +186,6 @@ export default function Rental() {
|
||||
sponsoring nonprofit organization.)
|
||||
</li>
|
||||
</ol>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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