mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: migrate tailwind to v4
This commit is contained in:
parent
6d770698d0
commit
81c4190b00
87 changed files with 773 additions and 620 deletions
|
|
@ -50,7 +50,7 @@ function EditCourseAccess(props: EditCourseAccessProps) {
|
|||
{courseStructure && (
|
||||
<div>
|
||||
<div className="h-6"></div>
|
||||
<div className="mx-4 sm:mx-10 bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="mx-4 sm:mx-10 bg-white rounded-xl shadow-xs px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-3 sm:px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-lg sm:text-xl text-gray-800">Access to the course</h1>
|
||||
<h2 className="text-gray-500 text-xs sm:text-sm">
|
||||
|
|
|
|||
|
|
@ -145,11 +145,11 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
|
|||
return (
|
||||
<div>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-6 py-5">
|
||||
{courseStructure && (
|
||||
<div className="editcourse-form">
|
||||
{error && (
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-xs">
|
||||
<AlertTriangle size={18} />
|
||||
<div className="font-bold text-sm">{error}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -249,7 +249,7 @@ const LearningItemsList = ({ value, onChange, error }: LearningItemsListProps) =
|
|||
setShowEmojiPicker(showEmojiPicker === item.id ? null : item.id);
|
||||
setShowLinkInput(null);
|
||||
}}
|
||||
className="text-lg flex-shrink-0"
|
||||
className="text-lg shrink-0"
|
||||
>
|
||||
<span>{item.emoji}</span>
|
||||
</button>
|
||||
|
|
@ -261,7 +261,7 @@ const LearningItemsList = ({ value, onChange, error }: LearningItemsListProps) =
|
|||
onFocus={() => handleInputFocus(item.id)}
|
||||
onBlur={handleInputBlur}
|
||||
placeholder="Enter learning item..."
|
||||
className="flex-grow border-0 bg-transparent focus-visible:ring-0 px-0 h-8 text-sm learning-item-input"
|
||||
className="grow border-0 bg-transparent focus-visible:ring-0 px-0 h-8 text-sm learning-item-input"
|
||||
/>
|
||||
|
||||
{item.link && (
|
||||
|
|
@ -318,7 +318,7 @@ const LearningItemsList = ({ value, onChange, error }: LearningItemsListProps) =
|
|||
)}
|
||||
|
||||
{showLinkInput === item.id && (
|
||||
<div ref={linkInputRef} className="mt-1 p-2 bg-white border border-gray-200 rounded-lg shadow-sm">
|
||||
<div ref={linkInputRef} className="mt-1 p-2 bg-white border border-gray-200 rounded-lg shadow-xs">
|
||||
<Input
|
||||
ref={setLinkInputRef(item.id)}
|
||||
value={items.find(i => i.id === item.id)?.link || ''}
|
||||
|
|
|
|||
|
|
@ -52,19 +52,19 @@ function ThumbnailUpdate() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow-sm">
|
||||
<div className="flex flex-col justify-center items-center h-full">
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
{error && (
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-sm">
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-xs">
|
||||
<div className="text-sm font-semibold">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
{localThumbnail ? (
|
||||
<img
|
||||
src={URL.createObjectURL(localThumbnail)}
|
||||
className={`${isLoading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`}
|
||||
className={`${isLoading ? 'animate-pulse' : ''} shadow-sm w-[200px] h-[100px] rounded-md`}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
|
|
@ -73,7 +73,7 @@ function ThumbnailUpdate() {
|
|||
course.courseStructure.course_uuid,
|
||||
course.courseStructure.thumbnail_image
|
||||
) : '/empty_thumbnail.png'}`}
|
||||
className="shadow w-[200px] h-[100px] rounded-md bg-gray-200"
|
||||
className="shadow-sm w-[200px] h-[100px] rounded-md bg-gray-200"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onC
|
|||
value={query}
|
||||
onChange={handleSearch}
|
||||
placeholder="Search for images..."
|
||||
className="w-full p-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full p-2 pl-10 border rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -117,10 +117,10 @@ function NewActivityButton(props: NewActivityButtonProps) {
|
|||
onClick={() => {
|
||||
openNewActivityModal(props.chapterId)
|
||||
}}
|
||||
className="flex w-44 h-10 space-x-2 items-center py-2 my-3 rounded-xl justify-center text-white bg-black hover:cursor-pointer"
|
||||
className="flex w-44 h-10 items-center justify-center py-2 my-3 rounded-xl text-white bg-black hover:cursor-pointer"
|
||||
>
|
||||
<Layers className="" size={17} />
|
||||
<div className="text-sm mx-auto my-auto items-center font-bold">
|
||||
<Layers size={17} />
|
||||
<div className="text-sm font-bold ml-2">
|
||||
Add Activity
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
<div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
|
||||
<input
|
||||
type="text"
|
||||
className="bg-transparent outline-none text-xs text-gray-500"
|
||||
className="bg-transparent outline-hidden text-xs text-gray-500"
|
||||
placeholder="Activity name"
|
||||
value={
|
||||
modifiedActivity
|
||||
|
|
@ -166,8 +166,8 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
<button
|
||||
className={`p-1 px-2 sm:px-3 border shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 ${
|
||||
!props.activity.published
|
||||
? 'bg-gradient-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 hover:from-green-500/50 hover:to-lime-300/80'
|
||||
: 'bg-gradient-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 hover:from-gray-500/50 hover:to-gray-300/80'
|
||||
? 'bg-linear-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 hover:from-green-500/50 hover:to-lime-300/80'
|
||||
: 'bg-linear-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 hover:from-gray-500/50 hover:to-gray-300/80'
|
||||
}`}
|
||||
onClick={() => changePublicStatus()}
|
||||
>
|
||||
|
|
@ -192,7 +192,7 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
)}`
|
||||
}
|
||||
prefetch
|
||||
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
|
||||
className="p-1 px-2 sm:px-3 bg-linear-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Eye strokeWidth={2} size={14} className="text-sky-600" />
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
<div className="chapter-modification-zone bg-neutral-100 py-1 px-2 sm:px-4 rounded-lg flex items-center space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
className="bg-transparent outline-none text-sm text-neutral-700 w-full max-w-[150px] sm:max-w-none"
|
||||
className="bg-transparent outline-hidden text-sm text-neutral-700 w-full max-w-[150px] sm:max-w-none"
|
||||
placeholder="Chapter name"
|
||||
value={
|
||||
modifiedChapter
|
||||
|
|
@ -133,7 +133,7 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
dialogTitle={'Delete ' + props.chapter.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className="hover:cursor-pointer p-1 px-2 sm:px-3 bg-red-600 rounded-md shadow flex items-center text-rose-100 text-sm"
|
||||
className="hover:cursor-pointer p-1 px-2 sm:px-3 bg-red-600 rounded-md shadow-sm flex items-center text-rose-100 text-sm"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Trash2 size={15} className="text-rose-200" />
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
|
|||
dialogTitle="Create chapter"
|
||||
dialogDescription="Add a new chapter to the course"
|
||||
dialogTrigger={
|
||||
<div className="w-44 my-16 py-5 max-w-screen-2xl mx-auto bg-cyan-800 text-white rounded-xl shadow-sm px-6 items-center flex flex-row h-10">
|
||||
<div className="w-44 my-16 py-5 max-w-(--breakpoint-2xl) mx-auto bg-cyan-800 text-white rounded-xl shadow-xs px-6 items-center flex flex-row h-10">
|
||||
<div className="mx-auto flex space-x-2 items-center hover:cursor-pointer">
|
||||
<Hexagon
|
||||
strokeWidth={3}
|
||||
|
|
|
|||
|
|
@ -367,21 +367,21 @@ export default function OrgEditImages() {
|
|||
<TabsList className="grid w-full grid-cols-3 p-1 bg-gray-100 rounded-lg">
|
||||
<TabsTrigger
|
||||
value="logo"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
|
||||
>
|
||||
<StarIcon size={16} />
|
||||
<span>Logo</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="thumbnail"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
|
||||
>
|
||||
<ImageIcon size={16} />
|
||||
<span>Thumbnail</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="previews"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
|
||||
>
|
||||
<Images size={16} />
|
||||
<span>Previews</span>
|
||||
|
|
@ -390,7 +390,7 @@ export default function OrgEditImages() {
|
|||
|
||||
<TabsContent value="logo" className="mt-2">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="flex flex-col justify-center items-center space-y-8">
|
||||
<div className="relative group">
|
||||
<div
|
||||
|
|
@ -416,9 +416,9 @@ export default function OrgEditImages() {
|
|||
disabled={isLogoUploading}
|
||||
className={cn(
|
||||
"font-medium text-sm px-6 py-2.5 rounded-full",
|
||||
"bg-gradient-to-r from-blue-500 to-blue-600 text-white",
|
||||
"bg-linear-to-r from-blue-500 to-blue-600 text-white",
|
||||
"hover:from-blue-600 hover:to-blue-700",
|
||||
"shadow-sm hover:shadow transition-all duration-300",
|
||||
"shadow-xs hover:shadow-sm transition-all duration-300",
|
||||
"flex items-center space-x-2",
|
||||
isLogoUploading && "opacity-75 cursor-not-allowed"
|
||||
)}
|
||||
|
|
@ -443,7 +443,7 @@ export default function OrgEditImages() {
|
|||
|
||||
<TabsContent value="thumbnail" className="mt-2">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="flex flex-col justify-center items-center space-y-8">
|
||||
<div className="relative group">
|
||||
<div
|
||||
|
|
@ -469,9 +469,9 @@ export default function OrgEditImages() {
|
|||
disabled={isThumbnailUploading}
|
||||
className={cn(
|
||||
"font-medium text-sm px-6 py-2.5 rounded-full",
|
||||
"bg-gradient-to-r from-purple-500 to-purple-600 text-white",
|
||||
"bg-linear-to-r from-purple-500 to-purple-600 text-white",
|
||||
"hover:from-purple-600 hover:to-purple-700",
|
||||
"shadow-sm hover:shadow transition-all duration-300",
|
||||
"shadow-xs hover:shadow-sm transition-all duration-300",
|
||||
"flex items-center space-x-2",
|
||||
isThumbnailUploading && "opacity-75 cursor-not-allowed"
|
||||
)}
|
||||
|
|
@ -496,7 +496,7 @@ export default function OrgEditImages() {
|
|||
|
||||
<TabsContent value="previews" className="mt-4">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-6">
|
||||
<div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-6">
|
||||
<div className="flex flex-col justify-center items-center space-y-6">
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId="previews" direction="horizontal">
|
||||
|
|
@ -520,7 +520,7 @@ export default function OrgEditImages() {
|
|||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
className={cn(
|
||||
"relative group flex-shrink-0",
|
||||
"relative group shrink-0",
|
||||
"w-48",
|
||||
snapshot.isDragging ? "scale-105 z-50" : "hover:scale-102",
|
||||
)}
|
||||
|
|
@ -529,7 +529,7 @@ export default function OrgEditImages() {
|
|||
onClick={() => removePreview(preview.id)}
|
||||
className={cn(
|
||||
"absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5",
|
||||
"opacity-0 group-hover:opacity-100 z-10 shadow-sm",
|
||||
"opacity-0 group-hover:opacity-100 z-10 shadow-xs",
|
||||
"transition-opacity duration-200"
|
||||
)}
|
||||
>
|
||||
|
|
@ -539,7 +539,7 @@ export default function OrgEditImages() {
|
|||
{...provided.dragHandleProps}
|
||||
className={cn(
|
||||
"absolute -top-2 -left-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full p-1.5",
|
||||
"opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing z-10 shadow-sm",
|
||||
"opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing z-10 shadow-xs",
|
||||
"transition-opacity duration-200"
|
||||
)}
|
||||
>
|
||||
|
|
@ -551,7 +551,7 @@ export default function OrgEditImages() {
|
|||
`w-full ${PREVIEW_HEIGHT} bg-contain bg-no-repeat bg-center rounded-xl bg-white`,
|
||||
"border border-gray-200 hover:border-gray-300",
|
||||
"transition-colors duration-200",
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-xs hover:shadow-md"
|
||||
)}
|
||||
style={{
|
||||
backgroundImage: `url(${getOrgPreviewMediaDirectory(org?.org_uuid, preview.id)})`,
|
||||
|
|
@ -561,7 +561,7 @@ export default function OrgEditImages() {
|
|||
<div className={cn(
|
||||
`w-full ${PREVIEW_HEIGHT} relative rounded-xl overflow-hidden`,
|
||||
"border border-gray-200 hover:border-gray-300 transition-colors duration-200",
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-xs hover:shadow-md"
|
||||
)}>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
|
|
@ -583,7 +583,7 @@ export default function OrgEditImages() {
|
|||
{provided.placeholder}
|
||||
{previews.length < 4 && (
|
||||
<div className={cn(
|
||||
"flex-shrink-0 w-48",
|
||||
"shrink-0 w-48",
|
||||
previews.length === 0 && "m-0"
|
||||
)}>
|
||||
<Dialog open={videoDialogOpen} onOpenChange={(open) => {
|
||||
|
|
|
|||
|
|
@ -288,7 +288,7 @@ const OrgEditLanding = () => {
|
|||
onChange={() => setIsLandingEnabled(!isLandingEnabled)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
<Button
|
||||
variant="default"
|
||||
|
|
@ -328,10 +328,10 @@ const OrgEditLanding = () => {
|
|||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
onClick={() => setSelectedSection(index)}
|
||||
className={`p-4 bg-white/80 backdrop-blur-sm rounded-lg cursor-pointer border ${
|
||||
className={`p-4 bg-white/80 backdrop-blur-xs rounded-lg cursor-pointer border ${
|
||||
selectedSection === index
|
||||
? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 shadow-sm'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50 hover:shadow-sm'
|
||||
? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 shadow-xs'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50 hover:shadow-xs'
|
||||
} ${snapshot.isDragging ? 'shadow-lg ring-2 ring-blue-500/20 rotate-2' : ''}`}
|
||||
>
|
||||
<div className="flex items-center justify-between group">
|
||||
|
|
@ -888,7 +888,7 @@ const HeroSectionEditor: React.FC<{
|
|||
<TabsContent value="buttons" className="space-y-4 mt-4">
|
||||
<div className="space-y-3">
|
||||
{section.buttons.map((button, index) => (
|
||||
<div key={index} className="grid grid-cols-[1fr,1fr,auto] gap-2 p-4 border rounded-lg">
|
||||
<div key={index} className="grid grid-cols-[1fr_1fr_auto] gap-2 p-4 border rounded-lg">
|
||||
<div className="space-y-2">
|
||||
<Label>Button Text & Colors</Label>
|
||||
<Input
|
||||
|
|
@ -1297,7 +1297,7 @@ const LogosSectionEditor: React.FC<{
|
|||
</div>
|
||||
|
||||
{section.logos.map((logo, index) => (
|
||||
<div key={index} className="grid grid-cols-[1fr,1fr,auto] gap-2">
|
||||
<div key={index} className="grid grid-cols-[1fr_1fr_auto] gap-2">
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
value={logo.url}
|
||||
|
|
@ -1400,7 +1400,7 @@ const PeopleSectionEditor: React.FC<{
|
|||
<Label>People</Label>
|
||||
<div className="space-y-4 mt-2">
|
||||
{section.people.map((person, index) => (
|
||||
<div key={index} className="grid grid-cols-[1fr,1fr,1fr,auto] gap-4 p-4 border rounded-lg">
|
||||
<div key={index} className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 p-4 border rounded-lg">
|
||||
<div className="space-y-2">
|
||||
<Label>Name</Label>
|
||||
<Input
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
|
||||
<div className="flex flex-col rounded-lg light-shadow">
|
||||
{stripeConfig ? (
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-indigo-500 to-purple-600 p-6 rounded-lg shadow-md">
|
||||
<div className="flex items-center justify-between bg-linear-to-r from-indigo-500 to-purple-600 p-6 rounded-lg shadow-md">
|
||||
<div className="flex items-center space-x-3">
|
||||
<SiStripe className="text-white" size={32} />
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -187,7 +187,7 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
) : (
|
||||
<Button
|
||||
onClick={enableStripe}
|
||||
className="flex items-center justify-center space-x-2 bg-gradient-to-r p-3 from-indigo-500 to-purple-600 text-white px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition duration-300 shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="flex items-center justify-center space-x-2 bg-linear-to-r p-3 from-indigo-500 to-purple-600 text-white px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition duration-300 shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={isOnboarding}
|
||||
>
|
||||
{isOnboarding ? (
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ function PaymentsProductPage() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow overflow-hidden">
|
||||
<div className="grow overflow-hidden">
|
||||
<div className={`transition-all duration-300 ease-in-out ${expandedProducts[product.id] ? 'max-h-[1000px]' : 'max-h-24'} overflow-hidden`}>
|
||||
<p className="text-gray-600">
|
||||
{product.description}
|
||||
|
|
@ -194,7 +194,7 @@ function PaymentsProductPage() {
|
|||
<div className="flex justify-center items-center py-10">
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className={`mb-4 flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-bl text-white font-medium from-gray-700 to-gray-900 border border-gray-600 shadow-gray-900/20 nice-shadow transition duration-300 ${isStripeEnabled ? 'hover:from-gray-600 hover:to-gray-800' : 'opacity-50 cursor-not-allowed'
|
||||
className={`mb-4 flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-linear-to-bl text-white font-medium from-gray-700 to-gray-900 border border-gray-600 shadow-gray-900/20 nice-shadow transition duration-300 ${isStripeEnabled ? 'hover:from-gray-600 hover:to-gray-800' : 'opacity-50 cursor-not-allowed'
|
||||
}`}
|
||||
disabled={!isStripeEnabled}
|
||||
>
|
||||
|
|
@ -264,7 +264,7 @@ const EditProductForm = ({ product, onSuccess, onCancel }: { product: any, onSuc
|
|||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<div className="flex-grow">
|
||||
<div className="grow">
|
||||
<Label htmlFor="amount">Price</Label>
|
||||
<Field name="amount" as={Input} type="number" placeholder="Price" />
|
||||
<ErrorMessage name="amount" component="div" className="text-red-500 text-sm mt-1" />
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ const CreateProductForm: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) =
|
|||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<div className="flex-grow">
|
||||
<div className="grow">
|
||||
<Label htmlFor="amount">
|
||||
{values.price_type === 'fixed_price' ? 'Price' : 'Minimum Amount'}
|
||||
</Label>
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ const CoursePreview = ({ course, orgslug, onLink, isLinked }: CoursePreviewProps
|
|||
<div className="flex gap-4 p-4 bg-white rounded-lg border border-gray-100 hover:border-gray-200 transition-colors">
|
||||
{/* Thumbnail */}
|
||||
<div
|
||||
className="flex-shrink-0 w-[120px] h-[68px] rounded-md bg-cover bg-center ring-1 ring-inset ring-black/10"
|
||||
className="shrink-0 w-[120px] h-[68px] rounded-md bg-cover bg-center ring-1 ring-inset ring-black/10"
|
||||
style={{ backgroundImage: `url(${thumbnailImage})` }}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-grow space-y-1">
|
||||
<div className="grow space-y-1">
|
||||
<h3 className="font-medium text-gray-900 line-clamp-1">
|
||||
{course.name}
|
||||
</h3>
|
||||
|
|
@ -58,7 +58,7 @@ const CoursePreview = ({ course, orgslug, onLink, isLinked }: CoursePreviewProps
|
|||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<div className="shrink-0 flex items-center">
|
||||
{isLinked ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ function OrgAccess() {
|
|||
{!isLoading ? (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 anit ">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4 anit ">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Join method</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ function OrgUserGroups() {
|
|||
return (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Manage UserGroups & Users</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ function OrgUsers() {
|
|||
<>
|
||||
<Toast></Toast>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 ">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4 ">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Active users</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ function OrgUsersAdd() {
|
|||
{!isLoading ? (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 anit ">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-xs px-4 py-4 anit ">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Invite users to your Organization</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue