chore: update Primeflex "2.0.0" to "3.1.2"

package.json

@@ -7,7 +7,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "primeflex": "^2.0.0",
+    "primeflex": "^3.1.2",
     "primereact": "^6.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.js

@@ -12,7 +12,7 @@ import Home from './Components/Home/Home'
 function App() {
   return (
     <Router>
-      <div className="p-m-2 p-m-md-4">
+      <div className="m-2 md:m-4">
         <Switch>
           <Route path="/:username">
             <User />

src/Components/Footer.js

@@ -15,13 +15,13 @@ function Footer() {
   }, [])
 
   return (
-    <footer className="p-d-flex p-jc-center p-ai-center">
+    <footer className="flex justify-content-center align-items-center">
       <p>
-        <span className="p-mr-2">Contribute on</span>
+        <span className="mr-2">Contribute on</span>
         <Link
           to={{ pathname: 'https://github.com/EddieHubCommunity/LinkFree' }}
           target="_blank"
-          className="p-mr-2"
+          className="mr-2"
           aria-label="LinkFree repository on GitHub"
         >
           <GetIcons iconName="github" size={16} />

src/Components/Home/Placeholders.js

@@ -6,15 +6,15 @@ import { Skeleton } from 'primereact/skeleton'
 function Placeholder({ list }) {
   return (
     <>
-      <Skeleton shape="rectangle" height="3.2rem" className="p-mb-4" />
-      <div className="p-d-flex p-flex-wrap p-jc-center">
+      <Skeleton shape="rectangle" height="3.2rem" className="mb-4" />
+      <div className="flex flex-wrap justify-content-center">
         {list.map((user, key) => {
           return (
             <Skeleton
               width="16rem"
               height="4rem"
               borderRadius="2rem"
-              className="p-m-2 p-mr-2"
+              className="m-2 mr-2"
               key={`skeleton-${key}`}
             />
           )

src/Components/Home/Users.js

@@ -33,13 +33,13 @@ function Users({ list }) {
           <Searchbar searchTerm={searchTerm} searchHandler={searchHandler} />
         }
       />
-      <div className="user-list p-d-flex p-flex-wrap p-jc-center">
+      <div className="user-list flex flex-wrap justify-content-center">
         {!!filteredList &&
           filteredList.length > 0 &&
           filteredList.map((user, key) => (
             <Link to={user.username} key={`avatar-${key}`}>
               <Chip
-                className="p-m-2"
+                className="m-2"
                 template={
                   <>
                     <Avatar
@@ -53,7 +53,7 @@ function Users({ list }) {
                       <Badge
                         value={user.linkCount > 9 ? '9+' : user.linkCount}
                         severity="info"
-                        className="p-mr-3"
+                        className="mr-3"
                       ></Badge>
                     </Avatar>
                     <span className="p-chip-text">{user.name}</span>
@@ -63,7 +63,7 @@ function Users({ list }) {
             </Link>
           ))}
         {!!filteredList && filteredList.length === 0 && (
-          <div className="p-d-flex p-jc-center p-ai-center">
+          <div className="flex justify-content-center align-items-center">
             <Message
               severity="error"
               text="No users found, please try with another name."

src/Components/Links.js

@@ -19,16 +19,16 @@ function Links({ links }) {
   }
 
   return (
-    <section className="p-d-flex p-jc-center p-mb-4">
-      <div className="p-d-flex p-flex-column w-70">
+    <section className="flex justify-content-center mb-4">
+      <div className="flex flex-column w-70">
         {links
           .filter((link) => Object.keys(colors).includes(link.icon))
           .map((link, index) => (
             <Button
               key={`link.url_${index}`}
               onMouseOver={(e) => MouseOver(e, colors[link.icon])}
               onMouseOut={MouseOut}
-              className={`p-p-3 p-my-2 p-button-outlined ${link.icon}`}
+              className={`p-3 my-2 p-button-outlined ${link.icon}`}
               style={{ color: colors[link.icon] }}
               role="link"
               onClick={() => window.open(link.url, '_blank')}
@@ -40,7 +40,7 @@ function Links({ links }) {
               >
                 <GetIcons iconName={link.icon} />
               </IconContext.Provider>
-              <span className="p-px-3">{link.name}</span>
+              <span className="px-3">{link.name}</span>
             </Button>
           ))}
         {links
@@ -50,7 +50,7 @@ function Links({ links }) {
               key={`link.url_${index}`}
               onMouseOver={(e) => MouseOver(e, colors[link.icon])}
               onMouseOut={MouseOut}
-              className={`p-p-3 p-my-2 p-button-outlined ${link.icon}`}
+              className={`p-3 my-2 p-button-outlined ${link.icon}`}
               style={{ color: colors[link.icon] }}
               role="link"
               onClick={() => window.open(link.url, '_blank')}
@@ -62,7 +62,7 @@ function Links({ links }) {
               >
                 <GetIcons iconName={link.icon} />
               </IconContext.Provider>
-              <span className="p-px-3">{link.name}</span>
+              <span className="px-3">{link.name}</span>
             </Button>
           ))}
       </div>

src/Components/Milestones.js

@@ -15,7 +15,7 @@ function Milestones({ milestones }) {
 
   const marker = (milestone) => (
     <span
-      className="custom-marker p-shadow-2"
+      className="custom-marker shadow-2"
       style={{ backgroundColor: milestone.color }}
     >
       <GetIcons iconName={milestone.icon} />
@@ -26,7 +26,7 @@ function Milestones({ milestones }) {
     <Card
       title={milestone.title}
       subTitle={milestone.date}
-      className="p-my-5 p-mx-md-5 p-shadow-15"
+      className="my-5 md:mx-5 shadow-8"
     >
       {milestone.image && (
         <img
@@ -36,15 +36,14 @@ function Milestones({ milestones }) {
           }
           alt={milestone.title}
           width={100}
-          className="p-shadow-2"
+          className="shadow-2"
         />
       )}
       <p>{milestone.description}</p>
       {milestone.url && (
-        <div className="p-d-flex p-jc-end">
+        <div className="flex justify-content-end">
           <Button
             label="Learn more"
-            icon="pi pi-check"
             role="link"
             rel="noopener noreferrer"
             className="p-button-raised p-button-rounded"
@@ -57,8 +56,8 @@ function Milestones({ milestones }) {
   )
 
   return (
-    <section className="p-d-flex p-jc-center p-mb-5">
-      <div className="p-md-8">
+    <section className="flex justify-content-center mb-5">
+      <div className="md:col-8">
         <Timeline
           value={milestones}
           align="alternate"

src/Components/Navbar.js

@@ -25,11 +25,11 @@ function Navbar({ items, start, end }) {
 
   if (!end) {
     end = (
-      <div className="p-d-flex p-jc-center p-ai-center p-pr-2">
+      <div className="flex justify-content-center align-items-center pr-2">
         <Link
           to={{ pathname: 'https://github.com/EddieHubCommunity/LinkFree' }}
           target="_blank"
-          className="p-mr-2"
+          className="mr-2"
           aria-label="LinkFree repository on GitHub"
         >
           <GetIcons iconName="github" size={16} />
@@ -45,7 +45,7 @@ function Navbar({ items, start, end }) {
       model={items}
       start={start}
       end={end}
-      className="p-mb-4 p-flex-wrap p-jc-center"
+      className="mb-4 flex-wrap justify-content-center"
     />
   )
 }

src/Components/Profile.js

@@ -11,7 +11,7 @@ function Profile({ profile, username }) {
   const { name, bio, avatar } = profile
   return (
     <section>
-      <div className="p-d-flex p-jc-center p-ai-center">
+      <div className="flex justify-content-center align-items-center">
         <Avatar
           image={avatar}
           imageAlt={`Profile picture of ${name}`}
@@ -21,12 +21,12 @@ function Profile({ profile, username }) {
             utils.setDefaultSVG(name, error)
           }}
         />
-        <div className="p-d-flex p-flex-column p-flex-sm-row p-jc-center p-ai-center">
-          <h1 className="p-m-2">{name}</h1>
-          <h4 className="p-my-0">({username})</h4>
+        <div className="flex flex-column sm:flex-row justify-content-center align-items-center">
+          <h1 className="m-2">{name}</h1>
+          <h4 className="my-0">({username})</h4>
         </div>
       </div>
-      <div className="p-d-flex p-jc-center w-50">
+      <div className="flex justify-content-center w-50">
         <p>{bio}</p>
       </div>
     </section>

src/Components/UserProfile/ErrorPage.js

@@ -2,8 +2,8 @@ import React from 'react'
 
 function ErrorPage() {
   return (
-    <div className="p-text-center">
-      <div className="flex-column">
+    <div className="text-center">
+      <div className="flex flex-column">
         <img
           src="/eddiehub_community_logo.webp"
           alt="image"

src/Components/UserProfile/Placeholder.js

@@ -5,19 +5,19 @@ import { Skeleton } from 'primereact/skeleton'
 function Placeholder() {
   return (
     <section>
-      <div className="p-d-flex p-jc-center p-ai-center">
+      <div className="flex justify-content-center align-items-center">
         <Skeleton className="p-avatar" shape="circle" size="4rem" />
         <Skeleton
-          className="p-m-2"
+          className="m-2"
           shape="rounded"
           height="30px"
           width="200px"
         />
         <Skeleton className="" shape="rounded" width="100px" />
       </div>
-      <div className="p-d-flex p-jc-center w-50">
+      <div className="flex justify-content-center w-50">
         <Skeleton
-          className="p-mt-4"
+          className="mt-4"
           width="300px"
           height="50px"
           shape="rounded"