From 09af4d5ecd03064a713340e79ee465c9f9a83271 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 30 May 2021 20:09:09 +0200
Subject: [PATCH 1/7] Add new color icons

---
 ts/editor/BUILD.bazel | 4 ++++
 ts/editor/icons.ts    | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 693b80d3e..6e084ddcd 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -113,6 +113,10 @@ copy_mdi_icons(
         "function-variant.svg",
         "code-brackets.svg",
         "xml.svg",
+
+        "format-color-text.svg",
+        "format-color-highlight.svg",
+        "color-helper.svg",
     ],
     visibility = ["//visibility:public"],
 )
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index 44a5348d4..1973235c6 100644
--- a/ts/editor/icons.ts
+++ b/ts/editor/icons.ts
@@ -21,6 +21,9 @@ export { default as indentIcon } from "./text-indent-left.svg";
 export { default as outdentIcon } from "./text-indent-right.svg";
 
 export { default as squareFillIcon } from "./square-fill.svg";
+export { default as textColorIcon } from "./format-color-text.svg";
+export { default as highlightColorIcon } from "./format-color-highlight.svg";
+export { default as colorHelper } from "./color-helper.svg";
 
 export { default as paperclipIcon } from "./paperclip.svg";
 export { default as micIcon } from "./mic.svg";

From 54609f408a6accb18121eecc5416c86e999bef34 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 30 May 2021 21:05:16 +0200
Subject: [PATCH 2/7] Implement new way to way to display icons in IconButtons

* allows for multiple icons overlay
* allows to make individual icons smaller/bigger
---
 ts/components/IconButton.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 42a7527c9..eb1437701 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     export let tooltip: string | undefined = undefined;
+    export let iconSize: number = 80;
     export let active = false;
     export let disables = true;
     export let tabbable = false;
@@ -37,6 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
+    style={`--icon-size: ${iconSize}%`}
     title={tooltip}
     {...dropdownProps}
     disabled={_disabled}
@@ -44,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:click
     on:mousedown|preventDefault
 >
-    <span class="p-1"><slot /></span>
+    <span> <slot /> </span>
 </button>
 
 <style lang="scss">
@@ -60,6 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     span {
         display: inline-block;
+        position: relative;
         vertical-align: middle;
 
         /* constrain icon */
@@ -68,10 +71,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         & > :global(svg),
         & > :global(img) {
+            position: absolute;
+            width: var(--icon-size);
+            height: var(--icon-size);
+            top: calc((100% - var(--icon-size)) / 2);
+            bottom: calc((100% - var(--icon-size)) / 2);
+            left: calc((100% - var(--icon-size)) / 2);
+            right: calc((100% - var(--icon-size)) / 2);
+
             fill: currentColor;
             vertical-align: unset;
-            width: 100%;
-            height: 100%;
         }
     }
 

From ad1a72495fc5b3a1fdcd70bc0738332fcf677c95 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 30 May 2021 21:44:05 +0200
Subject: [PATCH 3/7] Implement WithColorHelper.svelte

---
 ts/editor/ColorButtons.svelte    | 48 ++++++++++++++++++++++++++++++--
 ts/editor/TemplateButtons.svelte |  3 ++
 ts/editor/WithColorHelper.svelte | 23 +++++++++++++++
 ts/editor/icons.ts               |  2 +-
 4 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 ts/editor/WithColorHelper.svelte

diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index beea69bb3..45467d49e 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -8,10 +8,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
-    import ColorPicker from "components/ColorPicker.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
+    import WithColorHelper from "./WithColorHelper.svelte";
 
-    import { squareFillIcon } from "./icons";
+    import { textColorIcon, highlightColorIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
 
     import "./color.css";
@@ -25,16 +25,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         document.documentElement.style.setProperty(foregroundColorKeyword, color);
     }
 
