refactor: code refactor [CustomerReviewsSlider] #134

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css

@@ -9,14 +9,23 @@
 }
 
 .customerReviewsSlider-arrows .customerReviewsSlider-arrow {
-    min-width: 40px;
+    width: 40px;
     height: 40px;
-    padding: 0;
     border-radius: 50%;
+    border: 2px solid #aaa;
+    color: #aaa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all .2s ease-in-out;
+}
+
+.customerReviewsSlider-arrows .customerReviewsSlider-arrow:hover {
+    border-color: #333;
+    color: #333;
 }
 
 .customerReviewsSlider-review {
-    font-weight: 700;
     font-size: 1.125rem;
 }
 
@@ -32,7 +41,9 @@
 }
 
 .customerReviewsSlider-client-img img {
-    width: 100%;
+    aspect-ratio: 1 / 1;
+    height: auto;
+    object-fit: cover;
     border-radius: 50%;
 }
 
@@ -47,18 +58,30 @@
     font-size: 0.975rem;
 }
 
+.customerReviewsSlider-client-name {
+    font-weight: 700;
+}
+
 .customerReviewsSlider-dots {
     position: absolute;
     left: 50%;
     bottom: 0;
+    display: flex;
 }
 
 .customerReviewsSlider-dot {
-    min-width: 10px;
+    width: 10px;
     height: 10px;
-    padding: 0;
+    border: 2px solid rgba(0,0,0,0);
     border-radius: 50%;
     margin: 0 5px;
+    display: block;
+    background-color: #aaa;
+    transition: all .2s ease-in-out;
+}
+
+.customerReviewsSlider-dot.glide__bullet--active {
+    border-color: #aaa;
 }
 
 .customerReviewsSlider-dot:hover {

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html

@@ -15,8 +15,9 @@
     <div class="glide customerReviewsSlider-slider-wrapper">
 
         <div class="customerReviewsSlider-arrows" data-glide-el="controls">
-            <button class="customerReviewsSlider-arrow customerReviewsSlider-arrow-left button" data-glide-dir="<">
-                <span class="arrow fa fa-arrow-left"></span></button>
+            <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-left" data-glide-dir="<">
+                <span class="arrow fa fa-arrow-left"></span>
+            </span>
         </div>
         <div data-glide-el="track" class="glide__track customerReviewsSlider-track">
             <ul class="glide__slides customerReviewsSlider-slider">
@@ -41,18 +42,18 @@
 
                         <div class="customerReviewsSlider-client-content">
                             {if $entry['customerName']}
-                            <p class="customerReviewsSlider-client-name">{$entry['customerName']}</p>
+                            <span class="customerReviewsSlider-client-name">{$entry['customerName']}</span>
                             {/if}
                             {if $entry['addition']}
-                            <p class="customerReviewsSlider-client-addition">{$entry['addition']}</p>
+                            <span class="customerReviewsSlider-client-addition">{$entry['addition']}</span>
                             {/if}
 
                             {if $entry['url']}
                             <a href="{$entry['url']}" class="customerReviewsSlider-url">
                                 {if $entry['urlTitle']}
-                                {$entry['urlTitle']}
+                                    {$entry['urlTitle']}
                                 {else}
-                                {$entry['url']}
+                                    {$entry['url']}
                                 {/if}
                             </a>
                             {/if}
@@ -68,14 +69,15 @@
         </div>
 
         <div class="customerReviewsSlider-arrows" data-glide-el="controls">
-            <button class="customerReviewsSlider-arrow customerReviewsSlider-arrow-right button" data-glide-dir=">">
-                <span class="arrow fa fa-arrow-right"></span></button>
+            <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-right" data-glide-dir=">">
+                <span class="arrow fa fa-arrow-right"></span>
+            </span>
         </div>
 
         <div class="customerReviewsSlider-dots" data-glide-el="controls[nav]">
             {assign var=counter value=0}
             {foreach from=$entries item=entry}
-                <button class="customerReviewsSlider-dot" data-glide-dir="={$counter}"></button>
+                <span class="customerReviewsSlider-dot" data-glide-dir="={$counter}"></span>
                 {assign var=counter value=$counter+1}
             {/foreach}
         </div>