Skip to content

Commit

Permalink
style:Mirror change
Browse files Browse the repository at this point in the history
  • Loading branch information
@rosethorn999
rosethorn999 committed Oct 16, 2023
1 parent 7697a4d commit 69245e5
Show file tree
Hide file tree
Showing 18 changed files with 118 additions and 291 deletions.
15 changes: 0 additions & 15 deletions src/app/[lng]/components/Button.js
View file

This file was deleted.

25 changes: 25 additions & 0 deletions src/app/[lng]/components/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { MouseEventHandler } from 'react';

function Button(props: {
color?: string;
children: any;
type?: string;
disabled?: boolean;
onClick?: MouseEventHandler<HTMLButtonElement>;
}) {
return (
<button
className={`btn blue m-0 h-8 cursor-pointer rounded-3xl bg-dodgerBlue px-7 py-1 text-white hover:opacity-90 focus:outline-none active:border-none disabled:cursor-not-allowed disabled:opacity-60 ${
props.color === 'pink' && 'bg-pink'
}`}
disabled={props.disabled}
onClick={props.onClick}
// {...props}
>
{/* {JSON.stringify(props)} */}
{props.children}
</button>
);
}

export default Button;
11 changes: 6 additions & 5 deletions src/app/[lng]/components/ContractBox/ContractBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,25 +43,26 @@ export const ContractBase = ({ t, fitXs, r }: { t: any; fitXs: boolean; r: Contr
if (selected.length > 0) {
return selected[0].name;
} else {
return '無法計算';
return t('invalid');
}
};
const price = () => {
let d = new Date(expiry_date).getTime();
let now = new Date().getTime();

const monthCount = Math.round(Math.abs(d - now) / 1000 / 60 / 60 / 24 / 30);
return monthly_rental * monthCount + processing_fee;
const monthCount = Math.round(Math.min(d - now, 0) / 1000 / 60 / 60 / 24 / 30);
const v = monthCount > 0 ? monthly_rental * monthCount + processing_fee : 0;
return v;
};
return (
<div
className={`contract-box box-border block h-full w-full cursor-pointer rounded-xl bg-[linear-gradient(to_right,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/world_gym.jpg')] bg-cover p-5 text-white opacity-90 hover:opacity-100 md:gap-5 ${
className={`contract-box box-border block h-full w-full cursor-pointer rounded-3xl bg-[linear-gradient(to_right,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/world_gym.jpg')] bg-cover p-5 text-white opacity-90 hover:opacity-100 md:gap-5 ${
fitXs ? 'xs' : 'md:flex md:bg-none md:py-0 md:text-black'
}`}
title={title}
>
<div
className={`image-block hidden rounded-lg md:block md:w-52 md:min-w-[220px] md:overflow-hidden md:border md:border-whisper ${
className={`image-block hidden rounded-3xl md:block md:w-52 md:min-w-[220px] md:overflow-hidden md:border md:border-whisper ${
fitXs ? 'md:hidden' : 'md:h-36 md:flex-none'
}`}
>
Expand Down
6 changes: 3 additions & 3 deletions src/app/[lng]/components/DatePick.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ function DatePick({
</h1> */}
<div className="w-1/3">
<select
className="yyyy h-10 w-full rounded-2xl border-2 border-whisper bg-white px-2 text-center leading-10"
className="yyyy h-10 w-full rounded-3xl border-2 border-whisper bg-white px-2 text-center leading-10"
name="yyyy"
onChange={handleChange}
value={yyyy}
Expand All @@ -130,7 +130,7 @@ function DatePick({
</div>
<div className="w-1/3">
<select
className="mm h-10 w-full rounded-2xl border-2 border-whisper bg-white px-2 text-center leading-10"
className="mm h-10 w-full rounded-3xl border-2 border-whisper bg-white px-2 text-center leading-10"
name="mm"
onChange={handleChange}
value={mm}
Expand All @@ -147,7 +147,7 @@ function DatePick({
</div>
<div className="w-1/3">
<select
className="dd h-10 w-full rounded-2xl border-2 border-whisper bg-white px-2 text-center leading-10"
className="dd h-10 w-full rounded-3xl border-2 border-whisper bg-white px-2 text-center leading-10"
name="dd"
onChange={handleChange}
value={dd}
Expand Down
10 changes: 5 additions & 5 deletions src/app/[lng]/components/HeaderBar/HeaderBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,24 +156,24 @@ export const HeaderBase = ({ t, lng }) => {
{isLoggedIn ? (
<>
<li className="leading-[3rem]">
<Link href="/manage">管理後台</Link>
<Link href={`/${lng}/setting/my-contracts`}>{t('setting')}</Link>
</li>
<li className="leading-[3rem]">
<button onClick={clickLogout}>登出</button>
<button onClick={clickLogout}>{t('logOut')}</button>
</li>
</>
) : (
<>
<li className="leading-[3rem]">
<Link href="invitation">註冊</Link>
<Link href={`/${lng}/register`}>{t('register')}</Link>
</li>
<li className="leading-[3rem]">
<Link href="login">登入</Link>
<Link href={`/${lng}/login`}>{t('logIn')}</Link>
</li>
</>
)}
<li className="leading-[3rem]">
<Link href="/contracts">會籍轉讓</Link>
<Link href={`/${lng}/contracts`}>{t('Contracts')}</Link>
</li>
<li className="leading-[3rem]">
<FontAwesomeIcon
Expand Down
4 changes: 2 additions & 2 deletions src/app/[lng]/components/SearchBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function TextBox({ lng }: any) {

return (
<>
<div className="search-bar relative flex w-full rounded-xl align-middle md:w-1/2 ">
<div className="search-bar relative flex w-full rounded-3xl align-middle md:w-1/2 ">
<select className="search-select inline-block h-8 w-20 rounded-l-2xl border-none bg-white px-2 text-center align-middle outline outline-1 outline-offset-0 outline-whisper focus-visible:outline-1 md:p-1 md:pl-2">
<option value="1">{t('title')}</option>
</select>
Expand All @@ -68,7 +68,7 @@ function TextBox({ lng }: any) {
</div>
<div className="query-fun block h-8 w-full overflow-auto whitespace-nowrap align-middle md:w-1/3">
<select
className="country-tab-container h-full w-full list-none rounded-2xl border-whisper text-center"
className="country-tab-container h-full w-full list-none rounded-3xl border-whisper text-center"
onChange={(e) => setSelectedCounty(e.target.value)}
defaultValue={selectedCounty}
>
Expand Down
2 changes: 1 addition & 1 deletion src/app/[lng]/components/TextBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function TextBox(props: ITextBox) {
value={value}
name={name}
type={type}
className={`text-box mx-auto my-0 h-10 w-full min-w-[250px] rounded-2xl border-2 border-whisper p-5 leading-10 shadow-dodgerBlueWith25Opacity focus:border-mayaBlue focus-visible:outline-none ${
className={`text-box mx-auto my-0 h-10 w-full min-w-[250px] rounded-3xl border-2 border-whisper p-5 leading-10 shadow-dodgerBlueWith25Opacity focus:border-mayaBlue focus-visible:outline-none ${
disabled ? 'cursor-not-allowed' : 'cursor-auto'
} ${extraClass}`}
placeholder={placeholder}
Expand Down
19 changes: 10 additions & 9 deletions src/app/[lng]/contracts/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,9 @@ export default async function Page({ params: { lng, id: recordId } }: any) {
let d = new Date(expiry_date).getTime();
let now = new Date().getTime();

const monthCount = Math.round(Math.abs(d - now) / 1000 / 60 / 60 / 24 / 30);
return monthly_rental * monthCount + processing_fee;
const monthCount = Math.round(Math.max(d - now, 0) / 1000 / 60 / 60 / 24 / 30);
const v = monthCount > 0 ? monthly_rental * monthCount + processing_fee : 0;
return v;
};
const gym_typeCaption = (v: any) => {
let selected = selection.gym_types.filter(function (item: any) {
Expand All @@ -60,29 +61,29 @@ export default async function Page({ params: { lng, id: recordId } }: any) {
if (selected.length > 0) {
return selected[0].name;
} else {
return '無法計算';
return t('invalid');
}
};
return (
<div className="recordDetail bg-white">
<div className="h-full p-5 md:py-0">
<div className="controller sticky top-14 cursor-pointer bg-white pb-6 pt-12">
<Link href="/contracts">
<FontAwesomeIcon icon={faArrowLeft} /> {t('back')}
<FontAwesomeIcon icon={faArrowLeft} /> {t('Back')}
</Link>
</div>
<div className="contract-container mb-24 md:mb-48">
<div className="upper-box mb-24 w-full gap-4 md:flex md:gap-24">
<div className="left-box md:w-1/2">
<div className="upper-box mb-24 flex w-full flex-col gap-4 md:flex-row md:gap-24">
<div className="left-box w-full md:w-1/2">
<h1 className="mb-4 text-4xl font-bold">{title}</h1>
<Image
className="main-image w-full rounded-lg border border-whisper"
className="main-image w-full rounded-3xl border border-whisper"
src="/500x300.png"
alt="mainPic"
width="500"
height="300"
/>
<span className="text-persianRed">{inventory <= 0 && <p>{t('soldOut')}</p>}</span>
<span className="text-persianRed">{inventory <= 0 && <p>{t('SoldOut')}</p>}</span>
<div className="contacts-box">
<p className="text-xl">{t('sellerInfo')}</p>
<div>
Expand Down Expand Up @@ -151,7 +152,7 @@ export default async function Page({ params: { lng, id: recordId } }: any) {
</div>
</div>
</div>
<div className="bottom-box mb-24 w-full rounded border border-whisper ">
<div className="bottom-box mb-24 w-full rounded-3xl border border-whisper ">
<div className="header h-10 bg-whisper px-5 leading-10">{t('description')}</div>
<div className={`h-36 overflow-auto ${!description && 'h-14'}`}>
<div className="description p-4 text-sm">{description || `(${t('empty')})`}</div>
Expand Down
37 changes: 20 additions & 17 deletions src/app/[lng]/contracts/[id]/update/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@ export default function Page({ params: { lng, id: recordId } }: any) {
if (!values.store) {
errors.store = 'Required';
}
if (!values.county) {
if (!selection.zipCode.map((o) => o.name).includes(values.county)) {
errors.county = 'Required';
}
if (!values.district) {
if (!districts.map((o) => o.val).includes(values.district)) {
errors.district = 'Required';
}
if (!values.expiry_date) {
Expand Down Expand Up @@ -133,8 +133,8 @@ export default function Page({ params: { lng, id: recordId } }: any) {
if (d) {
let now = new Date().getTime();

const monthCount = Math.round(Math.abs(d - now) / 1000 / 60 / 60 / 24 / 30);
const v = monthly_rental * monthCount + processing_fee;
const monthCount = Math.round(Math.max(d - now, 0) / 1000 / 60 / 60 / 24 / 30);
const v = monthCount > 0 ? monthly_rental * monthCount + processing_fee : 0;
setPrice(v);
}
}
Expand All @@ -150,12 +150,12 @@ export default function Page({ params: { lng, id: recordId } }: any) {
<div className="h-full p-5 md:py-0">
<div className="controller sticky top-14 cursor-pointer bg-white pb-6 pt-12">
<div onClick={() => router.back()}>
<FontAwesomeIcon icon={faArrowLeft} /> {t('back')}
<FontAwesomeIcon icon={faArrowLeft} /> {t('Back')}
</div>
</div>
<form onSubmit={formik.handleSubmit} className="contract-container mb-24 md:mb-48">
<div className="upper-box mb-24 w-full gap-4 md:flex">
<div className="left-box md:w-1/2">
<div className="upper-box mb-24 flex w-full flex-col gap-4 md:flex-row md:gap-24">
<div className="left-box w-full md:w-1/2">
<TextBox
name="title"
extraClass={`mb-4 w-full text-4xl ${formik.errors.title ? 'is-invalid' : ''}`}
Expand All @@ -164,7 +164,7 @@ export default function Page({ params: { lng, id: recordId } }: any) {
value={formik.values.title}
/>
<Image
className="main-image w-full rounded-lg border border-whisper"
className="main-image w-full rounded-3xl border border-whisper"
src="/500x300.png"
alt="mainPic"
width="500"
Expand All @@ -179,19 +179,22 @@ export default function Page({ params: { lng, id: recordId } }: any) {
id="1"
onChange={formik.handleChange}
/>
Not {t('soldOut')}
&nbsp;
{t('NotSoldOut')}
</label>
&nbsp;
<label htmlFor="0">
<input
value={formik.values.inventory}
value={0}
name="inventory"
type="radio"
id="0"
onChange={formik.handleChange}
/>
{t('soldOut')}
&nbsp;
{t('SoldOut')}
</label>
{/* FIXME: init inventory value not work */}
</div>
</div>
<div className="right-box w-full md:w-1/2">
Expand All @@ -202,7 +205,7 @@ export default function Page({ params: { lng, id: recordId } }: any) {
value={formik.values.gym_type}
onChange={formik.handleChange}
name="gym_type"
className="mr-2 w-1/2 rounded-2xl border-2 border-whisper bg-white px-2 text-center"
className="mr-2 w-1/2 rounded-3xl border-2 border-whisper bg-white px-2 text-center"
>
<option value="-1" disabled>
{t('Membership')}
Expand Down Expand Up @@ -232,7 +235,7 @@ export default function Page({ params: { lng, id: recordId } }: any) {

formik.setFieldValue('county', county);
}}
className="mr-2 w-1/2 rounded-2xl border-2 border-whisper bg-white p-2 text-center"
className="mr-2 w-1/2 rounded-3xl border-2 border-whisper bg-white p-2 text-center"
>
<option value="null" disabled>
{t('County')}
Expand All @@ -245,7 +248,7 @@ export default function Page({ params: { lng, id: recordId } }: any) {
name="district"
value={formik.values.district}
onChange={formik.handleChange}
className="w-1/2 rounded-2xl border-2 border-whisper bg-white p-2 text-center"
className="w-1/2 rounded-3xl border-2 border-whisper bg-white p-2 text-center"
>
<option value="null" disabled>
{t('District')}
Expand Down Expand Up @@ -321,7 +324,7 @@ export default function Page({ params: { lng, id: recordId } }: any) {
</div>
</div>
</div>
<div className="bottom-box mb-24 w-full rounded border border-whisper ">
<div className="bottom-box mb-24 w-full rounded-3xl border border-whisper ">
<div className="header h-10 bg-whisper px-5 leading-10">{t('description')}</div>
<div className="h-fit">
<div className="description p-4 text-sm">
Expand All @@ -338,11 +341,11 @@ export default function Page({ params: { lng, id: recordId } }: any) {
</div>
<div className="button-box text-center">
<Button color="pink" type="button" onClick={() => router.back()}>
{t('cancel')}
{t('Cancel')}
</Button>
&nbsp;
<Button type="submit" disabled={!formik.isValid}>
{t('save')}
{t('Update')}
</Button>
</div>
</form>
Expand Down
2 changes: 1 addition & 1 deletion src/app/[lng]/forget-password/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function RequestResetPassword() {
<div className="form-group mb-14 block">
<input
name="email"
className={`text-box mx-auto my-0 h-10 w-1/3 min-w-[250px] rounded-2xl border border-whisper p-5 leading-10 ${
className={`text-box mx-auto my-0 h-10 w-1/3 min-w-[250px] rounded-3xl border border-whisper p-5 leading-10 ${
formik.errors.email ? 'is-invalid' : null
}`}
placeholder="電子信箱"
Expand Down
Loading

0 comments on commit 69245e5

Please sign in to comment.