Rename message fix layout color

source/Component/Message/Message.scss

@@ -0,0 +1,20 @@
+div.panel-error-message {
+    transition: none !important;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    min-height: 26px;
+    display: flex;
+    align-items: center;
+
+    span {
+        display: block;
+    }
+}
+
+div.panel-error-message.title {
+    padding: 15px 0 5px 0;
+}
+
+div.panel-error-message.title.first {
+    padding: 5px 0 5px 0;
+}

source/Component/Message/Message.tsx

@@ -0,0 +1,42 @@
+import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
+import { useSetting, IMixinSettingProps, Themes, Language } from "@Context/Setting";
+import { FunctionComponent } from "react";
+import "./Message.scss";
+
+interface IMessageProps {
+    i18nKey: AllI18nKeys;
+    options?: Record<string, string>;
+    className?: string;
+    isTitle?: boolean;
+    first?: boolean;
+}
+
+const MessageView: FunctionComponent<IMessageProps & IMixinSettingProps> = (props) => {
+
+    let theme = props.setting ? props.setting.themes : Themes.dark;
+    let language: Language = props.setting ? props.setting.language : "EN_US";
+    let classList: string[] = [
+        "panel-error-message",
+        theme === Themes.dark ? "dark" : "light",
+    ];
+
+    if (props.first) {
+        classList.push("first");
+    }
+
+    if (props.isTitle) {
+        classList.push("title");
+        classList.push("font-lvl3");
+    }
+
+    if (props.className) {
+        classList.push(props.className);
+    }
+
+    return <div className={classList.join(" ")}>
+        <span className={language}>{I18N(language, props.i18nKey, props.options)}</span>
+    </div>
+}
+
+const Message = useSetting(MessageView);
+export { Message };