Merge pull request #566 from evershopcommerce/dev

Dev
evershopcommerce · Jun 15, 2024 · 71aa0a9 · 71aa0a9
2 parents 9b29d1d + e2c7bb1
commit 71aa0a9
Show file tree

Hide file tree

Showing 160 changed files with 470 additions and 534 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,6 +2,4 @@
 /*
 
 # Except packages:
-!/packages
-!/themes
-!/extensions
+!/packages
diff --git a/packages/evershop/src/components/admin/catalog/productEdit/category/CategoryItem.jsx b/packages/evershop/src/components/admin/catalog/productEdit/category/CategoryItem.jsx
@@ -36,7 +36,7 @@ function CategoryItem({ category, selectedCategory, setSelectedCategory }) {
   }
   return (
     <li>
-      <div className="flex justify-start gap-1 items-center">
+      <div className="flex justify-start gap-4 items-center">
         {!category.children && (
           <a
             href="#"

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/category/CategoryTree.jsx b/packages/evershop/src/components/admin/catalog/productEdit/category/CategoryTree.jsx
@@ -32,28 +32,28 @@ function CategoryTree({ selectedCategory, setSelectedCategory }) {
 
   if (fetching) {
     return (
-      <div className="category-tree-container absolute top-5 left-0 right-0 border rounded">
+      <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
         <Spinner width={30} height={30} />
       </div>
     );
   }
   if (error) {
     return (
-      <div className="category-tree-container absolute top-5 left-0 right-0 border rounded">
+      <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
         <p className="text-critical">{error.message}</p>
       </div>
     );
   }
   if (data.categories.items.length === 0) {
     return (
-      <div className="category-tree-container absolute top-5 left-0 right-0 border rounded">
+      <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
         <div>There is no category</div>
       </div>
     );
   }
 
   return (
-    <div className="category-tree-container absolute top-5 left-0 right-0 border rounded">
+    <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
       <ul className="category-tree">
         {data.categories.items.map((category) => (
           <CategoryItem

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/variants/CreateVariant.jsx b/packages/evershop/src/components/admin/catalog/productEdit/variants/CreateVariant.jsx
@@ -20,7 +20,7 @@ export function CreateVariant({
 
   return (
     <div>
-      <div className="mt-2">
+      <div className="mt-8">
         <Button
           title="Add Variant"
           onAction={() => {
@@ -46,7 +46,7 @@ export function CreateVariant({
                   </Card.Session>
                   <Card.Session>
                     <div className="flex justify-end">
-                      <div className="grid grid-cols-2 gap-1">
+                      <div className="grid grid-cols-2 gap-4">
                         <SubmitButton
                           productId={productId}
                           attributes={variantGroup.attributes}

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/variants/CreateVariantGroup.jsx b/packages/evershop/src/components/admin/catalog/productEdit/variants/CreateVariantGroup.jsx
@@ -114,7 +114,7 @@ export function CreateVariantGroup({ createVariantGroupApi, setGroup }) {
                 }}
               />
             ))}
-            <div className="mt-2">
+            <div className="mt-8">
               <a
                 className="text-interactive hover:underline"
                 href="#"

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/variants/EditVariant.jsx b/packages/evershop/src/components/admin/catalog/productEdit/variants/EditVariant.jsx
@@ -45,7 +45,7 @@ export function EditVariant({
             </Card.Session>
             <Card.Session>
               <div className="flex justify-end">
-                <div className="grid grid-cols-2 gap-1">
+                <div className="grid grid-cols-2 gap-4">
                   <Button
                     title="Save"
                     variant="primary"

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/variants/New.jsx b/packages/evershop/src/components/admin/catalog/productEdit/variants/New.jsx
@@ -11,8 +11,8 @@ export function New({ createVariantGroupApi, setGroup }) {
         {action === undefined && (
           <div>
             <div className="justify-center text-center">
-              <div className="mb-4">
-                <span className="pr-1">
+              <div className="mb-16">
+                <span className="pr-4">
                   This product has some variants like color or size?
                 </span>
                 <a

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/variants/Search.jsx b/packages/evershop/src/components/admin/catalog/productEdit/variants/Search.jsx
@@ -30,7 +30,7 @@ export function Search({ addVariant, variants }) {
   };
 
   return (
-    <div className="flex justify-between mt-1">
+    <div className="flex justify-between mt-4">
       <div className="self-center">
         <div className="autocomplete-search">
           <Input

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/variants/SearchModal.jsx b/packages/evershop/src/components/admin/catalog/productEdit/variants/SearchModal.jsx
@@ -174,7 +174,7 @@ export function SearchModal({ keyword, variants, addVariant, searchAPI }) {
           </div>
         )}
         {potentialVariants.length <= 0 && (
-          <div className="flex justify-center p-1">
+          <div className="flex justify-center p-4">
             There is no product to show
           </div>
         )}

diff --git a/packages/evershop/src/components/admin/catalog/productEdit/variants/VariantModal.jsx b/packages/evershop/src/components/admin/catalog/productEdit/variants/VariantModal.jsx
@@ -62,8 +62,8 @@ export function VariantModal({
     return <p className="text-critical">{error.message}</p>;
   }
   return (
-    <div className="variant-item pb-15 border-b border-solid border-divider mb-15 last:border-b-0 last:pb-0">
-      <div className="grid grid-cols-2 gap-x-1">
+    <div className="variant-item pb-6 border-b border-solid border-divider mb-6 last:border-b-0 last:pb-0">
+      <div className="grid grid-cols-2 gap-x-4">
         <div className="col-span-1">
           <ProductMediaManager
             id="images"
@@ -72,9 +72,9 @@ export function VariantModal({
           />
         </div>
         <div className="col-span-1">
-          <div className="grid grid-cols-2 gap-x-1 border-b border-divider pb-15 mb-15">
+          <div className="grid grid-cols-2 gap-x-4 border-b border-divider pb-6 mb-6">
             {data?.attributes?.items.map((a, index) => (
-              <div key={a.attributeId} className="mt-1 col">
+              <div key={a.attributeId} className="mt-4 col">
                 <div>
                   <label>{a.attributeName}</label>
                 </div>
@@ -106,7 +106,7 @@ export function VariantModal({
               </div>
             ))}
           </div>
-          <div className="grid grid-cols-3 gap-x-1 border-b border-divider pb-15 mb-15">
+          <div className="grid grid-cols-3 gap-x-4 border-b border-divider pb-6 mb-6">
             <div>
               <div>SKU</div>
               <Field
@@ -128,7 +128,7 @@ export function VariantModal({
               />
             </div>
           </div>
-          <div className="grid grid-cols-3 gap-x-1">
+          <div className="grid grid-cols-3 gap-x-4">
             <div>
               <div>Status</div>
               <Field

diff --git a/packages/evershop/src/components/admin/catalog/productGrid/rows/ThumbnailRow.jsx b/packages/evershop/src/components/admin/catalog/productGrid/rows/ThumbnailRow.jsx
@@ -5,7 +5,7 @@ export default function ThumbnailRow({ src, name }) {
   return (
     <td>
       <div
-        className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center"
+        className="grid-thumbnail text-border border border-divider p-3 rounded flex justify-center"
         style={{ width: '6rem', height: '6rem' }}
       >
         {src && <img className="self-center" src={src} alt={name} />}

diff --git a/packages/evershop/src/components/admin/checkout/shippingSetting/Method.jsx b/packages/evershop/src/components/admin/checkout/shippingSetting/Method.jsx
@@ -10,11 +10,11 @@ function Method({ method, getZones }) {
   return (
     <>
       <>
-        <td className="border-none py-1">{method.name}</td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">{method.name}</td>
+        <td className="border-none py-4">
           {method.isEnabled ? 'Enabled' : 'Disabled'}
         </td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">
           {method.cost?.text || (
             <a
               href="#"
@@ -28,14 +28,14 @@ function Method({ method, getZones }) {
             </a>
           )}
         </td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">
           {method.conditionType
             ? `${method.min || 0} <= ${method.conditionType} <= ${
                 method.max || '∞'
               }`
             : 'None'}
         </td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">
           <a
             href="#"
             className="text-interactive"
@@ -48,7 +48,7 @@ function Method({ method, getZones }) {
           </a>
           <a
             href="#"
-            className="text-critical ml-2"
+            className="text-critical ml-8"
             onClick={async (e) => {
               e.preventDefault();
               try {

diff --git a/packages/evershop/src/components/admin/checkout/shippingSetting/MethodForm.jsx b/packages/evershop/src/components/admin/checkout/shippingSetting/MethodForm.jsx
@@ -29,7 +29,7 @@ function Condition({ method }) {
   const [type, setType] = React.useState(method?.conditionType || 'price');
   return (
     <div>
-      <div className="mb-1">
+      <div className="mb-4">
         <Radio
           name="condition_type"
           options={[
@@ -40,7 +40,7 @@ function Condition({ method }) {
           value={type}
         />
       </div>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-2 gap-8">
         <div>
           <Field
             name="min"
@@ -175,7 +175,7 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
               value={shippingMethod}
             />
           ) : (
-            <div className="flex gap-1 justify-start items-center">
+            <div className="flex gap-4 justify-start items-center">
               <Input
                 name="name"
                 type="text"
@@ -293,7 +293,7 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
           {hasCondition && <Condition method={method} />}
         </Card.Session>
         <Card.Session>
-          <div className="flex justify-end gap-1">
+          <div className="flex justify-end gap-4">
             <Button
               title="Cancel"
               variant="secondary"

diff --git a/packages/evershop/src/components/admin/checkout/shippingSetting/Methods.jsx b/packages/evershop/src/components/admin/checkout/shippingSetting/Methods.jsx
@@ -7,7 +7,7 @@ import MethodForm from '@components/admin/checkout/shippingSetting/MethodForm';
 export function Methods({ getZones, methods, addMethodApi }) {
   const modal = useModal();
   return (
-    <div className="my-2">
+    <div className="my-8">
       <table className="border-collapse divide-y">
         <thead>
           <tr>
@@ -19,12 +19,12 @@ export function Methods({ getZones, methods, addMethodApi }) {
           </tr>
         </thead>
         {methods.map((method) => (
-          <tr key={method.methodId} className="border-divider py-2">
+          <tr key={method.methodId} className="border-divider py-8">
             <Method method={method} getZones={getZones} />
           </tr>
         ))}
       </table>
-      <div className="mt-1">
+      <div className="mt-4">
         <a
           href="#"
           className="text-interactive"

diff --git a/packages/evershop/src/components/admin/checkout/shippingSetting/PriceBasedPrice.jsx b/packages/evershop/src/components/admin/checkout/shippingSetting/PriceBasedPrice.jsx
@@ -11,7 +11,7 @@ export default function PriceBasedPrice({ lines }) {
     }))
   );
   return (
-    <div className="my-2">
+    <div className="my-8">
       <table className="border-collapse divide-y">
         <thead>
           <tr>
@@ -23,7 +23,7 @@ export default function PriceBasedPrice({ lines }) {
         <tbody>
           {rows.map((row, index) => (
             // Create a random key for each row
-            <tr key={row.key} className="border-divider py-2">
+            <tr key={row.key} className="border-divider py-8">
               <td className="border-none">
                 <Field
                   name={`price_based_cost[${index}][min_price]`}

diff --git a/packages/evershop/src/components/admin/checkout/shippingSetting/WeightBasedPrice.jsx b/packages/evershop/src/components/admin/checkout/shippingSetting/WeightBasedPrice.jsx
@@ -11,7 +11,7 @@ export default function WeightBasedPrice({ lines }) {
     }))
   );
   return (
-    <div className="my-2">
+    <div className="my-8">
       <table className="border-collapse divide-y">
         <thead>
           <tr>
@@ -23,7 +23,7 @@ export default function WeightBasedPrice({ lines }) {
         <tbody>
           {rows.map((row, index) => (
             // Create a random key for each row
-            <tr key={row.key} className="border-divider py-2">
+            <tr key={row.key} className="border-divider py-8">
               <td className="border-none">
                 <Field
                   name={`weight_based_cost[${index}][min_weight]`}

diff --git a/packages/evershop/src/components/admin/checkout/shippingSetting/Zone.jsx b/packages/evershop/src/components/admin/checkout/shippingSetting/Zone.jsx
@@ -13,9 +13,9 @@ function Zone({ zone, countries, getZones }) {
   return (
     <Card.Session
       title={
-        <div className="flex justify-between items-center gap-2">
+        <div className="flex justify-between items-center gap-8">
           <div>{zone.name}</div>
-          <div className="flex justify-between gap-2">
+          <div className="flex justify-between gap-8">
             <a
               href="#"
               className="text-interactive"
@@ -58,11 +58,11 @@ function Zone({ zone, countries, getZones }) {
       }
     >
       <div className="divide-y border rounded border-divider">
-        <div className="flex justify-start items-center border-divider mt-2">
-          <div className="p-2">
+        <div className="flex justify-start items-center border-divider mt-8">
+          <div className="p-8">
             <MapIcon width={25} height={25} fill="#008060" />
           </div>
-          <div className="flex-grow px-1">
+          <div className="flex-grow px-4">
             <div>
               <b>{zone.country?.name || 'Worldwide'}</b>
             </div>
@@ -75,8 +75,8 @@ function Zone({ zone, countries, getZones }) {
             </div>
           </div>
         </div>
-        <div className="flex justify-start items-center border-divider mt-2">
-          <div className="flex-grow px-1">
+        <div className="flex justify-start items-center border-divider mt-8">
+          <div className="flex-grow px-4">
             <Methods
               methods={zone.methods}
               getZones={getZones}

diff --git a/packages/evershop/src/components/admin/checkout/shippingSetting/ZoneForm.jsx b/packages/evershop/src/components/admin/checkout/shippingSetting/ZoneForm.jsx
@@ -84,7 +84,7 @@ function ZoneForm({
           />
         </Card.Session>
         <Card.Session>
-          <div className="flex justify-end gap-1">
+          <div className="flex justify-end gap-4">
             <Button title="Cancel" variant="secondary" onAction={closeModal} />
             <Button
               title="Save"

diff --git a/packages/evershop/src/components/admin/cms/Card.jsx b/packages/evershop/src/components/admin/cms/Card.jsx
@@ -9,7 +9,7 @@ function Card({ title, actions = [], subdued = false, children }) {
         <div className="flex justify-between card-header">
           {title && <h2 className="card-title">{title}</h2>}
           {actions.length > 0 && (
-            <div className="flex space-x-075">
+            <div className="flex space-x-3">
               {actions.map((action, index) => {
                 const className = {
                   primary: 'text-primary',
@@ -69,10 +69,10 @@ const Session = function Session({ actions = [], title, children }) {
   return (
     <div className="card-section border-b box-border">
       {(title || actions.length > 0) && (
-        <div className="flex justify-between card-section-header mb-1">
+        <div className="flex justify-between card-section-header mb-4">
           {title && <h3 className="card-session-title">{title}</h3>}
           {actions.length > 0 && (
-            <div className="flex space-x-075">
+            <div className="flex space-x-3">
               {actions.map((action, index) => {
                 const className = {
                   primary: 'text-primary',

diff --git a/packages/evershop/src/components/admin/cms/PageHeading.jsx b/packages/evershop/src/components/admin/cms/PageHeading.jsx
@@ -8,7 +8,7 @@ function BreadcrumbIcon({ backUrl }) {
   return (
     <a
       href={backUrl}
-      className="breadcrum-icon border block border-border rounded mr-075"
+      className="breadcrum-icon border block border-border rounded mr-3"
     >
       <span className="flex items-center justify-center">
         <svg
@@ -51,7 +51,7 @@ function PageHeading({ backUrl, heading }) {
 
   return (
     <div className="page-heading flex justify-between items-center">
-      <div className="flex justify-start space-x-1 items-center">
+      <div className="flex justify-start space-x-4 items-center">
         <Area
           id="pageHeadingLeft"
           noOuter
@@ -75,7 +75,7 @@ function PageHeading({ backUrl, heading }) {
           ]}
         />
       </div>
-      <div className="flex justify-end space-x-1 items-center">
+      <div className="flex justify-end space-x-4 items-center">
         <Area id="pageHeadingRight" noOuter coreComponents={[]} />
       </div>
     </div>