From e787663e5120048ef2dbd0107936b6f9104423d8 Mon Sep 17 00:00:00 2001
From: Igor Zinken <730069+igorski@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:38:19 +0100
Subject: [PATCH] Small quality of life improvements with regards to styling

---
 public/assets/images/icon-collapse.svg        |  1 -
 public/assets/images/icon-expand.svg          |  1 -
 src/bitmappery.vue                            | 54 +++++-------
 .../cloud-file-selector.html                  |  2 +-
 .../document-canvas/scrollbars/scrollbars.vue |  2 +-
 .../document-preview/document-preview.vue     |  3 +-
 .../document-properties-window.vue            |  2 +-
 src/components/file-import/file-import.vue    |  6 +-
 .../create-document-window.vue                | 10 +--
 .../file-menu/export-window/export-window.vue | 26 +++---
 .../file-menu/export-window/messages.json     |  7 +-
 .../save-document/aws-s3/save-s3-document.vue |  2 +-
 .../dropbox/save-dropbox-document.vue         |  2 +-
 .../save-google-drive-document.vue            |  2 +-
 .../file-menu/save-document/save-document.vue |  4 +-
 .../grid-to-layers-window.vue                 |  6 +-
 .../layer-effects/layer-effects.vue           | 48 +++++------
 src/components/layer-panel/layer-panel.vue    | 52 +++++++-----
 .../menus/header-menu/header-menu.vue         | 28 +++----
 .../new-layer-window/new-layer-window.vue     |  4 +-
 .../preferences-window/preferences-window.vue |  8 +-
 .../resize-canvas-window.vue                  |  6 +-
 .../resize-document-window.vue                |  2 +-
 .../load-selection/load-selection.vue         |  2 +-
 .../save-selection/save-selection.vue         |  2 +-
 .../stroke-selection-window.vue               |  4 +-
 .../tool-options-panel/messages.json          |  2 +-
 .../tool-options-brush/tool-options-brush.vue | 12 +--
 .../tool-options-clone/tool-options-clone.vue | 10 +--
 .../tool-options-drag/tool-options-drag.vue   |  2 +-
 .../tool-options-fill/tool-options-fill.vue   |  2 +-
 .../tool-options-panel/tool-options-panel.vue | 14 ++--
 .../tool-options-rotate.vue                   |  2 +-
 .../tool-options-scale/tool-options-scale.vue |  2 +-
 .../tool-options-selection.vue                | 11 +--
 .../tool-options-text/messages.json           |  3 +-
 .../tool-options-text/tool-options-text.vue   | 82 +++++++++----------
 .../tool-options-wand/tool-options-wand.vue   |  4 +-
 src/components/toolbox/toolbox.vue            | 32 +++-----
 .../dimensions-formatter.vue                  |  6 +-
 src/components/ui/select-box/select-box.vue   | 10 ++-
 src/components/ui/slider/slider.vue           |  2 +-
 src/styles/_colors.scss                       |  1 +
 src/styles/_global.scss                       |  5 +-
 src/styles/form.scss                          | 56 ++++++++-----
 src/styles/panel.scss                         |  9 +-
 src/styles/tool-option.scss                   |  4 +-
 src/styles/ui.scss                            | 20 ++---
 48 files changed, 294 insertions(+), 283 deletions(-)
 delete mode 100644 public/assets/images/icon-collapse.svg
 delete mode 100644 public/assets/images/icon-expand.svg

diff --git a/public/assets/images/icon-collapse.svg b/public/assets/images/icon-collapse.svg
deleted file mode 100644
index 4d9543b..0000000
--- a/public/assets/images/icon-collapse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 119.72" style="enable-background:new 0 0 122.88 119.72" fill="#b6b6b6" xml:space="preserve"><g><path d="M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M75.83,73.05L75.83,73.05c-3.28-3.26-5.54-5.99-7.79-8.72 c-1.95-2.35-3.9-4.72-6.52-7.41L46.03,73.77c-0.1,0.11-0.22,0.2-0.36,0.27c-1.06,0.54-2.25,0.73-3.4,0.55 c-1.12-0.17-2.2-0.68-3.07-1.54c-1.09-1.07-1.65-2.5-1.66-3.92c-0.01-1.44,0.52-2.87,1.6-3.97c5.83-6.43,12.07-13.94,18.11-19.99 c1.24-1.23,2.69-1.84,4.15-1.83c1.44,0.01,2.85,0.6,4.05,1.76c5.34,4.94,13.32,14.33,18.28,20.06c1.06,1.08,1.6,2.49,1.6,3.9 c0,1.39-0.51,2.78-1.53,3.86l-0.1,0.1c-1.08,1.08-2.51,1.63-3.94,1.63c-1.39,0-2.78-0.51-3.86-1.54L75.83,73.05L75.83,73.05z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22 c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23c2.26-2.26,3.67-5.38,3.67-8.81V22.71 c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z"/></g></svg>
diff --git a/public/assets/images/icon-expand.svg b/public/assets/images/icon-expand.svg
deleted file mode 100644
index 02845cb..0000000
--- a/public/assets/images/icon-expand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 119.72" style="enable-background:new 0 0 122.88 119.72" fill="#b6b6b6" xml:space="preserve"><g><path d="M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M75.82,45.83l0.09-0.09c1.08-1.02,2.47-1.54,3.86-1.53 c1.43,0,2.85,0.55,3.93,1.64c0.03,0.01,0.08,0.07,0.1,0.1c1.02,1.08,1.54,2.47,1.54,3.86c0,1.41-0.54,2.82-1.6,3.9 c-5.54,6.04-12.51,14.74-18.28,20.06c-1.2,1.16-2.61,1.75-4.05,1.76c-1.47,0-2.92-0.6-4.15-1.83 c-4.19-3.38-13.84-15.27-18.12-19.99c-1.08-1.1-1.61-2.53-1.6-3.96c0.01-1.44,0.57-2.86,1.66-3.93c0.87-0.85,1.95-1.37,3.07-1.54 c1.15-0.17,2.34,0.01,3.4,0.56c0.14,0.07,0.26,0.16,0.35,0.27l15.48,16.85c2.62-2.7,4.57-5.06,6.52-7.41 C70.29,51.8,72.54,49.08,75.82,45.83L75.82,45.83z M100.16,10.24H22.72c-3.43,0-6.55,1.41-8.81,3.67 c-2.26,2.26-3.67,5.38-3.67,8.81v74.29c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45 c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81 C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z"/></g></svg>
diff --git a/src/bitmappery.vue b/src/bitmappery.vue
index e5be8c4..b5f1181 100644
--- a/src/bitmappery.vue
+++ b/src/bitmappery.vue
@@ -22,7 +22,7 @@
  */
 <template>
     <div id="app" ref="app">
-        <header-menu />
+        <header-menu @rescale="scaleContainer" />
         <section class="main">
             <toolbox
                 ref="toolbox"
@@ -40,12 +40,8 @@
                 class="panels"
                 :class="{ 'collapsed': !openedPanels.length }"
             >
-                <tool-options-panel
-                    class="tool-options-panel"
-                />
-                <layer-panel
-                    class="layer-panel"
-                />
+                <tool-options-panel class="tool-options-panel" />
+                <layer-panel class="layer-panel" />
             </div>
         </section>
         <!-- dialog window used for information messages, alerts and confirmations -->
@@ -74,7 +70,6 @@
 <script lang="ts">
 import { type Component, defineAsyncComponent } from "vue";
 import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
-import { createI18n } from "vue-i18n";
 import HeaderMenu from "@/components/menus/header-menu/header-menu.vue";
 import ToolOptionsPanel from "@/components/tool-options-panel/tool-options-panel.vue";
 import LayerPanel from "@/components/layer-panel/layer-panel.vue";
@@ -92,7 +87,6 @@ import { renderState } from "@/services/render-service";
 import ImageToDocumentManager from "@/mixins/image-to-document-manager";
 import { readClipboardFiles, readDroppedFiles } from "@/utils/file-util";
 import { truncate } from "@/utils/string-util";
-import messages from "./messages.json";
 import {
     CREATE_DOCUMENT, RESIZE_DOCUMENT, SAVE_DOCUMENT, EXPORT_WINDOW,
     DROPBOX_FILE_SELECTOR, GOOGLE_DRIVE_FILE_SELECTOR, AWS_S3_FILE_SELECTOR,
@@ -100,10 +94,6 @@ import {
     GRID_TO_LAYERS, STROKE_SELECTION, ANIMATION_PREVIEW, DOCUMENT_PROPERTIES,
 } from "@/definitions/modal-windows";
 
-// Create VueI18n instance with options
-const i18n = createI18n({
-    messages
-});
 let lastDocumentId: string | undefined;
 
 // wrapper for loading dynamic components with custom loading states
@@ -351,7 +341,7 @@ export default {
             }
             const toolboxWidth      = this.$refs.toolbox?.$el.clientWidth;
             const optionsPanelWidth = this.$refs.panels?.clientWidth;
-            this.docWidth = `calc(100% - ${toolboxWidth + optionsPanelWidth + 32}px)`;
+            this.docWidth = `calc(100% - ${toolboxWidth + optionsPanelWidth + 16}px)`;
             this.$nextTick(() => this.$refs.documentCanvas?.calcIdealDimensions());
         },
     }
