From 0283a74bfe30bab97b613600d1cda32b5eead574 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:39:38 +0900
Subject: [PATCH 1/2] [bugfix] Main Page: Message Logs: Fix text-align where
 sent message.

---
 .../log_box/message_container/MessageContainer.module.scss       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
index 966ed455..309da7f8 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
@@ -73,6 +73,7 @@
     flex-direction: column;
     &.sent_message {
         align-items: end;
+        text-align: end;
     }
     &.received_message {
         align-items: start;

From 24a90007f32fd6653a864b9ae02de806dc2ed2fd Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 30 Dec 2024 14:44:36 +0900
Subject: [PATCH 2/2] [Update] Starting up: Add close button.

---
 .../app/splash_component/SplashComponent.jsx  | 20 ++++++++-
 .../SplashComponent.module.scss               | 44 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx
index 44d62233..05b2307c 100644
--- a/src-ui/app/splash_component/SplashComponent.jsx
+++ b/src-ui/app/splash_component/SplashComponent.jsx
@@ -3,13 +3,16 @@ import styles from "./SplashComponent.module.scss";
 import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer/";
 import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
 import MegaphoneSvg from "@images/megaphone.svg?react";
+import XMarkSvg from "@images/cancel.svg?react";
+import { appWindow } from "@tauri-apps/api/window";
 
 export const SplashComponent = () => {
     return (
-        <div>
+        <div className={styles.container}>
             <StartUpProgressContainer />
             <DownloadModelsContainer />
             <AnnouncementsContainer />
+            <CloseButtonContainer />
         </div>
     );
 };
@@ -39,3 +42,18 @@ const AnnouncementsContainer = () => {
         </a>
     );
 };
+
+
+const CloseButtonContainer = () => {
+    const close = () => {
+        appWindow.close();
+    };
+
+    return (
+        <button className={styles.close_button_wrapper} onClick={close}>
+            <div className={styles.close_button}>
+                <XMarkSvg className={styles.x_mark_svg}/>
+            </div>
+        </button>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss
index 086b8ba6..6ef953b7 100644
--- a/src-ui/app/splash_component/SplashComponent.module.scss
+++ b/src-ui/app/splash_component/SplashComponent.module.scss
@@ -1,3 +1,10 @@
+.container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
 .announcements_button {
     position: absolute;
     top: 16px;
@@ -23,4 +30,41 @@
 }
 .announcements_link_svg {
     width: 20px;
+}
+
+
+
+.close_button_wrapper {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    width: 68px;
+    aspect-ratio: 1 / 1;
+    &:hover {
+        background-color: #bb4448;
+        & .x_mark_svg {
+            color: var(--dark_200_color);
+            transform: rotate(45deg);
+        }
+    }
+    &:active {
+        background-color: #9c3938;
+    }
+    transition: all 0.1s ease;
+}
+
+.close_button {
+    // width: 100%;
+    // height: 100%;
+}
+
+.x_mark_svg {
+    width: 24px;
+    transform: rotate(-45deg);
+    color: var(--dark_700_color);
+    transition: transform 0.3s ease;
 }
\ No newline at end of file