improve UI

src/View/ChatPages/boardPage.tsx

@@ -70,7 +70,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
             <span class="icon">filter_alt</span>
           </button>
           <button
-            class="primary"
+            class="ghost"
             aria-label={translations.chatPage.task.createTaskButtonAudioLabel}
             on:click={boardViewModel.showNewTaskModal}
           >

src/View/Components/ribbonButton.tsx

@@ -12,7 +12,7 @@ export function RibbonButton(
 ) {
   return (
     <button
-      class="ghost ribbon-button"
+      class="ribbon-button"
       aria-label={label}
       toggle:selected={isSelected}
       on:click={select}

src/View/chatPage.css

@@ -44,7 +44,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page > div > #main {
-  width: calc(100% - var(--ribbon-size));
+  width: calc(100% - var(--ribbon-size) - 1px);
 
   overflow-x: scroll;
   scroll-behavior: smooth;
@@ -101,6 +101,12 @@ body[showing-chat] #chat-page-wrapper {
   align-items: center;
 }
 
+#chat-page > div > #ribbon {
+  width: calc(var(--ribbon-size) + 1px);
+  border-right: 1px solid var(--border);
+  padding-bottom: var(--safe-area-bottom);
+}
+
 #chat-page > div > #ribbon > span,
 #chat-page
   > div
@@ -110,7 +116,7 @@ body[showing-chat] #chat-page-wrapper {
   > .pane
   > .toolbar
   > span.ribbon {
-  gap: calc(var(--gap-between-tiles) * 2);
+  gap: var(--gap-between-tiles);
   padding: var(--gap-between-tiles);
 }
 
@@ -119,12 +125,6 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: space-between;
 }
 
-#chat-page > div > #ribbon {
-  width: var(--ribbon-size);
-
-  padding-bottom: var(--safe-area-bottom);
-}
-
 #chat-page > div > #ribbon > span {
   height: 100%;
 
@@ -162,6 +162,8 @@ body[showing-chat] #chat-page-wrapper {
 
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+
+  color: var(--primary);
 }
 
 #chat-page > div > #ribbon button > .icon,
@@ -189,12 +191,6 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
 }
 
-@media (max-width: 1024px) {
-  #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar input {
-    border-left: 1px solid var(--surface-border);
-  }
-}
-
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }

src/colors.css

@@ -6,12 +6,20 @@
 
   --text-on-color: hsl(0, 0%, var(--accent-text-luma));
   --link: hsl(var(--hue), 100%, var(--accent-luma));
+
+  --surface: hsla(var(--hue), 80%, 30%, 5%);
+  --surface-hover: hsla(var(--hue), 100%, 5%, 10%);
+  --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
 
 @media (prefers-color-scheme: dark) {
   [color]:not([color="standard"]) {
     --accent-luma: var(--accent-luma-dark);
     --accent-text-luma: var(--accent-text-luma-dark);
+
+    --surface: hsla(var(--hue), 100%, 95%, 5%);
+    --surface-hover: hsla(var(--hue), 100%, 95%, 10%);
+    --surface-active: hsla(var(--hue), 100%, 95%, 15%);
   }
 }