Merge pull request #816 from evershopcommerce/theming

treoden · web-flow · commit 91413c6a97bb · 2025-10-30T15:46:59.000+07:00
Theming
diff --git a/packages/evershop/src/bin/seed/data/pages.json b/packages/evershop/src/bin/seed/data/pages.json
@@ -41,7 +41,9 @@
                   "type": "image",
                   "data": {
                     "file": {
-                      "url": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/banner-one.jpg"
+                      "url": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/banner-one.jpg",
+                      "width": 2400,
+                      "height": 1200
                     },
                     "caption": "Our carefully curated collection",
                     "withBorder": false,
diff --git a/packages/evershop/src/bin/seed/data/products.json b/packages/evershop/src/bin/seed/data/products.json
@@ -107,7 +107,12 @@
     "collections": ["homepage", "best-sellers"],
     "category": "accessories",
     "variant_group": "ceramic-coffee-cup",
-    "images": [],
+    "images": [
+      {
+        "url": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/cup-black.jpg",
+        "isMain": true
+      }
+    ],
     "attributes": [
       {
         "attribute_code": "color",
diff --git a/packages/evershop/src/bin/seed/data/widgets.json b/packages/evershop/src/bin/seed/data/widgets.json
@@ -51,7 +51,7 @@
           "id": "slide-1",
           "image": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/banner-one.jpg",
           "width": 2400,
-          "height": 800,
+          "height": 1200,
           "subText": "Discover our exquisite collection of ceramic and stainless steel products",
           "headline": "Premium Quality Products",
           "buttonLink": "/accessories",
@@ -62,7 +62,7 @@
           "id": "slide-2",
           "image": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/banner-two.jpg",
           "width": 2400,
-          "height": 800,
+          "height": 1200,
           "subText": "Elegant designs that enhance your daily life, from morning coffee to home organization",
           "headline": "Crafted With Care",
           "buttonLink": "/accessories",
diff --git a/packages/evershop/src/components/common/Editor.tsx b/packages/evershop/src/components/common/Editor.tsx
@@ -152,12 +152,12 @@ interface EditorProps {
 
 export function Editor({ rows }: EditorProps) {
   return (
-    <div className="editor__html">
+    <div className="editor__html space-y-6">
       {rows.map((row, index) => {
         const rowClasses = getRowClasses(row.size);
         return (
           <div
-            className={`row__container mt-7 grid ${rowClasses} grid-cols-1 gap-5`}
+            className={`row__container grid ${rowClasses} grid-cols-1 gap-5`}
             key={index}
           >
             {row.columns.map((column, index) => {
diff --git a/packages/evershop/src/components/frontStore/CouponForm.tsx b/packages/evershop/src/components/frontStore/CouponForm.tsx
@@ -29,7 +29,7 @@ export function CouponForm() {
       {(state: CouponState, actions: CouponActions) => (
         <div className="coupon-form">
           <Form form={form} method="POST" submitBtn={false}>
-            <div className="flex justify-between gap-7">
+            <div className="flex justify-between gap-3">
               <div className="w-4/5">
                 <InputField
                   name="coupon"
@@ -61,6 +61,7 @@ export function CouponForm() {
                     }
                   }}
                   variant={state.appliedCoupon ? 'danger' : 'primary'}
+                  className="text-base"
                 />
               </div>
             </div>
diff --git a/packages/evershop/src/components/frontStore/cart/DefaultCartItemList.tsx b/packages/evershop/src/components/frontStore/cart/DefaultCartItemList.tsx
@@ -39,17 +39,19 @@ export const DefaultCartItemList: React.FC<CartItemsTableProps> = ({
           : row.productPrice?.text;
         return (
           <div className="flex justify-start gap-4">
-            {row.thumbnail ? (
-              <Image
-                src={row.thumbnail}
-                alt={row.productName}
-                width={80}
-                height={80}
-                className="rounded-md"
-              />
-            ) : (
-              <ProductNoThumbnail />
-            )}
+            <div>
+              {row.thumbnail ? (
+                <Image
+                  src={row.thumbnail}
+                  alt={row.productName}
+                  width={80}
+                  height={80}
+                  className="rounded-md"
+                />
+              ) : (
+                <ProductNoThumbnail width={80} height={80} />
+              )}
+            </div>
             <div className="font-medium flex flex-col gap-1 items-start h-full">
               <span className="font-semibold">{row.productName}</span>
               {row.variantOptions?.map((option) => (
diff --git a/packages/evershop/src/components/frontStore/catalog/ProductSingleForm.tsx b/packages/evershop/src/components/frontStore/catalog/ProductSingleForm.tsx
@@ -76,14 +76,14 @@ export function ProductSingleForm() {
                               }
                             });
                           }}
-                          className="w-full py-3 text-lg font-medium !rounded-full mt-8"
+                          className="w-full py-3 text-lg font-base !rounded-full mt-8"
                         />
                       )}
                       {state.isInStock === false && (
                         <Button
                           title={_('SOLD OUT')}
                           onAction={() => {}}
-                          className="w-full py-3 text-lg font-medium !rounded-full"
+                          className="w-full py-3 text-lg font-base !rounded-full"
                         />
                       )}
                     </>
diff --git a/packages/evershop/src/modules/base/pages/frontStore/all/global.scss b/packages/evershop/src/modules/base/pages/frontStore/all/global.scss
@@ -50,12 +50,6 @@ html {
     padding: 0.625rem 0.75rem;
   }
 
-  .button {
-    padding: 0.2rem 1.25rem;
-    font-weight: 400;
-    border-radius: 2px;
-  }
-
   main.content {
     padding-top: 2rem;
     padding-bottom: 2rem;
@@ -68,6 +62,13 @@ body {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+
+@media (max-width: 640px) {
+  .slide__wrapper {
+    height: 30rem !important;
+  }
+}
+
 @media screen and (max-width: 767px) {
   $font-size-base: $font-size-sm;
   body {
diff --git a/packages/evershop/src/modules/catalog/components/CollectionProducts.tsx b/packages/evershop/src/modules/catalog/components/CollectionProducts.tsx
@@ -26,14 +26,18 @@ export default function CollectionProducts({
   return (
     <div className="pt-7 collection__products__widget">
       <div className="page-width">
-        <h3 className="mt-7 mb-7 text-center uppercase h5 tracking-widest">
+        <h3 className="text-center uppercase h5 tracking-widest">
           {collection?.name}
         </h3>
-        {collection?.description && <Editor rows={collection?.description} />}
-        <ProductList
-          products={collection?.products?.items}
-          gridColumns={countPerRow}
-        />
+        <div className="flex justify-center">
+          {collection?.description && <Editor rows={collection?.description} />}
+        </div>
+        <div className="mt-3">
+          <ProductList
+            products={collection?.products?.items}
+            gridColumns={countPerRow}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/packages/evershop/src/modules/checkout/pages/frontStore/all/MiniCartIcon.tsx b/packages/evershop/src/modules/checkout/pages/frontStore/all/MiniCartIcon.tsx
@@ -5,7 +5,9 @@ interface MiniCartIconProps {
   cartUrl: string;
 }
 export default function MiniCartIcon({ cartUrl }: MiniCartIconProps) {
-  return <MiniCart cartUrl={cartUrl} />;
+  return (
+    <MiniCart className="flex justify-center items-center" cartUrl={cartUrl} />
+  );
 }
 
 export const layout = {

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,9 @@ interface MiniCartIconProps {`
`5`	`5`	`cartUrl: string;`
`6`	`6`	`}`
`7`	`7`	`export default function MiniCartIcon({ cartUrl }: MiniCartIconProps) {`
`8`		`- return <MiniCart cartUrl={cartUrl} />;`
	`8`	`+ return (`
	`9`	`+ <MiniCart className="flex justify-center items-center" cartUrl={cartUrl} />`
	`10`	`+ );`
`9`	`11`	`}`
`10`	`12`
`11`	`13`	`export const layout = {`