New Group UI implemented.

src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css

@@ -624,5 +624,94 @@
 }
 
 .contacts-list {
-    -fx-background-color: #1f2a36; /* make sure the VBox background also matches */
+    -fx-background-color: #1f2a36;
+}
+
+/* ===== Group Card ===== */
+.group-card {
+    -fx-background-color: #1f2a36;
+    -fx-background-radius: 8;
+    -fx-padding: 16;
+}
+
+.group-name-label {
+    -fx-text-fill: #1e90ff;   /* same blue as light theme */
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+}
+
+.group-input {
+    -fx-background-color: transparent;
+    -fx-border-color: #444;
+    -fx-border-width: 0 0 1 0;
+    -fx-padding: 4 2;
+    -fx-text-fill: #eee;
+    -fx-prompt-text-fill: #777;
+}
+
+.group-camera-button {
+    -fx-background-color: #3390ec;
+    -fx-background-radius: 50%;
+    -fx-cursor: hand;
+}
+
+.footer-button {
+    -fx-background-color: transparent;
+    -fx-text-fill: #3390ec;
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+}
+
+/* Group name field normal */
+.group-name-field {
+    -fx-background-color: transparent;
+    -fx-border-color: #1e90ff;
+    -fx-border-width: 0 0 2 0; /* underline only */
+    -fx-text-fill: #fff;
+    -fx-prompt-text-fill: #777;
+    -fx-focus-color: transparent; /* prevent default blue glow */
+    -fx-faint-focus-color: transparent;
+}
+
+/* Error state for group name */
+.group-name-label.error {
+    -fx-text-fill: #e74c3c; /* red */
+}
+
+.group-name-field.error {
+    -fx-border-color: #e74c3c;
+    -fx-border-width: 0 0 2 0; /* only underline */
+    -fx-focus-color: transparent; /* remove default blue glow */
+}
+
+/* Member count label */
+.member-count {
+    -fx-font-size: 12px;
+    -fx-text-fill: #aaa; /* lighter gray for dark background */
+}
+
+/* Pane holding selected members */
+.selected-members-pane {
+    -fx-background-color: transparent;
+    -fx-padding: 6;
+    -fx-hgap: 6;
+    -fx-vgap: 6;
+}
+
+/* Footer */
+.contacts-footer {
+    -fx-background-color: transparent;
+    -fx-padding: 8 12;
+}
+
+/* Chip for selected members */
+.member-chip {
+    -fx-background-color: #253544;  /* dark bluish bubble */
+    -fx-background-radius: 16;
+    -fx-padding: 4 8;
+    -fx-spacing: 6;
+    -fx-alignment: center;
+}
+.member-chip:hover {
+    -fx-background-color: #31475b;  /* lighter on hover */
 }

src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css

@@ -637,7 +637,85 @@
 }
 
 .no-contacts-label {
-    -fx-text-fill: #777;   /* light theme */
+    -fx-text-fill: #777;
     -fx-font-size: 13px;
 }
 
+/* ===== Group Card ===== */
+.group-card {
+    -fx-background-color: #fff;
+    -fx-background-radius: 8;
+    -fx-padding: 16;
+}
+
+/* Group name label */
+.group-name-label {
+    -fx-text-fill: #1e90ff; /* blue color */
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+}
+
+/* Group name input */
+.group-name-field {
+    -fx-background-color: transparent;
+    -fx-border-width: 0 0 2 0;   /* only bottom line */
+    -fx-border-color: #1e90ff;   /* blue underline */
+    -fx-padding: 4 0 4 0;
+    -fx-font-size: 13px;
+}
+
+.group-camera-button {
+    -fx-background-color: #3390ec;
+    -fx-background-radius: 50%;
+    -fx-cursor: hand;
+}
+
+.footer-button {
+    -fx-background-color: transparent;
+    -fx-text-fill: #3390ec;
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+}
+
+/* Error state for group name */
+.group-name-label.error {
+    -fx-text-fill: #e74c3c; /* red */
+}
+
+.group-name-field.error {
+    -fx-border-color: #e74c3c;
+    -fx-border-width: 0 0 2 0; /* only underline */
+    -fx-focus-color: transparent; /* remove default blue glow */
+}
+
+/* Member count label (top right in header) */
+.member-count {
+    -fx-font-size: 12px;
+    -fx-text-fill: #777; /* subtle gray */
+}
+
+/* Pane holding selected members (chips flow horizontally) */
+.selected-members-pane {
+    -fx-background-color: transparent;
+    -fx-padding: 6;
+    -fx-hgap: 6;
+    -fx-vgap: 6;
+}
+
+/* Footer with Cancel & Create buttons */
+.contacts-footer {
+    -fx-background-color: transparent;
+    -fx-padding: 8 12;
+}
+
+/* Small chip for selected members */
+.member-chip {
+    -fx-background-color: #d9d9d9;  /* light gray bubble */
+    -fx-background-radius: 16;
+    -fx-padding: 4 8;
+    -fx-spacing: 6;
+    -fx-alignment: center;
+}
+.member-chip:hover {
+    -fx-background-color: #c6c6c6;  /* slightly darker on hover */
+}

