(wip) Style product's components

app/frontend/src/javascript/components/form/form-checklist.tsx

@@ -98,8 +98,8 @@ export const FormChecklist = <TFieldValues extends FieldValues, TOptionValue, TC
                             })}
                           </div>
                           <div className="actions">
-                            <FabButton type="button" onClick={selectAll(onChange)} className="checklist-all-button">{t('app.shared.form_checklist.select_all')}</FabButton>
+                            <FabButton type="button" onClick={selectAll(onChange)} className="is-info">{t('app.shared.form_checklist.select_all')}</FabButton>
-                            <FabButton type="button" onClick={unselectAll(onChange)} className="checklist-none-button">{t('app.shared.form_checklist.unselect_all')}</FabButton>
+                            <FabButton type="button" onClick={unselectAll(onChange)} className="is-info">{t('app.shared.form_checklist.unselect_all')}</FabButton>
                           </div>
                         </>
                       );

app/frontend/src/javascript/components/store/categories/product-categories.tsx

@@ -85,7 +85,7 @@ const ProductCategories: React.FC<ProductCategoriesProps> = ({ onSuccess, onErro
           <ManageProductCategory action='create'
             productCategories={productCategories}
             onSuccess={handleSuccess} onError={onError} />
-          <FabButton className='saveBtn' onClick={handleSave}>Plop</FabButton>
+          <FabButton className='main-action-btn' onClick={handleSave}>Plop</FabButton>
         </div>
       </header>
       <FabAlert level="warning">

app/frontend/src/javascript/components/store/edit-product.tsx

@@ -39,7 +39,9 @@ const EditProduct: React.FC<EditProductProps> = ({ productId, onSuccess, onError
 
   if (product) {
     return (
-      <ProductForm product={product} title={product.name} onSuccess={saveProductSuccess} onError={onError} />
+      <div className="edit-product">
+        <ProductForm product={product} title={product.name} onSuccess={saveProductSuccess} onError={onError} />
+      </div>
     );
   }
   return null;

app/frontend/src/javascript/components/store/new-product.tsx

@@ -43,7 +43,9 @@ const NewProduct: React.FC<NewProductProps> = ({ onSuccess, onError }) => {
   };
 
   return (
-    <ProductForm product={product} title={t('app.admin.store.new_product.add_a_new_product')} onSuccess={saveProductSuccess} onError={onError} />
+    <div className="new-product">
+      <ProductForm product={product} title={t('app.admin.store.new_product.add_a_new_product')} onSuccess={saveProductSuccess} onError={onError} />
+    </div>
   );
 };
 

app/frontend/src/javascript/components/store/product-form.tsx

@@ -119,19 +119,26 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
 
   return (
     <>
-      <h2>{title}</h2>
+      <header>
-      <FabButton className="save" onClick={handleSubmit(saveProduct)}>{t('app.admin.store.product_form.save')}</FabButton>
+        <h2>{title}</h2>
+        <div className="grpBtn">
+          <FabButton className="main-action-btn" onClick={handleSubmit(saveProduct)}>{t('app.admin.store.product_form.save')}</FabButton>
+        </div>
+      </header>
       <form className="product-form" onSubmit={onSubmit}>
-        <FormInput id="name"
+        <div className="grp">
-                   register={register}
+          <FormInput id="name"
-                   rules={{ required: true }}
+                     register={register}
-                   formState={formState}
+                     rules={{ required: true }}
-                   onChange={handleNameChange}
+                     formState={formState}
-                   label={t('app.admin.store.product_form.name')} />
+                     onChange={handleNameChange}
-        <FormInput id="sku"
+                     label={t('app.admin.store.product_form.name')}
-                   register={register}
+                     className='span-7' />
-                   formState={formState}
+          <FormInput id="sku"
-                   label={t('app.admin.store.product_form.sku')} />
+                     register={register}
+                     formState={formState}
+                     label={t('app.admin.store.product_form.sku')} />
+        </div>
         <FormInput id="slug"
                    register={register}
                    rules={{ required: true }}
@@ -141,29 +148,39 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
                     id="is_active"
                     formState={formState}
                     label={t('app.admin.store.product_form.is_show_in_store')} />
+
+        <hr />
+
         <div className="price-data">
-          <h4>{t('app.admin.store.product_form.price_and_rule_of_selling_product')}</h4>
+          <div className="grp">
-          <FormSwitch control={control}
+            <h4 className='span-7'>{t('app.admin.store.product_form.price_and_rule_of_selling_product')}</h4>
-                      id="is_active_price"
+            <FormSwitch control={control}
-                      label={t('app.admin.store.product_form.is_active_price')}
+                        id="is_active_price"
-                      tooltip={t('app.admin.store.product_form.is_active_price')}
+                        label={t('app.admin.store.product_form.is_active_price')}
-                      defaultValue={isActivePrice}
+                        tooltip={t('app.admin.store.product_form.is_active_price')}
-                      onChange={toggleIsActivePrice} />
+                        defaultValue={isActivePrice}
+                        onChange={toggleIsActivePrice} />
+          </div>
           {isActivePrice && <div className="price-fields">
-            <FormInput id="amount"
+            <div className="grp">
-                       type="number"
+              <FormInput id="amount"
-                       register={register}
+                         type="number"
-                       rules={{ required: true, min: 0.01 }}
+                         register={register}
-                       step={0.01}
+                         rules={{ required: true, min: 0.01 }}
-                       formState={formState}
+                         step={0.01}
-                       label={t('app.admin.store.product_form.price')} />
+                         formState={formState}
-            <FormInput id="quantity_min"
+                         label={t('app.admin.store.product_form.price')} />
-                       type="number"
+              <FormInput id="quantity_min"
-                       rules={{ required: true }}
+                         type="number"
-                       register={register}
+                         rules={{ required: true }}
-                       formState={formState}
+                         register={register}
-                       label={t('app.admin.store.product_form.quantity_min')} />
+                         formState={formState}
+                         label={t('app.admin.store.product_form.quantity_min')} />
+            </div>
           </div>}
+
+          <hr />
+
           <h4>{t('app.admin.store.product_form.assigning_category')}</h4>
           <FabAlert level="warning">
             <HtmlTranslate trKey="app.admin.store.product_form.assigning_category_info" />
@@ -173,6 +190,9 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
                       id="product_category_id"
                       formState={formState}
                       label={t('app.admin.store.product_form.linking_product_to_category')} />
+
+          <hr />
+
           <h4>{t('app.admin.store.product_form.assigning_machines')}</h4>
           <FabAlert level="warning">
             <HtmlTranslate trKey="app.admin.store.product_form.assigning_machines_info" />
@@ -181,6 +201,9 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
                          control={control}
                          id="machine_ids"
                          formState={formState} />
+
+          <hr />
+
           <h4>{t('app.admin.store.product_form.product_description')}</h4>
           <FabAlert level="warning">
             <HtmlTranslate trKey="app.admin.store.product_form.product_description_info" />
@@ -191,7 +214,7 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
                         id="description" />
         </div>
         <div className="main-actions">
-          <FabButton type="submit" className="submit-button">{t('app.admin.store.product_form.save')}</FabButton>
+          <FabButton type="submit" className="main-action-btn">{t('app.admin.store.product_form.save')}</FabButton>
         </div>
       </form>
     </>

app/frontend/src/javascript/components/store/products.tsx

@@ -58,9 +58,13 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
   };
 
   return (
-    <div>
+    <div className='products'>
-      <h2>{t('app.admin.store.products.all_products')}</h2>
+      <header>
-      <FabButton className="save" onClick={newProduct}>{t('app.admin.store.products.create_a_product')}</FabButton>
+        <h2>{t('app.admin.store.products.all_products')}</h2>
+        <div className='grpBtn'>
+          <FabButton className="main-action-btn" onClick={newProduct}>{t('app.admin.store.products.create_a_product')}</FabButton>
+        </div>
+      </header>
       <ProductsList
         products={products}
         onEdit={editProduct}

app/frontend/src/stylesheets/application.scss

@@ -86,8 +86,10 @@
 @import "modules/settings/check-list-setting";
 @import "modules/settings/user-validation-setting";
 @import "modules/socials/fab-socials";
+@import "modules/store/_utilities";
 @import "modules/store/manage-product-category";
 @import "modules/store/product-categories";
+@import "modules/store/products";
 @import "modules/subscriptions/free-extend-modal";
 @import "modules/subscriptions/renew-modal";
 @import "modules/supporting-documents/supporting-documents-files";

app/frontend/src/stylesheets/modules/base/fab-button.scss

@@ -49,4 +49,17 @@
   &--icon-only {
     display: flex;
   }
+
+  // color variants
+  &.is-info {
+    border-color: var(--information);
+    background-color: var(--information);
+    color: var(--gray-soft-lightest);
+    &:hover {
+      border-color: var(--information);
+      background-color: var(--information);
+      color: var(--gray-soft-lightest);
+      opacity: 0.75;
+    }
+  }
 }

app/frontend/src/stylesheets/modules/base/fab-output-copy.scss

@@ -1,7 +1,7 @@
 .fab-output-copy {
   .form-item-field {
     & > input {
-      background-color: var(--gray-soft);
+      background-color: var(--gray-soft-dark);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }

app/frontend/src/stylesheets/modules/form/form-checklist.scss

@@ -1,28 +1,28 @@
 .form-checklist {
-  position: relative;
-
   .form-item-field {
-    display: block !important;
+    display: flex;
+    flex-direction: column;
+    border: none;
   }
 
   .checklist {
-    display: flex;
+    display: grid;
-    padding: 16px;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    flex-wrap: wrap;
+    gap: 1.6rem 3.2rem;
 
-    .checklist-item {
+    .checklist-item input {
-      flex: 0 0 33.333333%;
+      margin-right: 1em;
-
-      & > input {
-        margin-right: 1em;
-      }
     }
   }
 
   .actions {
+    align-self: flex-end;
+    margin: 2.4rem 0;
     display: flex;
-    justify-content: space-evenly;
+    justify-content: flex-end;
-    width: 50%;
+    align-items: center;
-    margin: auto auto 1.2em;
+    & > *:not(:first-child) {
+      margin-left: 1.6rem;
+    }
   }
 }

app/frontend/src/stylesheets/modules/store/_utilities.scss

@@ -0,0 +1,14 @@
+@mixin btn {
+  width: 4rem;
+  height: 4rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  background: none;
+  border: none;
+  &:active {
+    color: currentColor;
+    box-shadow: none;
+  }
+}

app/frontend/src/stylesheets/modules/store/product-categories.scss

@@ -1,18 +1,3 @@
-@mixin btn {
-  width: 4rem;
-  height: 4rem;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  background: none;
-  border: none;
-  &:active {
-    color: currentColor;
-    box-shadow: none;
-  }
-}
-
 .product-categories {
   max-width: 1300px;
   margin: 0 auto;
@@ -25,28 +10,28 @@
     .grpBtn {
       display: flex;
       & > *:not(:first-child) { margin-left: 2.4rem; }
-      .saveBtn {
+      .create-button {
-        background-color: var(--main);
+        background-color: var(--gray-hard-darkest);
+        border-color: var(--gray-hard-darkest);
         color: var(--gray-soft-lightest);
-        border: none;
+        &:hover {
-        &:hover { opacity: 0.75; }
+          background-color: var(--gray-hard-light);
+          border-color: var(--gray-hard-light);
+        }
       }
     }
     h2 {
       margin: 0;
       @include title-lg;
-      color: var(--gray-hard-darkest);
+      color: var(--gray-hard-darkest) !important;
     }
   }
 
-  .create-button {
+  .main-action-btn {
-    background-color: var(--gray-hard-darkest);
+    background-color: var(--main);
-    border-color: var(--gray-hard-darkest);
     color: var(--gray-soft-lightest);
-    &:hover {
+    border: none;
-      background-color: var(--gray-hard-light);
+    &:hover { opacity: 0.75; }
-      border-color: var(--gray-hard-light);
-    }
   }
 
   &-tree {

app/frontend/src/stylesheets/modules/store/products.scss

@@ -0,0 +1,73 @@
+.products,
+.new-product,
+.edit-product {
+  margin: 0 auto;
+  padding-bottom: 6rem;
+
+  .back-btn {
+    margin: 2.4rem 0;
+    padding: 0.4rem 0.8rem;
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--gray-soft-darkest);
+    border-radius: var(--border-radius-sm);
+    color: var(--gray-soft-lightest);
+    i { margin-right: 0.8rem; }
+
+    &:hover {
+      background-color: var(--gray-hard-lightest);
+      cursor: pointer;
+    }
+  }
+
+  header {
+    padding: 2.4rem 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .grpBtn {
+      display: flex;
+      & > *:not(:first-child) { margin-left: 2.4rem; }
+    }
+    h2 {
+      margin: 0;
+      @include title-lg;
+      color: var(--gray-hard-darkest) !important;
+    }
+  }
+
+  .main-action-btn {
+    background-color: var(--main);
+    color: var(--gray-soft-lightest);
+    border: none;
+    &:hover { opacity: 0.75; }
+  }
+
+  .main-actions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & > *:not(:first-child) {
+      margin-left: 1.6rem;
+    }
+  }
+}
+
+.products {
+  max-width: 1600px;
+}
+
+.new-product,
+.edit-product {
+  max-width: 1300px;
+
+  .product-form {
+    .grp {
+      display: flex;
+      gap: 2.4rem 3.2rem;
+      .span-7 {
+        min-width: 70%;
+      }
+    }
+  }
+}

app/frontend/src/stylesheets/variables/decoration.scss

@@ -1,4 +1,5 @@
 :root {
   --border-radius: 8px;
+  --border-radius-sm: 4px;
   --shadow: 0 0 10px rgba(39, 32, 32, 0.25);
 }

app/frontend/templates/admin/store/product_edit.html

@@ -14,11 +14,11 @@
   </div>
 </section>
 
-<section class="m-lg admin-store-manage">
+<section class="edit-product m-lg admin-store-manage">
   <div class="row">
 
     <div class="col-md-12">
-      <a ng-click="backProductsList()">
+      <a class="back-btn" ng-click="backProductsList()">
         <i class="fas fa-angle-left"></i>
         <span translate>{{ 'app.admin.store.back_products_list' }}</span>
       </a>

app/frontend/templates/admin/store/product_new.html

@@ -14,11 +14,11 @@
   </div>
 </section>
 
-<section class="m-lg admin-store-manage">
+<section class="new-product m-lg admin-store-manage">
   <div class="row">
 
     <div class="col-md-12">
-      <a ng-click="backProductsList()">
+      <a class="back-btn" ng-click="backProductsList()" tabindex="0">
         <i class="fas fa-angle-left"></i>
         <span translate>{{ 'app.admin.store.back_products_list' }}</span>
       </a>