From 06c519891b0dd61c88ed647a9ca723466d9780bf Mon Sep 17 00:00:00 2001
From: frosty <gabriel@bwaaa.monster>
Date: Wed, 26 Aug 2026 10:43:20 -0400
Subject: feat: aesthetic improvements to UI to make it more platform agnostic

---
 main/data/chat_input.ui  |  37 ++++++---------
 main/data/main_window.ui |   2 -
 main/data/style.css      | 118 +++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 113 insertions(+), 44 deletions(-)

(limited to 'main')

diff --git a/main/data/chat_input.ui b/main/data/chat_input.ui
index c440d815..1f6396d6 100644
--- a/main/data/chat_input.ui
+++ b/main/data/chat_input.ui
@@ -4,7 +4,6 @@
     <template class="DinoUiChatInputView">
         <property name="hexpand">True</property>
         <property name="orientation">vertical</property>
-        <property name="margin-top">4</property>
         <child>
             <object class="GtkBox" id="unavailable_box">
                 <property name="margin_start">14</property>
@@ -26,16 +25,25 @@
                 </child>
             </object>
         </child>
+        <child>
+            <object class="GtkLabel" id="chat_input_status">
+                <property name="xalign">0</property>
+                <property name="margin_bottom">3</property>
+                <property name="margin_start">14</property>
+                <property name="margin_end">14</property>
+                <property name="wrap">True</property>
+                <attributes>
+                    <attribute name="scale" value="0.8"></attribute>
+                </attributes>
+                <style>
+                    <class name="chat-input-status"/>
+                </style>
+            </object>
+        </child>
         <child>
                     <object class="GtkBox" id="outer_box">
-                        <property name="margin_start">14</property>
-                        <property name="margin_end">14</property>
                         <style>
                             <class name="dino-chatinput"/>
-                            <class name="card"/>
-                            <class name="toolbar"/>
-                            <class name="activatable"/>
-                            <class name="compact-card-toolbar"/>
                         </style>
                         <child>
                             <object class="GtkButton" id="file_button">
@@ -126,20 +134,5 @@
                         </child>
                     </object>
         </child>
-        <child>
-            <object class="GtkLabel" id="chat_input_status">
-                <property name="xalign">0</property>
-                <property name="margin_bottom">3</property>
-                <property name="margin_start">14</property>
-                <property name="margin_end">14</property>
-                <property name="wrap">True</property>
-                <attributes>
-                    <attribute name="scale" value="0.8"></attribute>
-                </attributes>
-                <style>
-                    <class name="chat-input-status"/>
-                </style>
-            </object>
-        </child>
     </template>
 </interface>
diff --git a/main/data/main_window.ui b/main/data/main_window.ui
index 806db779..c2f911c2 100644
--- a/main/data/main_window.ui
+++ b/main/data/main_window.ui
@@ -30,8 +30,6 @@
                                                 <child type="top">
                                                     <object class="GtkBox" id="conversation_list_toolbar">
                                                         <property name="spacing">6</property>
-                                                        <property name="margin-start">6</property>
-                                                        <property name="margin-end">6</property>
                                                         <style>
                                                             <class name="toolbar"/>
                                                             <class name="dino-conversation-list-toolbar"/>
diff --git a/main/data/style.css b/main/data/style.css
index c84551e6..3c8043b7 100644
--- a/main/data/style.css
+++ b/main/data/style.css
@@ -9,9 +9,37 @@ statuspage {
     opacity: 0.5;
 }
 
+window.dino-main,
+window.dino-main > *,
+window.dino-main navigation-split-view,
+window.dino-main navigation-split-view > .sidebar-pane,
+window.dino-main navigation-split-view > .content-pane,
+window.dino-main toolbarview,
+window.dino-main .dino-conversation {
+    margin: 0;
+    padding: 0;
+}
+
+window.dino-main {
+    outline: none;
+}
+
 window.dino-main headerbar.dino-chat-headerbar,
 window.dino-main .dino-conversation-list-toolbar {
     min-height: 44px;
+    margin: 0;
+    background-color: @window_bg_color;
+    background-image: none;
+}
+
+window.dino-main .dino-conversation-list-toolbar {
+    border-bottom: none;
+    box-shadow: 0 3px 12px alpha(black, 0.18);
+}
+
+window.dino-main headerbar.dino-chat-headerbar {
+    border-bottom: none;
+    box-shadow: 0 3px 12px alpha(black, 0.18);
 }
 
 window.dino-main headerbar.dino-chat-headerbar > windowhandle > box,
@@ -20,6 +48,45 @@ window.dino-main .dino-conversation-list-toolbar {
     padding-bottom: 0;
 }
 
