Skip to content

Commit

Permalink
Merge pull request #60 from La-Fresca/checkout
Browse files Browse the repository at this point in the history 
feat: light mode styles
  • Loading branch information
@DasunThathsara
DasunThathsara authored Jul 20, 2024
2 parents 57b5da1 + f9ee016 commit 1b93de0
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 46 deletions.
75 changes: 36 additions & 39 deletions src/components/User/Checkout/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { Link } from 'react-router-dom';
import { Button } from '@nextui-org/react';
import { useNavigate } from 'react-router-dom';

function index() {
const navigate = useNavigate();
return (
<section
className="bg-white py-8 antialiased dark:bg-foodbg border dark:border-foodbg backdrop-blur-md rounded-2xl md:py-16"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
className="bg-white py-8 antialiased dark:bg-foodbg dark:border dark:border-foodbg backdrop-blur-md rounded-2xl md:py-16 dark:bg-[rgba(123,123,123,0.06)]"
style={{boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.12)'}}
>
<form action="#" className="mx-auto max-w-screen-xl px-4 2xl:px-0">
<ol className="items-center flex w-full max-w-2xl text-center text-sm font-medium text-gray-500 dark:text-white sm:text-base">
<li className="after:border-1 flex items-center text-primary-700 after:mx-6 after:hidden after:h-1 after:w-full after:border-b after:border-gray-200 dark:text-warning dark:after:border-warning sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10">
<li className="after:border-1 flex items-center text-primary-700 after:mx-6 after:hidden after:h-1 after:w-full after:border-b after:border-gray-200 dark:text-warning text-warning dark:after:border-warning after:border-warning sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10">
<span className="flex items-center after:mx-2 after:text-gray-200 after:content-['/'] dark:after:text-gray-500 sm:after:hidden">
<svg
className="me-2 h-4 w-4 sm:h-5 sm:w-5"
Expand All @@ -33,7 +34,7 @@ function index() {
</span>
</li>

<li className="after:border-1 flex items-center text-primary-700 after:mx-6 after:hidden after:h-1 after:w-full after:border-b after:border-gray-200 dark:text-warning dark:after:border-white dark:text-primary-500 dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10">
<li className="after:border-1 flex items-center text-primary-700 after:mx-6 after:hidden after:h-1 after:w-full after:border-b after:border-gray-200 dark:text-warning text-warning dark:after:border-white after:border-foodbg dark:text-primary-500 dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10">
<span className="flex items-center after:mx-2 after:text-gray-200 after:content-['/'] dark:after:text-gray-500 sm:after:hidden">
<svg
className="me-2 h-4 w-4 sm:h-5 sm:w-5"
Expand All @@ -56,7 +57,7 @@ function index() {
</span>
</li>

<li className="flex shrink-0 items-center">
<li className="flex shrink-0 items-center text-foodbg dark:text-white">
<svg
className="me-2 h-4 w-4 sm:h-5 sm:w-5"
aria-hidden="true"
Expand All @@ -80,52 +81,52 @@ function index() {

<div className="mt-6 sm:mt-8 lg:flex lg:items-start lg:gap-12 xl:gap-16">
<div className="min-w-0 flex-1 space-y-8">
{/* Form */}
{/* Delivery details */}
<div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
<h2 className="text-xl font-semibold text-foodbg dark:text-white">
Delivery Details
</h2>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Full name*
</label>
<input
type="text"
id="your_name"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
placeholder="Bonnie Green"
required
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
/>
</div>

<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Street address*
</label>
<input
type="text"
id="your_name"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
placeholder="Street Address"
required
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
/>
</div>

<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
City*
</label>
<input
type="text"
id="your_name"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
placeholder="City"
required
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
Expand All @@ -134,14 +135,14 @@ function index() {

<div>
<div className="mb-2 flex items-center gap-2">
<label className="block text-sm font-medium text-gray-900 dark:text-white">
<label className="block text-sm font-medium text-foodbg dark:text-white">
{' '}
Province*{' '}
</label>
</div>
<select
id="select-country-input-3"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
>
<option hidden selected>
Expand All @@ -161,26 +162,23 @@ function index() {

{/* phone number */}
<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Phone Number*{' '}
</label>
<div className="flex items-center">
<button
<div
id="dropdown-phone-button-3"
data-dropdown-toggle="dropdown-phone-3"
className="z-10 inline-flex shrink-0 items-center rounded-s-lg border px-4 py-[5px] text-center text-sm font-medium text-gray-900 outline-none focus:ring-4 focus:ring-gray-100 dark:border-foodbg dark:text-white"
type="button"
className="z-10 inline-flex shrink-0 items-center rounded-s-lg border px-4 py-[5px] text-center text-sm font-medium text-gray-900 outline-none focus:ring-4 focus:ring-gray-100 dark:border-foodbg border-[rgba(0,0,0,0.3)] dark:text-white"
>
<svg
width="30px"
height="30px"
viewBox="0 0 80 64"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
className="iconify iconify--emojione"
preserveAspectRatio="xMidYMid meet"
>
<path
Expand Down Expand Up @@ -214,13 +212,12 @@ function index() {
</g>
</svg>
+94
</button>
</div>
<div className="relative w-full">
<input
type="text"
id="phone-input"
className="z-20 block w-full rounded-e-lg border border-s-0 dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
className="block w-full border border-s-0 rounded-e-lg border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="12-3456789"
required
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
Expand All @@ -230,14 +227,14 @@ function index() {
</div>

<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Postal / Zip code*
</label>
<input
type="text"
id="vat_number"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full border rounded-lg border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
placeholder="Postal / Zip code"
required
Expand Down Expand Up @@ -275,20 +272,20 @@ function index() {

{/* Card details */}
<div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
<h2 className="text-xl font-semibold text-foodbg dark:text-white">
Payment Details
</h2>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Cardholder name*
</label>
<input
type="text"
id="your_name"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
placeholder="Bonnie Green"
required
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
Expand All @@ -297,14 +294,14 @@ function index() {

<div>
<div className="mb-2 flex items-center gap-2">
<label className="block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Country*{' '}
</label>
</div>
<select
id="select-country-input-3"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
>
<option hidden selected className="">
Expand All @@ -316,14 +313,14 @@ function index() {
</div>

<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Card number*
</label>
<input
type="text"
id="your_name"
className="block w-full rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
placeholder="135364958481"
required
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
Expand All @@ -332,30 +329,30 @@ function index() {

<div className="grid grid-cols-2">
<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
Expire date*
</label>
<input
type="text"
id="company_name"
className="block w-[95%] rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
className="block w-[95%] rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
placeholder="MM/YY"
required
/>
</div>

<div>
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
<label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
{' '}
CVV*
</label>
<input
type="text"
id="vat_number"
className="block w-[100%] rounded-lg border dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
placeholder="123"
required
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/User/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const Header = (props: {

<div className="hidden sm:flex items-center">
<div
className="text-white font-bold pl-2 pr-12 dark:text-white mr-4"
className="text-black font-bold pl-2 pr-12 dark:text-white mr-4"
style={{ fontFamily: 'Cormorant Upright, serif', fontSize: '30px' }}
>
La Fresca
Expand Down
10 changes: 4 additions & 6 deletions src/layouts/UserLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,10 @@ const BranchManagerLayout: React.FC = () => {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
<div
className="dark:bg-boxdark-2 dark:text-bodydark"
style={{
backgroundImage: `url(${BackgrounImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
className="dark:bg-boxdark-2 dark:text-bodydark bg-cover bg-center dark:bg-[url('@images/cover/cover-03.png')] bg-white"
// style={{
// backgroundImage: `url(${BackgrounImage})`,
// }}
>
{/* <!-- ===== Page Wrapper Start ===== --> */}
<div className="flex h-screen overflow-hidden">
Expand Down

0 comments on commit 1b93de0

Please sign in to comment.