fix: hide testimonials, tags, stats on mobile (#9178)

* fix: hide testimonial button (#9154)

* added a scrollToTop button

* added ScrollToTop button and removed custom styles added to global.css

* changed styling according to the type of input and completed the assigned task

* Update styles/globals.css

Co-authored-by: Tom Schmelzer <30869493+schmelto@users.noreply.github.com>

* Update components/form/Input.js added switch statement

* Update pages/account/manage/event/[[...data]].js to set the color when editing

* Update components/form/Input.js

* on mobile hide:stats, testimonial button and tags

* keeping all three as earlier

* committing my changes

* On mobile hide: stats, add testimonial button and tags

* Revert "committing my changes"

This reverts commit decaa0b.

	modified:   pages/account/manage/event/[[...data]].js
reverting the Input.js file commit

* Committing local changes

* commit local changes

* committing small changes

* changes in three files(BasicCard.js, Tags.js, [username].js)

* Update components/statistics/BasicCards.js

* Update components/tag/Tag.js

---------

Co-authored-by: Tom Schmelzer <30869493+schmelto@users.noreply.github.com>
Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>

* fix: hide tags and stats on mobile

* fix: display block for stats md+

---------

Co-authored-by: Abhishek Bhure <87894780+AbhishekBhure@users.noreply.github.com>
Co-authored-by: Tom Schmelzer <30869493+schmelto@users.noreply.github.com>

components/user/UserProfile.js

@@ -28,7 +28,7 @@ function UserProfile({ BASE_URL, data }) {
   //qrRef.current is pointing to the DOM node and firstChild to its canvas
   const downloadQR = () =>
     qrRef.current.firstChild.toBlob((blob) =>
-      saveAs(blob, `biodrop-${data.username}.png`)
+      saveAs(blob, `biodrop-${data.username}.png`),
     );
 
   return (
@@ -69,7 +69,7 @@ function UserProfile({ BASE_URL, data }) {
         <Markdown>{data.bio}</Markdown>
       </div>
       {!qrShow && (
-        <div className="flex flex-wrap justify-center">
+        <div className="hidden md:flex flex-wrap justify-center">
           {data.accountType === "premium" && (
             <Tag
               name="Premium"
@@ -108,22 +108,24 @@ function UserProfile({ BASE_URL, data }) {
       </Modal>
 
       {data.isStatsPublic && (
-        <BasicCards
-          data={[
-            {
-              name: "Rank",
-              current: data.profileStats?.profile?.rank,
-            },
-            {
-              name: "Total Profile Views",
-              current: data.profileStats?.profile?.total || 0,
-            },
-            {
-              name: "Profile Views on last 30 days",
-              current: data.profileStats?.profile?.monthly || 0,
-            },
-          ]}
-        />
+        <div className="hidden md:block">
+          <BasicCards
+            data={[
+              {
+                name: "Rank",
+                current: data.profileStats?.profile?.rank,
+              },
+              {
+                name: "Total Profile Views",
+                current: data.profileStats?.profile?.total || 0,
+              },
+              {
+                name: "Profile Views on last 30 days",
+                current: data.profileStats?.profile?.monthly || 0,
+              },
+            ]}
+          />
+        </div>
       )}
 
       {/* Passed Ref object as the ref attribute to the JSX of the DOM node of QR */}
@@ -156,7 +158,7 @@ function UserProfile({ BASE_URL, data }) {
                     href={`${SOCIAL_SHARE_LINK}${BASE_URL}/${data.username}${
                       includeText
                         ? `&text=${encodeURIComponent(
-                            `Check out ${data.name}'s profile on BioDrop.io`
+                            `Check out ${data.name}'s profile on BioDrop.io`,
                           )}`
                         : ""
                     }`}

pages/[username].js

@@ -26,7 +26,7 @@ export async function getServerSideProps(context) {
   if (status !== 200) {
     logger.error(
       profile.error,
-      `profile loading failed for username: ${username}`
+      `profile loading failed for username: ${username}`,
     );
 
     return {
@@ -84,9 +84,9 @@ export default function User({ data, BASE_URL }) {
         href={`${BASE_GITHUB_PROJECT_URL}/issues/new?labels=testimonial&template=testimonial.yml&title=New+Testimonial+for+${data.name}&name=${data.username}`}
         rel="noopener noreferrer"
         target="_blank"
-        className="fixed bottom-5 right-5 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-high"
+        className="hidden md:block fixed bottom-5 right-5 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-high"
       >
-        <div className="px-4 py-2 bg-tertiary-medium text-primary-low flex items-center gap-1 rounded-full hover:bg-secondary-medium hover:drop-shadow-lg">
+        <div className="flex px-4 py-2 bg-tertiary-medium text-primary-low items-center gap-1 rounded-full hover:bg-secondary-medium hover:drop-shadow-lg">
           <IconContext.Provider
             value={{ color: "white", style: { verticalAlign: "middle" } }}
           >