redesign profile page using tailwind

ichiro-ss · Apr 16, 2024 · 8137b05 · 8137b05
1 parent 7454723
commit 8137b05
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 27 deletions.
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
@@ -44,32 +44,48 @@ export const Profile = () => {
     <div>
       <main className="profile">
         <Header />
-        <h1>edit username</h1>
-        <p className="error-message">{errorMessage}</p>
-        <form className="edit-form" onSubmit={handleSubmit(onEdit)}>
-          {/* eslint-disable */}
-          <label htmlFor="name">
-            name
-            <input
-              {...register('name', {
-                required: 'please input your name',
-                maxLength: {
-                  value: 30,
-                  message: 'maxLength: 30',
-                },
-              })}
-              value={name}
-              type="text"
-              onChange={handleNameChange}
-              id="text"
-            />
-          </label>
-          {errors.name && <div>{errors.name.message}</div>}
-          <button type="submit" className="edit-button">
-            Edit
-          </button>
-          {/* eslint-enable */}
-        </form>
+        <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+          <div className="w-full bg-gray-200 border-gray-300 rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0">
+            <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
+              <h1 className="text-left text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
+                edit username
+              </h1>
+              <p className="error-message">{errorMessage}</p>
+              <form className="space-y-4 md:space-y-6" onSubmit={handleSubmit(onEdit)}>
+                {/* eslint-disable */}
+                <label htmlFor="name" className="text-left block mb-2 text-sm font-medium text-gray-900">
+                  name
+                  <input
+                    {...register('name', {
+                      required: 'please input your name',
+                      maxLength: {
+                        value: 30,
+                        message: 'maxLength: 30',
+                      },
+                    })}
+                    value={name}
+                    type="text"
+                    onChange={handleNameChange}
+                    id="text"
+                    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 dark:bg-wihite"
+                  />
+                </label>
+                {errors.name && (
+                  <div className="text-right text-sm font-medium dark:text-red-500">{errors.name.message}</div>
+                )}
+                <div className="flex justify-end">
+                  <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"
+                  >
+                    Edit
+                  </button>
+                </div>
+                {/* eslint-enable */}
+              </form>
+            </div>
+          </div>
+        </div>
       </main>
     </div>
   );

diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
@@ -49,7 +49,7 @@ export const SignUp = () => {
       <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
         <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-200 dark:border-gray-300">
           <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
-            <h1 class="text-left text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-black">
+            <h1 className="text-left text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-black">
               Sign up
             </h1>
             <form onSubmit={handleSubmit(onSignUp)} className="space-y-4 md:space-y-6">