diff options
| author | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-29 09:04:39 +0700 |
|---|---|---|
| committer | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-29 09:04:39 +0700 |
| commit | 69d7bd767f1b720ea5d1d5124374281e3449a48d (patch) | |
| tree | 350252a6fadc9427c15cbd87756babde4fc8dbb9 | |
| parent | 753e2468be9f8b339fe3b206603752a9d0100803 (diff) | |
no message
| -rw-r--r-- | src/components/AppBar.js | 15 | ||||
| -rw-r--r-- | src/components/LineDivider.js | 7 | ||||
| -rw-r--r-- | src/components/ProgressBar.js | 2 | ||||
| -rw-r--r-- | src/pages/shop/cart.js | 9 |
4 files changed, 21 insertions, 12 deletions
diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 68a93f64..869e4fff 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -1,5 +1,4 @@ -import { HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; -import { ChevronLeftIcon } from "@heroicons/react/24/solid"; +import { ArrowLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; import Head from "next/head"; import { useRouter } from "next/router"; import Link from "./Link"; @@ -12,12 +11,14 @@ const AppBar = ({ title }) => { <Head> <title>{ title } - Indoteknik</title> </Head> - <div className="flex justify-between px-4 py-5 border-b border-gray_r-6"> + <div className="flex justify-between pr-4 py-5 border-b border-gray_r-6 bg-gray_r-1"> {/* --- Start Title */} - <button type="button" onClick={() => router.back()} className="flex gap-x-2 items-center text-gray_r-12"> - <ChevronLeftIcon className="w-6 stroke-2"/> - <h1>{ title }</h1> - </button> + <div className="flex items-center"> + <button type="button" onClick={() => router.back()} className="text-gray_r-12 px-4"> + <ArrowLeftIcon className="w-6 stroke-2"/> + </button> + <h1 className="text-h-md">{ title }</h1> + </div> {/* --- End Title */} {/* --- Start Icons */} diff --git a/src/components/LineDivider.js b/src/components/LineDivider.js new file mode 100644 index 00000000..ce92f4ee --- /dev/null +++ b/src/components/LineDivider.js @@ -0,0 +1,7 @@ +const LineDivider = () => { + return ( + <hr className="h-1.5 bg-gray_r-4 border-none"/> + ); +}; + +export default LineDivider;
\ No newline at end of file diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index 8a2df0a4..0adedcdf 100644 --- a/src/components/ProgressBar.js +++ b/src/components/ProgressBar.js @@ -6,7 +6,7 @@ const ProgressBar = ({ current, labels }) => { {labels.map((label, index) => ( <Fragment key={index}> <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')}> - <div className={"leading-none p-2 rounded-full w-7 text-center text-caption-2 " + (index < current ? 'bg-yellow_r-9' : 'bg-gray_r-6')}> + <div className={"leading-none p-2 rounded-full w-7 text-center text-caption-2 " + (index < current ? 'bg-yellow_r-9' : 'bg-gray_r-5')}> { index + 1 } </div> <p className="font-medium text-caption-2">{ label }</p> diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index dfb24990..9fd44410 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -27,6 +27,7 @@ import Alert from "../../components/Alert"; import Spinner from "../../components/Spinner"; import AppBar from "../../components/AppBar"; import ProgressBar from "../../components/ProgressBar"; +import LineDivider from "../../components/LineDivider"; export default function Cart() { const router = useRouter(); @@ -182,10 +183,10 @@ export default function Cart() { labels={['Keranjang', 'Pembayaran', 'Selesai']} /> - <hr className="h-1.5 bg-gray_r-3 border-none"/> + <LineDivider/> {/* --- Start Alert */} - <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center"> + <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center my-2"> <div> <ExclamationTriangleIcon className="w-8"/> </div> @@ -193,7 +194,7 @@ export default function Cart() { </Alert> {/* ---- End Alert */} - <hr className="h-1.5 bg-gray_r-3 border-none"/> + <LineDivider/> <div className="p-4"> {/* [Start] Product List */} @@ -264,7 +265,7 @@ export default function Cart() { {/* [End] Product List */} </div> - <hr className="h-1.5 bg-gray_r-3 border-none"/> + <LineDivider/> <div className="p-4"> {/* [Start] Review Order */} |