Skip to content

Commit

Permalink
feat: dark mode option
Browse files Browse the repository at this point in the history
  • Loading branch information
@atmahana
atmahana committed Sep 2, 2023
1 parent d001a60 commit dd4bce0
Show file tree
Hide file tree
Showing 23 changed files with 399 additions and 108 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"next": "13.1.6",
"next-auth": "^4.19.0",
"next-s3-upload": "^0.3.0",
"next-themes": "^0.2.1",
"nodemailer": "^6.9.3",
"preview-email": "^3.0.19",
"prisma-kysely": "^1.5.0",
Expand Down
80 changes: 58 additions & 22 deletions src/components/AddSurauForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { generateCombination } from "../utils";
import DistrictSelect from "./shared/DistrictSelect";
import { TrashIcon } from "@heroicons/react/24/outline";
import CustomUpload from "./shared/CustomUpload";
import clsx from "clsx";
import {controlStyles, optionStyles, placeholderStyles, inputStyles, singleValueStyles, indicatorSeparatorStyles, dropdownIndicatorStyles, menuStyles, noOptionsStyles, clearIndicatorStyles} from '../styles/selectStyles';

const Select = dynamic(() => import("react-select"), {
ssr: true,
Expand Down Expand Up @@ -256,22 +258,22 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
<div className="md:grid md:grid-cols-2 md:gap-6">
<div className="md:col-span-1">
<div className="px-4 sm:px-0">
<h3 className="text-lg font-medium leading-6 text-gray-900">
<h3 className="text-lg font-medium leading-6 text-foreground">
Add surau
</h3>
<p className="mt-1 text-xs italic text-gray-600">
<p className="mt-1 text-xs italic text-muted-foreground">
Help us to add surau if it is not in the list.
</p>
</div>
</div>
<div className="mt-4 md:col-span-2 md:mt-0">
<div className="shadow sm:overflow-hidden sm:rounded-md">
<div className="space-y-6 bg-white px-4 py-5 sm:p-6">
<div className="space-y-6 bg-background px-4 py-5 sm:p-6">
<div className="grid grid-cols-3 gap-6">
<div className="col-span-3 md:col-span-2">
<label
htmlFor="surau-name"
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-input-foreground"
>
Surau Name
</label>
Expand All @@ -280,7 +282,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
type="text"
name="surau-name"
id="surau-name"
className="block w-full flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="block w-full flex-1 rounded-md border-border bg-input text-input-foreground focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder=""
onChange={(e) => {
transformSurauName(e.target.value);
Expand Down Expand Up @@ -315,7 +317,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
id="check-surau-mall"
name="check-surau-mall"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
className="h-4 w-4 rounded border-border text-indigo-600 focus:ring-indigo-600"
onChange={(e) => {
setFindMallChecked(e.target.checked);
}}
Expand All @@ -331,7 +333,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
{findMallChecked ? (
<div className="grid grid-cols-3 gap-6">
<div className="col-span-3 md:col-span-2">
<label className="block text-sm font-medium text-gray-700">
<label className="block text-sm font-medium text-input-foreground">
Mall
</label>
<Select
Expand All @@ -341,6 +343,31 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
getOptionLabel={(option: any) => option.name}
getOptionValue={(option: any) => option.id}
placeholder="Mall"
unstyled
classNames={{
control: ({ isFocused }) =>
clsx(
isFocused
? controlStyles.focus
: controlStyles.nonFocus,
controlStyles.base
),
placeholder: () => placeholderStyles,
input: () => inputStyles,
singleValue: () => singleValueStyles,
indicatorSeparator: () =>
indicatorSeparatorStyles,
dropdownIndicator: () => dropdownIndicatorStyles,
menu: () => menuStyles,
option: ({ isFocused, isSelected }) =>
clsx(
isFocused && optionStyles.focus,
isSelected && optionStyles.selected,
optionStyles.base
),
noOptionsMessage: () => noOptionsStyles,
clearIndicator: () => clearIndicatorStyles,
}}
/>
</div>
</div>
Expand All @@ -352,7 +379,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
id="check-surau-qiblat"
name="check-surau-qiblat"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
className="h-4 w-4 rounded border-border text-indigo-600 focus:ring-indigo-600"
onChange={(e) =>
setIsQiblatCertified(e.target.checked)
}
Expand All @@ -368,15 +395,15 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
{isQiblatCertified ? (
<div className="grid grid-cols-3 gap-2 md:gap-6">
<div>
<label className="block text-sm font-medium text-gray-700">
<label className="block text-sm font-medium text-input-foreground">
Latitude
</label>
<div className="mt-1 rounded-md shadow-sm">
<input
type="number"
name="latitude"
id="latitude"
className="block w-full flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="block w-full flex-1 rounded-md border-border bg-input text-input-foreground focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="0.000"
onChange={(e) => {
setLatitude(parseFloat(e.target.value));
Expand All @@ -385,15 +412,15 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
<label className="block text-sm font-medium text-input-foreground">
Longitude
</label>
<div className="mt-1 rounded-md shadow-sm">
<input
type="number"
name="longitude"
id="longitude"
className="block w-full flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="block w-full flex-1 rounded-md border-border bg-input text-input-foreground focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="0.000"
onChange={(e) => {
setLongitude(parseFloat(e.target.value));
Expand All @@ -402,15 +429,15 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
<label className="block text-sm font-medium text-input-foreground">
Qiblat Degree
</label>
<div className="mt-1 rounded-md shadow-sm">
<input
type="text"
name="qiblat-degree"
id="longitude"
className="block w-full flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="block w-full flex-1 rounded-md border-border bg-input text-input-foreground focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="0.000"
onChange={(e) => {
setQiblatDegree(parseFloat(e.target.value));
Expand All @@ -428,7 +455,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
id="check-surau-qiblat"
name="check-surau-qiblat"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
className="h-4 w-4 rounded border-border text-indigo-600 focus:ring-indigo-600"
onChange={(e) => setIsSolatJumaat(e.target.checked)}
/>
</div>
Expand All @@ -451,7 +478,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
<div>
<label
htmlFor="about"
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-input-foreground"
>
Direction / guide
</label>
Expand All @@ -460,7 +487,7 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
id="about"
name="about"
rows={3}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="mt-1 block w-full rounded-md border-border bg-input text-input-foreground shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
defaultValue={""}
onChange={(e) => {
setBriefDirection(e.target.value);
Expand All @@ -481,7 +508,10 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
<div className="mb-2 text-center text-xs font-light italic">
Upload image here
</div>
<CustomUpload uploadedFileList={setTempImageList} setUploadCompleted={setUploadCompleted} />
<CustomUpload
uploadedFileList={setTempImageList}
setUploadCompleted={setUploadCompleted}
/>

{/* This custom uploader return uploaded file on success */}
</div>
Expand All @@ -498,8 +528,14 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
<div
id="imagePreviewDiv"
key={index}
className={`my-1 inline-flex items-center justify-between overflow-hidden rounded-md border p-2 ${thumbnailIndex === index ? "border-indigo-500" : "border-gray-300"}`}
onClick={() => markThumbnail(imagePreview.id, index)}
className={`my-1 inline-flex items-center justify-between overflow-hidden rounded-md border p-2 ${
thumbnailIndex === index
? "border-indigo-500"
: "border-border"
}`}
onClick={() =>
markThumbnail(imagePreview.id, index)
}
>
<div className="flex items-center">
<Image
Expand Down Expand Up @@ -539,15 +575,15 @@ const AddSurauForm: FC<AddSurauFormProps> = ({ setOpen }) => {
</p>
) : null}
</div>
<div className="flex flex-row items-end justify-end gap-2 bg-gray-50 px-4 py-3 text-right sm:px-6">
<div className="flex flex-row items-end justify-end gap-2 bg-gray-50 px-4 py-3 text-right dark:bg-gray-800 sm:px-6">
<button
onClick={(e) => handleSubmit(e)}
className=" justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Submit
</button>
<div
className="mb-2 cursor-pointer font-light underline hover:text-indigo-500"
className="mb-2 cursor-pointer font-light text-input-foreground underline hover:text-indigo-500"
onClick={() => setOpen(false)}
>
Close
Expand Down
44 changes: 22 additions & 22 deletions src/components/ReviewSurauForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ const ReviewSurauForm: FC<ReviewSurauFormProps> = ({
<div className="md:grid md:grid-cols-2 md:gap-6">
<div className="md:col-span-1">
<div className="px-4 sm:px-0">
<h3 className="text-lg font-medium leading-6 text-gray-900">
<h3 className="text-lg font-medium leading-6 text-primary-foreground">
Review
</h3>
<p className="mt-1 text-xs italic text-gray-600">
<p className="mt-1 text-xs italic text-muted-foreground">
Review this {surauName} surau inshaAllah
</p>
</div>
Expand All @@ -110,11 +110,11 @@ const ReviewSurauForm: FC<ReviewSurauFormProps> = ({
{renderStars()}
</div>
{ratingError ? (
<p className="text-xs text-red-500 text-center">
<p className="text-center text-xs text-red-500">
Please select a rating
</p>
): null}
<div className="space-y-6 bg-white px-4 py-5 sm:p-6">
) : null}
<div className="space-y-6 bg-background px-4 py-5 sm:p-6">
<div>
<label
htmlFor="about"
Expand All @@ -125,7 +125,7 @@ const ReviewSurauForm: FC<ReviewSurauFormProps> = ({
id="about"
name="about"
rows={3}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="mt-1 block w-full rounded-md border-border bg-input text-input-foreground shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
defaultValue={""}
onChange={(e) => {
setReview(e.target.value);
Expand All @@ -143,7 +143,7 @@ const ReviewSurauForm: FC<ReviewSurauFormProps> = ({
id="check-image-upload"
name="check-image-upload"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
className="h-4 w-4 rounded border-border text-indigo-600 focus:ring-indigo-600"
onChange={(e) => {
setCheckImageUpload(e.target.checked);
}}
Expand All @@ -157,19 +157,19 @@ const ReviewSurauForm: FC<ReviewSurauFormProps> = ({
</div>
{!imagePreviews && checkImageUpload ? (
<UploadButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
alert("Upload Completed");
if (res) {
void handleUploadThing(res);
}
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
/>
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
alert("Upload Completed");
if (res) {
void handleUploadThing(res);
}
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
/>
) : null}
<div className="flex flex-row gap-2">
<div className="grid grid-cols-2 gap-2 space-y-2">
Expand All @@ -189,15 +189,15 @@ const ReviewSurauForm: FC<ReviewSurauFormProps> = ({
</div>
</div>
</div>
<div className="flex flex-row items-end justify-end gap-2 bg-gray-50 px-4 py-3 text-right sm:px-6">
<div className="flex flex-row items-end justify-end gap-2 bg-gray-50 dark:bg-gray-800 px-4 py-3 text-right sm:px-6">
<button
className="justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
onClick={(e) => handleSubmit(e)}
>
Submit Review
</button>
<div
className="mb-2 font-light underline hover:text-indigo-500 cursor-pointer"
className="mb-2 cursor-pointer font-light underline hover:text-indigo-500"
onClick={() => setOpen(false)}
>
Close
Expand Down
Loading

0 comments on commit dd4bce0

Please sign in to comment.