[Update] Add update software UI(modal).

src-ui/app/modal_controller/update_modal/UpdateModal.jsx

@@ -0,0 +1,20 @@
+import styles from "./UpdateModal.module.scss";
+import { useTranslation } from "react-i18next";
+import { useStore_OpenedQuickSetting } from "@store";
+import { useUpdateSoftware } from "@logics_common";
+
+export const UpdateModal = () => {
+    const { t } = useTranslation();
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { updateSoftware } = useUpdateSoftware();
+
+    return (
+        <div className={styles.container}>
+            <p className={styles.label}>{t("main_page.confirmation_message.update_software")}</p>
+            <div className={styles.button_wrapper}>
+                <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("main_page.confirmation_message.deny_update_software")}</button>
+                <button className={styles.accept_button} onClick={() => updateSoftware()}>{t("main_page.confirmation_message.accept_update_software")}</button>
+            </div>
+        </div>
+    );
+};

src-ui/app/modal_controller/update_modal/UpdateModal.module.scss

@@ -0,0 +1,55 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2.4rem;
+}
+
+.label {
+    font-size: 2rem;
+    max-width: 48rem;
+    text-align: center;
+    color: var(--dark_basic_text_color);
+}
+.button_wrapper {
+    display: flex;
+    width: 100%;
+    max-width: 48rem;
+    justify-content: space-between;
+}
+.deny_button, .accept_button {
+    font-size: 1.6rem;
+    padding: 1rem;
+    min-width: 10rem;
+    flex: 1;
+    max-width: 20rem;
+    text-align: center;
+    border-radius: 0.4rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--dark_basic_text_color);
+}
+
+.accept_button {
+    background-color: var(--primary_550_color);
+    &:hover {
+        background-color: var(--primary_450_color);
+    }
+    &:active {
+        background-color: var(--primary_600_color);
+    }
+}
+
+.deny_button {
+    background-color: var(--dark_750_color);
+    &:hover {
+        background-color: var(--dark_700_color);
+    }
+    &:active {
+        background-color: var(--dark_800_color);
+    }
+}