UI: Adopt new design for chat input

9 files changed, 29 insertions, 61 deletions

diff --git a/main/data/chat_input.ui b/main/data/chat_input.ui
index 7164f733..1487b0c3 100644
--- a/main/data/chat_input.ui
+++ b/main/data/chat_input.ui
@@ -4,19 +4,21 @@
     <template class="DinoUiChatInputView">
         <property name="hexpand">True</property>
         <property name="orientation">vertical</property>
+        <property name="margin-top">4</property>
         <child>
-            <object class="GtkFrame" id="frame">
-                <property name="margin_start">14</property>
-                <property name="margin_end">14</property>
-                <property name="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">
                                 <property name="icon-name">mail-attachment-symbolic</property>
-                                <property name="margin-top">2</property>
                                 <property name="valign">start</property>
                                 <style>
                                     <class name="flat"/>
@@ -53,7 +55,6 @@
                             <object class="GtkMenuButton" id="emoji_button">
                                 <property name="icon-name">emoji-people-symbolic</property>
                                 <property name="has-frame">False</property>
-                                <property name="margin-top">2</property>
                                 <property name="valign">start</property>
                                 <style>
                                     <class name="flat"/>
@@ -66,7 +67,6 @@
                             <object class="GtkMenuButton" id="encryption_button">
                                 <property name="icon-name">changes-allow-symbolic</property>
                                 <property name="has-frame">False</property>
-                                <property name="margin-top">2</property>
                                 <property name="valign">start</property>
                                 <style>
                                     <class name="flat"/>
@@ -76,8 +76,6 @@
                             </object>
                         </child>
                     </object>
-                </property>
-            </object>
         </child>
         <child>
             <object class="GtkLabel" id="chat_input_status">
diff --git a/main/data/conversation_content_view/view.ui b/main/data/conversation_content_view/view.ui
index a3a97569..7c6222fe 100644
--- a/main/data/conversation_content_view/view.ui
+++ b/main/data/conversation_content_view/view.ui
@@ -29,7 +29,7 @@
                                                 <style>
                                                     <class name="card"/>
                                                     <class name="toolbar"/>
-                                                    <class name="overlay-toolbar"/>
+                                                    <class name="compact-card-toolbar"/>
                                                 </style>
                                             </object>
                                         </child>
@@ -65,4 +65,4 @@
             </object>
         </child>
     </template>
-</interface>
\ No newline at end of file
+</interface>
diff --git a/main/data/main_window.ui b/main/data/main_window.ui
index df755d17..3a068007 100644
--- a/main/data/main_window.ui
+++ b/main/data/main_window.ui
@@ -101,6 +101,9 @@
                                 <property name="content">
                                     <object class="AdwNavigationPage">
                                         <property name="title">Conversation</property>
+                                        <style>
+                                            <class name="view" />
+                                        </style>
                                         <property name="child">
                                             <object class="AdwToolbarView">
                                                 <child type="top">
diff --git a/main/data/preferences_window/account_preferences_subpage.ui b/main/data/preferences_window/account_preferences_subpage.ui
index d9bdd076..96c847c5 100644
--- a/main/data/preferences_window/account_preferences_subpage.ui
+++ b/main/data/preferences_window/account_preferences_subpage.ui
@@ -45,7 +45,7 @@
                             <style>
                               <class name="card"/>
                               <class name="toolbar"/>
-                              <class name="overlay-toolbar"/>
+                              <class name="compact-card-toolbar"/>
                             </style>
                             <child>
                               <object class="GtkButton" id="edit_avatar_button">
@@ -150,4 +150,4 @@
       </object>
     </child>
   </template>
