From dd04bc9e1d84f3abed226557a85e595daeb8cfa3 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 19 Aug 2022 22:08:47 +0800
Subject: [PATCH] chore: add beta badge

---
 web/src/components/BetaBadge.tsx                   | 13 +++++++++++++
 web/src/components/Settings/PreferencesSection.tsx |  4 +++-
 web/src/less/beta-badge.less                       |  3 +++
 web/src/less/settings/preferences-section.less     |  9 ++++-----
 4 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/BetaBadge.tsx
 create mode 100644 web/src/less/beta-badge.less

diff --git a/web/src/components/BetaBadge.tsx b/web/src/components/BetaBadge.tsx
new file mode 100644
index 00000000..e9ebbd66
--- /dev/null
+++ b/web/src/components/BetaBadge.tsx
@@ -0,0 +1,13 @@
+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;
diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx
index d94ed720..072365b7 100644
--- a/web/src/components/Settings/PreferencesSection.tsx
+++ b/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}
diff --git a/web/src/less/beta-badge.less b/web/src/less/beta-badge.less
new file mode 100644
index 00000000..f60ce5ed
--- /dev/null
+++ b/web/src/less/beta-badge.less
@@ -0,0 +1,3 @@
+.beta-badge {
+  @apply px-2 text-xs border rounded-lg text-gray-400;
+}
diff --git a/web/src/less/settings/preferences-section.less b/web/src/less/settings/preferences-section.less
index aff3a6a1..b10e4f9f 100644
--- a/web/src/less/settings/preferences-section.less
+++ b/web/src/less/settings/preferences-section.less
@@ -1,12 +1,11 @@
 @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;
     }
   }
 }