From 9df48478f3318c452a94c6833ed220048cb66af1 Mon Sep 17 00:00:00 2001
From: Mathis Ginkel <m.ginkel@stud.unibas.ch>
Date: Tue, 21 Apr 2026 22:18:06 +0200
Subject: [PATCH] Feat: Change look of chat box

---
 .../components/chatui/chatbox.fxml            |  7 ++-
 .../components/chatui/chattab.fxml            |  2 +-
 .../ui-structure/components/chatui/chatui.css | 62 ++++++++++++++++---
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/src/main/resources/ui-structure/components/chatui/chatbox.fxml b/src/main/resources/ui-structure/components/chatui/chatbox.fxml
index e88c640..2a6c526 100644
--- a/src/main/resources/ui-structure/components/chatui/chatbox.fxml
+++ b/src/main/resources/ui-structure/components/chatui/chatbox.fxml
@@ -3,13 +3,14 @@
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 
+<?import javafx.scene.control.skin.TabPaneSkin.TabContentRegion?>
 <VBox xmlns="http://javafx.com/javafx/21"
       xmlns:fx="http://javafx.com/fxml/1"
       fx:id="chatBox"
       VBox.vgrow="ALWAYS"
       stylesheets="@chatui.css"
       styleClass="chat-box"
-      spacing="10"
+      spacing="20"
       maxWidth="Infinity">
 
     <HBox spacing="10"
@@ -17,14 +18,14 @@
 
         <Label text="== CHAT ==" styleClass="chat-header" alignment="CENTER" maxWidth="Infinity"/>
         <Region HBox.hgrow="ALWAYS"/>
-        <MenuButton fx:id="addWhisperChatButton" styleClass="yellow-button" text="WHISPER CHAT"
+        <MenuButton fx:id="addWhisperChatButton" styleClass="menu-button" text="WHISPER CHAT"
                     alignment="CENTER_RIGHT">
         </MenuButton>
     </HBox>
 
     <TabPane fx:id="chatTabPane"
              VBox.vgrow="ALWAYS"
-             styleClass="tab-header-area">
+             styleClass="tab-pane">
 
     </TabPane>
 
diff --git a/src/main/resources/ui-structure/components/chatui/chattab.fxml b/src/main/resources/ui-structure/components/chatui/chattab.fxml
index ce3bf95..7db08e1 100644
--- a/src/main/resources/ui-structure/components/chatui/chattab.fxml
+++ b/src/main/resources/ui-structure/components/chatui/chattab.fxml
@@ -8,7 +8,7 @@
 <VBox fx:id="chatInterfaceVBox"
       maxWidth="Infinity"
       spacing="10"
-      styleClass="chat-box"
+      styleClass="tab-chat-box"
       stylesheets="@chatui.css"
       VBox.vgrow="ALWAYS"
       xmlns="http://javafx.com/javafx/17.0.12"
diff --git a/src/main/resources/ui-structure/components/chatui/chatui.css b/src/main/resources/ui-structure/components/chatui/chatui.css
index 81578b0..5e95cd5 100644
--- a/src/main/resources/ui-structure/components/chatui/chatui.css
+++ b/src/main/resources/ui-structure/components/chatui/chatui.css
@@ -5,7 +5,17 @@
     -fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
     -fx-border-width: 12;
     -fx-padding: 20;
-    /*-fx-effect: dropshadow(one-pass-box, rgba(0,0,0,1), 0, 0, 15, 15);*/
+    -fx-effect: dropshadow(one-pass-box, rgba(0,0,0,1), 0, 0, 15, 15);
+}
+
+.tab-chat-box {
+
+    -fx-background-color: #0d9e3b;
+    -fx-background-radius: 58;
+    -fx-border-radius: 50;
+    -fx-border-color: #0d763b #0d623b #0d623b #0d763b;
+    -fx-border-width: 12;
+    -fx-padding: 20;
 }
 
 .chat-header {
@@ -163,25 +173,25 @@
     -fx-border-width: 5;
     -fx-padding: 10;
     -fx-effect: dropshadow(one-pass-box, rgba(0,0,0,1), 0, 0, 15, 15);
-    -fx-max-height: 10;
+    -fx-min-height: 10;
 }
 
 .tab-pane .tab {
-    -fx-background-color: #0d9e3b;
-    -fx-background-radius: 18;
+    -fx-background-color: #0d983b;
+    -fx-background-radius: 28;
     -fx-border-radius: 10;
-    -fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
+    -fx-border-color: #0d873b #0d733b #0d733b #0d873b;
     -fx-border-width: 5;
-    -fx-padding: 10;
+    -fx-padding: 6 15;
 }
 
 .tab-pane .tab:selected {
-    -fx-background-color: #0d763b;
+    -fx-background-color: #0d873b;
     -fx-background-radius: 18;
     -fx-border-radius: 10;
-    -fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
+    -fx-border-color: #0d763b #0d623b #0d623b #0d763b;
     -fx-border-width: 5;
-    -fx-padding: 10;
+    -fx-padding: 6 15;
 }
 
 .tab-pane .tab .tab-close-button {
@@ -192,7 +202,6 @@
     -fx-background-color: #0d9e3b;
 }
 
-
 .tab .tab-label {
     -fx-alignment: CENTER;
     -fx-text-fill: #ffffff;
@@ -204,3 +213,36 @@
     -fx-alignment: CENTER;
     -fx-text-fill: #ffffff;
 }
+
+.menu-button {
+    -fx-background-color: #b8860b;
+    -fx-border-color: #ffd700;
+    -fx-text-fill: #ffffff;
+    -fx-background-radius: 12;
+    -fx-border-radius: 12;
+    -fx-font-family: "Courier New";
+    -fx-font-weight: bold;
+    -fx-border-width: 2;
+    -fx-padding: 6 15;
+    -fx-cursor: hand;
+}
+
+.menu-button .context-menu {
+    -fx-background-color: #b8860b;
+    -fx-background-radius: 4;
+    -fx-padding: 6 15;
+    -fx-cursor: hand;
+
+}
+
+.menu-button:hover {
+    -fx-translate-y: -3;
+    -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
+}
+
+.menu-button .menu-item {
+    -fx-background-color: #b8860b;
+    -fx-border-color: #ffd700;
+    -fx-text-fill: #ffffff
+}
+