From 7bc9694b2a121926c8d375debc8dff204c0a2763 Mon Sep 17 00:00:00 2001
From: Jonatan Heyman <jonatan@heyman.info>
Date: Sat, 24 Jan 2026 21:48:18 +0100
Subject: [PATCH] Styling of DrawImageModal's toolbar buttons

---
 assets/icons/arrow-pointer-white.svg   |  5 +++
 assets/icons/paint-white.svg           |  5 +++
 assets/icons/redo-white.svg            |  5 +++
 assets/icons/undo-white.svg            |  5 +++
 src/components/draw/DrawImageModal.vue | 49 +++++++++++++++-----------
 5 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 assets/icons/arrow-pointer-white.svg
 create mode 100644 assets/icons/paint-white.svg
 create mode 100644 assets/icons/redo-white.svg
 create mode 100644 assets/icons/undo-white.svg

diff --git a/assets/icons/arrow-pointer-white.svg b/assets/icons/arrow-pointer-white.svg
new file mode 100644
index 0000000..53ad92e
--- /dev/null
+++ b/assets/icons/arrow-pointer-white.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M173.3,66.5C181.4,62.4 191.2,63.3 198.4,68.8L518.4,308.7C526.7,314.9 530,325.7 526.8,335.5C523.6,345.3 514.4,351.9 504,351.9L351.7,351.9L440.6,529.6C448.5,545.4 442.1,564.6 426.3,572.5C410.5,580.4 391.3,574 383.4,558.2L294.5,380.5L203.2,502.3C197,510.6 186.2,513.9 176.4,510.7C166.6,507.5 160,498.3 160,488L160,88C160,78.9 165.1,70.6 173.3,66.5Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
+</svg>
diff --git a/assets/icons/paint-white.svg b/assets/icons/paint-white.svg
new file mode 100644
index 0000000..44cf841
--- /dev/null
+++ b/assets/icons/paint-white.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M512.5,74.3L291.1,222C262,241.4 243.5,272.9 240.5,307.3C302.8,320.1 351.9,369.2 364.8,431.6C399.3,428.6 430.7,410.1 450.1,381L597.7,159.5C604.4,149.4 608,137.6 608,125.4C608,91.5 580.5,64 546.6,64C534.5,64 522.6,67.6 512.5,74.3ZM320,464C320,402.1 269.9,352 208,352C146.1,352 96,402.1 96,464C96,467.9 96.2,471.8 96.6,475.6C98.4,493.1 86.4,512 68.8,512L64,512C46.3,512 32,526.3 32,544C32,561.7 46.3,576 64,576L208,576C269.9,576 320,525.9 320,464Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
+</svg>
diff --git a/assets/icons/redo-white.svg b/assets/icons/redo-white.svg
new file mode 100644
index 0000000..71d9c53
--- /dev/null
+++ b/assets/icons/redo-white.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M371.8,82.4C359.8,87.4 352,99 352,112L352,192L240,192C142.8,192 64,270.8 64,368C64,481.3 145.5,531.9 164.2,542.1C166.7,543.5 169.5,544 172.3,544C183.2,544 192,535.1 192,524.3C192,516.8 187.7,509.9 182.2,504.8C172.8,496 160,478.4 160,448.1C160,395.1 203,352.1 256,352.1L352,352.1L352,432.1C352,445 359.8,456.7 371.8,461.7C383.8,466.7 397.5,463.9 406.7,454.8L566.7,294.8C579.2,282.3 579.2,262 566.7,249.5L406.7,89.5C397.5,80.3 383.8,77.6 371.8,82.6L371.8,82.4Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
+</svg>
diff --git a/assets/icons/undo-white.svg b/assets/icons/undo-white.svg
new file mode 100644
index 0000000..11f1344
--- /dev/null
+++ b/assets/icons/undo-white.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M268.2,82.4C280.2,87.4 288,99 288,112L288,192L400,192C497.2,192 576,270.8 576,368C576,481.3 494.5,531.9 475.8,542.1C473.3,543.5 470.5,544 467.7,544C456.8,544 448,535.1 448,524.3C448,516.8 452.3,509.9 457.8,504.8C467.2,496 480,478.4 480,448.1C480,395.1 437,352.1 384,352.1L288,352.1L288,432.1C288,445 280.2,456.7 268.2,461.7C256.2,466.7 242.5,463.9 233.3,454.8L73.3,294.8C60.8,282.3 60.8,262 73.3,249.5L233.3,89.5C242.5,80.3 256.2,77.6 268.2,82.6L268.2,82.4Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
+</svg>
diff --git a/src/components/draw/DrawImageModal.vue b/src/components/draw/DrawImageModal.vue
index e472a1a..8e2016e 100644
--- a/src/components/draw/DrawImageModal.vue
+++ b/src/components/draw/DrawImageModal.vue
@@ -457,21 +457,17 @@
                 <div class="header-tools-left">
                     <div class="mode-toggle">
                         <button
