#34

frontend/src/pages/users/SettingPage.tsx

@@ -8,7 +8,7 @@ import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import TagLink from '@/components/TagLink'
-import BehaviorSettingsSection from '@/components/users/BehaviorSettingsSection'
+import BehaviourSettingsSection from '@/components/users/BehaviourSettingsSection'
 import KeyboardSettingsSection from '@/components/users/KeyboardSettingsSection'
 import InheritDialogue from '@/components/users/InheritDialogue'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
@@ -259,7 +259,7 @@ const ThemeSection: FC<SharedSectionProps> = (
       <div className="space-y-3">
 	<div className="flex flex-wrap items-center justify-between gap-2">
 	  <div>
-	  <h3 className="font-medium">タグカテゴリ色</h3>
+	    <h3 className="font-medium">タグカテゴリ色</h3>
 	  </div>
 	  <Button
 	      type="button"
@@ -270,7 +270,7 @@ const ThemeSection: FC<SharedSectionProps> = (
 	  </Button>
 	</div>
 
-	<div className="grid gap-3 sm:grid-cols-2">
+	<div className="space-y-3">
 	  {CATEGORIES.map (category => {
 	      const resolvedDefaults =
 		  defaultThemeTagColoursFor (selectedTheme.baseTheme)
@@ -280,9 +280,19 @@ const ThemeSection: FC<SharedSectionProps> = (
 	      return (
 		  <div
 		      key={category}
-		      className="space-y-2 rounded-lg border border-border/70 px-3 py-2">
-		    <div className="flex items-center justify-between gap-3">
-		      <span className="text-sm">{CATEGORY_NAMES[category]}</span>
+		      className="flex flex-col gap-3 rounded-lg border border-border/70 px-3 py-3
+				 sm:flex-row sm:items-center sm:justify-between">
+		    <div className="space-y-2">
+		      <p className="text-sm font-medium">{CATEGORY_NAMES[category]}</p>
+		      <div style={themePreviewStyle (draftTagColours)}>
+			<TagLink
+			    tag={previewTags[category]}
+			    linkFlg={false}
+			    truncateOnMobile
+			    withWiki={false}/>
+		      </div>
+		    </div>
+		    <div className="flex flex-wrap items-center gap-3">
 		      <input
 			  type="color"
 			  value={draftTagColours[category]}
@@ -291,8 +301,6 @@ const ThemeSection: FC<SharedSectionProps> = (
 			  onChange={ev => onTagColourChange (category, ev.target.value)}
 			  className="h-10 w-16 cursor-pointer rounded border border-border
 				     bg-transparent p-1"/>
-		    </div>
-		    <div className="flex justify-end">
 		      <Button
 			  type="button"
 			  variant="ghost"
@@ -693,7 +701,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 		{activeTab === 'keyboard' && (
 		    <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
 		{activeTab === 'behavior' && (
-		    <BehaviorSettingsSection sectionClassName={sectionClassName}/>)}
+		    <BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
 	      </div>)}
 	</div>
 
@@ -742,7 +750,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			  {activeTab === 'keyboard' && (
 			      <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
 			  {activeTab === 'behavior' && (
-			      <BehaviorSettingsSection sectionClassName={sectionClassName}/>)}
+			      <BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
 			</>)}
 		  </div>)}
 	    </div>