投稿フォーム領域のクラス名を全体的に変更

Mouwf · Mar 24, 2024 · 8960452 · 8960452
1 parent 6d066eb
commit 8960452
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/app/routes/components/post-form/post-form.module.css b/app/routes/components/post-form/post-form.module.css
@@ -2,7 +2,7 @@ footer {
     display: none;
 }
 
-.post-message-area {
+.post-form-area {
     width: 600px;
     height: 100vh;
     padding: 16px 40px 0;
@@ -11,34 +11,28 @@ footer {
     box-sizing: border-box;
 }
 
-.post-message-area a {
+.post-form-area a {
     display: inline-block;
     padding: 8px 0;
 }
 
-.post-message-user-information {
+.post-form-user-information {
     display: flex;
     margin-top: 16px;
 }
 
-.post-message-user-information p {
+.post-form-user-information p {
     margin: auto 10px;
     font-weight: 600;
 }
 
-.post-message-container {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.post-message {
+.post-form-message {
     height: auto;
     margin: 16px 0;
     border-bottom: solid 1px #4B4B4B;
 }
 
-.post-message textarea {
+.post-form-message textarea {
     width: 100%;
     height: 456px;
     font-size: 16px;
@@ -51,7 +45,13 @@ footer {
     outline: none;
 }
 
-.post-message-btn button {
+.post-form-submission {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.post-form-button button {
     font-size: 16px;
     padding: 10px 32px;
     background: none;
@@ -61,28 +61,28 @@ footer {
 }
 
 @media (max-width: 599px) {
-    header:has(+ .post-message-area) {
+    header:has(+ .post-form-area) {
         display: none;
     }
 
-    .post-message-area {
+    .post-form-area {
         width: 100%;
         padding: 12px 8px 0;
     }
 
-    .post-message {
+    .post-form-message {
         border-bottom: none;
     }
 
-    .post-message textarea {
+    .post-form-message textarea {
         height: calc(100vh - 214px);
     }
 
-    .post-message textarea, .post-message-btn button {
+    .post-form-message textarea, .post-form-button button {
         font-size: 15px;
     }
 
-    .post-message-container {
+    .post-form-submission {
         position: fixed;
         bottom: 4px;
         left: 0;
@@ -91,7 +91,7 @@ footer {
     }
 
     /* テキストエリアをフォーカス時の拡大を解除 */
-    .post-message textarea:focus {
+    .post-form-message textarea:focus {
         font-size: 15px;
         transform: scale(1);
     }

diff --git a/app/routes/components/post-form/post-form.tsx b/app/routes/components/post-form/post-form.tsx
@@ -18,18 +18,18 @@ export default function PostForm({
     const snsUser = useSnsUser();
 
     return (
-        <Form className={styles["post-message-area"]} method="post">
+        <Form className={styles["post-form-area"]} method="post">
             <Link to="/app">キャンセル</Link>
-            <div className={styles["post-message-user-information"]}>
+            <div className={styles["post-form-user-information"]}>
                 <PostUserProfileImage />
                 <p>{snsUser.userName}</p>
             </div>
-            <div className={styles["post-message"]}>
+            <div className={styles["post-form-message"]}>
                 <textarea name="content" placeholder="今日はどんな冒険をしましたか？" />
             </div>
-            <div className={styles["post-message-container"]}>
+            <div className={styles["post-form-submission"]}>
                 {children}
-                <div className={styles["post-message-btn"]}>
+                <div className={styles["post-form-button"]}>
                     <button type="submit">{submitMessage}</button>
                 </div>
             </div>