chore: updates in ecommerce-jewellery-store app

Author: silviyaboteva

examples/ecommerce-jewellery-store/src/components/CardsList.tsx

@@ -17,7 +17,7 @@ export const CardsList = (props: CardListProps) => {
         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 !== null ? (
               <BadgeContainer>
@@ -41,13 +41,14 @@ export const CardsList = (props: CardListProps) => {
                     horizontal: "start",
                     vertical: "top",
                   }}
+                  style={{zIndex: 1}}
                 >
                   {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/ecommerce-jewellery-store/src/components/FilterComponent.tsx

@@ -5,6 +5,7 @@ import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
 import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
 import { useCategoriesContext } from "../helpers/CategoriesContext";
 import { useLanguageContext } from "../helpers/LanguageContext";
+import { Button } from "@progress/kendo-react-buttons";
 
 interface FilterComponentProps {
   updateUI: (state: State) => void;
@@ -15,7 +16,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
   const { t } = useLanguageContext();
 
   const [categoryValue, setCategoryValue] = React.useState<string[]>([]);
-  const [statusValue, setStatusValue] = React.useState<string>(t.statusRecommended);
+  const [statusValue, setStatusValue] = React.useState<string>(t.statusesData[1]);
   const [materialValue, setMaterialValue] = React.useState<string>(t.materialPlaceholder);
 
   const chips = t.categoriesData || [];
@@ -99,7 +100,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
 
   const clearFilters = () => {
     setCategoryValue([]);
-    setStatusValue(t.statusRecommended);
+    setStatusValue(t.statusesData[1]);
     setMaterialValue(t.materialPlaceholder);
     setSelectedCategory(null);
     updateUI({ filter: undefined, sort: undefined });
@@ -129,10 +130,10 @@ 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}>{t.clearFiltersButton}</button>
+      <Button fillMode="flat" onClick={clearFilters}>{t.clearFiltersButton}</Button>
     </section>
   );
 };

examples/ecommerce-jewellery-store/src/components/Footer.tsx

@@ -21,21 +21,21 @@ const Footer: React.FC = () => {
           <a href="#" className="k-d-block k-mb-4 k-text-align-center">
             <img src={viloraLogo} 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 />
                 <Button themeColor="primary">{t.subscribeButtonText}</Button>
               </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" style={{ gap: '10px' }}>
               <SvgIcon icon={facebookIcon} size="xlarge" /> Facebook

examples/ecommerce-jewellery-store/src/components/Header.tsx

@@ -53,12 +53,8 @@ const Header: React.FC = () => {
     }
 
     const selectedCategory = selectedItem.text;
-    if (selectedCategory === t.all) {
-      setSelectedCategory(null);
-    } else {
       setSelectedCategory(selectedCategory ?? null);
       navigate("/category");
-    }
   };
 
   const handleLanguageMenuSelect = (event: MenuSelectEvent) => {
@@ -98,7 +94,7 @@ const Header: React.FC = () => {
           className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
           style={{ paddingLeft: "50px" }}
         >
-          <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
+          <a href="#" onClick={(e) => { e.preventDefault(); navigate('/'); }} className="k-d-sm-flex" style={{ marginRight: "50px" }}>
             <img src={viloraLogo} alt="Logo" />
           </a>
           <Menu items={translatedItems} onSelect={handleMenuSelect} />

examples/ecommerce-jewellery-store/src/data/items.ts

@@ -5,7 +5,7 @@ const items = [
     },
     {
       "text": "Jewelry",
-      "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }],
+      "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earrings" }, { "text": "Watches" },{ "text": "Necklaces" }],
     },
     {
       "text": "Contacts",

examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx

@@ -86,12 +86,14 @@ export const AllProductsListView = () => {
             <Button
               fillMode="flat"
               svgIcon={gridLayoutIcon}
+              togglable={true}
               selected={currentLayout === "grid"}
               onClick={() => setCurrentLayout("grid")}
             />
             <Button
               fillMode="flat"
               svgIcon={layout2By2Icon}
+              togglable={true}
               selected={currentLayout === "list"}
               onClick={() => setCurrentLayout("list")}
             />