@@ -386,7 +376,7 @@ export default {
         position: relative;
 
         @include mixins.large() {
-            padding: variables.$spacing-medium;
+            padding: variables.$spacing-small;
         }
     }
 
@@ -402,7 +392,7 @@ export default {
 
     .document-container {
         width: 100%;
-        margin: 0 variables.$spacing-medium;
+        margin: 0 variables.$spacing-small;
     }
 
     /* three column layout on tablet / desktops */
@@ -424,40 +414,35 @@ export default {
                     display: none;
                 }
                 .component__header-button {
-                    right: variables.$spacing-xxsmall !important;
+                    right: variables.$spacing-small;// !important;
                 }
             }
         }
         .panels {
             display: inline-flex;
             flex-direction: column;
-            height: calc(100% - variables.$spacing-xsmall );
-            $optionsHeight: 250px;
+            height: calc(100% - ( variables.$spacing-small + variables.$spacing-xsmall ));
             
             .tool-options-panel {
-                height: calc(#{$optionsHeight - math.div( variables.$spacing-medium, 2 )});
+                flex: 0 0 auto; // expand to fit content
+                min-height: 220px;
+
+                &.collapsed {
+                    min-height: auto;
+                }
             }
             .layer-panel {
-                margin-top: variables.$spacing-medium;
-            }
-
-            @include mixins.minHeight( 900px ) {
-                $optionsHeight: 390px;
-                .tool-options-panel {
-                    height: calc(#{$optionsHeight - math.div( variables.$spacing-medium, 2 )});
-                }
-                .layer-panel {
-                    height: calc(100% - #{$optionsHeight + math.div( variables.$spacing-medium, 2 )});
-                    margin-top: variables.$spacing-medium;
-                }
+                flex: 1;
+                min-height: 0;
+                margin-top: variables.$spacing-small;
             }
         }
 
         .toolbox {
-            width: 105px;
+            width: 94px;
         }
         .panels {
-            width: 300px;
+            width: 320px;
         }
     }
 
@@ -474,7 +459,6 @@ export default {
             position: fixed;
             width: 100%;
             max-height: 50%;
-            //max-height: calc(100% - #{variables.$menu-height * 3});
             bottom: 0;
             overflow-y: scroll;
             border-top: 1px solid colors.$color-bg;
diff --git a/src/components/cloud-file-selector/cloud-file-selector.html b/src/components/cloud-file-selector/cloud-file-selector.html
index f4aa8c1..613f790 100644
--- a/src/components/cloud-file-selector/cloud-file-selector.html
+++ b/src/components/cloud-file-selector/cloud-file-selector.html
@@ -71,7 +71,7 @@
     <div class="component__actions">
         <div class="component__actions-content">
             <div class="form component__actions-form">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <input
                         v-model="newFolderName"
                         :placeholder="$t('newFolderName')"
diff --git a/src/components/document-canvas/scrollbars/scrollbars.vue b/src/components/document-canvas/scrollbars/scrollbars.vue
index 01f6628..27dcb59 100644
--- a/src/components/document-canvas/scrollbars/scrollbars.vue
+++ b/src/components/document-canvas/scrollbars/scrollbars.vue
@@ -267,7 +267,7 @@ export default {
 @use "@/styles/_mixins";
 @use "@/styles/_variables";
 
-$size: variables.$spacing-medium;
+$size: variables.$spacing-small;
 
 .scroll {
     position: absolute;
diff --git a/src/components/document-preview/document-preview.vue b/src/components/document-preview/document-preview.vue
index 4c05c4e..b0ebca7 100644
--- a/src/components/document-preview/document-preview.vue
+++ b/src/components/document-preview/document-preview.vue
@@ -128,7 +128,6 @@ export default {
 @use "@/styles/_variables";
 
 $metaHeight: 80px;
-$colorBg: colors.$color-bg-dark;
 $colorLines: colors.$color-bg-light;
 
 .document-preview {
@@ -160,13 +159,13 @@ $colorLines: colors.$color-bg-light;
         overflow-x: auto;
         overflow-y: auto;
         height: calc(100% - $metaHeight);
-        background-color: $colorBg;
         border: 1px solid $colorLines;
         overscroll-behavior-y: none; // prevents bounce on scroll end
     }
 
     &__image {
         width: 100%;
+        background: url( "../../assets-inline/images/document_transparent_bg.png" ) repeat;
 
         &--crisp {
             image-rendering: pixelated;
diff --git a/src/components/document-properties-window/document-properties-window.vue b/src/components/document-properties-window/document-properties-window.vue
index 1e1940b..8b5baba 100644
--- a/src/components/document-properties-window/document-properties-window.vue
+++ b/src/components/document-properties-window/document-properties-window.vue
@@ -28,7 +28,7 @@
         <template #content>
             <div class="form" @keyup.enter="save()">
                 <h3 v-t="'options'" class="title"></h3>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--picker">
                     <label v-t="'backgroundColor'"></label>
                     <color-picker
                         v-model="backgroundColor"
diff --git a/src/components/file-import/file-import.vue b/src/components/file-import/file-import.vue
index 7b0df2d..f9f0b22 100644
--- a/src/components/file-import/file-import.vue
+++ b/src/components/file-import/file-import.vue
@@ -71,7 +71,7 @@
                         ></button>
                         <component :is="s3ImportType" />
                     </template>
-                    <div class="wrapper input">
+                    <div class="wrapper wrapper--select">
                         <label v-t="'openImageAsNew'" class="file-target-label"></label>
                         <select-box
                             :options="fileTargetOptions"
@@ -219,4 +219,8 @@ export default {
 .button--third-party:last-of-type {
     margin-bottom: variables.$spacing-medium;
 }
+
+.wrapper--select {
+    margin-top: variables.$spacing-medium;
+}
 </style>
diff --git a/src/components/file-menu/create-document-window/create-document-window.vue b/src/components/file-menu/create-document-window/create-document-window.vue
index d23a760..75db875 100644
--- a/src/components/file-menu/create-document-window/create-document-window.vue
+++ b/src/components/file-menu/create-document-window/create-document-window.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="save()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'name'"></label>
                     <input
                         ref="first"
@@ -36,14 +36,14 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper input wrapper--small">
+                <div class="wrapper wrapper--select wrapper--small">
                     <label v-t="'documentType'"></label>
                     <select-box
                         :options="types"
                         v-model="type"
                     />
                 </div>
-                <div class="wrapper input wrapper--small">
+                <div class="wrapper wrapper--select wrapper--small">
                     <label v-t="'preset'"></label>
                     <select-box
                         :options="presets"
@@ -54,7 +54,7 @@
                     v-model="dimensions"
                 />
                 <h3 v-t="'options'" class="title"></h3>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--picker">
                     <label v-t="'backgroundColor'"></label>
                     <color-picker
                         v-model="backgroundColor"
@@ -191,7 +191,7 @@ export default {
 @use "@/styles/ui";
 
 .create-document {
-    @include ui.modalBase( 480px, 445px );
+    @include ui.modalBase( 480px, 450px );
 }
 
 .title {
diff --git a/src/components/file-menu/export-window/export-window.vue b/src/components/file-menu/export-window/export-window.vue
index d00db80..5301840 100644
--- a/src/components/file-menu/export-window/export-window.vue
+++ b/src/components/file-menu/export-window/export-window.vue
@@ -28,7 +28,7 @@
         <template #content>
             <div class="export-ui">
                 <div class="form export-form" @keyup.enter="exportImage">
-                    <div class="wrapper input">
+                    <div class="wrapper wrapper--select">
                         <label v-t="'imageType'"></label>
                         <select-box
                             :options="fileTypes"
@@ -46,7 +46,7 @@
                             :max="100"
                         />
                     </div>
-                    <div class="wrapper input">
+                    <div class="wrapper wrapper--input">
                         <label v-t="'fileName'"></label>
                         <input
                             type="text"
@@ -55,25 +55,26 @@
                         />
                     </div>
                     <template v-if="canCreateAnimatedGIF">
-                        <div class="wrapper input">
+                        <div class="wrapper wrapper--toggle">
                             <label v-t="'layersToAnimation'"></label>
                             <toggle-button
                                 v-model="exportAnimation"
                                 name="createAnimatedGIF"
                             />
                         </div>
-                        <div v-if="exportAnimation" class="wrapper input">
+                        <div v-if="exportAnimation" class="wrapper wrapper--input wrapper--small">
                             <label v-t="'frameDuration'"></label>
                             <input
                                 type="number"
                                 v-model="frameDurationMs"
                                 class="input-field"
                             />
+                            <span v-t="'millis'" class="input-suffix"></span>
                         </div>
                     </template>
                     <div
                         v-if="hasCloudStorage"
-                        class="wrapper input"
+                        class="wrapper wrapper--select"
                     >
                         <label v-t="'storageLocation'"></label>
                         <select-box
@@ -86,7 +87,7 @@
                     <component :is="s3SaveComponent"      ref="s3Component" />
                     <template v-if="canCreateSpriteSheet">
                         <p v-t="'layersToSheetExpl'" class="expl"></p>
-                        <div class="wrapper input">
+                        <div class="wrapper wrapper--toggle">
                             <label v-t="'layersToSpriteSheet'"></label>
                             <toggle-button
                                 v-model="layersToSpriteSheet"
@@ -94,7 +95,7 @@
                             />
                         </div>
                         <template v-if="layersToSpriteSheet">
-                            <div class="wrapper input wrapper--small">
+                            <div class="wrapper wrapper--input wrapper--small">
                                 <label v-t="'columnAmount'"></label>
                                 <input
                                     type="number"
@@ -149,14 +150,14 @@
                     ></button>
                 </div>
                 <div class="export-actions__group export-options">
-                    <div v-if="showOriginal" class="wrapper input option-button">
+                    <div v-if="showOriginal" class="wrapper wrapper--toggle option-button">
                         <label v-t="'syncScroll'"></label>
                         <toggle-button
                             v-model="syncPreviews"
                             name="syncPreviews"
                         />
                     </div>
-                    <div v-if="canChooseSize" class="wrapper input option-button">
+                    <div v-if="canChooseSize" class="wrapper wrapper--toggle option-button">
                         <label v-t="'viewActualSize'"></label>
                         <toggle-button
                             v-model="actualSize"
@@ -232,7 +233,7 @@ export default {
         showOriginal(): boolean {
             // see _variables.scss $preview-ideal-width and $preview-ideal-height
             const isLargeEnough = this.windowSize.width >= 1280 && this.windowSize.height >= 700;
-            return isLargeEnough && !this.exportAnimation;
+            return isLargeEnough && ( !this.exportAnimation || !this.canCreateAnimatedGIF );
         },
         selectedType(): string {
             return typeToExt( this.type );
@@ -495,7 +496,7 @@ export default {
 @use "@/styles/typography";
 @use "@/styles/ui";
 
-$idealFormWidth: 340px;
+$idealFormWidth: 310px;
 
 .export-modal {
     width: 100%;
@@ -504,6 +505,9 @@ $idealFormWidth: 340px;
     .export-form {
         width: $idealFormWidth;
         max-width: $idealFormWidth;
+        padding: variables.$spacing-medium variables.$spacing-large;
+        border: 1px dotted colors.$color-lines-dark;
+        border-bottom: none;
     }
 
     .export-actions {
diff --git a/src/components/file-menu/export-window/messages.json b/src/components/file-menu/export-window/messages.json
index 5c12841..3c0d4a7 100644
--- a/src/components/file-menu/export-window/messages.json
+++ b/src/components/file-menu/export-window/messages.json
@@ -7,10 +7,11 @@
         "original": "Original",
         "exported": "{type} quality: {quality}%",
         "syncScroll": "Sync scroll",
-        "layersToAnimation": "As animation",
-        "frameDuration": "Frame duration (ms)",
+        "layersToAnimation": "To animation",
+        "frameDuration": "Frame duration",
+        "millis": "(ms)",
         "layersToSheetExpl": "This documents size supports combining its contents into a tiled sheet (for instance to turn animation tiles / layered content into a spritesheet)",
-        "layersToSpriteSheet": "Merge into sheet",
+        "layersToSpriteSheet": "To spritesheet",
         "columnAmount": "Column amount",
         "export": "Export",
         "cancel": "Cancel",
diff --git a/src/components/file-menu/save-document/aws-s3/save-s3-document.vue b/src/components/file-menu/save-document/aws-s3/save-s3-document.vue
index a994299..b672123 100644
--- a/src/components/file-menu/save-document/aws-s3/save-s3-document.vue
+++ b/src/components/file-menu/save-document/aws-s3/save-s3-document.vue
@@ -22,7 +22,7 @@
  */
 <template>
     <div class="save-s3-document">
-        <div class="wrapper input">
+        <div class="wrapper wrapper--input">
             <label v-t="'folder'"></label>
             <input
                 type="text"
diff --git a/src/components/file-menu/save-document/dropbox/save-dropbox-document.vue b/src/components/file-menu/save-document/dropbox/save-dropbox-document.vue
index 52f40c6..99b8ee4 100644
--- a/src/components/file-menu/save-document/dropbox/save-dropbox-document.vue
+++ b/src/components/file-menu/save-document/dropbox/save-dropbox-document.vue
@@ -22,7 +22,7 @@
  */
 <template>
     <div class="save-dropbox-document">
-        <div class="wrapper input">
+        <div class="wrapper wrapper--input">
             <label v-t="'folder'"></label>
             <input
                 type="text"
diff --git a/src/components/file-menu/save-document/google-drive/save-google-drive-document.vue b/src/components/file-menu/save-document/google-drive/save-google-drive-document.vue
index dc7676f..973e5c9 100644
--- a/src/components/file-menu/save-document/google-drive/save-google-drive-document.vue
+++ b/src/components/file-menu/save-document/google-drive/save-google-drive-document.vue
@@ -22,7 +22,7 @@
  */
 <template>
     <div class="save-drive-document">
-        <div class="wrapper input">
+        <div class="wrapper wrapper--input">
             <label v-t="'folder'"></label>
             <input
                 type="text"
diff --git a/src/components/file-menu/save-document/save-document.vue b/src/components/file-menu/save-document/save-document.vue
index c97b15b..072bf5b 100644
--- a/src/components/file-menu/save-document/save-document.vue
+++ b/src/components/file-menu/save-document/save-document.vue
@@ -30,7 +30,7 @@
                 class="form"
                 @keyup.enter="requestSave()"
             >
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'documentTitle'"></label>
                     <input
                         ref="nameInput"
@@ -41,7 +41,7 @@
                 </div>
                 <div
                     v-if="hasCloudStorage"
-                    class="wrapper input"
+                    class="wrapper wrapper--select"
                 >
                     <label v-t="'storageLocation'"></label>
                     <select-box
diff --git a/src/components/grid-to-layers-window/grid-to-layers-window.vue b/src/components/grid-to-layers-window/grid-to-layers-window.vue
index 5dc5305..970bdb9 100644
--- a/src/components/grid-to-layers-window/grid-to-layers-window.vue
+++ b/src/components/grid-to-layers-window/grid-to-layers-window.vue
@@ -29,7 +29,7 @@
             <div class="form" @keyup.enter="requestSlice()">
                 <p v-t="'gridSliceExpl'" class="expl"></p>
                 <p>{{ $t( "currentDocumentSize", { width: Math.round( activeDocument.width ), height: Math.round( activeDocument.height ) }) }}</p>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'width'"></label>
                     <input
                         ref="widthInput"
@@ -39,7 +39,7 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'height'"></label>
                     <input
                         v-model.number="height"
@@ -49,7 +49,7 @@
                     />
                 </div>
                 <p v-t="'layerVisibilityExpl'" class="expl"></p>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label v-t="'allLayersVisible'"></label>
                     <toggle-button
                         v-model="allVisible"
diff --git a/src/components/layer-effects/layer-effects.vue b/src/components/layer-effects/layer-effects.vue
index c8984be..ad9c153 100644
--- a/src/components/layer-effects/layer-effects.vue
+++ b/src/components/layer-effects/layer-effects.vue
@@ -23,7 +23,7 @@
 <template>
     <div class="layer-effects" ref="effectsPanel">
         <div class="component__content form" ref="effectsList">
-            <div class="wrapper input">
+            <div class="wrapper wrapper--toggle">
                 <label v-t="'enabled'"></label>
                 <toggle-button
                     v-model="internalValue.enabled"
@@ -33,7 +33,7 @@
             </div>
             <fieldset class="fieldset">
                 <legend v-t="'compositing'" />
-                <div class="wrapper input">
+                <div class="wrapper wrapper--select">
                     <label v-t="'blendMode'"></label>
                     <select-box
                         v-model="internalValue.blendMode"
@@ -41,7 +41,7 @@
                         :disabled="activeLayerIndex === 0"
                     />
                 </div>
-                <div class="wrapper slider">
+                <div class="wrapper wrapper--slider">
                     <label v-t="'opacity'"></label>
                     <slider
                         v-model="opacity"
@@ -53,7 +53,7 @@
             </fieldset>
             <fieldset class="fieldset">
                 <legend v-t="'toneAdjustments'" />
-                <div class="wrapper slider">
+                <div class="wrapper wrapper--slider">
                     <label v-t="'gamma'"></label>
                     <slider
                         v-model="gamma"
@@ -62,7 +62,7 @@
                         :tooltip="'none'"
                     />
                 </div>
-                <div class="wrapper slider">
+                <div class="wrapper wrapper--slider">
                     <label v-t="'brightness'"></label>
                     <slider
                         v-model="brightness"
@@ -71,7 +71,7 @@
                         :tooltip="'none'"
                     />
                 </div>
-                <div class="wrapper slider">
+                <div class="wrapper wrapper--slider">
                     <label v-t="'contrast'"></label>
                     <slider
                         v-model="contrast"
@@ -83,7 +83,7 @@
             </fieldset>
             <fieldset class="fieldset">
                 <legend v-t="'colorAdjustments'" />
-                <div class="wrapper slider">
+                <div class="wrapper wrapper--slider">
                     <label v-t="'vibrance'"></label>
                     <slider
                         v-model="vibrance"
@@ -92,7 +92,7 @@
                         :tooltip="'none'"
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label v-t="'invert'"></label>
                     <toggle-button
                         v-model="internalValue.invert"
@@ -100,7 +100,7 @@
                         sync
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label v-t="'desaturate'"></label>
                     <toggle-button
                         v-model="internalValue.desaturate"
@@ -111,7 +111,7 @@
             </fieldset>
             <fieldset class="fieldset">
                 <legend v-t="'filters'" />
-                <div class="wrapper input">
+                <div class="wrapper wrapper--slider">
                     <label v-t="'threshold'"></label>
                     <slider
                         v-model="internalValue.threshold"
@@ -120,7 +120,7 @@
                         :tooltip="'none'"
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label
                         for="duotone"
                         v-t="'duotone'"
@@ -131,18 +131,20 @@
                         sync
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--picker">
                     <label></label>
-                    <color-picker
-                        id="duotoneColor1"
-                        color-type="HEXA"
-                        v-model="internalValue.duotone.color1"
-                    />
-                    <color-picker
-                        id="duotoneColor2"
-                        color-type="HEXA"
-                        v-model="internalValue.duotone.color2"
-                    />
+                    <div class="shared-inputs">
+                        <color-picker
+                            id="duotoneColor1"
+                            color-type="HEXA"
+                            v-model="internalValue.duotone.color1"
+                        />
+                        <color-picker
+                            id="duotoneColor2"
+                            color-type="HEXA"
+                            v-model="internalValue.duotone.color2"
+                        />
+                    </div>
                 </div>
             </fieldset>
         </div>
@@ -371,7 +373,7 @@ export default {
         :deep(.component__content) {
             @include mixins.boxSize();
             @include mixins.truncate();
-            border-bottom: 1px solid colors.$color-lines;
+            border-bottom: 1px solid colors.$color-lines-dark;
             overflow-x: hidden;
             overflow-y: auto;
         }
diff --git a/src/components/layer-panel/layer-panel.vue b/src/components/layer-panel/layer-panel.vue
index d41b1f5..673efb9 100644
--- a/src/components/layer-panel/layer-panel.vue
+++ b/src/components/layer-panel/layer-panel.vue
@@ -34,11 +34,9 @@
             >{{ title }}</h2>
             <button
                 type="button"
-                class="component__header-button button--ghost"
+                class="component__header-button"
                 @click="collapsed = !collapsed"
-            >
-                <img :src="`assets/images/icon-${collapsed ? 'expand' : 'collapse'}.svg`" />
-            </button>
+            >{{ collapsed ? '+' : '-' }}</button>
         </div>
         <template v-if="!collapsed">
             <layer-effects
@@ -62,7 +60,8 @@
                             <div
                                 class="layer"
                                 :class="{
-                                    'layer--active': element.index === activeLayerIndex
+                                    'layer--active': element.index === activeLayerIndex,
+                                    'layer--has-thumb': renderThumbnails,
                                 }"
                                 @contextmenu.stop.prevent="showContextMenu( $event, element )"
                             >
@@ -93,7 +92,7 @@
                                     v-tooltip.left="$t( element.maskSelected ? 'clickToEditLayer' : 'dblClickToRename')"
                                     class="layer__name"
                                     :class="{
-                                        'layer--selected': element.index === activeLayerIndex && !element.maskSelected
+                                        'layer--selected': element.index === activeLayerIndex && !element.maskSelected,
                                     }"
                                     @dblclick="handleLayerDoubleClick( element )"
                                     @click="handleLayerClick( element )"
@@ -436,6 +435,7 @@ export default {
 @use "@/styles/_variables";
 @use "@/styles/panel";
 @use "@/styles/typography";
+@use "@/styles/ui";
 
 .layer-panel-wrapper {
     @include panel.panel();
@@ -464,9 +464,11 @@ export default {
             }
         }
     }
-    
-    @include mixins.large() {
-        .component__header-button {
+
+    .component__header-button {
+        @include ui.closeButton();
+
+        @include mixins.large() {
             display: none;
         }
     }
@@ -480,11 +482,12 @@ export default {
 
 .no-layers-text {
     padding: 0 variables.$spacing-medium;
+    font-size: 90%;
 }
 
 .layer {
     cursor: pointer;
-    border-bottom: 1px dotted colors.$color-lines;
+    border-bottom: 1px solid colors.$color-lines-dark;
     padding: 0 variables.$spacing-xsmall;
     @include mixins.boxSize();
     @include typography.customFont();
@@ -499,7 +502,6 @@ export default {
     &__thumbnail {
         width: 40px; // see thumbnail-cache.ts
         border: 1px solid colors.$color-lines;
-        margin: variables.$spacing-xsmall;
         background: url( "../../assets-inline/images/document_transparent_bg.png" ) repeat;
         
         img {
@@ -511,28 +513,25 @@ export default {
 
     &__name,
     &__name-input {
-        display: flex;
-        align-items: center;
         flex: 3;
         @include mixins.truncate();
         font-size: 90%;
-        padding: 0 variables.$spacing-small;
-        margin-left: variables.$spacing-xsmall;
+        padding: variables.$spacing-small 0;
+        margin-left: variables.$spacing-small + variables.$spacing-xsmall;
     }
     
     &__name-input {
-        padding-top: 0;
+        padding: variables.$spacing-xsmall;
+        margin: variables.$spacing-xsmall 0 variables.$spacing-xsmall variables.$spacing-small;
     }
 
     &__actions {
-        display: flex;
-        align-items: center;
-        margin-right: variables.$spacing-small;
+        margin: variables.$spacing-xsmall variables.$spacing-xsmall 0 0;
 
         &-button {
             cursor: pointer;
-            width: 30px;
-            height: 32px;
+            width: 22px;
+            height: 22px;
             padding: 0;
             filter: brightness(0) invert(0.5);
 
@@ -545,7 +544,7 @@ export default {
             }
 
             img {
-                width: 24px;
+                width: 18px;
                 vertical-align: middle;
             }
         }
@@ -568,6 +567,15 @@ export default {
         color: #FFF;
     }
 
+    &--has-thumb {
+        padding: 0;
+
+        .layer__name {
+            padding: variables.$spacing-small variables.$spacing-xsmall;
+            margin: 0 variables.$spacing-small;
+        }
+    }
+
     @include mixins.mobile() {
         min-height: 44px;
         align-items: center;
diff --git a/src/components/menus/header-menu/header-menu.vue b/src/components/menus/header-menu/header-menu.vue
index 636d91c..288623c 100644
--- a/src/components/menus/header-menu/header-menu.vue
+++ b/src/components/menus/header-menu/header-menu.vue
@@ -27,9 +27,11 @@
         <div class="toggle" @click="setMenuOpened( !menuOpened )">
             <span>&#9776;</span>
         </div>
-        <h1 class="heading">
-            Bit<span class="emphasis">Mappery</span>
-        </h1>
+        <img
+            class="logo"
+            src="/assets/favicon/favicon-96x96.png"
+            alt="BitMappery logo"
+        />
         <ul class="menu-list">
             <!-- file menu -->
             <li>
@@ -410,6 +412,7 @@ import sharedMessages from "@/messages.json"; // for CloudServiceConnector
 import messages from "./messages.json";
 
 export default {
+    emits: [ "rescale" ],
     i18n: { messages, sharedMessages },
     mixins: [ CloudServiceConnector, ImageToDocumentManager ],
     components: {
@@ -518,8 +521,9 @@ export default {
             setToggleButton( this.$refs.fullscreenBtn, isFullscreen => {
                 this.isFullscreen = isFullscreen;
                 // slight timeout as resize doesn't fire until full screen toggle is complete
-                window.setTimeout(() => {
+                setTimeout(() => {
                     getCanvasInstance()?.rescaleFn();
+                    this.$emit( "rescale" );
                 }, 100 );
             });
         }
@@ -617,13 +621,9 @@ export default {
 
 $toggle-width: 50px;
 
-.heading {
-    @include typography.customFont();
-    letter-spacing: variables.$spacing-xxsmall;
-
-    .emphasis {
-        letter-spacing: math.div( variables.$spacing-xxsmall, 4 );
-    }
+.logo {
+    width: variables.$spacing-large;
+    margin-right: variables.$spacing-medium;
 }
 
 .menu {
@@ -631,7 +631,6 @@ $toggle-width: 50px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0 auto;
     padding: variables.$spacing-small variables.$spacing-medium;
     width: 100%;
     height: variables.$menu-height;
@@ -642,8 +641,7 @@ $toggle-width: 50px;
     @include mixins.large() {
         min-width: 100%;
         max-width: variables.$ideal-width;
-        margin: 0 auto;
-        padding-left: variables.$spacing-large;
+        padding-left: variables.$spacing-xlarge;
     }
 
     @include mixins.mobile() {
@@ -671,7 +669,7 @@ $toggle-width: 50px;
             display: block;
         }
 
-        h1 {
+        .logo {
             display: none;
         }
     }
diff --git a/src/components/new-layer-window/new-layer-window.vue b/src/components/new-layer-window/new-layer-window.vue
index 8eff814..52e31d8 100644
--- a/src/components/new-layer-window/new-layer-window.vue
+++ b/src/components/new-layer-window/new-layer-window.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="requestLayerAdd()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'layerName'"></label>
                     <input
                         ref="nameInput"
@@ -36,7 +36,7 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--select">
                     <label v-t="'layerType'"></label>
                     <select-box
                         :options="layerTypes"
diff --git a/src/components/preferences-window/preferences-window.vue b/src/components/preferences-window/preferences-window.vue
index cbc3609..41de676 100644
--- a/src/components/preferences-window/preferences-window.vue
+++ b/src/components/preferences-window/preferences-window.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="save()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label v-t="'lowMemoryMode'"></label>
                     <toggle-button
                         v-model="internalValue.lowMemory"
@@ -35,7 +35,7 @@
                     />
                 </div>
                 <p v-t="'lowMemoryExpl'" class="expl"></p>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label v-t="'layerThumbnails'"></label>
                     <toggle-button
                         v-model="internalValue.thumbnails"
@@ -43,7 +43,7 @@
                     />
                 </div>
                 <p v-t="'layerThumbnailsExpl'" class="expl"></p>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label v-t="'autoAlias'"></label>
                     <toggle-button
                         v-model="internalValue.autoAlias"
@@ -52,7 +52,7 @@
                 </div>
                 <p v-t="'autoAliasExpl'" class="expl"></p>
                 <template v-if="hasWebAssembly">
-                    <div class="wrapper input">
+                    <div class="wrapper wrapper--toggle">
                         <label v-t="'wasmFilters'"></label>
                         <toggle-button
                             v-model="internalValue.wasmFilters"
diff --git a/src/components/resize-canvas-window/resize-canvas-window.vue b/src/components/resize-canvas-window/resize-canvas-window.vue
index 49bd29b..44be418 100644
--- a/src/components/resize-canvas-window/resize-canvas-window.vue
+++ b/src/components/resize-canvas-window/resize-canvas-window.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="resize()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'width'"></label>
                     <input
                         v-model.number="width"
@@ -37,7 +37,7 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'height'"></label>
                     <input
                         v-model.number="height"
@@ -46,7 +46,7 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--select">
                     <label v-t="'contentAlignment'"></label>
                     <select-box :options="alignmentOptions"
                                  v-model="alignment"
diff --git a/src/components/resize-document-window/resize-document-window.vue b/src/components/resize-document-window/resize-document-window.vue
index 6f01ebd..44e484c 100644
--- a/src/components/resize-document-window/resize-document-window.vue
+++ b/src/components/resize-document-window/resize-document-window.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="save()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--toggle">
                     <label v-t="'maintainAspectRatio'"></label>
                     <toggle-button
                         v-model="maintainRatio"
diff --git a/src/components/selection-menu/load-selection/load-selection.vue b/src/components/selection-menu/load-selection/load-selection.vue
index e8d698f..6310ccb 100644
--- a/src/components/selection-menu/load-selection/load-selection.vue
+++ b/src/components/selection-menu/load-selection/load-selection.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="requestLoad()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--select">
                     <label v-t="'availableSelections'"></label>
                     <select-box
                         :options="selections"
diff --git a/src/components/selection-menu/save-selection/save-selection.vue b/src/components/selection-menu/save-selection/save-selection.vue
index a9341b6..78a8c5b 100644
--- a/src/components/selection-menu/save-selection/save-selection.vue
+++ b/src/components/selection-menu/save-selection/save-selection.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="requestSave()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'name'"></label>
                     <input ref="nameInput"
                            type="text"
diff --git a/src/components/stroke-selection-window/stroke-selection-window.vue b/src/components/stroke-selection-window/stroke-selection-window.vue
index 5bc0d81..f805429 100644
--- a/src/components/stroke-selection-window/stroke-selection-window.vue
+++ b/src/components/stroke-selection-window/stroke-selection-window.vue
@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="stroke()">
-                <div class="wrapper input">
+                <div class="wrapper wrapper--input">
                     <label v-t="'strokeSize'"></label>
                     <input
                         ref="sizeInput"
@@ -38,7 +38,7 @@
                         class="input-field size-input"
                     />
                 </div>
-                <div class="wrapper input">
+                <div class="wrapper wrapper--picker">
                     <label v-t="'strokeColor'"></label>
                     <color-picker
                         v-model="color"
diff --git a/src/components/tool-options-panel/messages.json b/src/components/tool-options-panel/messages.json
index 4183eac..c921b2b 100644
--- a/src/components/tool-options-panel/messages.json
+++ b/src/components/tool-options-panel/messages.json
@@ -1,6 +1,6 @@
 {
     "en-US": {
         "toolOptions": "Tool options",
-        "noToolOptions": "No active tool or active tool has no customizable options"
+        "noToolOptions": "No tool selected or the currently selected tool has no customizable options."
     }
 }
diff --git a/src/components/tool-options-panel/tool-options-brush/tool-options-brush.vue b/src/components/tool-options-panel/tool-options-brush/tool-options-brush.vue
index e3d87ff..c2eac27 100644
--- a/src/components/tool-options-panel/tool-options-brush/tool-options-brush.vue
+++ b/src/components/tool-options-panel/tool-options-brush/tool-options-brush.vue
@@ -23,7 +23,7 @@
 <template>
     <div class="tool-option">
         <h3 v-t="'brush'"></h3>
-        <div class="wrapper input">
+        <div class="wrapper wrapper--select">
             <label v-t="'brushType'"></label>
             <select-box
                 v-model="brushType"
@@ -31,7 +31,7 @@
                 :disabled="disabled"
             />
         </div>
-        <div class="wrapper slider">
+        <div class="wrapper wrapper--slider">
             <label v-t="'brushSize'"></label>
             <slider
                 v-model="brushSize"
@@ -42,7 +42,7 @@
         </div>
         <div
             v-if="hasThickness"
-            class="wrapper slider"
+            class="wrapper wrapper--slider"
         >
             <label v-t="'thickness'"></label>
             <slider
@@ -53,7 +53,7 @@
             />
         </div>
         <template v-if="canStroke">
-            <div class="wrapper slider">
+            <div class="wrapper wrapper--slider">
                 <label v-t="'strokeAmount'"></label>
                 <slider
                     v-model="strokes"
@@ -62,7 +62,7 @@
                     :disabled="disabled"
                 />
             </div>
-            <div class="wrapper input">
+            <div class="wrapper wrapper--toggle">
                 <label v-t="'smoothing'"></label>
                 <toggle-button
                     v-model="smooth"
@@ -71,7 +71,7 @@
                 />
             </div>
         </template>
-        <div class="wrapper slider">
+        <div class="wrapper wrapper--slider">
             <label v-t="'opacity'"></label>
             <slider
                 v-model="opacity"
diff --git a/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue b/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue
index 0d71ebd..3a31ae0 100644
--- a/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue
+++ b/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue
@@ -23,7 +23,7 @@
 <template>
     <div class="tool-option">
         <h3 v-t="'cloneBrush'"></h3>
-        <div class="wrapper input">
+        <div class="wrapper wrapper--select">
             <label v-t="'sourceLayer'"></label>
             <select-box
                 v-model="sourceLayer"
@@ -31,7 +31,7 @@
                 :disabled="disabled"
             />
         </div>
-        <div class="wrapper slider">
+        <div class="wrapper wrapper--slider">
             <label v-t="'brushSize'"></label>
             <slider
                 v-model="brushSize"
@@ -40,7 +40,7 @@
                 :disabled="disabled"
             />
         </div>
-        <!-- <div class="wrapper slider">
+        <!-- <div class="wrapper wrapper--slider">
             <label v-t="'thickness'"></label>
             <slider
                 v-model="thickness"
@@ -49,7 +49,7 @@
                 :disabled="disabled"
             />
         </div> -->
-        <div class="wrapper slider">
+        <div class="wrapper wrapper--slider">
             <label v-t="'opacity'"></label>
             <slider
                 v-model="opacity"
@@ -58,7 +58,7 @@
                 :disabled="disabled"
             />
         </div>
-        <div class="wrapper input">
+        <div class="wrapper">
             <button
                 v-t="'selectSourceCoordinate'"
                 v-tooltip="'(Alt + Click)'"
diff --git a/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue b/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue
index cf0ddb0..561113a 100644
--- a/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue
+++ b/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue
@@ -27,7 +27,7 @@
         @focusout="handleBlur()"
     >
         <h3 v-t="isMask ? 'maskPosition' : 'layerPosition'"></h3>
-        <div class="wrapper input">
+        <div class="wrapper wrapper--input">
             <label v-t="'coordinates'"></label>
             <input
                 type="number"
diff --git a/src/components/tool-options-panel/tool-options-fill/tool-options-fill.vue b/src/components/tool-options-panel/tool-options-fill/tool-options-fill.vue
index b450a28..0af68d1 100644
--- a/src/components/tool-options-panel/tool-options-fill/tool-options-fill.vue
+++ b/src/components/tool-options-panel/tool-options-fill/tool-options-fill.vue
@@ -23,7 +23,7 @@
 <template>
     <div class="tool-option">
         <h3 v-t="'fill'"></h3>
-        <div class="wrapper full slider">
+        <div class="wrapper wrapper--toggle wrapper--full">
             <label v-t="'smartFill'"></label>
             <toggle-button
                 v-model="smartFill"
diff --git a/src/components/tool-options-panel/tool-options-panel.vue b/src/components/tool-options-panel/tool-options-panel.vue
index f5a4864..26ccb5d 100644
--- a/src/components/tool-options-panel/tool-options-panel.vue
+++ b/src/components/tool-options-panel/tool-options-panel.vue
@@ -33,11 +33,9 @@
             ></h2>
             <button
                 type="button"
-                class="component__header-button button--ghost"
+                class="component__header-button"
                 @click="collapsed = !collapsed"
-            >
-                <img :src="`assets/images/icon-${collapsed ? 'expand' : 'collapse'}.svg`" />
-            </button>
+            >{{ collapsed ? '+' : '-' }}</button>
         </div>
         <div
             v-if="!collapsed"
@@ -155,10 +153,12 @@ export default {
 <style lang="scss" scoped>
 @use "@/styles/_mixins";
 @use "@/styles/_variables";
+@use "@/styles/ui";
 @use "@/styles/panel";
 
 .options-panel-wrapper {
     @include panel.panel();
+    height: auto;
 
     & {
         overflow: initial !important;
@@ -174,7 +174,6 @@ export default {
     @include mixins.mobile() {
         position: fixed;
         bottom: panel.$collapsed-panel-height;
-        height: 40%;
 
         & {
             &.collapsed {
@@ -184,7 +183,12 @@ export default {
     }
 }
 
+.component__header-button {
+    @include ui.closeButton();
+}
+
 .no-tools-text {
     margin-top: variables.$spacing-small;
+    font-size: 90%;
 }
 </style>
diff --git a/src/components/tool-options-panel/tool-options-rotate/tool-options-rotate.vue b/src/components/tool-options-panel/tool-options-rotate/tool-options-rotate.vue
index 24a8d8d..2353e3e 100644
--- a/src/components/tool-options-panel/tool-options-rotate/tool-options-rotate.vue
+++ b/src/components/tool-options-panel/tool-options-rotate/tool-options-rotate.vue
@@ -23,7 +23,7 @@
 <template>
     <div class="tool-option">
         <h3 v-t="'rotation'"></h3>
-        <div class="wrapper full slider">
+        <div class="wrapper wrapper--slider wrapper--full">
             <slider
                 v-model="rotation"
                 :min="min"
diff --git a/src/components/tool-options-panel/tool-options-scale/tool-options-scale.vue b/src/components/tool-options-panel/tool-options-scale/tool-options-scale.vue
index 461de36..968d74e 100644
--- a/src/components/tool-options-panel/tool-options-scale/tool-options-scale.vue
+++ b/src/components/tool-options-panel/tool-options-scale/tool-options-scale.vue
@@ -23,7 +23,7 @@
 <template>
     <div class="tool-option">
         <h3 v-t="'scale'"></h3>
-        <div class="wrapper full slider">
+        <div class="wrapper wrapper--slider wrapper--full">
             <slider
                 v-model="scale"
                 :min="min"
diff --git a/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue b/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue
index 149784e..d4d0c69 100644
--- a/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue
+++ b/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue
@@ -29,7 +29,7 @@
         <h3 v-t="'selection'"></h3>
         <p v-if="isLassoSelection" v-t="'lassoExpl'"></p>
         <template v-else>
-            <div class="wrapper input">
+            <div class="wrapper wrapper--toggle">
                 <label v-t="'lockRatio'" v-tooltip="$t('shiftKey')"></label>
                 <toggle-button
                     v-model="maintainRatio"
@@ -38,7 +38,7 @@
                     :disabled="!activeLayer"
                 />
             </div>
-            <div class="wrapper input">
+            <div class="wrapper wrapper--input">
                 <label v-t="'widthToHeight'"></label>
                 <input
                     type="number"
@@ -54,8 +54,8 @@
                 />
             </div>
         </template>
-        <p v-t="'existingSelection'"></p>
-        <div class="wrapper input">
+        <h4 v-t="'existingSelection'"></h4>
+        <div class="wrapper wrapper--input">
             <label v-t="'coordinates'"></label>
             <input
                 type="number"
@@ -75,7 +75,7 @@
             />
         </div>
         <template v-if="!isLassoSelection">
-            <div class="wrapper input">
+            <div class="wrapper wrapper--input">
                 <label v-t="'dimensions'"></label>
                 <input
                     type="number"
@@ -254,6 +254,7 @@ export default {
 
 .half {
     width: 30% !important;
+    
     &:first-of-type {
         margin-right: variables.$spacing-small;
     }
diff --git a/src/components/tool-options-panel/tool-options-text/messages.json b/src/components/tool-options-panel/tool-options-text/messages.json
index 7fd0258..8cbc347 100644
--- a/src/components/tool-options-panel/tool-options-text/messages.json
+++ b/src/components/tool-options-panel/tool-options-text/messages.json
@@ -1,11 +1,12 @@
 {
     "en-US": {
+        "text": "Text",
         "typeYourTextHere": "Type your text here",
         "font": "Font",
         "size": "Size",
         "lineHeight": "Line height",
         "letterSpacing": "Letter spacing",
-        "color": "Color",
+        "color": "Text color",
         "pixels": "Px",
         "points": "Pts",
         "millis": "Mm",
diff --git a/src/components/tool-options-panel/tool-options-text/tool-options-text.vue b/src/components/tool-options-panel/tool-options-text/tool-options-text.vue
index 8d95fc2..3e08ee8 100644
--- a/src/components/tool-options-panel/tool-options-text/tool-options-text.vue
+++ b/src/components/tool-options-panel/tool-options-text/tool-options-text.vue
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2020-2025 - https://www.igorski.nl
+ * Igor Zinken 2020-2026 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -26,16 +26,17 @@
         @focusin="handleFocus"
         @focusout="handleBlur"
     >
-        <div class="wrapper input">
+        <h3 v-t="'text'"></h3>
+        <div class="wrapper wrapper--textarea">
             <textarea
                 ref="textInput"
                 v-model="text"
                 :placeholder="$t('typeYourTextHere')"
                 :disabled="disabled"
-                class="input-textarea full"
+                class="input-textarea input-full"
             />
         </div>
-        <div class="wrapper input">
+        <div class="wrapper wrapper--select">
             <label v-t="'font'"></label>
             <vue-select
                 v-model="font"
@@ -50,9 +51,9 @@
                 </template>
             </vue-select>
         </div>
-        <div class="wrapper slider">
+        <div class="wrapper wrapper--select">
             <label v-t="'size'"></label>
-            <div class="wrapper shared-inputs">
+            <div class="shared-inputs">
                 <input
                     v-model="size"
                     class="input-field"
@@ -66,7 +67,7 @@
                 />
             </div>
         </div>
-        <div class="wrapper slider">
+        <div class="wrapper wrapper--slider">
             <label v-t="'lineHeight'"></label>
             <slider
                 v-model="lineHeight"
@@ -76,7 +77,7 @@
                 :tooltip="'none'"
             />
         </div>
-        <div class="wrapper slider">
+        <div class="wrapper wrapper--slider">
             <label v-t="'letterSpacing'"></label>
             <slider
                 v-model="spacing"
@@ -86,7 +87,7 @@
                 :tooltip="'none'"
             />
         </div>
-        <div class="wrapper input">
+        <div class="wrapper wrapper--picker">
             <label v-t="'color'"></label>
             <component
                 :is="colorPicker"
@@ -99,15 +100,16 @@
     </div>
 </template>
 
-<script>
-import { defineAsyncComponent } from "vue";
+<script lang="ts">
+import { defineAsyncComponent, type IAsyncComponent } from "vue";
 import { mapGetters, mapMutations } from "vuex";
 import VueSelect from "vue-select";
 import SelectBox from "@/components/ui/select-box/select-box.vue";
 import Slider from "@/components/ui/slider/slider.vue";
+import type { Layer } from "@/definitions/document";
 import { DEFAULT_LAYER_NAME, LayerTypes } from "@/definitions/layer-types";
 import FontPreview from "./font-preview/font-preview.vue";
-import { mapSelectOptions } from "@/utils/search-select-util";
+import { mapSelectOptions, type SelectOption } from "@/utils/search-select-util";
 import { enqueueState } from "@/factories/history-state-factory";
 import KeyboardService from "@/services/keyboard-service";
 import { fontsConsented, consentFonts, rejectFonts } from "@/services/font-service";
@@ -136,22 +138,22 @@ export default {
             "activeLayerIndex",
             "activeLayer",
         ]),
-        disabled() {
+        disabled(): boolean {
             return this.activeLayer?.type !== LayerTypes.LAYER_TEXT;
         },
-        canSearchFonts() {
+        canSearchFonts(): boolean {
             return !isMobile(); // only show preview list on mobile
         },
-        colorPicker() {
+        colorPicker(): IAsyncComponent {
             // load async as this adds to the bundle size
             return defineAsyncComponent({
                 loader: () => import( "@/components/ui/color-picker/color-picker.vue" )
             });
         },
-        fonts() {
+        fonts(): SelectOption[] {
             return mapSelectOptions( [ ...googleFonts ].sort() );
         },
-        unitOptions() {
+        unitOptions(): { label: string, value: string }[] {
             return [
                 { label: this.$t( "pixels" ), value: "px" },
                 { label: this.$t( "points" ), value: "pt" },
@@ -160,10 +162,10 @@ export default {
             ];
         },
         text: {
-            get() {
+            get(): string {
                 return this.internalText;
             },
-            set( value ) {
+            set( value: string ): void {
                 this.internalText = value;
                 // debounce the model update (and subsequent text render)
                 // to not update on each entered character
@@ -178,10 +180,10 @@ export default {
             }
         },
         size: {
-            get() {
+            get(): number {
                 return this.activeLayer?.text?.size;
             },
-            set( size ) {
+            set( size: string | number ): void {
                 size = parseFloat( size );
                 if ( isNaN( size )) {
                     return;
@@ -191,42 +193,42 @@ export default {
             }
         },
         unit: {
-            get() {
+            get(): string {
                 return this.activeLayer?.text?.unit;
             },
-            set( unit ) {
+            set( unit: string ): void {
                 this.update({ unit }, "unit" );
             },
         },
         lineHeight: {
-            get() {
+            get(): number {
                 return this.activeLayer?.text?.lineHeight;
             },
-            set( lineHeight ) {
+            set( lineHeight: number ): void {
                 this.update({ lineHeight }, "lineHeight" );
             }
         },
         spacing: {
-            get() {
+            get(): number {
                 return this.activeLayer?.text?.spacing;
             },
-            set( spacing ) {
+            set( spacing: number ): void {
                 this.update({ spacing }, "spacing" );
             }
         },
         color: {
-            get() {
+            get(): string {
                 return this.activeLayer?.text?.color;
             },
-            set( color ) {
+            set( color: string ): void {
                 this.update({ color }, "color" );
             }
         },
         font: {
-            get() {
+            get(): string {
                 return this.activeLayer?.text?.font;
             },
-            set({ value } ) {
+            set({ value }: { value: string }): void {
                 this.update({ font: value }, "font" );
             }
         }
@@ -234,7 +236,7 @@ export default {
     watch: {
         activeLayer: {
             immediate: true,
-            handler( layer ) {
+            handler( layer: Layer ): void {
                 if ( layer && this.layerId !== layer.id ) {
                     this.internalText = layer.text?.value;
                     this.syncText     = this.internalText === layer.name || layer.name === DEFAULT_LAYER_NAME;
@@ -243,7 +245,7 @@ export default {
             }
         },
     },
-    mounted() {
+    mounted(): void {
         if ( !fontsConsented() ) {
             this.openDialog({
                 type: "confirm",
@@ -261,7 +263,7 @@ export default {
             focus( this.$refs.textInput );
         }
     },
-    unmounted() {
+    unmounted(): void {
         this.handleBlur();
     },
     methods: {
@@ -270,13 +272,13 @@ export default {
             "setActiveTool",
             "updateLayer",
         ]),
-        handleFocus() {
+        handleFocus(): void {
             KeyboardService.setSuspended( true );
         },
-        handleBlur() {
+        handleBlur(): void {
             KeyboardService.setSuspended( false );
         },
-        update( textOpts = {}, propName = "text" ) {
+        update( textOpts = {}, propName = "text" ): void {
             if ( !this.activeLayer ) {
                 return;
             }
@@ -324,12 +326,6 @@ export default {
 @use "@/styles/form";
 @use "@/styles/tool-option";
 
-.color-picker {
-    width: 50%;
-    display: inline-block;
-    transform: translateY(-(variables.$spacing-xsmall));
-}
-
 .font-selector {
     display: inline-block;
     width: form.$inputWidth;
diff --git a/src/components/tool-options-panel/tool-options-wand/tool-options-wand.vue b/src/components/tool-options-panel/tool-options-wand/tool-options-wand.vue
index 5e92c3f..8aacafd 100644
--- a/src/components/tool-options-panel/tool-options-wand/tool-options-wand.vue
+++ b/src/components/tool-options-panel/tool-options-wand/tool-options-wand.vue
@@ -28,7 +28,7 @@
     >
         <h3 v-t="'magicWand'"></h3>
         <p v-t="'wandDescr'"></p>
-        <div class="wrapper full slider">
+        <div class="wrapper wrapper--toggle wrapper--full">
             <label v-t="'sampleMerged'"></label>
             <toggle-button
                 v-model="sampleMerged"
@@ -37,7 +37,7 @@
                 :disabled="!activeLayer"
             />
         </div>
-        <div class="wrapper full input">
+        <div class="wrapper wrapper--input wrapper--full">
             <label v-t="'threshold'"></label>
             <input
                 type="number"
diff --git a/src/components/toolbox/toolbox.vue b/src/components/toolbox/toolbox.vue
index 4cca4fa..5a15942 100644
--- a/src/components/toolbox/toolbox.vue
+++ b/src/components/toolbox/toolbox.vue
@@ -31,11 +31,9 @@
             ></h2>
             <button
                 type="button"
-                class="component__header-button button--ghost"
+                class="component__header-button"
                 @click="collapsed = !collapsed"
-            >
-                <img :src="`assets/images/icon-${collapsed ? 'expand' : 'collapse'}.svg`" />
-            </button>
+            >{{ collapsed ? '+' : '-' }}</button>
         </div>
         <!-- click.stop.prevent is to prevent document scroll on double tap on iOS -->
         <div
@@ -288,6 +286,7 @@ export default {
 @use "@/styles/_variables";
 @use "@/styles/component";
 @use "@/styles/typography";
+@use "@/styles/ui";
 
 $toolButtonWidth: variables.$spacing-large;
 
@@ -297,19 +296,14 @@ $toolButtonWidth: variables.$spacing-large;
     @include mixins.large() {
         .component__content {
             margin-right: -(variables.$spacing-small);
-            padding: variables.$spacing-small + variables.$spacing-xsmall;
+            padding: variables.$spacing-small variables.$spacing-small;
         }
 
         .component__header-button {
-            top: variables.$spacing-small - variables.$spacing-xxsmall;
-            right: variables.$spacing-xxsmall;
-            width: 36px;
-            height: 29px;
-
-            img {
-                width: variables.$spacing-medium + variables.$spacing-small;
-                height: variables.$spacing-medium + variables.$spacing-small;
-            }
+            @include ui.closeButton();
+            top: variables.$spacing-small;
+            right: variables.$spacing-small;
+            width: 24px;
         }
 
         &--docked {
@@ -358,7 +352,7 @@ $toolButtonWidth: variables.$spacing-large;
 
     @media screen and (min-height: 880px) {
         @include mixins.large() {
-            width: 60px !important;
+            width: 52px !important;
         }
 
         .component__title {
@@ -367,7 +361,7 @@ $toolButtonWidth: variables.$spacing-large;
 
         .component__header-button {
             top: variables.$spacing-small;
-            right: #{variables.$spacing-medium - variables.$spacing-xsmall};
+            right: #{variables.$spacing-medium - variables.$spacing-xxsmall} !important;
         }
 
         .color-panel {
@@ -383,7 +377,6 @@ $toolButtonWidth: variables.$spacing-large;
 
 .tool-button {
     cursor: pointer;
-    border-radius: variables.$spacing-xsmall;
     border: none;
     padding: variables.$spacing-xxsmall variables.$spacing-xsmall;
     font-weight: bold;
@@ -409,13 +402,13 @@ $toolButtonWidth: variables.$spacing-large;
     }
 
     &:disabled {
-        background-color: #333;
+        background-color: transparent;
         color: colors.$color-bg;
         cursor: default;
     }
 
     @include mixins.large() {
-        margin: 0 variables.$spacing-small variables.$spacing-small 0;
+        margin: 0 variables.$spacing-xsmall variables.$spacing-xsmall 0;
         display: inline-block;
     }
 
@@ -458,5 +451,4 @@ $toolButtonWidth: variables.$spacing-large;
         color: #FFF;
     }
 }
-
 </style>
diff --git a/src/components/ui/dimensions-formatter/dimensions-formatter.vue b/src/components/ui/dimensions-formatter/dimensions-formatter.vue
index 84ef71c..75a8c73 100644
--- a/src/components/ui/dimensions-formatter/dimensions-formatter.vue
+++ b/src/components/ui/dimensions-formatter/dimensions-formatter.vue
@@ -23,7 +23,7 @@
 <template>
     <div>
         <h3 v-t="'dimensions'" class="title"></h3>
-        <div class="wrapper input">
+        <div class="wrapper wrapper--select">
             <label v-t="'unit'"></label>
             <div class="select-combo">
                 <select-box
@@ -38,7 +38,7 @@
                 />
             </div>
         </div>
-        <div class="wrapper input wrapper--small">
+        <div class="wrapper wrapper--input wrapper--small">
             <label v-t="'width'"></label>
             <input
                 v-model.number="translatedWidth"
@@ -49,7 +49,7 @@
                 class="input-field"
             />
         </div>
-        <div class="wrapper input wrapper--small">
+        <div class="wrapper wrapper--input wrapper--small">
             <label v-t="'height'"></label>
             <input
                 v-model.number="translatedHeight"
diff --git a/src/components/ui/select-box/select-box.vue b/src/components/ui/select-box/select-box.vue
index 9f3e5a3..21d2475 100644
--- a/src/components/ui/select-box/select-box.vue
+++ b/src/components/ui/select-box/select-box.vue
@@ -106,13 +106,21 @@ $dropdownHeight: variables.$spacing-xlarge;
     }
 }
 
+.vs__dropdown-menu {
+    overflow-x: hidden;
+}
+
+.vs__actions {
+    padding: 0;
+    margin-right: variables.$spacing-small;
+}
+
 .vs__selected {
     margin: variables.$spacing-xsmall variables.$spacing-small;
     font-size: 95%;
 }
 
 .vs__selected-options {
-    height: $dropdownHeight;
     @include mixins.truncate();
 }
 </style>
diff --git a/src/components/ui/slider/slider.vue b/src/components/ui/slider/slider.vue
index 446ff4b..850b5e3 100644
--- a/src/components/ui/slider/slider.vue
+++ b/src/components/ui/slider/slider.vue
@@ -21,7 +21,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 <template>
-    <div class="slider-input">
+    <div class="input-slider">
         <input
             v-if="!textInput"
             v-model.number="internalValue"
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index a73f26d..079ffd9 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -8,3 +8,4 @@ $color-bg-light: #383838;
 $color-window-bg: linear-gradient(to bottom, $color-bg-dark 35%, $color-bg-light 90%);
 $color-text: #e6e6e6;
 $color-lines: #b6b6b6;
+$color-lines-dark: #484848;
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index df1c12e..d740169 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -56,7 +56,8 @@ html, body {
 
 @include mixins.large() {
     ::-webkit-scrollbar {
-        width: 12px;
+        width: variables.$spacing-small;
+        height: variables.$spacing-small;
     }
 
     ::-webkit-scrollbar-corner {
@@ -65,7 +66,7 @@ html, body {
 
     ::-webkit-scrollbar-track {
         -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-        border-radius: variables.$spacing-medium;
+        // border-radius: variables.$spacing-medium;
         background-color: colors.$color-bg;
     }
 
diff --git a/src/styles/form.scss b/src/styles/form.scss
index f5abfe0..515d3d7 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -8,37 +8,54 @@ $inputWidth: 65%;
 
 .form {
     .wrapper {
-        margin: variables.$spacing-small 0;
+        display: flex;
+        align-items: center;
+        margin: variables.$spacing-xsmall 0;
+
+        // we can have modifiers per input element type, e.g :
+        // &--input,
+        // &--textarea,
+        // &--picker,
+        // &--select,
+        // &--slider,
+        // &--toggle {
+        //     // style here
+        // }
+
+        &--textarea,
+        &--toggle,
+        &--select {
+            margin-bottom: variables.$spacing-small;
+        }
 
         // use where there is no <label> element
-        &.full {
+        &--full {
             width: 200%;
-            margin-left: variables.$spacing-xsmall;
 
-            &.slider .slider-input {
+            .input-slider {
                 width: 48% !important;
             }
         }
 
         label {
-            display: inline-block;
             width: $labelWidth;
         }
 
+        .input-suffix {
+            margin-left: variables.$spacing-small;
+        }
+
         .input-field,
         .input-textarea,
-        .slider-input,
-        .form-element {
-            display: inline-block;
+        .input-slider {
             width: $inputWidth;
         }
-        .color-picker {
-            display: inline-block;
-            margin: variables.$spacing-xsmall;
-        }
-        .slider-input {
+        .input-slider {
             vertical-align: middle;
         }
+        .input-field {
+            margin: 0 0 variables.$spacing-xsmall;
+        }
         .input-field,
         .input-textarea {
             box-sizing: border-box;
@@ -49,22 +66,21 @@ $inputWidth: 65%;
             @include typography.bodyFont();
         }
 
-        .full {
+        .input-full {
             width: 100%; // when elements have no label
         }
 
         // when there are multiple inputs within a single wrapper
         // this is a wrapper following the <label> element
         .shared-inputs {
-            display: inline-flex;
+            display: flex;
             width: $inputWidth;
-            justify-content: space-around;
+            gap: variables.$spacing-small;
+            margin: 0;
         
             .input-field,
-            .input-textarea,
-            .slider-input,
-            .select-box-wrapper,
-            .form-element {
+            .input-slider,
+            .select-box-wrapper {
                 width: 76px !important;
             }
         }
diff --git a/src/styles/panel.scss b/src/styles/panel.scss
index 76b90d5..472a558 100644
--- a/src/styles/panel.scss
+++ b/src/styles/panel.scss
@@ -14,7 +14,7 @@ $collapsed-panel-height: 40px; // mobile view
         overflow: hidden;
 
         :deep(.component__content) {
-            padding: variables.$spacing-small variables.$spacing-medium variables.$spacing-medium;
+            padding: variables.$spacing-xsmall variables.$spacing-medium variables.$spacing-small;
             overflow-x: hidden;
             overflow-y: auto;
         }
@@ -30,10 +30,9 @@ $collapsed-panel-height: 40px; // mobile view
 
         // overrides component mixin
         :deep(.component__header-button) {
-            top: variables.$spacing-small - variables.$spacing-xxsmall;
-            right: variables.$spacing-small;
-            width: 36px;
-            height: 29px;
+            top: variables.$spacing-small;
+            right: variables.$spacing-medium;
+            width: 24px;
 
             img {
                 width: variables.$spacing-medium + variables.$spacing-small;
diff --git a/src/styles/tool-option.scss b/src/styles/tool-option.scss
index 448e5ba..8346cbd 100644
--- a/src/styles/tool-option.scss
+++ b/src/styles/tool-option.scss
@@ -4,11 +4,11 @@
     margin: 0;
     padding: 0;
 
-    h3 {
+    h3, h4 {
         color: #FFF;
     }
 
-    label {
+    p, label {
         font-size: 90%;
     }
 
diff --git a/src/styles/ui.scss b/src/styles/ui.scss
index f7ef997..9d3fb37 100644
--- a/src/styles/ui.scss
+++ b/src/styles/ui.scss
@@ -32,13 +32,6 @@
             right: (variables.$spacing-xlarge + variables.$spacing-medium);
         }
     }
-
-    .close-button {
-        position: absolute;
-        top: variables.$spacing-medium;
-        right: variables.$spacing-large;
-        @include closeButton();
-    }
 }
 
 /**
@@ -91,14 +84,14 @@
 @mixin closeButton() {
     cursor: pointer;
     background: none;
-    color: colors.$color-lines;
-    border: 2px solid colors.$color-lines;
+    color: #6a6a6a;
+    border: 1.5px solid colors.$color-lines-dark;
     border-radius: 5px;
     padding: variables.$spacing-xxsmall #{variables.$spacing-xsmall + variables.$spacing-xxsmall};
 
     &:hover {
-        color: colors.$color-4;
-        border-color: colors.$color-4;
+        color: #fff;
+        border-color: colors.$color-lines;
     }
 }
 
@@ -248,6 +241,7 @@
 
     .submenu {
         list-style: none;
+        margin-top: variables.$spacing-small;
 
         li {
             padding: variables.$spacing-small 0;
@@ -255,7 +249,7 @@
             @include mixins.large() {
                 display: block;
                 color: #b6b6b6;
-                padding: variables.$spacing-xsmall variables.$spacing-small;
+                padding: variables.$spacing-xxsmall variables.$spacing-small;
                 
                 &:hover {
                     color: #FFF;
@@ -266,7 +260,7 @@
         @include mixins.large() {
             position: absolute;
             box-shadow: 0 0 5px rgba(0,0,0,.5);
-            padding: variables.$spacing-medium;
+            padding: variables.$spacing-medium variables.$spacing-small;
             background-image: colors.$color-window-bg;
             background-repeat: repeat-x;
             @include mixins.boxSize();