[Update] Main Page: Message MessageLogSettingsContainer: Add config icon to bottom of it.

src-ui/app/_index_css/variables.css

@@ -48,6 +48,8 @@
     --dark_975_color: #1a1b1d;
     --dark_1000_color: #151517;
 
+    --dark_825_color_cc: #434447cc;
+
 
     --title_bar_height: 2rem;
     --main_page_topbar_height: 4.8rem;

src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { useIsVisibleResendButton } from "@logics_main";
 import { MessageLogUiScalingContainer } from "@setting_box";
 import { Checkbox } from "@common_components";
+import ConfigSvg from "@images/configuration.svg?react";
 
 export const MessageLogSettingsContainer = (props) => {
     const [is_opened, setIsOpened] = useState(false);
@@ -28,6 +29,11 @@ export const MessageLogSettingsContainer = (props) => {
             onMouseLeave={() => {setIsHovered(false); setIsOpened(false);}}
             onClick={() => setIsOpened(true)}
         >
+            <div className={styles.container_relative_wrapper}>
+                <div className={styles.config_svg_wrapper}>
+                    <ConfigSvg className={styles.config_svg}/>
+                </div>
+            </div>
             <MessageLogUiScalingContainer />
             <div className={styles.others_wrapper}>
                 <div className={styles.resend_checkbox_toggle} onClick={toggleVisibleResendButton}>

src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss

@@ -1,12 +1,12 @@
 $container_height: 18rem;
+$toggle_config_size: 3rem;
 .container {
     position: absolute;
-    top: -#{$container_height};
+    top: calc(-#{$container_height} + -#{$toggle_config_size});
     left: 0;
     height: $container_height;
     width: 100%;
-    background-color:  (#555555cc);
-    backdrop-filter: blur(0.6rem);
+    background-color: var(--dark_825_color);
     transition: top 0.3s ease;
     padding: 0.6rem;
     display: flex;
@@ -15,18 +15,54 @@ $container_height: 18rem;
     align-items: center;
     &.to_visible_toggle_bar {
         top: calc(-#{$container_height} + 1rem);
+        & .config_svg_wrapper {
+            transform: translate(-50%, -50%) rotate(180deg);
+        }
+
     }
     &.is_hovered {
         top: calc(-#{$container_height} + 2rem);
     }
     &.is_opened {
         top: 0;
+        background-color: var(--dark_825_color_cc);
+        backdrop-filter: blur(0.6rem);
+        & .config_svg_wrapper {
+            width: 0%;
+            bottom: 0;
+        }
     }
     &:not(.is_opened) {
         cursor: pointer;
     }
 }
 
+.container_relative_wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.config_svg_wrapper {
+    position: absolute;
+    left: 50%;
+    bottom: -#{$toggle_config_size};
+    transform: translate(-50%, -50%) rotate(0deg);
+    background-color: var(--dark_825_color);
+    width: $toggle_config_size;
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease, transform 0.6s ease;
+}
+
+.config_svg {
+    width: calc($toggle_config_size / 1.6);
+    color: var(--dark_500_color);
+}
+
 .others_wrapper {
     width: 100%;
     display: flex;