+window.dino-main .dino-conversation-list-toolbar {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+window.dino-main headerbar button,
+window.dino-main .dino-conversation-list-toolbar entry,
+window.dino-main .dino-conversation-list-toolbar button,
+window.dino-main .navigation-sidebar > row,
+window.dino-main box.dino-chatinput,
+window.dino-main box.dino-chatinput button,
+window.dino-main popover > contents,
+window.dino-main popover row {
+    border-radius: 0;
+}
+
+window.dino-main button.circular,
+window.dino-main box.dino-chatinput button.circular {
+    border-radius: 999em;
+}
+
+window.dino-main .navigation-sidebar {
+    margin: 0;
+    padding: 0;
+}
+
+window.dino-main .navigation-sidebar > row {
+    margin: 0;
+}
+
+window.dino-main navigation-split-view > .sidebar-pane,
+window.dino-main navigation-split-view > .content-pane {
+    margin: 0;
+}
+
+window.dino-main navigation-split-view > .content-pane {
+    border-left: 1px solid color-mix(in srgb, @window_bg_color 92%, @theme_fg_color);
+}
+
 window.dino-main .dino-conversation undershoot,
 window.dino-main .dino-conversation viewport /* Some themes set this */ {
     background: none;
@@ -94,7 +161,7 @@ window.dino-main .dino-conversation .message-box.edit-mode:hover {
 }
 
 window.dino-main .dino-conversation .message-box.edit-mode frame {
-    border-radius: 3px;
+    border-radius: 0;
     padding: 0 7px;
 }
 
@@ -120,7 +187,7 @@ window.dino-main .dino-quote:hover {
 window.dino-main .code-block {
     background: alpha(@theme_fg_color, 0.06);
     border: 1px solid alpha(@theme_fg_color, 0.12);
-    border-radius: 8px;
+    border-radius: 0;
 }
 
 window.dino-main .code-block-header {
@@ -150,14 +217,14 @@ window.dino-main .code-block-content {
 }
 
 picture.avatar {
-    border-radius: 3px;
+    border-radius: 0;
 }
 
 /* Overlay Toolbar */
 
 .compact-card-toolbar {
     padding: 2px;
-    border-radius: 6px;
+    border-radius: 0;
     border-spacing: 0;
 }
 
@@ -171,7 +238,7 @@ picture.avatar {
 window.dino-main .file-box-outer,
 window.dino-main .call-box-outer {
     background: @theme_base_color;
-    border-radius: 8px;
+    border-radius: 0;
     border: 1px solid var(--border-color);
 }
 
@@ -182,7 +249,7 @@ window.dino-main .call-box {
 
 window.dino-main .file-image-widget {
     border: 1px solid alpha(@theme_fg_color, 0.1);
-    border-radius: 6px;
+    border-radius: 0;
 }
 
 window.dino-main .file-image-widget .file-box-outer {
@@ -202,13 +269,13 @@ window.dino-main .file-image-widget .file-box-outer button:hover {
 }
 
 .dino-main .file-image-widget picture {
-    border-radius: 6px;
+    border-radius: 0;
 }
 
 .dino-main .file-details {
     color: white;
     background: alpha(black, 0.3);
-    border-radius: 5px;
+    border-radius: 0;
     padding: 5px 10px;
 }
 
@@ -238,6 +305,7 @@ window.dino-main .multiparty-participants {
     min-height: 16px;
     min-width: 30px;
     padding: 4px;
+    border-radius: 999em;
 }
 
 .dino-main .reaction-grid button.own-reaction,
@@ -287,22 +355,32 @@ image.dino-status-online, image.dino-status-chat {
     background-color: var(--shade-color);
     opacity: 80%;
     padding: 12px;
-    border-radius: 6px 6px 0 0;
+    border-radius: 0;
 }
 
 /* Chat Input*/
 
-/* These rules are direved from the libadwaita style for activateable entry rows */
-window.dino-main box.dino-chatinput.activatable {
-  outline: 0 solid transparent;
-  outline-offset: 5px;
-  transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+window.dino-main box.dino-chatinput {
+    margin: 0;
+    padding: 2px;
+    background-color: shade(@view_bg_color, 0.96);
+    background-image: none;
+    border: none;
+    box-shadow: 0 -3px 12px alpha(black, 0.18);
+    outline: none;
 }
 
-window.dino-main box.dino-chatinput.activatable:focus-within {
-  outline-offset: -1px;
-  outline-width: 2px;
-  outline-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
+window.dino-main box.dino-chatinput button.dino-attach-button {
+    background-image: none;
+    border: none;
+    box-shadow: none;
+    outline: none;
+}
+
+window.dino-main box.dino-chatinput > separator {
+    min-width: 0;
+    background: none;
+    border: none;
 }
 
 .dino-chatinput textview,
@@ -319,7 +397,7 @@ window.dino-main box.dino-chatinput.activatable:focus-within {
 }
 
 window.dino-main .image-round-corners picture {
-    border-radius: 8px;
+    border-radius: 0;
 }
 
 window.dino-main .file-remove-button {
@@ -451,7 +529,7 @@ box.dino-input-error .chat-input-status.input-status-highlight-once {
 .dino-call-window .text-no-controls {
     color: black;
     background: white;
-    border-radius: 5px;
+    border-radius: 0;
     padding: 5px 10px;
 }
 
-- 
cgit v1.3