diff --git a/frontend/src/components/AddButton.tsx b/frontend/src/components/AddButton.tsx
index c56d43682452b35ccb60804f0abbbe6875da941c..306ddf1925bcf9f5daf4ec115b6f3b6b2c648afa 100644
--- a/frontend/src/components/AddButton.tsx
+++ b/frontend/src/components/AddButton.tsx
@@ -8,7 +8,7 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
return (
<button
type="button"
- className="w-40 h-10 mx-2 my-4 text-white bg-mealshub-red hover:bg-red-900 focus:outline-none focus:ring-4 focus:ring-red-300 font-bold rounded-full text-m"
+ className="w-40 h-10 mx-2 my-4 text-white bg-mealshub-red hover:bg-red-900 focus:outline-none focus:ring-4 focus:ring-red-300 font-bold rounded-full text-md font-nunito"
onClick={props.onClick}
>
Add Menu
diff --git a/frontend/src/components/AddForm.tsx b/frontend/src/components/AddForm.tsx
index 80af322344ed71c77ad39c2940fc228706f0d7db..8c5ff36c533fdd325ee94b9757e68aa46e365da0 100644
--- a/frontend/src/components/AddForm.tsx
+++ b/frontend/src/components/AddForm.tsx
@@ -48,7 +48,7 @@ const AddForm: React.FC<AddFormProps> = (props) => {
<div className="relative p-4 w-full max-w-md max-h-full">
<div className="relative bg-gray-200 opacity-100 rounded-2xl">
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-lg" >
- <h3 className="text-lg font-semibold text-gray-900">
+ <h3 className="text-lg font-semibold text-gray-900 font-nunito">
Add New Product
</h3>
<button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" onClick={props.onClose}>
@@ -62,22 +62,22 @@ const AddForm: React.FC<AddFormProps> = (props) => {
<form onSubmit={handleSubmit} className="p-4 md:p-5">
<div className="grid gap-4 mb-4 grid-cols-2">
<div className="col-span-2">
- <label htmlFor="name" className="block mb-2 text-sm font-medium text-gray-900 ">Name</label>
+ <label htmlFor="name" className="font-nunito block mb-2 text-sm font-bold text-gray-900 ">Name</label>
<input type="text" name="name" id="name" value={formData.name}
onChange={(e) => handleInputChange(e)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="Type product name" required />
</div>
<div className="col-span-2 sm:col-span-1">
- <label htmlFor="stock" className="block mb-2 text-sm font-medium text-gray-900 ">Stock</label>
+ <label htmlFor="stock" className="font-nunito block mb-2 text-sm font-bold text-gray-900 ">Stock</label>
<input type="number" name="stock" id="stock" value={(formData.stock)}
onChange={handleInputChange} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="0" required />
</div>
<div className="col-span-2 sm:col-span-1">
- <label htmlFor="price" className="block mb-2 text-sm font-medium text-gray-900 ">Price</label>
+ <label htmlFor="price" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Price</label>
<input type="number" name="price" id="price" value={formData.price}
onChange={(e) => handleInputChange(e)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="Rp 0" required />
</div>
<div className="col-span-2">
- <label htmlFor="description" className="block mb-2 text-sm font-medium text-gray-900">Product Description</label>
+ <label htmlFor="description" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Product Description</label>
<textarea
id="description"
name="description"
@@ -90,7 +90,7 @@ const AddForm: React.FC<AddFormProps> = (props) => {
</div>
<div className="col-span-2">
- <label htmlFor="image" className="block mb-2 text-sm font-medium text-gray-900 ">Image URL</label>
+ <label htmlFor="image" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Image URL</label>
<input type="text" name="image" id="image" value={formData.image}
onChange={(e) => handleInputChange(e)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="Insert your image URL" required />
</div>
diff --git a/frontend/src/components/DeletePopUp.tsx b/frontend/src/components/DeletePopUp.tsx
index c168a9f03285bf8981eb5410676fcdb768f8bec0..b9f5451bc2de70bf674070d3acd2996b83f73019 100644
--- a/frontend/src/components/DeletePopUp.tsx
+++ b/frontend/src/components/DeletePopUp.tsx
@@ -53,7 +53,7 @@ const DeletePopUp: React.FC<DeletePopUpProps> = ({ onClose, onConfirm }) => {
<button
data-modal-hide="popup-modal"
type="button"
- className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-full text-sm inline-flex items-center px-5 py-2.5 text-center me-2"
+ className="font-nunito text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-bold rounded-full text-sm inline-flex items-center px-5 py-2.5 text-center me-2"
onClick={() => {
onConfirm();
onClose();
@@ -64,7 +64,7 @@ const DeletePopUp: React.FC<DeletePopUpProps> = ({ onClose, onConfirm }) => {
<button
data-modal-hide="popup-modal"
type="button"
- className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-full border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 "
+ className="font-nunito text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-full border border-gray-200 text-sm font-bold px-5 py-2.5 hover:text-gray-900 focus:z-10 "
onClick={onClose}
>
No, cancel
diff --git a/frontend/src/components/EditForm.tsx b/frontend/src/components/EditForm.tsx
index 8db368770d5704b3303074f714eaed03ecb08d26..02388af669bc776feef921eca8f18c60290f2b18 100644
--- a/frontend/src/components/EditForm.tsx
+++ b/frontend/src/components/EditForm.tsx
@@ -45,7 +45,7 @@ const EditForm: React.FC<EditFormProps> = (props) => {
<div className="relative p-4 w-full max-w-md max-h-full">
<div className="relative bg-gray-200 opacity-100 rounded-2xl">
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-lg" >
- <h3 className="text-lg font-semibold text-gray-900">
+ <h3 className="font-nunito text-lg font-semibold text-gray-900">
Edit Menu Product
</h3>
<button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" onClick={props.onClose}>
@@ -59,22 +59,22 @@ const EditForm: React.FC<EditFormProps> = (props) => {
<form onSubmit={handleSubmit} className="p-4 md:p-5">
<div className="grid gap-4 mb-4 grid-cols-2">
<div className="col-span-2">
- <label htmlFor="name" className="block mb-2 text-sm font-medium text-gray-900 ">Name</label>
+ <label htmlFor="name" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Name</label>
<input type="text" name="name" id="name" value={formData.name}
onChange={(e) => handleInputChange(e)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="Type product name" required />
</div>
<div className="col-span-2 sm:col-span-1">
- <label htmlFor="stock" className="block mb-2 text-sm font-medium text-gray-900 ">Stock</label>
+ <label htmlFor="stock" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Stock</label>
<input type="number" name="stock" id="stock" value={(formData.stock)}
onChange={handleInputChange} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="0" required />
</div>
<div className="col-span-2 sm:col-span-1">
- <label htmlFor="price" className="block mb-2 text-sm font-medium text-gray-900 ">Price</label>
+ <label htmlFor="price" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Price</label>
<input type="number" name="price" id="price" value={formData.price}
onChange={(e) => handleInputChange(e)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="Rp 0" required />
</div>
<div className="col-span-2">
- <label htmlFor="description" className="block mb-2 text-sm font-medium text-gray-900">Product Description</label>
+ <label htmlFor="description" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Product Description</label>
<textarea
id="description"
name="description"
@@ -87,7 +87,7 @@ const EditForm: React.FC<EditFormProps> = (props) => {
</div>
<div className="col-span-2">
- <label htmlFor="image" className="block mb-2 text-sm font-medium text-gray-900 ">Image URL</label>
+ <label htmlFor="image" className="font-nunito block mb-2 text-sm font-bold text-gray-900">Image URL</label>
<input type="text" name="image" id="image" value={formData.image}
onChange={(e) => handleInputChange(e)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-mealshub-blue focus:border-mealshub-blue block w-full p-2.5" placeholder="Insert your image URL" required />
</div>
diff --git a/frontend/src/components/MenuCard.tsx b/frontend/src/components/MenuCard.tsx
index c8b77eca300aa512c9b371a49c97ce660d6dfbef..3d024f962ce5dc3c5b6cfc81ecbf970db3c971aa 100644
--- a/frontend/src/components/MenuCard.tsx
+++ b/frontend/src/components/MenuCard.tsx
@@ -1,12 +1,12 @@
export default function MenuCard(props: any) {
return (
<div>
- <div className="w-60 h-52 bg-white rounded-3xl drop-shadow-lg">
+ <div className="w-60 h-52 bg-white rounded-3xl drop-shadow-lg font-nunito">
<div className="flex flex-col items-center justify-center">
<img className="rounded-3xl w-40 h-24" src={props.image} alt="" />
</div>
<div className="mt-3 px-4">
- <h5 className="mb-2 text-sm font-bold tracking-tight text-gray-900">
+ <h5 className="mb-2 text-md font-extrabold tracking-tight text-gray-900">
{props.name}
</h5>
<div className="flex items-center">
@@ -21,8 +21,8 @@ export default function MenuCard(props: any) {
</div>
<div className="flex flex-col items-center justify-center">
<div>
- <button type="button" className="w-20 h-8 mx-2 my-2 text-white bg-mealshub-blue hover:bg-green-900 focus:outline-none focus:ring-4 focus:ring-green-300 font-lato font-bold rounded-full text-xs" onClick={props.onEditClick}>Edit</button>
- <button type="button" className="w-20 h-8 mx-2 my-2 text-mealshub-red bg-white border-2 border-mealshub-red hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-red-300 font-lato font-bold rounded-full text-xs" onClick={props.onDeleteClick}>Delete</button>
+ <button type="button" className="w-20 h-8 mx-2 my-2 text-white bg-mealshub-blue hover:bg-green-900 focus:outline-none focus:ring-4 focus:ring-green-300 font-nunito font-bold rounded-full text-xs" onClick={props.onEditClick}>Edit</button>
+ <button type="button" className="w-20 h-8 mx-2 my-2 text-mealshub-red bg-white border-2 border-mealshub-red hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-red-300 font-nunito font-bold rounded-full text-xs" onClick={props.onDeleteClick}>Delete</button>
</div>
</div>
</div>
diff --git a/frontend/src/pages/ManageOrderTenant.tsx b/frontend/src/pages/ManageOrderTenant.tsx
index 7e7141c9c1381fb8ee3ebffbf5983af758cc7fdd..0a9e2ef36d68d05afff0497414713e9322ee6dc0 100644
--- a/frontend/src/pages/ManageOrderTenant.tsx
+++ b/frontend/src/pages/ManageOrderTenant.tsx
@@ -255,7 +255,7 @@ export default function OrderDetails() {
<button
onClick={buttonState.onClick}
disabled={buttonState.disabled}
- className={`mt-4 px-6 py-2 w-1/5 text-white text-lg font-semibold shadow-xl rounded-full bg-${buttonState.color}`}
+ className={`mt-4 px-6 py-2 w-1/5 text-white text-lg font-nunito font-semibold shadow-xl rounded-full bg-${buttonState.color}`}
>
{buttonState.label}
</button>