From 046a130efa5ffba970b512798eb4f8c4e9a0a062 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Tue, 10 Sep 2024 12:24:58 -0500
Subject: [PATCH] some mobile styling

---
 src/components/content/lists/ContentListItem.js     |  2 +-
 src/components/content/resources/ResourceDetails.js |  8 ++++----
 src/components/navbar/user/UserAvatar.js            |  4 ++--
 src/components/profile/UserContent.js               | 12 ++++++------
 src/pages/details/[slug]/index.js                   |  2 +-
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/content/lists/ContentListItem.js b/src/components/content/lists/ContentListItem.js
index 27a99e4..8cbbfbd 100644
--- a/src/components/content/lists/ContentListItem.js
+++ b/src/components/content/lists/ContentListItem.js
@@ -30,7 +30,7 @@ const ContentListItem = (content) => {
 
     return (
         <div className="p-4 border-bottom-1 surface-border" key={content.id}>
-            <div className="flex flex-column md:flex-row gap-4">
+            <div className="flex flex-column md:flex-row gap-4 max-tab:flex-col">
                 <Image
                     alt="content thumbnail"
                     src={returnImageProxy(content.image)}
diff --git a/src/components/content/resources/ResourceDetails.js b/src/components/content/resources/ResourceDetails.js
index c537250..15525d9 100644
--- a/src/components/content/resources/ResourceDetails.js
+++ b/src/components/content/resources/ResourceDetails.js
@@ -28,8 +28,8 @@ const ResourceDetails = ({processedEvent, topics, title, summary, image, price,
 
     return (
         <div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
-            <i className='pi pi-arrow-left pr-8 cursor-pointer hover:opacity-75' onClick={() => router.push('/')} />
-            <div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
+            <i className='pi pi-arrow-left pr-8 cursor-pointer hover:opacity-75 max-tab:pl-2 max-tab:my-4' onClick={() => router.push('/')} />
+            <div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[100vw] max-mob:w-[100vw] max-tab:px-2 max-mob:px-2'>
                 <div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
                     <div className='pt-2 flex flex-row justify-start w-full'>
                         {topics && topics.length > 0 && (
@@ -59,13 +59,13 @@ const ResourceDetails = ({processedEvent, topics, title, summary, image, price,
                 </div>
                 <div className='flex flex-col max-tab:mt-12 max-mob:mt-12'>
                     {image && (
-                        <div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md'>
+                        <div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md max-tab:w-full max-tab:mx-auto max-tab:h-auto'>
                             <Image
                                 alt="resource thumbnail"
                                 src={returnImageProxy(image)}
                                 width={344}
                                 height={194}
-                                className="w-[344px] h-[194px] object-cover object-top rounded-lg"
+                                className="w-[344px] h-[194px] object-cover object-top rounded-lg max-tab:w-full max-tab:h-auto"
                             />
                             <div className='w-full flex flex-row justify-between'>
                                 {paidResource && !decryptedContent && <ResourcePaymentButton
diff --git a/src/components/navbar/user/UserAvatar.js b/src/components/navbar/user/UserAvatar.js
index bb584d2..07bf9d2 100644
--- a/src/components/navbar/user/UserAvatar.js
+++ b/src/components/navbar/user/UserAvatar.js
@@ -87,8 +87,8 @@ const UserAvatar = () => {
     } else {
         userAvatar = (
             <div className='flex flex-row items-center justify-between'>
-                <Button severity='help' rounded label="About" className='text-[#f8f8ff] mr-4' onClick={() => setVisible(true)} />
-                <Dialog header="About" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                <Button severity='help' rounded label="About" className='text-[#f8f8ff] mr-4' onClick={() => setVisible(true)} size={windowWidth < 768 ? 'small' : 'normal'} />
+                <Dialog header="About" visible={visible} onHide={() => { if (!visible) return; setVisible(false); }} className='w-[50vw] max-tab:w-[95vw]'>
                     <div className="space-y-6">
                         <p className="text-lg"><i className="pi pi-info-circle mr-2"></i>PlebDevs is a custom-built education platform designed to help aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies.</p>
                         
diff --git a/src/components/profile/UserContent.js b/src/components/profile/UserContent.js
index ff5cf8e..575f20b 100644
--- a/src/components/profile/UserContent.js
+++ b/src/components/profile/UserContent.js
@@ -10,6 +10,7 @@ import { useCourseDraftsQuery } from "@/hooks/apiQueries/useCourseDraftsQuery";
 import { useContentIdsQuery } from "@/hooks/apiQueries/useContentIdsQuery";
 import { useSession } from "next-auth/react";
 import { useToast } from "@/hooks/useToast";
+import { Divider } from "primereact/divider";
 import ContentList from "@/components/content/lists/ContentList";
 import { parseEvent } from "@/utils/nostr";
 import { useNDKContext } from "@/context/NDKContext";
@@ -113,11 +114,9 @@ const UserContent = () => {
     const isError = coursesError || resourcesError || workshopsError || draftsError || contentIdsError || courseDraftsError;
 
     return (
-        <div className="w-full min-bottom-bar:w-[86vw] mx-auto">
-            <div className="border-b-2 border-gray-300 mt-8">
-                <h2 className="text-center my-4">Your Content</h2>
-            </div>
-            <div className="flex flex-row w-full justify-between px-4">
+        <div className="p-4">
+            <h1 className="text-3xl font-bold mb-6">My Content</h1>
+            <div className="flex flex-row w-full justify-between px-8 max-tab:flex-col max-tab:px-0">
                 <MenuTab
                     items={contentItems}
                     activeIndex={activeIndex}
@@ -131,8 +130,9 @@ const UserContent = () => {
                     className="mt-2"
                 />
             </div>
+            <Divider />
             <div className="w-full mx-auto my-8">
-                <div className="w-full mx-auto my-8 px-8">
+                <div className="w-full mx-auto px-8 max-tab:px-0">
                     {isLoading ? (
                         <p>Loading...</p>
                     ) : isError ? (
diff --git a/src/pages/details/[slug]/index.js b/src/pages/details/[slug]/index.js
index 08a3acc..dce6f60 100644
--- a/src/pages/details/[slug]/index.js
+++ b/src/pages/details/[slug]/index.js
@@ -253,7 +253,7 @@ export default function Details() {
                 </div>
             )}
             {typeof window !== 'undefined' && nAddress !== null && (
-                <div className='px-24'>
+                <div className='px-24 max-tab:px-4'>
                     <ZapThreadsWrapper
                         anchor={nAddress}
                         user={user?.pubkey || null}