little design changes

alexandyrzph · Aug 6, 2022 · 8ca9839 · 8ca9839
1 parent 1e87cca
commit 8ca9839
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 33 deletions.
diff --git a/pixelplace/src/components/Auth/SignIn.js b/pixelplace/src/components/Auth/SignIn.js
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useNavigate, Navigate } from "react-router-dom";
 import { useUserAuth } from "../../context/UserAuthContext";
 import { BsShieldFillExclamation } from "react-icons/bs";
@@ -11,10 +10,6 @@ import { ToastContainer } from "react-toastify";
 const SignIn = () => {
     const navigate = useNavigate();
     const { user, signIn } = useUserAuth();
-    const [error, setError] = useState("");
-    if (error) {
-        toastError(error);
-    }
 
     if (user) {
         return <Navigate to="/" />;
@@ -24,9 +19,7 @@ const SignIn = () => {
         signIn(email, password)
             .then(() => navigate("/"))
             .catch((err) => {
-                handleFirebaseError(err.message, setError);
-                console.log(err.message);
-                console.log(err);
+                handleFirebaseError(err.message, toastError);
             });
     };
 
@@ -37,15 +30,15 @@ const SignIn = () => {
             onSubmit={(values) => handleSubmit(values)}
         >
             {({ errors, touched }) => (
-                <Form className="relative w-full mx-auto  h-screen pt-[80px] max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl">
-                    <h1 className="relative text-[100px] text-5xl -z-10 -mb-[10px] font-logo">
+                <Form className="relative w-full mx-auto h-screen pt-[100px] max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl">
+                    <h1 className="relative text-[80px] md:text-[120px] text-5xl -z-10 -mb-[10px] font-logo">
                         Sign <span className="text-stroke text-white">In</span>
                     </h1>
-                    {error && <ToastContainer />}
+                    <ToastContainer />
                     <div className="flex flex-wrap">
                         <Field
                             name="email"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_0px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_0px] duration-150 rounded-sm ${
                                 touched.email && errors.email
                                     ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
                                     : "border-neu-black"
@@ -58,11 +51,11 @@ const SignIn = () => {
                                 {errors.email}
                             </p>
                         ) : null}
-                        <Field 
+                        <Field
                             autoComplete="on"
                             type="password"
                             name="password"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_0px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_0px] duration-150 rounded-sm ${
                                 touched.password && errors.password
                                     ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
                                     : "border-neu-black"
@@ -78,7 +71,7 @@ const SignIn = () => {
                         <div className="mt-4 w-full">
                             <button
                                 type="submit"
-                                className="relative flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold"
+                                className="relative flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-sm bg-neu-yellow font-bold"
                             >
                                 Log in
                             </button>

diff --git a/pixelplace/src/components/Auth/SignUp.js b/pixelplace/src/components/Auth/SignUp.js
@@ -14,14 +14,10 @@ import { ToastContainer } from "react-toastify";
 
 const SignUp = () => {
     const { user, signUp } = useUserAuth();
-    const [error, setError] = useState("");
     const [image, setImage] = useState();
     const [preview, setPreview] = useState();
     const navigate = useNavigate();
     const fileRef = useRef(null);
-    if (error) {
-        toastError(error);
-    }
 
     useEffect(() => {
         if (image) {
@@ -42,7 +38,7 @@ const SignUp = () => {
             });
             return getDownloadURL(res.ref);
         } catch (err) {
-            console.log(err);
+            toastError(err.message);
         }
     };
 
@@ -57,7 +53,7 @@ const SignUp = () => {
             });
             navigate("/");
         } catch (err) {
-            handleFirebaseError(err.message, setError);
+            handleFirebaseError(err.message, toastError);
         }
     };
 
@@ -78,16 +74,16 @@ const SignUp = () => {
             onSubmit={(values) => handleSubmit(values)}
         >
             {({ errors, touched, setFieldValue }) => (
-                <Form className="w-full mx-auto  h-screen pt-[100px] max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl">
-                    <h1 className="relative text-[100px] text-5xl -z-10 -mb-[10px] font-logo">
+                <Form className="w-full mx-auto h-screen pt-[100px] max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl">
+                    <h1 className="relative text-[80px] md:text-[120px] text-5xl -z-10 -mb-[10px] font-logo">
                         Sign <span className="text-stroke text-white">Up</span>
                     </h1>
                     <ToastContainer />
                     <div className="flex flex-wrap">
                         <Field
                             type="text"
                             name="username"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-sm ${
                                 touched.username && errors.username
                                     ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
                                     : "border-neu-black"
@@ -107,7 +103,7 @@ const SignUp = () => {
                                     e.preventDefault();
                                     fileRef.current.click();
                                 }}
-                                className={`relative z-[9] flex flex-col justify-center items-center w-full h-64 bg-white rounded-lg border-2 ${
+                                className={`relative z-[9] flex flex-col justify-center items-center w-full h-64 bg-white rounded-sm border-2 ${
                                     touched.image && errors.image
                                         ? `border-red-600`
                                         : "border-neu-black"
@@ -165,7 +161,7 @@ const SignUp = () => {
                         <Field
                             type="email"
                             name="email"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-sm ${
                                 touched.email && errors.email
                                     ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
                                     : "border-neu-black"
@@ -182,7 +178,7 @@ const SignUp = () => {
                             autoComplete="on"
                             type="password"
                             name="password"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-sm ${
                                 touched.password && errors.password
                                     ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
                                     : "border-neu-black"
@@ -199,7 +195,7 @@ const SignUp = () => {
                             autoComplete="on"
                             type="password"
                             name="repass"
-                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-md ${
+                            className={`border-2 mt-3 w-full outline-none bg-white focus:shadow-[2px_2px_2px] duration-150 rounded-sm ${
                                 touched.repass && errors.repass
                                     ? "border-red-500 focus:shadow-[2px_2px_2px] focus:shadow-red-500 "
                                     : "border-neu-black"
@@ -215,7 +211,7 @@ const SignUp = () => {
                         <div className="w-full mt-4">
                             <button
                                 type="submit"
-                                className="relative flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold"
+                                className="relative flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-sm bg-neu-yellow font-bold"
                             >
                                 Sign Up
                             </button>

diff --git a/pixelplace/src/components/Home/Home.js b/pixelplace/src/components/Home/Home.js
@@ -24,13 +24,13 @@ const Home = () => {
                     </div>
                     <div className="relative flex lg:flex-col gap-3 justify-center w-full items-center">
                         <Link className="w-full" to="/posts">
-                            <button className="relative font-mono flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold">
+                            <button className="relative font-mono flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-sm bg-neu-yellow font-bold">
                                 Explore Art
                             </button>
                         </Link>
                         {!user ? (
                             <Link className="w-full" to="/register">
-                                <button className="relative font-mono flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-lg bg-white font-bold">
+                                <button className="relative font-mono flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 border-neu-black px-6 py-3 rounded-sm bg-white font-bold">
                                     Get Started
                                 </button>
                             </Link>

diff --git a/pixelplace/src/components/Posts/PostItem/PostItem.js b/pixelplace/src/components/Posts/PostItem/PostItem.js
@@ -43,7 +43,7 @@ const PostItem = ({
 
     return (
         <div className="break-inside mb-4 lg:hover:-translate-y-[1px] duration-300">
-            <div className="bg-white rounded-lg border-2 border-neu-black">
+            <div className="bg-white rounded-sm border-2 border-neu-black">
                 <div className="flex justify-between items-center">
                     <div className="flex p-2 items-center">
                         <img
@@ -110,7 +110,7 @@ const PostItem = ({
 
                     <div className="inline-flex items-center">
                         <Link to={`/posts/${postId}`}>
-                            <button className="relative flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 outline-none border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold">
+                            <button className="relative flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 outline-none border-neu-black px-6 py-3 rounded-sm bg-neu-yellow font-bold">
                                 Read More
                             </button>
                         </Link>