chore: updates in kendo-react-ee-commerce-astro-app

Author: silviyaboteva

examples/kendo-react-e-commerce-astro-app/src/components/CardsList.tsx

@@ -39,7 +39,7 @@ export const CardsList: React.FC<CardListProps> = (props) => {
           return (
             <div
               key={index}
-              className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
+              className={`${props.layout === 'grid' ? 'k-col-span-4' : 'k-col-span-3'} k-text-center k-border k-border-primary k-gap-1 k-pb-5`}
             >
               {item.status ? (
                 <BadgeContainer>
@@ -63,14 +63,15 @@ export const CardsList: React.FC<CardListProps> = (props) => {
                         horizontal: 'start',
                         vertical: 'top',
                       }}
+                      style={{zIndex: 1}}
                     >
                       {t.statuses[item.status] || item.status}
                     </Badge>
                   )}
                 </BadgeContainer>
               ) : (
                 <div
-                  className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
+                  className="k-d-inline-block k-justify-content-center k-align-items-center k-rounded-lg"
                   style={{
                     backgroundImage: `url(${item.img})`,
                     width: '278px',

examples/kendo-react-e-commerce-astro-app/src/components/FilterComponent.tsx

@@ -8,6 +8,7 @@ import { selectedLanguage } from "../helpers/languageStore";
 import enMessages from "../data/messages/en";
 import frMessages from "../data/messages/fr";
 import esMessages from "../data/messages/es";
+import { Button } from "@progress/kendo-react-buttons";
 
 const translations = {
   en: enMessages,
@@ -28,7 +29,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
   const t = getTranslations(language); 
 
   const [categoryValue, setCategoryValue] = useState<string[]>([]);
-  const [statusValue, setStatusValue] = useState<string>(t.statusesData[0]);
+  const [statusValue, setStatusValue] = useState<string>(t.statusesData[1]);
   const [materialValue, setMaterialValue] = useState<string>(t.materialPlaceholder);
 
   const chips = t.categoriesData || [];
@@ -37,7 +38,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
 
   useEffect(() => {
     setCategoryValue([]);
-    setStatusValue(t.statusesData[0]);
+    setStatusValue(t.statusesData[1]);
     setMaterialValue(t.materialPlaceholder);
     updateUI({ filter: undefined, sort: undefined }); 
   }, [language, t, updateUI]);
@@ -87,7 +88,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
 
   const clearFilters = () => {
     setCategoryValue([]);
-    setStatusValue(t.statusesData[0]);
+    setStatusValue(t.statusesData[1]);
     setMaterialValue(t.materialPlaceholder);
     updateUI({ filter: undefined, sort: undefined });
   };
@@ -116,12 +117,12 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
           <SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
         </span>
         <span>
-          <DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
+          <DropDownList data={statuses} value={statusValue} onChange={onStatusChange} style={{minWidth: 150}} />
         </span>
       </span>
-      <button className="k-button k-button-flat" onClick={clearFilters}>
+      <Button fillMode="flat" onClick={clearFilters}>
         {t.clearFiltersButton}
-      </button>
+      </Button>
     </section>
   );
 };

examples/kendo-react-e-commerce-astro-app/src/components/Footer.tsx

@@ -49,21 +49,15 @@ const Footer: React.FC = () => {
             <a href="/" className="k-d-block k-mb-4 k-text-align-center">
               <img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
             </a>
-            <p className="k-m-0">
-              {t.cookiesText}
-            </p>
-            <p className="k-m-0">
-              {t.rightsReservedText}
-            </p>
-            <p className="k-mt-4">
-              {t.subscribeText}
-            </p>
+            <p>{t.cookiesText}</p>
+            <p>{t.rightsReservedText}</p>
+            <p>{t.subscribeText}</p>
             <Label editorId="email" className="k-sr-only">
               {t.emailPlaceholder}
             </Label>
             <TextBox
               placeholder={t.emailPlaceholder}
-              className="k-w-full"
+              className="k-w-full !k-mb-3"
               suffix={() => (
                 <InputSuffix>
                   <InputSeparator />
@@ -73,7 +67,7 @@ const Footer: React.FC = () => {
                 </InputSuffix>
               )}
             />
-            <p className="k-mt-6">{t.followUsText}</p>
+            <p>{t.followUsText}</p>
             <div className="k-d-flex k-gap-2 k-align-items-center">
               <p
                 className="k-d-flex k-align-items-center"

examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx

@@ -58,7 +58,7 @@ const Header: React.FC = () => {
           { text: t.menuRings, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Rings" },
           { text: t.menuEarrings, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Earrings" },
           { text: t.menuWatches, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Watches" },
-          { text: t.menuAll, url: "/kendo-react/kendo-react-e-commerce-astro-app/products" },
+          { text: t.menuNecklaces, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Necklaces" },
         ],
       },
       {
@@ -185,6 +185,7 @@ const Header: React.FC = () => {
               onItemClick={handleThemeChange}
             />
             <Switch
+              className="switch-width"
               onLabel={t.adminLabel}
               offLabel={t.clientLabel}
               checked={isAdminValue}

examples/kendo-react-e-commerce-astro-app/src/layouts/Layout.astro

@@ -58,6 +58,9 @@
        top: auto;
        z-index: 1000; 
       }
+      .switch-width {
+        width: 72px !important;
+      }
     </style>
     <slot name="head" />
   </head>