OP-291: Make wishlist page more consistent with cart

Author: hmfilar

src/Form/Type/WishlistCollectionType.php

@@ -44,9 +44,6 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ])
             ->add('addAll', SubmitType::class, [
                 'label' => 'bitbag_sylius_wishlist_plugin.ui.add_items_to_cart',
-                'attr' => [
-                    'class' => 'ui primary button',
-                ],
             ])
             ->addEventListener(
                 FormEvents::SUBMIT,

src/Resources/assets/shop/scss/pages/wishlist-details/_item.scss

@@ -76,5 +76,11 @@
             align-items: center;
             justify-content: center;
         }
+
+        > * {
+            span {
+                color: $lightgray;
+            }
+        }
     }
 }

src/Resources/assets/shop/scss/utilities/_variables.scss

@@ -2,6 +2,7 @@ $breakpoint-md: 768px !default;
 $breakpoint-sm: 576px !default;
 
 $gray-200: #e9ecef !default;
+$lightgray: #999 !default;
 $primary: #2185D0 !default;
 
 $font-size-sm: .85em !default;

src/Resources/views/WishlistDetails/_globalActions.html.twig

@@ -8,7 +8,7 @@
 <button
     id="{{ form.addAll.vars.id }}"
     name="{{ form.addAll.vars.full_name }}"
-    class="{{ form.addAll.vars.attr.class }}"
+    class="ui primary button right floated"
     data-bb-toggle="wishlist-add-all"
     {{ sylius_test_html_attribute('wishlist-add-all-to-cart') }}
     formaction="{{ path('bitbag_sylius_wishlist_plugin_shop_locale_wishlist_add_products', { wishlistId: wishlist.id }) }}"

src/Resources/views/WishlistDetails/index.html.twig

@@ -43,23 +43,23 @@
 
         {{ form_start(form, { attr: { class: 'bb-wishlist ui form', id: "wishlist_form" } }) }}
 
-        <div class="ui segment" id="wishlist">
+        <div class="ui stackable" id="wishlist">
 
             <div class="bb-wishlist-item">
                 <div class="bb-wishlist-item-select">
                     <input type="checkbox" id="toggle-checkboxes" class="bb-wishlist-item-select-checkbox">
                 </div>
                 <div class="bb-wishlist-item-image">
-                    {{ 'sylius.ui.product'|trans }}
+                    <span>{{ 'sylius.ui.item'|trans }}</span>
                 </div>
                 <div class="bb-wishlist-item-price">
-                    {{ 'sylius.ui.price'|trans }}
+                    <span>{{ 'sylius.ui.unit_price'|trans }}</span>
                 </div>
                 <div class="bb-wishlist-item-quantity">
-                    {{ 'sylius.ui.quantity'|trans }}
+                    <span>{{ 'sylius.ui.qty'|trans }}</span>
                 </div>
                 <div class="bb-wishlist-item-actions">
-                    {{ 'sylius.ui.actions'|trans }}
+                    <span>{{ 'sylius.ui.actions'|trans }}</span>
                 </div>
             </div>