Update UI

Author: Matteo-it

examples/led-matrix-painter/assets/img/arrow-left.svg

@@ -41,11 +41,11 @@ <h3 class="box-title">Tools</h3>
         <div class="transform-box">
           <h3 class="box-title">Transform</h3>
           <div class="transform-buttons">
-            <button id="flip-v" class="transform-btn"><img src="img/flip-v.svg" alt="Flip V" style="width: 20px; height: 20px; padding-right: 8px; vertical-align: middle;">Flip V</button>
-            <button id="flip-h" class="transform-btn"><img src="img/flip-h.svg" alt="Flip H" style="width: 20px; height: 20px; padding-right: 8px; vertical-align: middle;">Flip H</button>
-            <button id="rotate180" class="transform-btn"><img src="img/rotate.svg" alt="Rotate 180" style="width: 20px; height: 20px; padding-right: 8px; vertical-align: middle;">Rotate 180°</button>
-            <button id="invert" class="transform-btn"><img src="img/invert.svg" alt="Invert" style="width: 20px; height: 20px; padding-right: 8px; vertical-align: middle;">Invert Matrix</button>
-            <button id="invert-not-null" class="transform-btn"><img src="img/invert-draw.svg" alt="Invert Brightness" style="width: 20px; height: 20px; padding-right: 8px; vertical-align: middle;">Invert Draw</button>
+            <button id="flip-v" class="transform-btn"><img src="img/flip-v.svg" alt="Flip V" style="width: 12px; height: 12px; padding-right: 4px; vertical-align: middle;">Flip V</button>
+            <button id="flip-h" class="transform-btn"><img src="img/flip-h.svg" alt="Flip H" style="width: 12px; height: 12px; padding-right: 4px; vertical-align: middle;">Flip H</button>
+            <button id="rotate180" class="transform-btn"><img src="img/rotate.svg" alt="Rotate 180" style="width: 12px; height: 12px; padding-right: 4px; vertical-align: middle;">Rotate 180°</button>
+            <button id="invert" class="transform-btn"><img src="img/invert.svg" alt="Invert" style="width: 12px; height: 12px; padding-right: 4px; vertical-align: middle;">Invert Matrix</button>
+            <button id="invert-not-null" class="transform-btn"><img src="img/invert-draw.svg" alt="Invert Brightness" style="width: 12px; height: 12px; padding-right: 4px; vertical-align: middle;">Invert Draw</button>
           </div>
         </div>
       </div>
@@ -54,10 +54,10 @@ <h3 class="box-title">Transform</h3>
         <div class="center-content-header">
           <h3 class="box-title" id="frame-title">Frame 1</h3>
           <div class="frame-controls">
-            <button id="clear">Clear</button>
+            <button id="clear" class="transform-btn"><img src="img/clear.svg" alt="Clear" style="width: 16px; height: 16px; padding-right: 4px; vertical-align: middle;">Clear Frame</button>
             <span class="vertical-separator"></span>
-            <button id="frame-back">&lt;</button>
-            <button id="frame-forward">&gt;</button>
+            <button id="frame-back" class="transform-btn"><img src="img/arrow-left.svg" alt="Back" style="width: 16px; height: 16px; vertical-align: middle;"></button>
+            <button id="frame-forward" class="transform-btn"><img src="img/arrow-right.svg" alt="Forward" style="width: 16px; height: 16px; vertical-align: middle;"></button>
           </div>
         </div>
         <section class="maincol">

examples/led-matrix-painter/assets/img/arrow-right.svg

@@ -230,7 +230,6 @@ input:checked + .slider:before {
     font-weight: 700;
     line-height: 170%;
     letter-spacing: 1.2px;
-    margin-bottom: 16px;
 }
 
 .controls-section-left {