-    function wrapWithForecolor(): void {
+    const wrapWithForecolor = (color: string) => () => {
         document.execCommand("forecolor", false, color);
     }
 
+    const wrapWithBackcolor = (color: string) => () => {
+        document.execCommand("backcolor", false, color);
+    }
+
     function setWithCurrentColor({ currentTarget }: Event): void {
         color = (currentTarget as HTMLInputElement).value;
     }
 </script>
 
 <ButtonGroup {api}>
+    <!--
     <ButtonGroupItem>
         <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
             <IconButton
@@ -60,4 +65,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </WithShortcut>
     </ButtonGroupItem>
+    -->
+
+    <WithColorHelper let:colorHelperIcon let:color>
+        <ButtonGroupItem>
+            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
+                <IconButton
+                    tooltip={appendInParentheses(
+                        tr.editingSetForegroundColor(),
+                        shortcutLabel
+                    )}
+                    on:click={wrapWithForecolor(color)}
+                    on:mount={createShortcut}
+                >
+                    {@html textColorIcon}
+                    {@html colorHelperIcon}
+                </IconButton>
+            </WithShortcut>
+        </ButtonGroupItem>
+    </WithColorHelper>
+
+    <WithColorHelper let:colorHelperIcon let:color>
+        <ButtonGroupItem>
+            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
+                <IconButton
+                    tooltip={appendInParentheses(
+                        tr.editingSetForegroundColor(),
+                        shortcutLabel
+                    )}
+                    on:click={wrapWithBackcolor(color)}
+                    on:mount={createShortcut}
+                >
+                    {@html highlightColorIcon}
+                    {@html colorHelperIcon}
+                </IconButton>
+            </WithShortcut>
+        </ButtonGroupItem>
+    </WithColorHelper>
 </ButtonGroup>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 264399e72..3ee854e77 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -42,6 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     tr.editingAttachPicturesaudiovideo(),
                     shortcutLabel
                 )}
+                iconSize={70}
                 on:click={onAttachment}
                 on:mount={createShortcut}
             >
@@ -54,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"F5"} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
+                iconSize={70}
                 on:click={onRecord}
                 on:mount={createShortcut}
             >
@@ -164,6 +166,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
+                iconSize={70}
                 on:click={onHtmlEdit}
                 on:mount={createShortcut}
             >
diff --git a/ts/editor/WithColorHelper.svelte b/ts/editor/WithColorHelper.svelte
new file mode 100644
index 000000000..5fe2ab2f0
--- /dev/null
+++ b/ts/editor/WithColorHelper.svelte
@@ -0,0 +1,23 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import { colorHelperIcon } from "./icons";
+
+    export let color = "black";
+
+    function setColor(newColor: string): void {
+        color = newColor;
+    }
+</script>
+
+<div style={`--color-helper-color: ${color}`}>
+    <slot {colorHelperIcon} {color} {setColor} />
+</div>
+
+<style lang="scss">
+    div :global(#mdi-color-helper) {
+        fill: var(--color-helper-color);
+    }
+</style>
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index 1973235c6..978045565 100644
--- a/ts/editor/icons.ts
+++ b/ts/editor/icons.ts
@@ -23,7 +23,7 @@ export { default as outdentIcon } from "./text-indent-right.svg";
 export { default as squareFillIcon } from "./square-fill.svg";
 export { default as textColorIcon } from "./format-color-text.svg";
 export { default as highlightColorIcon } from "./format-color-highlight.svg";
-export { default as colorHelper } from "./color-helper.svg";
+export { default as colorHelperIcon } from "./color-helper.svg";
 
 export { default as paperclipIcon } from "./paperclip.svg";
 export { default as micIcon } from "./mic.svg";

From 8e81a79fbf71268c14492767fdeb67e49ab163f5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 30 May 2021 22:58:40 +0200
Subject: [PATCH 4/7] Implement new ColorPicker

---
 ts/components/ColorPicker.svelte | 61 +++-------------------------
 ts/editor/BUILD.bazel            |  1 -
 ts/editor/ColorButtons.svelte    | 70 ++++++++++++--------------------
 ts/editor/WithColorHelper.svelte | 12 ++++--
 ts/editor/color.scss             |  7 ----
 5 files changed, 38 insertions(+), 113 deletions(-)
 delete mode 100644 ts/editor/color.scss

diff --git a/ts/components/ColorPicker.svelte b/ts/components/ColorPicker.svelte
index 3fe35acde..ccf825f23 100644
--- a/ts/components/ColorPicker.svelte
+++ b/ts/components/ColorPicker.svelte
@@ -3,72 +3,21 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { nightModeKey } from "./contextKeys";
+    import { onMount, createEventDispatcher } from "svelte";
 
-    export let id: string | undefined = undefined;
-    let className = "";
-    export { className as class };
-
-    export let tooltip: string | undefined = undefined;
-
-    const nightMode = getContext(nightModeKey);
-
-    function delegateToInput() {
-        inputRef.click();
-    }
-
-    let buttonRef: HTMLButtonElement;
     let inputRef: HTMLInputElement;
 
     const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef, input: inputRef }));
+    onMount(() => dispatch("mount", { input: inputRef }));
 </script>
 
-<button
-    bind:this={buttonRef}
-    tabindex="-1"
-    {id}
-    class={`btn ${className}`}
-    class:btn-day={!nightMode}
-    class:btn-night={nightMode}
-    title={tooltip}
-    on:click={delegateToInput}
-    on:mousedown|preventDefault
->
-    <input tabindex="-1" bind:this={inputRef} type="color" on:change />
-</button>
+<input tabindex="-1" bind:this={inputRef} type="color" on:change />
 
 <style lang="scss">
