From 365b54c498643a91c35c09b5d844ce22b087783e Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Mon, 16 Sep 2024 16:10:28 -0500
Subject: [PATCH] Mobile style fixes

---
 src/components/BottomBar.js                     |  6 +++---
 .../content/carousels/CoursesCarousel.js        | 17 ++++++++++++++---
 .../content/carousels/DocumentsCarousel.js      | 16 ++++++++++++++--
 .../carousels/InteractivePromotionalCarousel.js |  5 ++---
 .../content/carousels/VideosCarousel.js         | 15 ++++++++++++++-
 .../content/courses/CourseDetailsNew.js         |  6 +++---
 .../content/courses/DocumentLesson.js           |  2 +-
 .../content/documents/DocumentDetails.js        |  4 ++--
 src/components/content/videos/VideoDetails.js   |  6 +++---
 src/components/feeds/MessageInput.js            |  2 +-
 src/components/menutab/CommunityMenuTab.js      |  2 +-
 src/components/profile/UserSettings.js          |  2 +-
 src/context/NDKContext.js                       |  1 +
 src/pages/content/index.js                      |  2 +-
 src/pages/course/[slug]/index.js                |  4 ++--
 src/pages/feed.js                               |  6 +-----
 src/styles/globals.css                          |  1 +
 17 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/components/BottomBar.js b/src/components/BottomBar.js
