chore: add beta badge

web/src/components/BetaBadge.tsx

+import "../less/beta-badge.less";
+
+interface Props {
+  className?: string;
+}
+
+const BetaBadge: React.FC<Props> = (props: Props) => {
+  const { className } = props;
+
+  return <span className={`beta-badge ${className ?? ""}`}>beta</span>;
+};
+
+export default BetaBadge;

web/src/components/Settings/PreferencesSection.tsx

@@ -2,6 +2,7 @@ import { globalService, userService } from "../../services";
 import { useAppSelector } from "../../store";
 import { VISIBILITY_SELECTOR_ITEMS } from "../../helpers/consts";
 import useI18n from "../../hooks/useI18n";
+import BetaBadge from "../BetaBadge";
 import Selector from "../common/Selector";
 import "../../less/settings/preferences-section.less";
 
@@ -36,11 +37,12 @@ const PreferencesSection: React.FC<Props> = () => {
       <label className="form-label">
         <span className="normal-text">{t("common.language")}:</span>
         <Selector className="ml-2 w-28" value={setting.locale} dataSource={localeSelectorItems} handleValueChanged={handleLocaleChanged} />
+        <BetaBadge className="ml-2" />
       </label>
       <label className="form-label">
         <span className="normal-text">{t("setting.preference-section.default-memo-visibility")}:</span>
         <Selector
-          className="ml-2 w-28"
+          className="ml-2 w-32"
           value={setting.memoVisibility}
           dataSource={VISIBILITY_SELECTOR_ITEMS}
           handleValueChanged={handleDefaultMemoVisibilityChanged}

web/src/less/beta-badge.less

+.beta-badge {
+  @apply px-2 text-xs border rounded-lg text-gray-400;
+}

web/src/less/settings/preferences-section.less

 @import "../mixin.less";
 
 .preferences-section-container {
-  > .btns-container {
-    .flex(row, flex-start, center);
-    @apply w-full;
+  > .form-label {
+    @apply mb-2;
 
-    > .btn {
-      @apply border text-sm py-1 px-3 mr-2 rounded leading-6 shadow hover:opacity-80;
+    > .normal-text {
+      @apply mr-2 text-sm;
     }
   }
 }