From 8df3e3357b0cb120ca9a46061586e23a1f1cf5e4 Mon Sep 17 00:00:00 2001
From: ichiro-ss <sei.swmr@gmail.com>
Date: Wed, 17 Apr 2024 12:57:49 +0900
Subject: [PATCH] fix UI

---
 src/pages/Edit.jsx       |   2 +
 src/pages/NewSummary.jsx | 155 ++++++++++++++++++++-------------------
 2 files changed, 81 insertions(+), 76 deletions(-)

diff --git a/src/pages/Edit.jsx b/src/pages/Edit.jsx
index 931cf93..da5b6cd 100644
--- a/src/pages/Edit.jsx
+++ b/src/pages/Edit.jsx
@@ -144,6 +144,7 @@ export const Edit = () => {
                           type="text"
                           onChange={(e) => setSummary({ ...summary, markdown: e.target.value })}
                           id="markdown"
+                          className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
                         />
                       </label>
                       <div>
@@ -162,6 +163,7 @@ export const Edit = () => {
                                   newAuthors[index] = e.target.value;
                                   setSummary({ ...summary, authors: newAuthors });
                                 }}
+                                className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
                               />
                               <button
                                 type="button"
diff --git a/src/pages/NewSummary.jsx b/src/pages/NewSummary.jsx
index e8a29d8..4734ab9 100644
--- a/src/pages/NewSummary.jsx
+++ b/src/pages/NewSummary.jsx
@@ -51,87 +51,90 @@ export const NewSummary = () => {
     <div>
       <Header />
       <main className="newSummary">
-        <p className="error-msg">{errorMessage}</p>
-        <div className="w-full border bg-gray-200 border-gray-200 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
-          <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
-            <form className="space-y-4 md:space-y-6" onSubmit={handleSubmit(onNewSummary)}>
-              {/* eslint-disable */}
-              <div>
-                <label htmlFor="title" className="text-left block mb-2 text-sm font-medium text-gray-900">
-                  title
-                  <input
-                    {...register('title', {
-                      required: 'please input title',
-                      maxLength: {
-                        value: 120,
-                        message: 'maxLength: 120',
-                      },
-                    })}
-                    type="text"
-                    onChange={handleTitleChange}
-                    id="title"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
-                  />
-                </label>
-              </div>
-              <div>
-                <label htmlFor="markdown" className="text-left block mb-2 text-sm font-medium text-gray-900">
-                  markdown
-                  <textarea
-                    {...register('markdown', {
-                      required: 'please input markdown',
-                    })}
-                    type="text"
-                    onChange={handleMarkdownChange}
-                    id="markdown"
-                  />
-                </label>
-              </div>
-              <div>
-                <label htmlFor="authors">
-                  <div className="block text-left">authors</div>
-                  {fields.map((field, index) => (
-                    <div key={field.id}>
-                      <input
-                        {...register(`authors.${index}.name`, {
-                          required: 'please input name',
-                        })}
-                        type="text"
-                        onChange={(e) => {
-                          const newAuthors = [...authors];
-                          newAuthors[index] = e.target.value;
-                          setAuthors(newAuthors);
-                        }}
-                      />
+        <div className="flex flex-col items-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+          <p className="error-msg">{errorMessage}</p>
+          <div className="w-full border bg-gray-200 border-gray-200 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
+            <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
+              <form className="space-y-4 md:space-y-6" onSubmit={handleSubmit(onNewSummary)}>
+                {/* eslint-disable */}
+                <div>
+                  <label htmlFor="title" className="text-left block mb-2 text-sm font-medium text-gray-900">
+                    title
+                    <input
+                      {...register('title', {
+                        required: 'please input title',
+                        maxLength: {
+                          value: 120,
+                          message: 'maxLength: 120',
+                        },
+                      })}
+                      type="text"
+                      onChange={handleTitleChange}
+                      id="title"
+                      className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
+                    />
+                  </label>
+                </div>
+                <div>
+                  <label htmlFor="markdown" className="text-left block mb-2 text-sm font-medium text-gray-900">
+                    markdown
+                    <textarea
+                      {...register('markdown', {
+                        required: 'please input markdown',
+                      })}
+                      type="text"
+                      onChange={handleMarkdownChange}
+                      id="markdown"
+                      className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
+                    />
+                  </label>
+                </div>
+                <div>
+                  <label htmlFor="authors">
+                    <div className="block text-left">authors</div>
+                    {fields.map((field, index) => (
+                      <div key={field.id}>
+                        <input
+                          {...register(`authors.${index}.name`, {
+                            required: 'please input name',
+                          })}
+                          type="text"
+                          onChange={(e) => {
+                            const newAuthors = [...authors];
+                            newAuthors[index] = e.target.value;
+                            setAuthors(newAuthors);
+                          }}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => remove(index)}
+                          className="text-gray-800 hover:bg-gray-300 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
+                        >
+                          DELETE
+                        </button>
+                      </div>
+                    ))}
+                    <div className="flex justify-end">
                       <button
                         type="button"
-                        onClick={() => remove(index)}
-                        className="text-gray-800 hover:bg-gray-300 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
+                        onClick={() => append('')}
+                        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
                       >
-                        DELETE
+                        ADD
                       </button>
                     </div>
-                  ))}
-                  <div className="flex justify-end">
-                    <button
-                      type="button"
-                      onClick={() => append('')}
-                      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
-                    >
-                      ADD
-                    </button>
-                  </div>
-                </label>
-              </div>
-              {errors.name && <div>{errors.name.message}</div>}
-              <button
-                type="submit"
-                className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
-              >
-                POST
-              </button>
-              {/* eslint-enable */}
-            </form>
+                  </label>
+                </div>
+                {errors.name && <div>{errors.name.message}</div>}
+                <button
+                  type="submit"
+                  className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-2 py-2 lg:py-2 mr-2"
+                >
+                  POST
+                </button>
+                {/* eslint-enable */}
+              </form>
+            </div>
           </div>
         </div>
       </main>