svg update

Author: Matteo-it

examples/led-matrix-painter/assets/img/copy.svg

@@ -116,25 +116,33 @@ <h3 class="box-title">Project code preview</h3>
                 <div class="sidebar-header">
                   <h3 style="margin:0;font-size:0.9rem;color:#666">Animation</h3>
                   <div class="anim-buttons">
-                      <button id="play-animation" title="Play Animation"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2 L14 8 L4 14 Z"/></svg></button>
-                      <button id="stop-animation" title="Stop Animation"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="4" y="4" width="8" height="8"/></svg></button>
+                      <button id="play-animation" title="Play Animation"><img src="img/icon-play.svg" alt="Play"></button>
+                      <button id="stop-animation" title="Stop Animation"><img src="img/icon-stop.svg" alt="Stop"></button>
                   </div>
                 </div>
-                <div class="animation-controls-body">
-                    <div>
-                      <label><input type="radio" name="mode" value="frames" checked> Frames</label>
-                      <label><input type="radio" name="mode" value="anim"> Animations</label>
-                    </div>
-                    <div id="anim-controls">
-                      <input id="anim-name" placeholder="Animation name" />
-                    </div>
-                    <!-- Frame name goes above the list of frames and below animation name (if present) -->
-                    <div>
-                      <input id="name" placeholder="Frame name (optional)" />
-                      <input id="duration" type="number" min="0" step="10" value="1000" title="Duration in ms" />
-                    </div>
-                    <div id="frames" class="frames"></div>
-                </div>    </div>
+                          <div class="animation-controls-body">
+                              <div class="animation-options">
+                                <button id="copy-anim" class="anim-option-btn"><img src="img/copy.svg" alt="Copy"></button>
+                                <button id="delete-anim" class="anim-option-btn"><img src="img/trash.svg" alt="Delete"></button>
+                                <div class="separator"></div>
+                                <button id="duration-anim" class="anim-option-btn"><img src="img/time.svg" alt="Duration"></button>
+                              </div>
+                              <div class="animation-controls-main">
+                                  <div>
+                                    <label><input type="radio" name="mode" value="frames" checked> Frames</label>
+                                    <label><input type="radio" name="mode" value="anim"> Animations</label>
+                                  </div>
+                                  <div id="anim-controls">
+                                    <input id="anim-name" placeholder="Animation name" />
+                                  </div>
+                                  <!-- Frame name goes above the list of frames and below animation name (if present) -->
+                                  <div>
+                                    <input id="name" placeholder="Frame name (optional)" />
+                                    <input id="duration" type="number" min="0" step="10" value="1000" title="Duration in ms" />
+                                  </div>
+                                  <div id="frames" class="frames"></div>
+                              </div>
+                          </div>    </div>
   </div>
   <div id="error-container" class="error-message" style="display: none;"></div>
   </div>

examples/led-matrix-painter/assets/img/time.svg

@@ -244,9 +244,51 @@ input:checked + .slider:before {
 }
 
 .animation-controls-body {
+    display: flex;
+    flex-direction: row; /* Changed to row */
+    gap: 16px; /* Gap between options and main controls */
+}
+
+.animation-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center; /* Center buttons in the column */
+}
+
+.anim-option-btn {
+    border: 1px solid #C9D2D2;
+    border-radius: 8px;
+    padding: 6px;
+    background-color: transparent; /* Assuming transparent background */
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #2C353A; /* Updated icon color */
+}
+
+.anim-option-btn:hover {
+    background-color: rgba(0, 129, 132, 0.08);
+}
+
+.anim-option-btn img {
+    width: 16px;
+    height: 16px;
+}
+
+.animation-options .separator {
+    width: 100%;
+    height: 1px;
+    background-color: #C9D2D2;
+    margin: 4px 0; /* Vertical margin for spacing */
+}
+
+.animation-controls-main {
     display: flex;
     flex-direction: column;
     gap: 12px;
+    flex: 1; /* Allow this to take remaining space */
 }
 
 .row {
@@ -431,10 +473,9 @@ input:checked + .slider:before {
   background: #006567;
 }
 
-.anim-buttons button svg {
-  width: 16px;
-  height: 16px;
-  fill: currentColor; /* Use button's text color for SVG fill */
+.anim-buttons button img {
+  width: 12px;
+  height: 12px;
 }
 .frames {
     display: flex;