Change class name

4 files changed, 11 insertions, 12 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index 337483bb..fb0e56a1 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -18,9 +18,7 @@ export default function Header({ title }) {
   const [isMenuActive, setIsMenuActive] = useState(false);
 
   useEffect(() => {
-    if (q) {
-      searchQueryRef.current.blur();
-    }
+    if (q) searchQueryRef.current.blur();
   }, [q])
 
   const openMenu = () => setIsMenuActive(true);
@@ -40,7 +38,7 @@ export default function Header({ title }) {
       <div className={isMenuActive ? 'menu-wrapper active' : 'menu-wrapper'}>
         <div className="flex gap-x-2 items-center">
           <Link href="/login" className="w-full py-2 btn-light">Masuk</Link>
-          <Link href="/register" className="w-full py-2 btn-primary">Daftar</Link>
+          <Link href="/register" className="w-full py-2 btn-yellow">Daftar</Link>
         </div>
         <div className="flex flex-col gap-y-4 mt-5">
           <Link className="flex w-full font-normal text-gray-800" href="/shop/brands">
@@ -86,7 +84,7 @@ export default function Header({ title }) {
               name="q" 
               onChange={(e) => setSearchQuery(e.target.value)} 
               value={searchQuery} 
-              className="form-input rounded-r-none border-r-0 focus:outline-none" 
+              className="form-input rounded-r-none border-r-0" 
               placeholder="Ketikan nama, merek, part number"
             />
             <button 
diff --git a/src/pages/404.js b/src/pages/404.js
index 83993f61..dc7259b2 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -7,14 +7,14 @@ export default function PageNotFound() {
   return (
     <>
       <Header title="Halaman Tidak Ditemukan - Indoteknik" />
-      <main>
+      <main className="pb-8">
         <Image src={PageNotFoundImage} alt="Halaman Tidak Ditemukan - Indoteknik" className="w-full" />
         <p className="mt-3 h1 text-center">Halaman tidak ditemukan</p>
-        <div className="mt-10 text-center">
-          <Link href="/" className="btn-primary">
+        <div className="mt-6 flex px-4 gap-x-3">
+          <Link href="/" className="btn-yellow bg-transparent text-yellow-900 flex-1">
             Kembali ke beranda
           </Link>
-          <a href="https://send.whatsapp.com" className="block mt-6">
+          <a href="https://send.whatsapp.com" className="btn-yellow flex-1">
             Tanya admin
           </a>
         </div>
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index e601d8c0..f96aba34 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -130,7 +130,7 @@ export default function ProductDetail({product}) {
 
           <div className="flex gap-x-2 mt-2">
             <button className="btn-light w-full" >+ Quotation</button>
-            <button className="btn-primary w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button>
+            <button className="btn-yellow w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button>
           </div>
 
           <div className="mt-10">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 4d8c7971..6ed6582b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -81,10 +81,11 @@ html, body {
             bg-transparent
             w-full
             leading-none
+            focus:outline-none
         ;
     }
 
-    .btn-primary {
+    .btn-yellow {
         @apply 
             block
             w-fit
@@ -93,7 +94,7 @@ html, body {
             border-yellow-900
             rounded
             border
-            text-white
+            text-gray-900
             text-center
             disabled:bg-yellow-700
             disabled:border-yellow-700