Skip to content

Commit

Permalink
design fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexandyrzph
alexandyrzph committed Aug 7, 2022
1 parent bcfe2dd commit a4de7d6
Show file tree
Hide file tree
Showing 7 changed files with 22 additions and 19 deletions.
4 changes: 2 additions & 2 deletions pixelplace/src/components/Comment/Comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Comment = ({ photoURL, displayName, comment, commentId, uid, currentUserId
};

return (
<div className="flex bg-slate-200 rounded-full rounded-r-xl gap-2 mb-2 items-center">
<div className="flex bg-gray-100 rounded-lg gap-2 mb-2 items-center">
<ToastContainer />
<img
src={photoURL}
Expand All @@ -27,7 +27,7 @@ const Comment = ({ photoURL, displayName, comment, commentId, uid, currentUserId
<HiX
cursor={"pointer"}
onClick={deleteCommentHandler}
className="hover:bg-slate-300 text-lg text-gray-500 hover:text-black rounded-full duration-100"
className="hover:bg-slate-300 mr-2 text-lg text-gray-500 hover:text-black rounded-full duration-100"
/>
) : null}
</div>
Expand Down
2 changes: 1 addition & 1 deletion pixelplace/src/components/Home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const Home = () => {
</Link>
) : (
<Link className="w-full" to="/post-create">
<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">
Create Post
</button>
</Link>
Expand Down
4 changes: 2 additions & 2 deletions pixelplace/src/components/Navbar/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const Navbar = () => {
</li>
</Link>
<Link to="post-create">
<li className="hover:-translate-y-[1px] bg-white text-xl hover:shadow-[2px_2px_0px_black] duration-100 cursor-pointer rounded-md border-black border-2">
<li className="hover:-translate-y-[1px] bg-white text-xl hover:shadow-[2px_2px_0px_black] duration-100 cursor-pointer rounded-sm border-black border-2">
<AiOutlinePlus className="p-1" size={"1.8rem"} />
</li>
</Link>
Expand All @@ -64,7 +64,7 @@ const Navbar = () => {
onClick={() => setShow(!show)}
>
<img
className="w-[35px] h-[35px] translate-y-[2px] bg-white items-center rounded-md border-2 border-neu-black"
className="w-[35px] h-[35px] translate-y-[2px] bg-white items-center rounded-sm border-2 border-neu-black"
src={
user.photoURL ??
"https://firebasestorage.googleapis.com/v0/b/pixelplace-b8fac.appspot.com/o/1024px-Faenza-avatar-default-symbolic.svg.png?alt=media&token=986532b2-c109-4faf-b607-30ce2a1e1ff8"
Expand Down
10 changes: 5 additions & 5 deletions pixelplace/src/components/Posts/PostCreateForm/PostCreateForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const PostCreateForm = () => {
<div className="flex flex-wrap">
<Field
name="title"
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.title && errors.title
? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
: "border-neu-black"
Expand All @@ -95,7 +95,7 @@ const PostCreateForm = () => {
<Field
type="text"
name="description"
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.description && errors.description
? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
: "border-neu-black"
Expand All @@ -111,7 +111,7 @@ const PostCreateForm = () => {
<Field
type="text"
name="category"
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.category && errors.category
? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
: "border-neu-black"
Expand All @@ -132,7 +132,7 @@ const PostCreateForm = () => {
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"
Expand Down Expand Up @@ -189,7 +189,7 @@ const PostCreateForm = () => {
<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 outline-none 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 outline-none border-neu-black px-6 py-3 rounded-sm bg-neu-yellow font-bold"
>
Submit
</button>
Expand Down
6 changes: 3 additions & 3 deletions pixelplace/src/components/Posts/PostDetails/PostDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,11 @@ const PostDetails = () => {
<img
src={post?.data().image}
alt="img"
className="border-2 bg-white h-full w-full object-cover object-center border-neu-black border-b-none rounded-t-xl rounded-b-none"
className="border-2 border-b-none bg-white h-full w-full object-cover object-center border-neu-black"
/>
)}
</div>
<div className="relative border-2 border-t-none rounded-b-lg border-neu-black bg-white p-4">
<div className="relative border-2 border-t-none border-neu-black bg-white p-4">
<div className="flex justify-between">
<h1 className="text-xl font-neu">{post?.data().title}</h1>

Expand Down Expand Up @@ -173,7 +173,7 @@ const PostDetails = () => {
/>
<button
type="button"
className="bg-neu-yellow text-neu-black border-2 border-neu-black hover:shadow-[2px_2px_2px] duration-75 rounded-md px-6 py-2 font-semibold text-base outline-none"
className="bg-neu-yellow text-neu-black border-2 border-neu-black hover:shadow-[2px_2px_2px] duration-75 px-6 py-2 font-semibold text-base outline-none"
onClick={handleSubmit}
>
Send
Expand Down
10 changes: 5 additions & 5 deletions pixelplace/src/components/Posts/PostEditForm/PostEditForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const PostEditForm = () => {
<div className="flex flex-wrap">
<Field
name="title"
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.title && errors.title
? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
: "border-neu-black"
Expand All @@ -113,7 +113,7 @@ const PostEditForm = () => {
<Field
type="text"
name="description"
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.description && errors.description
? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
: "border-neu-black"
Expand All @@ -129,7 +129,7 @@ const PostEditForm = () => {
<Field
type="text"
name="category"
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.category && errors.category
? "border-red-500 focus:shadow-[2px_2px_0px] focus:shadow-red-500 "
: "border-neu-black"
Expand All @@ -150,7 +150,7 @@ const PostEditForm = () => {
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"
Expand Down Expand Up @@ -208,7 +208,7 @@ const PostEditForm = () => {
<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 outline-none 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 outline-none border-neu-black px-6 py-3 rounded-sm bg-neu-yellow font-bold"
>
Submit
</button>
Expand Down
5 changes: 4 additions & 1 deletion pixelplace/src/components/Posts/Posts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ const Posts = () => {
);

return (
<div className="relative max-w-md px-1 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full h-screen py-16">
<div
style={{ }}
className="relative overflow-x-clip max-w-md px-1 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full h-screen py-16"
>
{loading && (
<div className="flex justify-center items-center h-screen bg-neu-white">
<BeatLoader size={"5rem"} color={"#1e1e1e"} />
Expand Down

0 comments on commit a4de7d6

Please sign in to comment.