refac: タグ周りのUIの修正

ayanami77 · May 5, 2024 · 950ab46 · 950ab46
1 parent 7417277
commit 950ab46
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 11 deletions.
diff --git a/src/features/manage/tags/components/TagsDeleteButton.tsx b/src/features/manage/tags/components/TagsDeleteButton.tsx
@@ -8,7 +8,7 @@ export const TagsDeleteButton: FC<Props> = ({ onClickFn }) => {
   return (
     <button type="button" onClick={onClickFn}>
       <svg
-        className="w-5 h-5 text-rhyth-red hover:text-rhyth-hover-red font-noto-sans font-bold"
+        className="w-5 h-5 text-rhyth-red font-noto-sans font-bold"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         width="24"

diff --git a/src/features/manage/tags/components/TagsEditButton.tsx b/src/features/manage/tags/components/TagsEditButton.tsx
@@ -8,7 +8,7 @@ export const TagsEditButton: FC<Props> = ({ onClickFn }) => {
   return (
     <button type="button" onClick={onClickFn}>
       <svg
-        className="w-6 h-6 text-rhyth-gray hover:text-rhyth-black"
+        className="w-6 h-6 text-rhyth-dark-blue"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         width="24"

diff --git a/src/features/manage/tags/components/TagsItem.tsx b/src/features/manage/tags/components/TagsItem.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import { selectTagColorBg } from "../../common/funcs";
+import { selectTagColorText } from "../../common/funcs";
 import { TagsDeleteButton } from "./TagsDeleteButton";
 import { TagsEditButton } from "./TagsEditButton";
 
@@ -13,9 +13,19 @@ type Props = {
 export const TagsItem: FC<Props> = ({ tagName, tagColor, onEditFn, onDeleteFn }) => {
   return (
     <li className="h-12 flex items-center justify-between w-full border-b-2 border-rhyth-light-gray last:border-none px-4 py-2 rounded-t-lg">
-      <div className="flex items-center">
-        <span className={`w-3 h-3 me-3 ${selectTagColorBg(tagColor)} rounded-full`} />
-        <p>{tagName}</p>
+      <div className="flex items-center gap-2">
+        <svg
+          className={`w-6 h-6 ${selectTagColorText(tagColor)}`}
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="M18.045 3.007 12.31 3a1.965 1.965 0 0 0-1.4.585l-7.33 7.394a2 2 0 0 0 0 2.805l6.573 6.631a1.957 1.957 0 0 0 1.4.585 1.965 1.965 0 0 0 1.4-.585l7.409-7.477A2 2 0 0 0 21 11.479v-5.5a2.972 2.972 0 0 0-2.955-2.972Zm-2.452 6.438a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
+        </svg>
+        <span>{tagName}</span>
       </div>
       <div className="flex items-center gap-2">
         <TagsEditButton onClickFn={onEditFn} />

diff --git a/src/features/manage/tags/components/TagsNewModal.tsx b/src/features/manage/tags/components/TagsNewModal.tsx
@@ -73,7 +73,7 @@ export const TagsNewModal: FC<Props> = ({ modalType, closeModal }) => {
               />
             </div>
             {errors.name && <FormErrorMsg msg={errors.name.message} />}
-            <div className="flex items-start justify-between">
+            <div className="flex items-center justify-between">
               <label className="flex gap-2 mb-2 text-sm font-bold text-rhyth-dark-blue my-2" htmlFor="tag-color">
                 <svg
                   className="w-6 h-6 text-rhyth-gray"
@@ -95,7 +95,7 @@ export const TagsNewModal: FC<Props> = ({ modalType, closeModal }) => {
               className="w-full text-white bg-rhyth-light-blue hover:bg-rhyth-blue disabled:bg-rhyth-light-gray font-medium rounded-lg text-sm px-5 py-2.5 text-center shadow-md"
               disabled={createTagMutation.isPending}
             >
-              決定する
+              作成する
             </button>
           </form>
         </div>

diff --git a/src/features/manage/tags/components/TagsPresenter.tsx b/src/features/manage/tags/components/TagsPresenter.tsx
@@ -58,7 +58,7 @@ export const TagsPresenter = () => {
         </div>
         <div className="text-rhyth-dark-blue">
           {tagItems?.length ? (
-            <ul className="text-md font-bold bg-white border-2 border-rhyth-light-gray rounded-lg shadow-md">
+            <ul className="text-md font-bold bg-white border-2 border-rhyth-light-gray shadow-md">
               {tagItems.map((item) => (
                 <TagsItem
                   key={item.id}

diff --git a/src/features/quests/components/QuestStatusTag.tsx b/src/features/quests/components/QuestStatusTag.tsx
@@ -30,11 +30,11 @@ export const QuestStatusTag: FC<Props> = ({ status, calcExp }) => {
       <span className="text-white text-md">{calcExp}</span>
     </div>
   ) : status === "SUCCESS" ? (
-    <div className="w-[70px] h-full flex items-center justify-center bg-rhyth-green text-white tracking-widest font-bold px-2 py-1 rounded-r-md shadow-md">
+    <div className="w-[70px] flex items-center justify-center bg-rhyth-green text-white tracking-widest font-bold px-2 py-1 rounded-r-md shadow-md font-cp-font">
       成功
     </div>
   ) : (
-    <div className="w-[70px] h-full flex items-center justify-center bg-rhyth-red text-white tracking-widest font-bold px-2 py-1 rounded-r-md shadow-md">
+    <div className="w-[70px] flex items-center justify-center bg-rhyth-red text-white tracking-widest font-bold rounded-r-md shadow-md font-cp-font">
       失敗
     </div>
   );