-                            class="mode"
+                            class="mode select-mode"
                             :class="{ active: !isDrawingMode }"
                             :disabled="isLoading"
                             @click="setDrawingMode(false)"
-                        >
-                            Select
-                        </button>
+                        ></button>
                         <button
-                            class="mode"
+                            class="mode draw-mode"
                             :class="{ active: isDrawingMode }"
                             :disabled="isLoading"
                             @click="setDrawingMode(true)"
-                        >
-                            Draw
-                        </button>
+                        ></button>
                     </div>
                     <label class="color-picker">
                         <input
@@ -484,8 +480,8 @@
                 </div>
                 <div class="header-tools">
                     <div class="history-controls">
-                        <button class="history" @click="undo" :disabled="historyIndex <= 0 || isLoading">Undo</button>
-                        <button class="history" @click="redo" :disabled="historyIndex >= history.length - 1 || isLoading">Redo</button>
+                        <button class="history undo" @click="undo" :disabled="historyIndex <= 0 || isLoading"></button>
+                        <button class="history redo" @click="redo" :disabled="historyIndex >= history.length - 1 || isLoading"></button>
                     </div>
                     <div class="zoom-controls">
                         <button class="zoom" @click="zoomOut" :disabled="isLoading">-</button>
@@ -573,24 +569,32 @@
                         align-items: center
                         gap: 6px
                     .mode
-                        height: 24px
-                        padding: 0 10px
+                        height: 26px
+                        width: 26px
                         border-radius: 3px
                         border: 1px solid #c7c7c7
                         background: #fff
                         cursor: pointer
                         font-size: 12px
+                        background-size: 13px
+                        background-position: center center
+                        background-repeat: no-repeat
                         +dark-mode
                             border-color: #444
-                            background: #1f1f1f
+                            background-color: #1f1f1f
                             color: #eee
                         &.active
-                            background: #1d7cf2
+                            background-color: #1d7cf2
                             border-color: #1d7cf2
                             color: #fff
+                        &.select-mode
+                            +dark-mode
+                                background-image: url("@/assets/icons/arrow-pointer-white.svg")
+                        &.draw-mode
+                            +dark-mode
+                                background-image: url("@/assets/icons/paint-white.svg")
                         &:disabled
                             opacity: 0.6
-                            cursor: not-allowed
                     .color-picker input[type="color"]
                         width: 24px
                         height: 24px
@@ -607,20 +611,25 @@
                     align-items: center
                     gap: 6px
                     .history
-                        height: 28px
-                        padding: 0 10px
+                        height: 26px
+                        width: 26px
                         border-radius: 4px
                         border: 1px solid #c7c7c7
                         background: #fff
                         cursor: pointer
                         font-size: 12px
+                        background-size: 13px
+                        background-position: center center
+                        background-repeat: no-repeat
+                        background-image: url("@/assets/icons/undo-white.svg")
                         +dark-mode
                             border-color: #444
-                            background: #1f1f1f
+                            background-color: #1f1f1f
                             color: #eee
                         &:disabled
-                            opacity: 0.6
-                            cursor: not-allowed
+                            opacity: 0.4
+                        &.redo
+                            background-image: url("@/assets/icons/redo-white.svg")
                 .zoom-controls
                     display: flex
                     align-items: center