From 51ffb6fe7136d36553740feb194388456ff526d0 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Fri, 16 Dec 2022 02:15:57 +0100
Subject: [PATCH] web: rework text box shadows (again)

---
 src/web/components/input-field.ts | 4 ++--
 src/web/features/compose-form.ts  | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/web/components/input-field.ts b/src/web/components/input-field.ts
index 6f997e1..8f6dfb9 100644
--- a/src/web/components/input-field.ts
+++ b/src/web/components/input-field.ts
@@ -54,8 +54,8 @@ export default class InputField extends LitElement {
             input:focus-visible {
                 outline: 0;
                 box-shadow:
-                    inset 0 1px 1px 0 var(--accent-highlight-color),
-                          0 0   2px 0 var(--accent-highlight-color);
+                    inset 0 0 2px 1px var(--accent-highlight-color),
+                          0 0 4px 0   var(--accent-highlight-color);
             }
         `);
     }
diff --git a/src/web/features/compose-form.ts b/src/web/features/compose-form.ts
index fbe660b..d693dc7 100644
--- a/src/web/features/compose-form.ts
+++ b/src/web/features/compose-form.ts
@@ -36,12 +36,14 @@ export default class ComposeForm extends LitElement {
                 maxlength="${maxNoteChars - this.content.length}"
                 @input=${() => this.summary = this.summaryInput.value}
             ></input-field>
+
             <textarea
                 id="content"
                 placeholder="${msg("Say something nice")}"
                 @input=${() => this.content = this.contentInput.value}
                 maxlength="${maxNoteChars - this.summary.length}"
             ></textarea>
+
             <div id="bar">
                 <div id="actions">
                     <icon-button icon="paperclip" label="${msg("Add attachment")}"></icon-button>
@@ -49,6 +51,7 @@ export default class ComposeForm extends LitElement {
                     <icon-button icon="emoji-laughing" label="${msg("Insert emogi")}"></icon-button>
                     <icon-button icon="${this.getGlobeIconName()}" label="${msg("Note visibility")}"></icon-button>
                 </div>
+
                 <div
                     id="remaining-chars"
                     class="${this.getRemainingCharsClass()}"
@@ -106,8 +109,8 @@ export default class ComposeForm extends LitElement {
             textarea:focus-visible {
                 outline: 0;
                 box-shadow:
-                    inset 0 1px 1px 0 var(--accent-highlight-color),
-                          0 0   2px 0 var(--accent-highlight-color);
+                    inset 0 0 2px 1px var(--accent-highlight-color),
+                          0 0 4px 0   var(--accent-highlight-color);
             }
 
             #bar {
@@ -120,7 +123,7 @@ export default class ComposeForm extends LitElement {
                 flex: 1;
                 display: flex;
                 flex-direction: row;
-                padding: 8px 0;
+                padding: 8px 0 0;
             }
 
             #actions > * {