Fixed md form styles

This commit is contained in:
austinkelsay 2024-07-21 17:02:40 -05:00
parent 4ac66f234b
commit b92a0ada02
6 changed files with 479 additions and 644 deletions

1012
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"@getalby/bitcoin-connect-react": "^3.5.3", "@getalby/bitcoin-connect-react": "^3.5.3",
"@prisma/client": "^5.17.0", "@prisma/client": "^5.17.0",
"@uiw/react-md-editor": "^3.6.0", "@uiw/react-md-editor": "^3.11.0",
"axios": "^1.7.2", "axios": "^1.7.2",
"bech32": "^2.0.0", "bech32": "^2.0.0",
"light-bolt11-decoder": "^3.1.1", "light-bolt11-decoder": "^3.1.1",

View File

@ -287,13 +287,13 @@ const CourseForm = () => {
<div className="p-inputgroup flex-1"> <div className="p-inputgroup flex-1">
<InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" /> <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8"> <div className="p-inputgroup flex-1 mt-4">
<InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" /> <InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8"> <div className="p-inputgroup flex-1 mt-4">
<InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" /> <InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8 flex-col"> <div className="p-inputgroup flex-1 mt-4 flex-col">
<p className="py-2">Paid Course</p> <p className="py-2">Paid Course</p>
<InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} /> <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
{checked && ( {checked && (
@ -303,15 +303,15 @@ const CourseForm = () => {
)} )}
</div> </div>
<div className="mt-8 flex-col w-full"> <div className="mt-8 flex-col w-full">
<div className="mt-8 flex-col w-full"> <div className="mt-4 flex-col w-full">
{selectedLessons.map((lesson, index) => ( {selectedLessons.map((lesson, index) => (
<div key={lesson.id} className="p-inputgroup flex-1 mt-8"> <div key={lesson.id} className="p-inputgroup flex-1 mt-4">
<ContentDropdownItem content={lesson} selected={true} /> <ContentDropdownItem content={lesson} selected={true} />
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeLesson(index)} /> <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeLesson(index)} />
</div> </div>
))} ))}
{lessons.map((lesson, index) => ( {lessons.map((lesson, index) => (
<div key={lesson.id} className="p-inputgroup flex-1 mt-8"> <div key={lesson.id} className="p-inputgroup flex-1 mt-4">
<Dropdown <Dropdown
value={lesson.title} value={lesson.title}
options={getContentOptions(index)} options={getContentOptions(index)}
@ -326,9 +326,9 @@ const CourseForm = () => {
))} ))}
</div> </div>
</div> </div>
<div className="mt-8 flex-col w-full"> <div className="mt-4 flex-col w-full">
{topics.map((topic, index) => ( {topics.map((topic, index) => (
<div key={index} className="p-inputgroup flex-1 mt-8"> <div key={index} className="p-inputgroup flex-1 mt-4">
<InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder={`Topic #${index + 1}`} className="w-full" /> <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder={`Topic #${index + 1}`} className="w-full" />
{index > 0 && ( {index > 0 && (
<Button icon="pi pi-times" className="p-button-danger mt-2" onClick={() => removeTopic(index)} /> <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={() => removeTopic(index)} />

View File

@ -293,10 +293,10 @@ const ResourceForm = ({ draft = null }) => {
<div className="p-inputgroup flex-1"> <div className="p-inputgroup flex-1">
<InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" /> <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8"> <div className="p-inputgroup flex-1 mt-4">
<InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" /> <InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8"> <div className="p-inputgroup flex-1 mt-4">
<InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" /> <InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
</div> </div>
@ -309,13 +309,16 @@ const ResourceForm = ({ draft = null }) => {
</div> </div>
)} )}
</div> </div>
<div className="p-inputgroup flex-1 flex-col mt-8"> <div className="p-inputgroup flex-1 flex-col mt-4">
<span>Content</span> <span>Content</span>
<div data-color-mode="dark">
<MDEditor <MDEditor
value={content} value={content}
onChange={handleContentChange} onChange={handleContentChange}
height={350}
/> />
</div> </div>
</div>
<div className="mt-8 flex-col w-full"> <div className="mt-8 flex-col w-full">
{topics.map((topic, index) => ( {topics.map((topic, index) => (
<div className="p-inputgroup flex-1" key={index}> <div className="p-inputgroup flex-1" key={index}>

View File

@ -116,11 +116,11 @@ const WorkshopForm = ({ draft = null }) => {
<div className="p-inputgroup flex-1"> <div className="p-inputgroup flex-1">
<InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" /> <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8"> <div className="p-inputgroup flex-1 mt-4">
<InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" /> <InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8 flex-col"> <div className="p-inputgroup flex-1 mt-4 flex-col">
<p className="py-2">Paid Workshop</p> <p className="py-2">Paid Workshop</p>
<InputSwitch checked={isPaidResource} onChange={(e) => setIsPaidResource(e.value)} /> <InputSwitch checked={isPaidResource} onChange={(e) => setIsPaidResource(e.value)} />
{isPaidResource && ( {isPaidResource && (
@ -130,13 +130,13 @@ const WorkshopForm = ({ draft = null }) => {
</div> </div>
)} )}
</div> </div>
<div className="p-inputgroup flex-1 mt-8"> <div className="p-inputgroup flex-1 mt-4">
<InputText value={videoUrl} onChange={(e) => setVideoUrl(e.target.value)} placeholder="Video URL" /> <InputText value={videoUrl} onChange={(e) => setVideoUrl(e.target.value)} placeholder="Video URL" />
</div> </div>
<div className="p-inputgroup flex-1 mt-8"> <div className="p-inputgroup flex-1 mt-4">
<InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" /> <InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
</div> </div>
<div className="mt-8 flex-col w-full"> <div className="mt-4 flex-col w-full">
{topics.map((topic, index) => ( {topics.map((topic, index) => (
<div className="p-inputgroup flex-1" key={index}> <div className="p-inputgroup flex-1" key={index}>
<InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" /> <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />

View File

@ -90,3 +90,9 @@ h3 {
.p-tabmenu .p-tabmenu-nav::-webkit-scrollbar { .p-tabmenu .p-tabmenu-nav::-webkit-scrollbar {
display: none; display: none;
} }
.w-md-editor-toolbar button > * {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
}