index 16f3594..d77a0aa 100644
--- a/src/components/BottomBar.js
+++ b/src/components/BottomBar.js
@@ -11,13 +11,13 @@ const BottomBar = () => {
 
     return (
         <div className='min-bottom-bar:hidden fixed bottom-0 left-0 right-0 bg-gray-800 p-2 flex justify-around items-center z-20 border-t-2 border-gray-700'>
-            <div onClick={() => router.push('/')} className={`hover:bg-gray-700 cursor-pointer px-4 py-3 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
+            <div onClick={() => router.push('/')} className={`hover:bg-gray-700 cursor-pointer px-4 py-2 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-home text-2xl" />
             </div>
-            <div onClick={() => router.push('/content?tag=all')} className={`hover:bg-gray-700 cursor-pointer px-4 py-3 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
+            <div onClick={() => router.push('/content?tag=all')} className={`hover:bg-gray-700 cursor-pointer px-4 py-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-play-circle text-2xl" />
             </div>
-            <div onClick={() => router.push('/feed?channel=global')} className={`hover:bg-gray-700 cursor-pointer px-4 py-3 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
+            <div onClick={() => router.push('/feed?channel=global')} className={`hover:bg-gray-700 cursor-pointer px-4 py-2 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-comments text-2xl" />
             </div>
         </div>
diff --git a/src/components/content/carousels/CoursesCarousel.js b/src/components/content/carousels/CoursesCarousel.js
index 68af421..3a551c7 100644
--- a/src/components/content/carousels/CoursesCarousel.js
+++ b/src/components/content/carousels/CoursesCarousel.js
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, use } from 'react';
 import { Carousel } from 'primereact/carousel';
 import { parseCourseEvent } from '@/utils/nostr';
-// import CourseTemplate from '@/components/content/carousels/templates/CourseTemplate';
 import { CourseTemplate } from '@/components/content/carousels/templates/CourseTemplate';
 import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
 import { useCourses } from '@/hooks/nostr/useCourses';
-
+import useWindowWidth from '@/hooks/useWindowWidth';
+import { Divider } from 'primereact/divider';
 const responsiveOptions = [
     {
         breakpoint: '3000px',
@@ -27,6 +27,8 @@ const responsiveOptions = [
 export default function CoursesCarousel() {
     const [processedCourses, setProcessedCourses] = useState([]);
     const { courses, coursesLoading, coursesError } = useCourses()
+    const windowWidth = useWindowWidth();
+    const isMobileView = windowWidth <= 450;
 
     useEffect(() => {
         const fetch = async () => {
@@ -56,11 +58,20 @@ export default function CoursesCarousel() {
 
     return (
         <>
-            <h3 className="ml-[6%] mt-4">Courses</h3>
+            <h3 className={`ml-[6%] mt-4 max-mob:text-3xl max-mob:ml-10`}>Courses</h3>
+            <Divider className={`${isMobileView ? '' : 'hidden'}`} />
             <div className={"min-h-[384px]"}>
                 <Carousel
                     value={coursesLoading || !processedCourses.length ? [{}, {}, {}] : [...processedCourses]}
                     numVisible={2}
+                    pt={{
+                        previousButton: {
+                            className: isMobileView ? 'm-0' : ''
+                        },
+                        nextButton: {
+                            className: isMobileView ? 'm-0' : ''
+                        }
+                    }}
                     itemTemplate={(item) => 
                         !processedCourses.length ? 
                         <TemplateSkeleton key={Math.random()} /> : 
diff --git a/src/components/content/carousels/DocumentsCarousel.js b/src/components/content/carousels/DocumentsCarousel.js
index 3ca8f5f..6f57599 100644
--- a/src/components/content/carousels/DocumentsCarousel.js
+++ b/src/components/content/carousels/DocumentsCarousel.js
@@ -4,7 +4,8 @@ import { parseEvent } from '@/utils/nostr';
 import { DocumentTemplate } from '@/components/content/carousels/templates/DocumentTemplate';
 import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
 import { useDocuments } from '@/hooks/nostr/useDocuments';
-
+import useWindowWidth from '@/hooks/useWindowWidth';
+import { Divider } from 'primereact/divider';
 const responsiveOptions = [
     {
         breakpoint: '3000px',
@@ -26,6 +27,8 @@ const responsiveOptions = [
 export default function DocumentsCarousel() {
     const [processedDocuments, setProcessedDocuments] = useState([]);
     const { documents, documentsLoading, documentsError } = useDocuments()
+    const windowWidth = useWindowWidth();
+    const isMobileView = windowWidth <= 450;
 
     useEffect(() => {
         const fetch = async () => {
@@ -53,10 +56,19 @@ export default function DocumentsCarousel() {
 
     return (
         <>
-            <h3 className="ml-[6%] mt-4">Documents</h3>
+            <h3 className={`ml-[6%] mt-4 max-mob:text-3xl max-mob:ml-10`}>Documents</h3>
+            <Divider className={`${isMobileView ? '' : 'hidden'}`} />
             <Carousel 
                 value={documentsLoading || !processedDocuments.length ? [{}, {}, {}] : [...processedDocuments]}
                 numVisible={2}
+                pt={{
+                    previousButton: {
+                        className: isMobileView ? 'm-0' : ''
+                    },
+                    nextButton: {
+                        className: isMobileView ? 'm-0' : ''
+                    }
+                }}
                 itemTemplate={(item) => 
                         processedDocuments.length > 0 ? 
                         <DocumentTemplate key={item.id} document={item} /> : 
diff --git a/src/components/content/carousels/InteractivePromotionalCarousel.js b/src/components/content/carousels/InteractivePromotionalCarousel.js
index 6972647..131a591 100644
--- a/src/components/content/carousels/InteractivePromotionalCarousel.js
+++ b/src/components/content/carousels/InteractivePromotionalCarousel.js
@@ -87,11 +87,10 @@ const InteractivePromotionalCarousel = () => {
                   switch (selectedPromotion.category) {
                     case "PLEBDEVS":
                       return (
-                        <>
-                          <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="w-fit py-2 font-semibold" size="small" outlined />
+                        <div className="flex flex-row gap-2">
                           <GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="w-fit py-2 font-semibold" size="small" outlined />
                           <GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="w-fit py-2 font-semibold" size="small" outlined />
-                        </>
+                        </div>
                       );
                     case "COURSES":
                       return (
diff --git a/src/components/content/carousels/VideosCarousel.js b/src/components/content/carousels/VideosCarousel.js
index 18b25e9..6f0b5e1 100644
--- a/src/components/content/carousels/VideosCarousel.js
+++ b/src/components/content/carousels/VideosCarousel.js
@@ -4,6 +4,8 @@ import { parseEvent } from '@/utils/nostr';
 import {VideoTemplate} from '@/components/content/carousels/templates/VideoTemplate';
 import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
 import { useVideos } from '@/hooks/nostr/useVideos';
+import useWindowWidth from '@/hooks/useWindowWidth';
+import { Divider } from 'primereact/divider';
 
 const responsiveOptions = [
     {
@@ -26,6 +28,8 @@ const responsiveOptions = [
 export default function VideosCarousel() {
     const [processedVideos, setProcessedVideos] = useState([]);
     const { videos, videosLoading, videosError } = useVideos();
+    const windowWidth = useWindowWidth();
+    const isMobileView = windowWidth <= 450;
 
     useEffect(() => {
         const fetch = async () => {
@@ -51,10 +55,19 @@ export default function VideosCarousel() {
 
     return (
         <>
-            <h3 className="ml-[6%] mt-4">Videos</h3>
+            <h3 className={`ml-[6%] mt-4 max-mob:text-3xl max-mob:ml-10`}>Videos</h3>
+            <Divider className={`${isMobileView ? '' : 'hidden'}`} />
             <Carousel 
                 value={videosLoading || !processedVideos.length ? [{}, {}, {}] : [...processedVideos]}
                 numVisible={2}
+                pt={{
+                    previousButton: {
+                        className: isMobileView ? 'm-0' : ''
+                    },
+                    nextButton: {
+                        className: isMobileView ? 'm-0' : ''
+                    }
+                }}
                 itemTemplate={(item) => 
                     !processedVideos.length ? 
                     <TemplateSkeleton key={Math.random()} /> : 
diff --git a/src/components/content/courses/CourseDetailsNew.js b/src/components/content/courses/CourseDetailsNew.js
index 52385ca..373de88 100644
--- a/src/components/content/courses/CourseDetailsNew.js
+++ b/src/components/content/courses/CourseDetailsNew.js
@@ -122,9 +122,9 @@ export default function CourseDetailsNew({ processedEvent, paidCourse, lessons,
                 />
                 <div className="absolute inset-0 bg-black bg-opacity-20"></div>
             </div>
-            <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10">
+            <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
                 <i className={`pi pi-arrow-left cursor-pointer hover:opacity-75 absolute top-0 left-4`} onClick={() => router.push('/')} />
-                <div className="mb-8 bg-gray-800/90 rounded-lg p-4">
+                <div className="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none">
                     <div className="flex flex-row items-center justify-between w-full">
                         <h1 className='text-4xl font-bold text-white'>{processedEvent.name}</h1>
                         <div className="flex flex-wrap gap-2">
@@ -135,7 +135,7 @@ export default function CourseDetailsNew({ processedEvent, paidCourse, lessons,
                             )}
                         </div>
                     </div>
-                    <p className='text-xl text-gray-200 mb-4 mt-4'>{processedEvent.description && (
+                    <p className='text-xl text-gray-200 mb-4 mt-4 max-mob:text-base'>{processedEvent.description && (
                         <div className='mt-4'>
                             {processedEvent.description.split('\n').map((line, index) => (
                                 <p key={index}>{line}</p>
diff --git a/src/components/content/courses/DocumentLesson.js b/src/components/content/courses/DocumentLesson.js
index 4c5b3bd..12b62a4 100644
--- a/src/components/content/courses/DocumentLesson.js
+++ b/src/components/content/courses/DocumentLesson.js
@@ -79,7 +79,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
                 <div className="absolute inset-0 bg-black bg-opacity-20"></div>
             </div>
             <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10">
-                <div className="mb-8 bg-gray-800/90 rounded-lg p-4">
+                <div className="mb-8 bg-gray-800/70 rounded-lg p-4">
                     <div className="flex flex-row items-center justify-between w-full">
                         <h1 className='text-3xl font-bold text-white'>{lesson.title}</h1>
                         <div className="flex flex-wrap gap-2">
diff --git a/src/components/content/documents/DocumentDetails.js b/src/components/content/documents/DocumentDetails.js
index 544da0b..ffcbfaf 100644
--- a/src/components/content/documents/DocumentDetails.js
+++ b/src/components/content/documents/DocumentDetails.js
@@ -124,8 +124,8 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
                 />
                 <div className="absolute inset-0 bg-black bg-opacity-20"></div>
             </div>
-            <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10">
-                <div className="mb-8 bg-gray-800/90 rounded-lg p-4">
+            <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
+                <div className="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none">
                     <div className="flex flex-row items-center justify-between w-full">
                         <h1 className='text-4xl font-bold text-white'>{title}</h1>
                         <div className="flex flex-wrap gap-2">
diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index f5ad52e..57e3117 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -110,7 +110,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
             );
         }
         if (processedEvent?.content) {
-            return <MDDisplay className='p-4 rounded-lg w-full' source={processedEvent.content} />;
+            return <MDDisplay className='p-0 rounded-lg w-full' source={processedEvent.content} />;
         }
         return null;
     }
@@ -118,7 +118,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
     return (
         <div className="w-full">
             {renderContent()}
-            <div className="bg-gray-800/90 rounded-lg p-4 m-4">
+            <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
                 <div className="w-full flex flex-col items-start justify-start mt-2 px-2">
                     <div className="flex flex-row items-center gap-2 w-full">
                         <h1 className='text-4xl'>{title}</h1>
@@ -131,7 +131,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
                     </div>
                     <div className='flex flex-row items-center justify-between w-full'>
                         <p className='text-xl mt-4'>{summary && (
-                        <div className="text-xl mt-4">
+                        <div className="text-xl mt-4 max-mob:text-base max-tab:text-base">
                             {summary.split('\n').map((line, index) => (
                                 <p key={index}>{line}</p>
                             ))}
diff --git a/src/components/feeds/MessageInput.js b/src/components/feeds/MessageInput.js
index 27af3bc..ac051dc 100644
--- a/src/components/feeds/MessageInput.js
+++ b/src/components/feeds/MessageInput.js
@@ -8,7 +8,7 @@ import { useToast } from '@/hooks/useToast';
 
 const MessageInput = ({ onMessageSent }) => {
     const [message, setMessage] = useState('');
-    const [collapsed, setCollapsed] = useState(false);
+    const [collapsed, setCollapsed] = useState(true);
     const { ndk, addSigner } = useNDKContext();
     const { showToast } = useToast();
 
diff --git a/src/components/menutab/CommunityMenuTab.js b/src/components/menutab/CommunityMenuTab.js
index acaf8c3..3d6eee6 100644
--- a/src/components/menutab/CommunityMenuTab.js
+++ b/src/components/menutab/CommunityMenuTab.js
@@ -56,7 +56,7 @@ const CommunityMenuTab = ({ selectedTopic, onTabChange }) => {
                 activeIndex={allItems.indexOf(selectedTopic)}
                 onTabChange={(e) => onTabChange(allItems[e.index])}
                 pt={{
-                    menu: { className: 'bg-transparent border-none ml-2 my-4' },
+                    menu: { className: 'bg-transparent border-none ml-2 my-4 py-1' },
                     action: ({ context, parent }) => ({
                         className: 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden border-b-2 p-2 font-bold rounded-t-lg',
                         style: { top: '2px' }
diff --git a/src/components/profile/UserSettings.js b/src/components/profile/UserSettings.js
index 4a0fece..a8c1097 100644
--- a/src/components/profile/UserSettings.js
+++ b/src/components/profile/UserSettings.js
@@ -168,7 +168,7 @@ const UserSettings = () => {
                     {nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
                     </h2>
                     <div className="flex flex-col w-1/2 mx-auto my-8 mb-12 justify-between items-center">
-                        <h2 className="text-xl my-2">Connect Your Lightning Wallet</h2>
+                        <h2 className="text-xl my-2 max-mob:text-base max-tab:text-base">Connect Your Lightning Wallet</h2>
                         <BitcoinConnectButton />
                     </div>
                 </div>
diff --git a/src/context/NDKContext.js b/src/context/NDKContext.js
index ed94bcd..f2f2da2 100644
--- a/src/context/NDKContext.js
+++ b/src/context/NDKContext.js
@@ -15,6 +15,7 @@ export const defaultRelayUrls = [
   "wss://nostr21.com/",
   "wss://nostrue.com/",
   "wss://purplerelay.com/",
+  // "wss://relay.devs.tools/"
 ];
 
 export const NDKProvider = ({ children }) => {
diff --git a/src/pages/content/index.js b/src/pages/content/index.js
index 41eb4b2..4043098 100644
--- a/src/pages/content/index.js
+++ b/src/pages/content/index.js
@@ -53,7 +53,7 @@ const MenuTab = ({ items, selectedTopic, onTabChange }) => {
                 activeIndex={allItems.indexOf(selectedTopic)}
                 onTabChange={(e) => onTabChange(allItems[e.index])}
                 pt={{
-                    menu: { className: 'bg-transparent border-none ml-2 my-4' },
+                    menu: { className: 'bg-transparent border-none ml-2 my-4 py-1' },
                     action: ({ context, parent }) => ({
                         className: 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden border-b-2 p-2 font-bold rounded-t-lg',
                         style: { top: '2px' }
diff --git a/src/pages/course/[slug]/index.js b/src/pages/course/[slug]/index.js
index 111ffa0..46f2b91 100644
--- a/src/pages/course/[slug]/index.js
+++ b/src/pages/course/[slug]/index.js
@@ -213,7 +213,7 @@ const Course = () => {
             <Accordion 
                 activeIndex={expandedIndex} 
                 onTabChange={handleAccordionChange}
-                className="mt-4 px-4"
+                className="mt-4 px-4 max-mob:px-0 max-tab:px-0"
             >
                 {uniqueLessons.length > 0 && uniqueLessons.map((lesson, index) => (
                     <AccordionTab 
@@ -222,7 +222,7 @@ const Course = () => {
                             root: { className: 'border-none' },
                             header: { className: 'border-none' },
                             headerAction: { className: 'border-none' },
-                            content: { className: 'border-none' },
+                            content: { className: 'border-none max-mob:px-0 max-tab:px-0' },
                             accordiontab: { className: 'border-none' },
                         }}
                         header={
diff --git a/src/pages/feed.js b/src/pages/feed.js
index 8d4e135..5ef33a6 100644
--- a/src/pages/feed.js
+++ b/src/pages/feed.js
@@ -50,10 +50,6 @@ const Feed = () => {
         }
     };
 
-    const handleMessageSent = () => {
-        setIsMessageInputCollapsed(true);
-    };
-
     return (
         <div className="bg-gray-900 h-[100vh] w-[100vw] min-bottom-bar:w-[86vw]">
             <div className="w-[100vw] min-bottom-bar:w-[86vw] px-4 pt-4 flex flex-col items-start">
@@ -84,7 +80,7 @@ const Feed = () => {
                 <Divider />
                 <MessageInput 
                     collapsed={false} 
-                    onMessageSent={handleMessageSent}
+                    // onMessageSent={handleMessageSent}
                 />
             </div>
             <div className="min-bottom-bar:hidden">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2c8b504..7d2f8c8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -11,6 +11,7 @@
 
 body {
   @apply font-blinker;
+  background-color: #201c24;
 }
 
 h1 {