-    @use "ts/sass/button_mixins" as button;
-
-    @import "ts/sass/bootstrap/functions";
-    @import "ts/sass/bootstrap/variables";
-
-    button {
-        width: calc(var(--buttons-size) - 0px);
-        height: calc(var(--buttons-size) - 0px);
-
-        padding: 4px;
-        overflow: hidden;
-
-        border-top-left-radius: var(--border-left-radius);
-        border-bottom-left-radius: var(--border-left-radius);
-
-        border-top-right-radius: var(--border-right-radius);
-        border-bottom-right-radius: var(--border-right-radius);
-    }
-
-    @include button.btn-day($with-disabled: false) using ($base) {
-        @include button.rainbow($base);
-    }
-
-    @include button.btn-night($with-disabled: false) using ($base) {
-        @include button.rainbow($base);
-    }
-
     input {
         display: inline-block;
+        width: 100%;
+        height: 100%;
         cursor: pointer;
         opacity: 0;
     }
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 6e084ddcd..4ad87ce37 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -38,7 +38,6 @@ compile_sass(
 
 compile_sass(
     srcs = [
-        "color.scss",
         "fields.scss",
     ],
     group = "base_css",
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 45467d49e..a87a31a85 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -8,66 +8,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
+    import ColorPicker from "components/ColorPicker.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
     import WithColorHelper from "./WithColorHelper.svelte";
 
     import { textColorIcon, highlightColorIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
 
-    import "./color.css";
-
     export let api = {};
 
-    const foregroundColorKeyword = "--foreground-color";
-    let color = "black";
-
-    $: {
-        document.documentElement.style.setProperty(foregroundColorKeyword, color);
-    }
-
     const wrapWithForecolor = (color: string) => () => {
         document.execCommand("forecolor", false, color);
-    }
+    };
 
     const wrapWithBackcolor = (color: string) => () => {
         document.execCommand("backcolor", false, color);
-    }
-
-    function setWithCurrentColor({ currentTarget }: Event): void {
-        color = (currentTarget as HTMLInputElement).value;
-    }
+    };
 </script>
 
 <ButtonGroup {api}>
-    <!--
-    <ButtonGroupItem>
-        <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
-            <IconButton
-                class="forecolor"
-                tooltip={appendInParentheses(
-                    tr.editingSetForegroundColor(),
-                    shortcutLabel
-                )}
-                on:click={wrapWithForecolor}
-                on:mount={createShortcut}
-            >
-                {@html squareFillIcon}
-            </IconButton>
-        </WithShortcut>
-    </ButtonGroupItem>
-
-    <ButtonGroupItem>
-        <WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
-            <ColorPicker
-                tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
-                on:change={setWithCurrentColor}
-                on:mount={createShortcut}
-            />
-        </WithShortcut>
-    </ButtonGroupItem>
-    -->
-
-    <WithColorHelper let:colorHelperIcon let:color>
+    <WithColorHelper let:colorHelperIcon let:color let:setColor>
         <ButtonGroupItem>
             <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
                 <IconButton
@@ -83,9 +43,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithShortcut>
         </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
+                <IconButton
+                    tooltip={appendInParentheses(
+                        tr.editingChangeColor(),
+                        shortcutLabel
+                    )}
+                    disables={false}
+                >
+                    <ColorPicker on:change={setColor} on:mount={createShortcut} />
+                </IconButton>
+            </WithShortcut>
+        </ButtonGroupItem>
     </WithColorHelper>
 
-    <WithColorHelper let:colorHelperIcon let:color>
+    <WithColorHelper let:colorHelperIcon let:color let:setColor>
         <ButtonGroupItem>
             <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
                 <IconButton
@@ -101,5 +75,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithShortcut>
         </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <IconButton tooltip={tr.editingChangeColor()} disables={false}>
+                <ColorPicker on:change={setColor} />
+            </IconButton>
+        </ButtonGroupItem>
     </WithColorHelper>
 </ButtonGroup>
diff --git a/ts/editor/WithColorHelper.svelte b/ts/editor/WithColorHelper.svelte
index 5fe2ab2f0..77c5ee9e6 100644
--- a/ts/editor/WithColorHelper.svelte
+++ b/ts/editor/WithColorHelper.svelte
@@ -7,8 +7,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let color = "black";
 
-    function setColor(newColor: string): void {
-        color = newColor;
+    function setColor({ currentTarget }: Event): void {
+        color = (currentTarget! as HTMLInputElement).value;
     }
 </script>
 
@@ -17,7 +17,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    div :global(#mdi-color-helper) {
-        fill: var(--color-helper-color);
+    div {
+        display: contents;
+
+        :global(#mdi-color-helper) {
+            fill: var(--color-helper-color);
+        }
     }
 </style>
diff --git a/ts/editor/color.scss b/ts/editor/color.scss
deleted file mode 100644
index 3dcd5e3e8..000000000
--- a/ts/editor/color.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-:root {
-    --foreground-color: black;
-}
-
-.forecolor {
-    color: var(--foreground-color) !important;
-}

From aaa210d6623be15da05f8be4be81d558142ea52c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 31 May 2021 00:17:06 +0200
Subject: [PATCH 5/7] Make ColorPicker buttons halfwidth

---
 ts/components/IconButton.svelte |  8 +++++---
 ts/editor/ColorButtons.svelte   | 28 +++++++++++++---------------
 ts/editor/icons.ts              |  3 +++
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index eb1437701..5377e3e56 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -13,11 +13,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     export let tooltip: string | undefined = undefined;
-    export let iconSize: number = 80;
     export let active = false;
     export let disables = true;
     export let tabbable = false;
 
+    export let iconSize: number = 80;
+    export let widthMultiplier: number = 1;
+
     let buttonRef: HTMLButtonElement;
 
     const disabled = getContext<Readable<boolean>>(disabledKey);
@@ -46,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:click
     on:mousedown|preventDefault
 >
-    <span> <slot /> </span>
+    <span style={`--width-multiplier: ${widthMultiplier};`}> <slot /> </span>
 </button>
 
 <style lang="scss">
@@ -66,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         vertical-align: middle;
 
         /* constrain icon */
-        width: calc(var(--buttons-size) - 2px);
+        width: calc((var(--buttons-size) - 2px) * var(--width-multiplier));
         height: calc(var(--buttons-size) - 2px);
 
         & > :global(svg),
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index a87a31a85..9940bc177 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithShortcut from "components/WithShortcut.svelte";
     import WithColorHelper from "./WithColorHelper.svelte";
 
-    import { textColorIcon, highlightColorIcon } from "./icons";
+    import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
 
     export let api = {};
@@ -52,7 +52,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         shortcutLabel
                     )}
                     disables={false}
+                    widthMultiplier={0.5}
                 >
+                    {@html arrowIcon}
                     <ColorPicker on:change={setColor} on:mount={createShortcut} />
                 </IconButton>
             </WithShortcut>
@@ -61,23 +63,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <WithColorHelper let:colorHelperIcon let:color let:setColor>
         <ButtonGroupItem>
-            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
-                <IconButton
-                    tooltip={appendInParentheses(
-                        tr.editingSetForegroundColor(),
-                        shortcutLabel
-                    )}
-                    on:click={wrapWithBackcolor(color)}
-                    on:mount={createShortcut}
-                >
-                    {@html highlightColorIcon}
-                    {@html colorHelperIcon}
-                </IconButton>
-            </WithShortcut>
+            <IconButton on:click={wrapWithBackcolor(color)}>
+                {@html highlightColorIcon}
+                {@html colorHelperIcon}
+            </IconButton>
         </ButtonGroupItem>
 
         <ButtonGroupItem>
-            <IconButton tooltip={tr.editingChangeColor()} disables={false}>
+            <IconButton
+                tooltip={tr.editingChangeColor()}
+                disables={false}
+                widthMultiplier={0.5}
+            >
+                {@html arrowIcon}
                 <ColorPicker on:change={setColor} />
             </IconButton>
         </ButtonGroupItem>
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index 978045565..2907e2d5a 100644
--- a/ts/editor/icons.ts
+++ b/ts/editor/icons.ts
@@ -30,3 +30,6 @@ export { default as micIcon } from "./mic.svg";
 export { default as bracketsIcon } from "./code-brackets.svg";
 export { default as functionIcon } from "./function-variant.svg";
 export { default as xmlIcon } from "./xml.svg";
+
+export const arrowIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';

From 94ebeb68d78f77e5e9dc72746ae34747e2566045 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 31 May 2021 00:20:41 +0200
Subject: [PATCH 6/7] Remove rainbow SCSS

---
 ts/sass/button_mixins.scss | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 5313b140b..3314b7056 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -116,13 +116,3 @@ $focus-color: $blue;
     box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
         rgba(black, $intensity);
 }
-
-@mixin rainbow($base) {
-    background: content-box
-            linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-        content-box
-            linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-        content-box
-            linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
-        border-box $base;
-}

From 06545d98a4ec9849a1e901110993afa39a8a4cb3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 31 May 2021 00:31:10 +0200
Subject: [PATCH 7/7] Change default icon size of IconButtons

---
 ts/components/IconButton.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 5377e3e56..6763def8f 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let disables = true;
     export let tabbable = false;
 
-    export let iconSize: number = 80;
+    export let iconSize: number = 75;
     export let widthMultiplier: number = 1;
 
     let buttonRef: HTMLButtonElement;