-</interface>
\ No newline at end of file
+</interface>
diff --git a/main/data/style-dark.css b/main/data/style-dark.css
index 791ae9c8..eb194a93 100644
--- a/main/data/style-dark.css
+++ b/main/data/style-dark.css
@@ -1,3 +1,3 @@
-.overlay-toolbar {
+.compact-card-toolbar {
     background-color: shade(@view_bg_color, 1.5);
-}
\ No newline at end of file
+}
diff --git a/main/data/style.css b/main/data/style.css
index bc004cb4..5762d264 100644
--- a/main/data/style.css
+++ b/main/data/style.css
@@ -121,13 +121,13 @@ picture.avatar {
 
 /* Overlay Toolbar */
 
-.overlay-toolbar {
+.compact-card-toolbar {
     padding: 2px;
     border-radius: 6px;
     border-spacing: 0;
 }
 
-.overlay-toolbar > * {
+.compact-card-toolbar > * {
     margin-top: 0;
     margin-bottom: 0;
 }
@@ -247,41 +247,17 @@ window.dino-main .dino-file-overlay {
 
 /* Chat Input*/
 
-window.dino-main .dino-attach-button {
-    min-width: 24px; /* Make button the same width as avatars */
+/* 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 .dino-attach-button,
-window.dino-main .dino-chatinput-button button {
-    border: none;
-    background: transparent;
-    box-shadow: none;
-    min-height: 0;
-    padding: 7px 5px;
-    color: alpha(@theme_fg_color, 0.7);
-    outline: none;
-}
-
-window.dino-main .dino-attach-button:hover,
-window.dino-main .dino-chatinput-button button:hover {
-    color: @theme_selected_bg_color;
-}
-
-window.dino-main .dino-attach-button:backdrop,
-window.dino-main .dino-chatinput-button button:backdrop {
-    color: alpha(@theme_unfocused_fg_color, 0.6);
-}
-
-window.dino-main .dino-attach-button:active,
-window.dino-main .dino-attach-button:checked,
-window.dino-main .dino-chatinput-button button:active,
-window.dino-main .dino-chatinput-button button:checked {
-    color: alpha(@theme_selected_bg_color, 0.8);
-}
-
-window.dino-main .dino-attach-button:checked:backdrop,
-window.dino-main .dino-chatinput-button button:checked:backdrop {
-    color: alpha(@theme_unfocused_selected_bg_color, 0.8);
+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);
 }
 
 .dino-unread-line label {
@@ -292,13 +268,6 @@ window.dino-main .dino-chatinput-button button:checked:backdrop {
     background-color: @theme_selected_bg_color;
 }
 
-.dino-chatinput,
-.dino-chatinput textview,
-.dino-chatinput textview text {
-    background-color: @theme_base_color;
-}
-
-
 /*Chat input warning*/
 
 box.dino-input-warning frame border {
diff --git a/main/src/ui/chat_input/chat_text_view.vala b/main/src/ui/chat_input/chat_text_view.vala
index c7429318..201b60ac 100644
--- a/main/src/ui/chat_input/chat_text_view.vala
+++ b/main/src/ui/chat_input/chat_text_view.vala
@@ -66,6 +66,7 @@ public class ChatTextView : Box {
 
         scrolled_window.vadjustment.changed.connect(on_upper_notify);
 
+        text_view.remove_css_class("view");
         text_view.realize.connect(() => {
             var minimum_size = Requisition();
             scrolled_window.get_preferred_size(out minimum_size, null);
diff --git a/main/src/ui/chat_input/view.vala b/main/src/ui/chat_input/view.vala
index 96986b58..dbb1f74e 100644
--- a/main/src/ui/chat_input/view.vala
+++ b/main/src/ui/chat_input/view.vala
@@ -19,7 +19,6 @@ public class View : Box {
     private Conversation? conversation;
     private HashMap<Conversation, string> entry_cache = new HashMap<Conversation, string>(Conversation.hash_func, Conversation.equals_func);
 
-    [GtkChild] public unowned Frame frame;
     [GtkChild] public unowned Box quote_box;
     [GtkChild] public unowned ChatTextView chat_text_view;
     [GtkChild] public unowned Button file_button;
@@ -45,8 +44,6 @@ public class View : Box {
 
         file_button.tooltip_text = Util.string_if_tooltips_active(_("Send a file"));
 
-        Util.force_css(frame, "* { border-radius: 3px; }");
-
         return this;
     }
 
diff --git a/main/src/ui/conversation_content_view/file_image_widget.vala b/main/src/ui/conversation_content_view/file_image_widget.vala
index dae245e4..6efe2d58 100644
--- a/main/src/ui/conversation_content_view/file_image_widget.vala
+++ b/main/src/ui/conversation_content_view/file_image_widget.vala
@@ -46,7 +46,7 @@ public class FileImageWidget : Widget {
         image_overlay_toolbar.append(button);
         image_overlay_toolbar.add_css_class("card");
         image_overlay_toolbar.add_css_class("toolbar");
-        image_overlay_toolbar.add_css_class("overlay-toolbar");
+        image_overlay_toolbar.add_css_class("compact-card-toolbar");
         image_overlay_toolbar.set_cursor_from_name("default");
 
         file_size_label.add_css_class("file-details");