src/main/resources/org/to/telegramfinalproject/Fxml/add_member.fxml

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.geometry.Insets?>
+
+<StackPane xmlns:fx="http://javafx.com/fxml"
+           fx:controller="org.to.telegramfinalproject.UI.AddMembersController"
+           styleClass="overlay-root">
+
+    <!-- Background -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Add Members card -->
+    <VBox fx:id="addMembersCard" styleClass="contacts-card"
+          prefWidth="360" maxWidth="360"
+          prefHeight="520" maxHeight="520">
+
+        <!-- ===== Header ===== -->
+        <HBox alignment="CENTER_LEFT" spacing="10" styleClass="contacts-header">
+            <Label text="Add Members" styleClass="contacts-title"/>
+            <!-- Member count -->
+            <Label fx:id="memberCountLabel" text="0 / 200000" styleClass="member-count"/>
+            <Pane HBox.hgrow="ALWAYS"/> <!-- pushes elements to right -->
+        </HBox>
+
+        <!-- ===== Selected Members Row ===== -->
+        <FlowPane fx:id="selectedMembersPane"
+                  hgap="6" vgap="6"
+                  styleClass="selected-members-pane">
+            <padding>
+                <Insets top="6" right="6" bottom="6" left="6"/>
+            </padding>
+        </FlowPane>
+
+        <!-- ===== Search Bar with Icon ===== -->
+        <HBox alignment="CENTER_LEFT" spacing="6" styleClass="contacts-search-box">
+            <Button fx:id="searchIcon" styleClass="search-icon"/>
+            <TextField fx:id="searchField"
+                       promptText="Search"
+                       styleClass="contacts-search"
+                       HBox.hgrow="ALWAYS"/>
+        </HBox>
+
+        <Separator styleClass="section-separator"/>
+
+        <!-- ===== Contacts List (fills space) ===== -->
+        <ScrollPane fx:id="contactsScroll"
+                    fitToWidth="true"
+                    vbarPolicy="AS_NEEDED"
+                    hbarPolicy="NEVER"
+                    VBox.vgrow="ALWAYS"
+                    styleClass="contacts-scroll">
+            <VBox fx:id="contactsList" spacing="6" styleClass="contacts-list"/>
+        </ScrollPane>
+
+        <Separator styleClass="section-separator"/>
+
+        <!-- ===== Footer ===== -->
+        <HBox alignment="CENTER_RIGHT" styleClass="contacts-footer">
+            <padding>
+                <Insets top="8" right="8" bottom="8" left="8"/>
+            </padding>
+            <Button fx:id="cancelButton" text="Cancel" styleClass="footer-button"/>
+            <Button fx:id="createButton" text="Create" styleClass="footer-button"/>
+        </HBox>
+    </VBox>
+</StackPane>

src/main/resources/org/to/telegramfinalproject/Fxml/new_group.fxml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.control.*?>
+<?import javafx.geometry.Insets?>
+
+<StackPane fx:id="overlayRoot" xmlns:fx="http://javafx.com/fxml"
+           fx:controller="org.to.telegramfinalproject.UI.NewGroupController"
+           styleClass="overlay-root">
+
+    <!-- Dimmed background -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Group card -->
+    <VBox fx:id="newGroupCard"
+          styleClass="group-card"
+          spacing="16"
+          alignment="CENTER"
+          prefWidth="400" maxWidth="400"
+          prefHeight="220" maxHeight="220">
+
+        <HBox alignment="CENTER_LEFT" spacing="12">
+            <!-- Group Picture -->
+            <Button fx:id="cameraButton"
+                    prefWidth="64" prefHeight="64"
+                    styleClass="group-camera-button">
+                <graphic>
+                    <ImageView fx:id="cameraIcon"
+                               fitWidth="28" fitHeight="28"
+                               preserveRatio="true"/>
+                </graphic>
+            </Button>
+
+            <!-- Group Name -->
+            <VBox spacing="4" alignment="CENTER_LEFT" HBox.hgrow="ALWAYS">
+                <Label fx:id="groupNameLabel" text="Group name" styleClass="group-name-label"/>
+                <TextField fx:id="groupNameField"
+                           promptText="Enter group name"
+                           styleClass="group-name-field"
+                           HBox.hgrow="ALWAYS"/>
+            </VBox>
+        </HBox>
+
+        <!-- Footer: Cancel + Next -->
+        <HBox alignment="CENTER_RIGHT" spacing="16">
+            <Button fx:id="cancelButton" text="Cancel" styleClass="footer-button"/>
+            <Button fx:id="nextButton" text="Next" styleClass="footer-button"/>
+        </HBox>
+    </VBox>
+</StackPane>