Simplify the display of no ruleset on the options page

dash14 · Sep 25, 2023 · 742f820 · 742f820
1 parent d40e139
commit 742f820
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -17,7 +17,7 @@
     "message": "Rule Sets"
   },
   "empty_ruleset": {
-    "message": "(There are no rule sets available. Click the button below to add it.)"
+    "message": "There are no rule sets available. Click the button below to add it."
   },
   "Notice": {
     "message": "Notice"

diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json
@@ -17,7 +17,7 @@
     "message": "ルールセット一覧"
   },
   "empty_ruleset": {
-    "message": "(ルールセットがありません。下のボタンをクリックして追加してください。)"
+    "message": "ルールセットがありません。下のボタンをクリックして追加してください。"
   },
   "Notice": {
     "message": "注意事項"

diff --git a/src/features/options/components/ruleset/RuleSetsEdit.tsx b/src/features/options/components/ruleset/RuleSetsEdit.tsx
@@ -9,6 +9,7 @@ import {
   Box,
   Button,
   Text,
+  Heading,
 } from "@chakra-ui/react";
 import { css } from "@emotion/react";
 import { CSSTransition } from "react-transition-group";
@@ -24,6 +25,7 @@ import { RuleSetMenu } from "./RuleSetMenu";
 
 type Props = {
   ruleSets: RuleSets;
+  titleFontAdjuster: number;
   onChange: (ruleSets: RuleSets) => void;
 };
 
@@ -37,6 +39,7 @@ const listTransitionCss = css(`
 
 export const RuleSetsEdit: React.FC<Props> = ({
   ruleSets: originalRuleSets,
+  titleFontAdjuster,
   onChange,
 }) => {
   const i18n = useI18n();
@@ -86,11 +89,19 @@ export const RuleSetsEdit: React.FC<Props> = ({
 
   return (
     <>
-      {ruleSets.length === 0 && (
-        <Text fontSize={16} marginLeft={10}>
-          {i18n["empty_ruleset"]}
-        </Text>
+      {ruleSets.length > 0 ? (
+        <Heading
+          as="h2"
+          fontSize={18 + titleFontAdjuster}
+          fontWeight="normal"
+          marginBottom={4}
+        >
+          {i18n["RuleSets"]}:
+        </Heading>
+      ) : (
+        <Text fontSize={18 + titleFontAdjuster}>{i18n["empty_ruleset"]}</Text>
       )}
+
       <SlideTransitionGroup style={listTransitionCss}>
         {ruleSets.map((ruleSet, ruleSetIndex) => (
           <CSSTransition

diff --git a/src/pages/Options.tsx b/src/pages/Options.tsx
@@ -84,16 +84,11 @@ const Options: React.FC = () => {
           />
         </HStack>
 
-        <Heading
-          as="h2"
-          fontSize={18 + titleFontAdjuster}
-          fontWeight="normal"
-          marginBottom={4}
-        >
-          {i18n["RuleSets"]}:
-        </Heading>
-
-        <RuleSetsEdit ruleSets={ruleSets} onChange={updateRuleSets} />
+        <RuleSetsEdit
+          ruleSets={ruleSets}
+          titleFontAdjuster={titleFontAdjuster}
+          onChange={updateRuleSets}
+        />
       </Container>
 
       <Container