From 933ee647bc57893c13aaba346ae5ee47c1167f10 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sat, 4 Dec 2021 05:53:16 +0100
Subject: [PATCH] Align design of Change Notetype screen with rest of UI
 (#1522)

* Remove background and border from scrollArea

* Fix 1px of background text showing above template header on scroll

I couldn't figure out the reason for this "clipping" issue. What I tried:
- check HTML structure for any elements that might add extra padding/margin
- remove the 1px border of the header

* Adjust spacing to be more in line with rest of UI
---
 sass/_vars.scss                              | 2 --
 ts/change-notetype/ChangeNotetypePage.svelte | 5 -----
 ts/change-notetype/NotetypeSelector.svelte   | 6 +++++-
 ts/change-notetype/StickyNav.svelte          | 2 +-
 ts/change-notetype/change-notetype-base.scss | 2 +-
 ts/components/StickyContainer.svelte         | 2 +-
 6 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/sass/_vars.scss b/sass/_vars.scss
index 1821b4e12..a92eefccc 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -5,7 +5,6 @@
     --text-fg: black;
     --window-bg: #ececec;
     --frame-bg: white;
-    --pane-bg: #e5e5e5;
     --border: #aaa;
     --medium-border: #b6b6b6;
     --faint-border: #e7e7e7;
@@ -45,7 +44,6 @@
     --text-fg: white;
     --window-bg: #2f2f31;
     --frame-bg: #3a3a3a;
-    --pane-bg: #3a3a3a;
     --border: #777;
     --medium-border: #444;
     --faint-border: #29292b;
diff --git a/ts/change-notetype/ChangeNotetypePage.svelte b/ts/change-notetype/ChangeNotetypePage.svelte
index 11519372f..a9348368b 100644
--- a/ts/change-notetype/ChangeNotetypePage.svelte
+++ b/ts/change-notetype/ChangeNotetypePage.svelte
@@ -12,7 +12,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import NotetypeSelector from "./NotetypeSelector.svelte";
     import StickyNav from "./StickyNav.svelte";
     import Mapper from "./Mapper.svelte";
-    import Spacer from "../components/Spacer.svelte";
 
     export let state: ChangeNotetypeState;
     $: info = state.info;
@@ -21,7 +20,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div bind:offsetHeight={offset}>
     <NotetypeSelector {state} />
-    <Spacer --height="1em" />
 </div>
 
 <div id="scrollArea" style="--offset: {offset}px; --gutter-inline: 0.25rem;">
@@ -49,9 +47,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     #scrollArea {
         padding: 0;
         overflow: hidden auto;
-        background: var(--pane-bg);
         height: calc(100% - var(--offset));
-        border: 1px solid var(--medium-border);
-        border-radius: 0.25rem;
     }
 </style>
diff --git a/ts/change-notetype/NotetypeSelector.svelte b/ts/change-notetype/NotetypeSelector.svelte
index b7e9dfc9d..7b2bc5301 100644
--- a/ts/change-notetype/NotetypeSelector.svelte
+++ b/ts/change-notetype/NotetypeSelector.svelte
@@ -27,7 +27,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<StickyContainer --gutter-block="0.1rem">
+<StickyContainer
+    --gutter-block="0.1rem"
+    --gutter-inline="0.25rem"
+    --sticky-borders="0 0 1px"
+>
     <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
         <Item>
             <ButtonGroupItem>
diff --git a/ts/change-notetype/StickyNav.svelte b/ts/change-notetype/StickyNav.svelte
index f9412030f..585541511 100644
--- a/ts/change-notetype/StickyNav.svelte
+++ b/ts/change-notetype/StickyNav.svelte
@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <StickyContainer
-    --sticky-bg={"var(--pane-bg)"}
+    --sticky-top={ctx === MapContext.Template ? "-1px" : "0"}
     --sticky-border="var(--border)"
     --sticky-borders="0px 0 1px"
 >
diff --git a/ts/change-notetype/change-notetype-base.scss b/ts/change-notetype/change-notetype-base.scss
index 846e31503..4172fdd13 100644
--- a/ts/change-notetype/change-notetype-base.scss
+++ b/ts/change-notetype/change-notetype-base.scss
@@ -24,7 +24,7 @@ html {
 }
 
 #main {
-    padding: 0.5em 1em 1em 1em;
+    padding: 0.5em 0.5em 1em 0.5em;
     height: 100vh;
 }
 
diff --git a/ts/components/StickyContainer.svelte b/ts/components/StickyContainer.svelte
index 1dede138d..27abc83fb 100644
--- a/ts/components/StickyContainer.svelte
+++ b/ts/components/StickyContainer.svelte
@@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .sticky-container {
         position: sticky;
-        top: 0;
+        top: var(--sticky-top, 0);
         bottom: 0;
         left: 0;
         right: 0;