Skip to content

Commit

Permalink
♻️ Refactor code, bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@KG-1510
KG-1510 committed Jul 7, 2021
1 parent 0194c28 commit 5bc8f34
Show file tree
Hide file tree
Showing 12 changed files with 86 additions and 57 deletions.
6 changes: 3 additions & 3 deletions assets/icons/herolanding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function HeroLanding() {
return (
<Fade key={item.title.trim()}>
<div className="heroCard sm-heroCard h-full bg-white shadow-xl rounded-lg">
<div className="mx-1 sm:mx-4 h-8 w-8 sm:h-12 sm:w-12">
<div className="mx-1 h-8 w-8 sm-heroIcons">
<img className="rounded-md" src={item.image} />
</div>
<p className="mx-1 sm:mx-4 text-gray-400 mr-1 sm:mr-3 text-xs sm:text-sm md:text-lg text-center">
Expand All @@ -37,7 +37,7 @@ export default function HeroLanding() {
return (
<Fade key={item.title.trim()}>
<div className="heroCard sm-heroCard h-full bg-white shadow-xl rounded-lg">
<div className="mx-1 sm:mx-4 h-8 w-8 sm:h-12 sm:w-12">
<div className="mx-1 h-8 w-8 sm-heroIcons">
<img className="rounded-md" src={item.image} />
</div>
<p className="mx-1 sm:mx-4 text-gray-400 mr-1 sm:mr-3 text-xs sm:text-sm md:text-lg text-center">
Expand All @@ -58,7 +58,7 @@ export default function HeroLanding() {
return (
<Fade key={item.title.trim()}>
<div className="heroCard sm-heroCard h-full bg-white shadow-xl rounded-lg">
<div className="mx-1 sm:mx-4 h-8 w-8 sm:h-12 sm:w-12">
<div className="mx-1 h-8 w-8 sm-heroIcons">
<img className="rounded-md" src={item.image} alt="logo" />
</div>
<p className="mx-1 sm:mx-4 text-gray-400 mr-1 sm:mr-3 text-xs sm:text-sm md:text-lg text-center">
Expand Down
9 changes: 6 additions & 3 deletions components/dashboard/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Card = ({ link, onCardClick, onDeleteCard }: CardProps): JSX.Element => {
link.status ? "bg-primaryGreen-200" : "bg-lightgraycustom"
} h-6 w-full md:h-full md:w-3 md:group-hover:w-16 hover:transition duration-75 ease-in-out -mt-2 md:mt-0 block md:absolute left-0 bottom-0 top-0 items-center justify-between`}
>
<figure className="w-0 group-hover:w-8 cursor-pointer pt-7 shadow-2xl hidden md:flex mx-auto">
<figure className="w-0 group-hover:w-8 cursor-pointer py-8 shadow-2xl hidden md:flex mx-auto">
<img className="rounded" width="40px" src={link.image} />
</figure>
</div>
Expand All @@ -47,8 +47,11 @@ const Card = ({ link, onCardClick, onDeleteCard }: CardProps): JSX.Element => {
<h2 className="text-xl md:text-3xl font-bold text-lightgray">
{link.title ? truncateText(link.title, 20, 20) : "untitled"}
</h2>
<p className="text-sm md:text-md md:inline-block text-lightgray">
{link.url ? truncateText(link.url, 40, 40) : "No URL specified"}
<p className="hidden text-sm md:text-md md:inline-block text-lightgray">
{link.url ? truncateText(link.url, 40, 37) : "No URL specified"}
</p>
<p className="inline-block text-sm md:text-sm md:hidden text-lightgray">
{link.url ? truncateText(link.url, 35, 32) : "No URL specified"}
</p>
</div>
</div>
Expand Down
14 changes: 4 additions & 10 deletions components/dashboard/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -559,22 +559,16 @@ const Sidebar = ({ isOpen, onClose, links, totalViews }: SidebarProps): any => {
</div>
</div>

<div
className={`${
conversionRate === "0" || conversionRate === ""
? "w-full mt-40 lg:mt-0 sm:mt-32 mb-18"
: "w-full"
} lg:absolute lg:bottom-12`}
>
<div className="w-full mb-8 lg:mb-0 lg:absolute lg:bottom-12">
<div className="flex items-center justify-center">
<div className="grid grid-cols-1">
<a
className="text-center text-sm"
className="text-center"
href={`https://kzilla.xyz/analytics/${activeLink.analyticsCode}`}
target="_blank"
rel="noopener noreferrer"
>
<button className="bg-white border-2 border-primaryGreen-300 focus:outline-none hover:opacity-80 w-full font-extrabold py-3 px-4 my-4 rounded-md">
<button className="bg-white border-2 border-primaryGreen-300 text-lg md:text-sm focus:outline-none hover:opacity-80 w-full font-extrabold py-3 px-4 my-4 rounded-md">
<p className="text-primaryGreen-300">
SHOW MORE ANALYTICS
</p>
Expand All @@ -583,7 +577,7 @@ const Sidebar = ({ isOpen, onClose, links, totalViews }: SidebarProps): any => {

<button
onClick={onClose}
className="bg-white border-2 border-statusRed focus:outline-none hover:opacity-80 w-full font-extrabold py-3 px-4 rounded-md block lg:hidden mb-16"
className="bg-white border-2 border-statusRed text-lg md:text-sm focus:outline-none hover:opacity-80 w-full font-extrabold py-3 px-4 rounded-md block lg:hidden mb-16"
>
<p className="text-statusRed">HIDE STATS</p>
</button>
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export default function DashboardComponent({
<div className="fixed z-30 lg:z-50 w-12 h-12 bottom-9 lg:top-24 right-4 xl:left-addButton focus:outline-none hover:opacity-70">
<button
onClick={() => setIsAddModalOpen(true)}
className="focus:outline-none"
className="focus:outline-none rounded-full bg-white md:bg-transparent"
title="Add New Link"
>
<AddLink />
Expand All @@ -150,7 +150,7 @@ export default function DashboardComponent({
</div>

<div className="flex items-center justify-center lg:hidden">
<div className="grid grid-cols-2 mt-4 mx-5 w-full md:w-10/12">
<div className="grid grid-cols-2 my-4 mx-5 w-full md:w-10/12">
<div className="rounded-md text-lg text-buttongray bg-offwhite font-bold m-1 p-1">
<p className="pl-2">Total Links</p>
<div className="customGradient p-2">
Expand Down
10 changes: 5 additions & 5 deletions components/home/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { errorHandler, postSubscribe } from "../../utils/api";
import { AuthContext } from "../../store/authContext";
import {
HeroLanding,
Logo,
Loading,
HomeTick,
Arrow,
Expand Down Expand Up @@ -61,7 +60,7 @@ export default function HomeComponent(): JSX.Element {

<div className="flex flex-row-reverse p-2 mr-2">
<Link href={isAuth ? "/dashboard" : "/login"}>
<a className="flex items-center justify-center bg-white border-2 rounded hover:opacity-80 border-primaryGreen-200 focus:outline-none uppercase text-xs md:text-sm lg:text-lg text-primaryGreen-200 font-bold w-10/12 sm:w-2/5 lg:w-1/3 xl:w-1/4">
<a className="flex items-center justify-center px-0 md:px-1 bg-white border-2 rounded hover:opacity-80 border-primaryGreen-200 focus:outline-none uppercase text-xs md:text-sm text-primaryGreen-200 font-bold w-10/12 sm:w-2/5 lg:w-1/3 xl:w-1/4">
{isAuth ? "My Dashboard" : "Get Started"}
</a>
</Link>
Expand All @@ -83,6 +82,7 @@ export default function HomeComponent(): JSX.Element {
onSubmit={(values) => submitHandler(values)}
validateOnBlur={false}
validationSchema={validationSchema}
enableReinitialize
>
{({ touched, errors }) => (
<Form>
Expand All @@ -93,19 +93,19 @@ export default function HomeComponent(): JSX.Element {
: "animate-none"
} flex flex-row sm:justify-center lg:justify-start lg:text-left`}
>
<div className="w-full sm:w-3/6 lg:w-5/6 py-2 sm:py-4">
<div className="w-full sm:w-3/6 lg:w-5/6 py-2 sm:py-3">
<Field
name="email"
type="email"
className="p-2 sm:p-7 md:py-5 border-primaryGreen-300 border-l-8 focus:outline-none block w-full bg-lightgray-10"
className="p-2 sm:p-7 md:py-4 border-primaryGreen-300 border-l-8 focus:outline-none block w-full bg-lightgray-10"
placeholder="Subscribe to our newsletter"
/>
</div>

<button
disabled={isSubscribed}
type="submit"
className="bg-primaryGreen-100 flex items-center px-3 sm:px-5 py-full justify-center hover:bg-opacity-90 -ml-2 focus:outline-none"
className="bg-primaryGreen-100 flex items-center px-3 sm:px-4 py-full justify-center hover:bg-opacity-90 -ml-2 focus:outline-none"
>
{loading && (
<div className="absolute">
Expand Down
1 change: 1 addition & 0 deletions components/login/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const LoginComponent = () => {
onSubmit={submitHandler}
validateOnBlur={false}
validationSchema={validationSchema}
enableReinitialize
>
{({ errors, touched }) => (
<Form>
Expand Down
65 changes: 37 additions & 28 deletions components/profile/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,35 +121,44 @@ export default function ProfileComponent({ _resProfile }): JSX.Element {
</button>
)}
</div>
<div className="w-full flex items-center justify-center mb-4">
<a
className="text-left text-lightgraycustom font-normal"
href={`${baseUrl}${_resProfile.username}`}
target="_blank"
rel="noopener noreferrer"
>
<strong>
{baseUrl}
{_resProfile.username}
</strong>
</a>
<button
onClick={() =>
copyToClipBoard(`${baseUrl}${_resProfile.username}`)
}
className="float-right focus:outline-none"
title="Copy to Clipboard"
>
<i className="float-right mt-1 ml-2 grid-cols-1 cursor-pointer text-lightgraycustom">
<MdContentCopy />
</i>
</button>
<div className="w-full flex items-center justify-center">
<div className="flex flex-col w-full">
<div className="w-full block md:hidden">
<p className="flex text-lightgray text-lg font-bold mt-4">
Public Page Link
</p>
</div>
<div className="word-wrapping md:flex md:items-center md:justify-center">
<a
className="text-left text-lightgraycustom font-normal"
href={`${baseUrl}${_resProfile.username}`}
target="_blank"
rel="noopener noreferrer"
>
<strong>
{baseUrl}
{_resProfile.username}
</strong>
</a>
<button
onClick={() =>
copyToClipBoard(`${baseUrl}${_resProfile.username}`)
}
className="float-right focus:outline-none"
title="Copy to Clipboard"
>
<i className="float-right mt-1 ml-2 grid-cols-1 cursor-pointer text-lightgraycustom">
<MdContentCopy />
</i>
</button>
</div>
</div>
</div>
</div>
</div>

<div className="w-5/6 md:w-4/6 m-auto">
<div className="w-full">
<div className="w-full mt-5">
<p className="flex text-lightgray text-lg font-bold">Username</p>
</div>
{!showUserNameInput && (
Expand Down Expand Up @@ -185,7 +194,7 @@ export default function ProfileComponent({ _resProfile }): JSX.Element {
}}
/>
)}
<div className="mt-10 w-full">
<div className="mt-5 w-full">
<p className="text-lightgray text-lg font-bold">About Me</p>
</div>
{!showBioInput && (
Expand Down Expand Up @@ -220,10 +229,10 @@ export default function ProfileComponent({ _resProfile }): JSX.Element {
}}
/>
)}
<div className="flex flex-col sm:flex-row items-center justify-center w-full mt-14">
<div className="flex flex-col-reverse sm:flex-row items-center justify-center w-full mt-8">
<button
onClick={() => setModalOpen(true)}
className="bg-white border-2 border-statusRed focus:outline-none hover:bg-opacity-80 text-statusRed text-xs font-bold w-full py-3 px-3 rounded"
className="bg-white border-2 border-statusRed focus:outline-none hover:bg-opacity-80 mb-12 md:mb-0 text-statusRed text-xs font-bold w-full py-3 px-3 rounded"
>
CHANGE PASSWORD
</button>
Expand All @@ -235,7 +244,7 @@ export default function ProfileComponent({ _resProfile }): JSX.Element {
isSubmittingProfile
? "border-lightgray text-lightgray"
: "border-primaryGreen-200 text-primaryGreen-200"
} focus:outline-none hover:bg-opacity-80 text-xs font-bold w-full sm:ml-4 mt-4 sm:mt-0 mb-12 sm:mb-0 py-3 px-3 rounded`}
} focus:outline-none hover:bg-opacity-80 text-xs font-bold w-full mb-4 md:mb-0 sm:ml-4 mt-4 sm:mt-0 py-3 px-3 rounded`}
>
{isSubmittingProfile ? "Please wait..." : "SAVE CHANGES"}
</button>
Expand Down
7 changes: 4 additions & 3 deletions components/profile/changePasswordModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const ChangePasswordModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
}
validateOnBlur={false}
validationSchema={passwordValidationSchema}
enableReinitialize
>
{({ errors, touched }) => (
<Form>
Expand Down Expand Up @@ -105,7 +106,7 @@ const ChangePasswordModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
</h1>
</div>
<Field
name="password"
name="newPassword"
type={passwordShown ? "text" : "password"}
className="bg-white border-b-2 border-lightgraycustom text-lightgraycustom font-semibold mb-4 outline-none focus:outline-none w-full px-2 py-1"
/>
Expand Down Expand Up @@ -156,10 +157,10 @@ const ChangePasswordModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
<button
type="submit"
disabled={
Object.keys(errors).length > 0 || loading
loading
}
className={`${
Object.keys(errors).length > 0 || loading
loading
? "border-lightgray text-lightgray"
: "border-primaryGreen-200 text-primaryGreen-200"
} bg-white border-2 focus:outline-none hover:opacity-80 font-bold py-2 ml-2 rounded`}
Expand Down
2 changes: 1 addition & 1 deletion components/publicPage/LinkPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default function LinkPageComponent({ _resLinks }) {
</div>

<div className="hidden xl:block w-full">
<div className="grid grid-cols-10 gap-32 w-10/12 mx-auto">
<div className="grid grid-cols-10 h-screen gap-32 w-10/12 mx-auto">
<div className="col-span-4 flex flex-col h-linkPage my-auto items-center justify-items-center border-2 rounded-lg w-full">
<div className="flex items-center justify-center w-36 h-36 mt-12 mb-3">
<div className="rounded-full overflow-hidden">
Expand Down
18 changes: 16 additions & 2 deletions components/shared/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function Navbar() {
</div>
</a>
</Link>

{isAuth ? (
<>
<div className="grid grid-cols-1 justify-self-end">
Expand Down Expand Up @@ -137,7 +137,7 @@ export default function Navbar() {
<div className="relative md:absolute right-0 bg-white shadow-xl rounded-b-xl md:w-1/6 text-center text-buttongray">
{dropdownMenu.map((item) => {
return (
<Link href={item.href}>
<Link key={item.href} href={item.href}>
<button
onClick={() => setIsOpen(false)}
className={`w-full py-2 rounded ${
Expand All @@ -149,6 +149,20 @@ export default function Navbar() {
</Link>
);
})}

<Link href={`/${userProfileData.username}`}>
<a>
<button
onClick={() => setIsOpen(false)}
className={`w-full py-2 ${
router.asPath == `/${userProfileData.username}` && "font-bold"
} rounded hover:bg-lightblue text-sm font-normal block outline-none focus:outline-none`}
>
My Public Link Page
</button>
</a>
</Link>

<button
className="w-full py-2 rounded hover:bg-lightblue text-sm font-normal block outline-none focus:outline-none"
onClick={logoutUser}
Expand Down
1 change: 1 addition & 0 deletions components/signup/signup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const SignUpComponent = () => {
onSubmit={submitHandler}
validateOnBlur={false}
validationSchema={validationSchema}
enableReinitialize
>
{({ errors, touched }) => (
<Form>
Expand Down
6 changes: 6 additions & 0 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,12 @@ textarea {
.sm-subscribeBtnSvg {
height: 2.8rem;
}
.sm-heroIcons {
height: 3rem;
width: 3rem;
margin-left: 1rem;
margin-right: 1rem;
}
}

@media only screen and (min-width: 768px) {
Expand Down

0 comments on commit 5bc8f34

Please sign in to comment.