Add new breakpoint

stasgm · Jul 9, 2023 · 7d8f7f0 · 7d8f7f0
1 parent 38832a2
commit 7d8f7f0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 34 deletions.
diff --git a/apps/web/src/components/order-info.tsx b/apps/web/src/components/order-info.tsx
@@ -8,7 +8,7 @@ interface IProps {
 export default function Form(props: IProps) {
   const { name, phoneNumber, setName, setPhoneNumber } = props;
   return (
-    <form className="w-full flex items-center bg-gray-800 rounded-md max-w-xl mx-auto px-7 mt-4 sm:mt-12 h-10 sm:h-12 gap-x-2 flex-wrap">
+    <form className="flex w-full items-center bg-gray-800 rounded-md max-w-xl mx-auto xs:px-7 px-2 mt-4 sm:mt-12 h-10 sm:h-12 gap-x-2 xs:flex-nowrap flex-wrap">
       <input
         type="text"
         className="flex-1 border-none text-sm sm:text-base bg-gray-800 text-gray-100 focus:outline-none focus:ring-0 placeholder:text-slate-600"

diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
@@ -45,35 +45,31 @@ export default function Menu() {
         <main className="flex-1 bg-gray-900 text-gray-100">
           <Container>
             {menu?.lines.length ? (
-              <ul className="-mt-14 sm:-mt-28 rounded-t-md overflow-hidden">
-                {menu.lines.map((line) => (
-                  <li key={line.id}>
-                    <MenuLine
-                      item={line}
-                      quantity={order.productSelections[line.product.id]?.quantity ?? 0}
-                      key={line.id}
-                      onIncreaseQuantityClicked={() => updateQuantity(line, 'increase')}
-                      onDecreaseQuantityClicked={() => updateQuantity(line, 'decrease')}
-                      onResetQuantityClicked={() => removeProduct(line)}
-                    />
-                  </li>
-                ))}
-              </ul>
+              <>
+                <ul className="-mt-14 sm:-mt-28 rounded-t-md overflow-hidden">
+                  {menu.lines.map((line) => (
+                    <li key={line.id}>
+                      <MenuLine
+                        item={line}
+                        quantity={order.productSelections[line.product.id]?.quantity ?? 0}
+                        key={line.id}
+                        onIncreaseQuantityClicked={() => updateQuantity(line, 'increase')}
+                        onDecreaseQuantityClicked={() => updateQuantity(line, 'decrease')}
+                        onResetQuantityClicked={() => removeProduct(line)}
+                      />
+                    </li>
+                  ))}
+                </ul>
+                <Nav
+                  orderPriceAmount={order.totalAmount}
+                  productAmount={order.totalProductQuantity}
+                  placeOrder={placeOrder}
+                  resetOrder={resetOrder}
+                />
+              </>
             ) : (
-              <ul className="-mt-16 sm:-mt-28 rounded-t-md overflow-hidden">
-                <li>
-                  <div className="flex justify-around items-center bg-gray-800 py-4 px-6 border-b border-gray-600">
-                    Loading...
-                  </div>
-                </li>
-              </ul>
+              <div className="flex justify-around items-center py-4 px-6 text-gray-100">Loading menu ...</div>
             )}
-            <Nav
-              orderPriceAmount={order.totalAmount}
-              productAmount={order.totalProductQuantity}
-              placeOrder={placeOrder}
-              resetOrder={resetOrder}
-            />
           </Container>
         </main>
         <footer className="bg-gray-900 text-gray-500 text-center">

diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
@@ -1,11 +1,17 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 module.exports = {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+    screens: {
+      xs: '475px',
+      ...defaultTheme.screens,
+    },
     extend: {
       colors: {
         'check-start': 'hsl(192, 100%, 67%)',
@@ -14,12 +20,7 @@ module.exports = {
       fontFamily: {
         body: ['Josefin Sans', 'sans-serif'],
       },
-      backgroundImage: {
-        'mobile-dark': "url('/bg-mobile-dark.jpg')",
-        'desktop-dark': "url('/bg-desktop-dark.jpg')",
-        'desktop-dark-2': "url('/bg-desktop-dark-2.jpg')",
-        'desktop-dark-3': "url('/bg-desktop-dark-3.jpg')",
-      },
+      backgroundImage: {},
     },
   },
   plugins: [],