rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: migrate tailwind to v4

Browse source
This commit is contained in:
swve 2025-03-10 13:26:53 +01:00
parent 6d770698d0
commit 81c4190b00
87 changed files with 773 additions and 620 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web/components/Dashboard/Pages/Course/EditCourseAccess/EditCourseAccess.tsx
View file

@ -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">

4
apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/EditCourseGeneral.tsx
View file

@ -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>

6
apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/LearningItemsList.tsx
View file

@ -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 || ''}

8
apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/ThumbnailUpdate.tsx
View file

@ -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>

2
apps/web/components/Dashboard/Pages/Course/EditCourseGeneral/UnsplashImagePicker.tsx
View file

@ -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>

6
apps/web/components/Dashboard/Pages/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
View file

@ -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>

8
apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

@ -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" />

4
apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
View file

@ -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" />

2
apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx
View file

@ -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}

32
apps/web/components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages.tsx
View file

@ -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) => {

14
apps/web/components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding.tsx
View file

@ -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

4
apps/web/components/Dashboard/Pages/Payments/PaymentsConfigurationPage.tsx
View file

@ -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 ? (

6
apps/web/components/Dashboard/Pages/Payments/PaymentsProductPage.tsx
View file

@ -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" />

2
apps/web/components/Dashboard/Pages/Payments/SubComponents/CreateProductForm.tsx
View file

@ -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>

6
apps/web/components/Dashboard/Pages/Payments/SubComponents/LinkCourseModal.tsx
View file

@ -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"

2
apps/web/components/Dashboard/Pages/Users/OrgAccess/OrgAccess.tsx
View file

@ -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">

2
apps/web/components/Dashboard/Pages/Users/OrgUserGroups/OrgUserGroups.tsx
View file

@ -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">

2
apps/web/components/Dashboard/Pages/Users/OrgUsers/OrgUsers.tsx
View file

@ -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">

2
apps/web/components/Dashboard/Pages/Users/OrgUsersAdd/OrgUsersAdd.tsx
View file

@ -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">

8
apps/web/components/Landings/LandingCustom.tsx
View file

@ -87,7 +87,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
<a
key={index}
href={button.link}
className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow transition-transform hover:scale-105"
className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow-sm transition-transform hover:scale-105"
style={{
backgroundColor: button.background,
color: button.color
@ -123,7 +123,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
<a
key={index}
href={button.link}
className="px-6 py-3 rounded-xl font-medium shadow-sm transition-all duration-200 hover:scale-105"
className="px-6 py-3 rounded-xl font-medium shadow-xs transition-all duration-200 hover:scale-105"
style={{
backgroundColor: button.background,
color: button.color
@ -136,7 +136,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
</div>
<div className="flex-1 w-full md:w-auto">
<div className="relative w-full max-w-[500px] mx-auto px-4 md:px-8">
<div className="relative w-full aspect-[4/3]">
<div className="relative w-full aspect-4/3">
<img
src={section.image.url}
alt={section.image.alt}
@ -242,7 +242,7 @@ function LandingCustom({ landing, orgslug }: LandingCustomProps) {
}
return (
<div className="flex flex-col items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
<div className="flex flex-col items-center justify-between w-full max-w-(--breakpoint-2xl) mx-auto px-4 sm:px-6 lg:px-16 h-full">
{landing.sections.map((section) => renderSection(section))}
</div>
)

8
apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx
View file

@ -81,8 +81,8 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
// TODO : come up with a better way to handle this
const inputClass = aiChatBotState.isWaitingForResponse
? 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30 '
: 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30'
? 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-hidden px-4 py-2 text-white text-sm placeholder:text-white/30 opacity-30 '
: 'ring-1 ring-inset ring-white/10 bg-gray-950/40 w-full rounded-lg outline-hidden px-4 py-2 text-white text-sm placeholder:text-white/30'
useEffect(() => {
if (aiChatBotState.isModalOpen) {
@ -211,7 +211,7 @@ function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 98%)',
}}
className="bg-black z-50 rounded-2xl max-w-screen-2xl w-10/12 my-10 mx-auto h-[350px] fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg ring-1 ring-inset ring-white/10 text-white p-4 flex-col-reverse backdrop-blur-md"
className="bg-black z-50 rounded-2xl max-w-(--breakpoint-2xl) w-10/12 my-10 mx-auto h-[350px] fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg ring-1 ring-inset ring-white/10 text-white p-4 flex-col-reverse backdrop-blur-md"
>
<div className="flex flex-row-reverse pb-3 justify-between items-center">
<div className="flex space-x-2 items-center">
@ -348,7 +348,7 @@ function AIMessage(props: AIMessageProps) {
</div>
<div className="w-full">
<p
className="w-full rounded-lg outline-none px-2 py-1 text-white text-md placeholder:text-white/30"
className="w-full rounded-lg outline-hidden px-2 py-1 text-white text-md placeholder:text-white/30"
id=""
>
<AnimatePresence>

12
apps/web/components/Objects/Activities/Assignment/AssignmentBoxUI.tsx
View file

@ -76,7 +76,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
{view === 'teacher' &&
<div
onClick={() => saveFC && saveFC()}
className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
<Save size={14} />
<p className='text-xs font-semibold'>Save</p>
</div>
@ -86,7 +86,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
{view === 'student' && isAuthenticated && submission && submission.length <= 0 &&
<div
onClick={() => submitFC && submitFC()}
className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center justify-center mx-auto w-full sm:w-auto bg-gradient-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
className='flex px-2 py-1 cursor-pointer rounded-md space-x-2 items-center justify-center mx-auto w-full sm:w-auto bg-linear-to-bl text-emerald-700 bg-emerald-300/20 hover:bg-emerald-300/10 hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-emerald-500/60'>
<Forward size={14} />
<p className='text-xs font-semibold'>Save your progress</p>
</div>
@ -95,11 +95,11 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
{/* Grading button */}
{view === 'grading' &&
<div
className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-gradient-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-linear-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
<p className='font-semibold px-2 text-xs text-orange-700'>Current points: {currentPoints}</p>
<div
onClick={() => gradeFC && gradeFC()}
className='bg-gradient-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 ml-auto'>
className='bg-linear-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 ml-auto'>
<BookPlus size={14} />
<p className='text-xs font-semibold'>Grade</p>
</div>
@ -109,7 +109,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
{/* CustomGrading button */}
{view === 'custom-grading' && maxPoints &&
<div
className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-gradient-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
className='flex flex-wrap sm:flex-nowrap w-full sm:w-auto px-0.5 py-0.5 cursor-pointer rounded-md gap-2 sm:space-x-2 items-center bg-linear-to-bl hover:outline-offset-4 active:outline-offset-1 linear transition-all outline-offset-2 outline-dashed outline-orange-500/60'>
<p className='font-semibold px-2 text-xs text-orange-700 w-full sm:w-auto'>Current points: {currentPoints}</p>
<div className='flex items-center gap-2 w-full sm:w-auto'>
<input
@ -120,7 +120,7 @@ function AssignmentBoxUI({ type, view, currentPoints, maxPoints, saveFC, submitF
/>
<div
onClick={() => gradeCustomFC && gradeCustomFC(customGrade)}
className='bg-gradient-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 whitespace-nowrap'>
className='bg-linear-to-bl text-orange-700 bg-orange-300/20 hover:bg-orange-300/10 items-center flex rounded-md px-2 py-1 space-x-2 whitespace-nowrap'>
<BookPlus size={14} />
<p className='text-xs font-semibold'>Grade</p>
</div>

10
apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx
View file

@ -21,16 +21,16 @@ function AssignmentStudentActivity() {
<div className='flex flex-col space-y-4 md:space-y-6'>
<div className='flex flex-col md:flex-row justify-center md:space-x-3 space-y-3 md:space-y-0 items-center'>
<div className='text-xs h-fit flex space-x-3 items-center'>
<div className='flex space-x-2 py-2 px-4 md:px-5 h-fit text-sm text-slate-700 bg-slate-100/5 rounded-full nice-shadow'>
<Backpack size={16} className="md:size-18" />
<div className='flex gap-2 py-2 px-4 md:px-5 h-fit text-sm text-slate-700 bg-slate-100/5 rounded-full nice-shadow items-center'>
<Backpack size={14} className="md:size-[14px]" />
<p className='font-semibold'>Assignment</p>
</div>
</div>
<div>
<div className='flex space-x-2 items-center'>
<div className='flex gap-2 items-center'>
<EllipsisVertical className='text-slate-400 hidden md:block' size={18} />
<div className='flex space-x-2 items-center'>
<div className='flex space-x-1 md:space-x-2 text-xs items-center text-slate-400'>
<div className='flex gap-2 items-center'>
<div className='flex gap-1 md:space-x-2 text-xs items-center text-slate-400'>
<Calendar size={14} />
<p className='font-semibold'>Due Date</p>
<p className='font-semibold'>{assignments?.assignment_object?.due_date}</p>

4
apps/web/components/Objects/Activities/Video/Video.tsx
View file

@ -20,7 +20,7 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
<>
{activity.activity_sub_type === 'SUBTYPE_VIDEO_HOSTED' && (
<div className="my-3 md:my-5 w-full">
<div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
<div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-xs sm:shadow-none">
<video
className="w-full h-full object-cover"
controls
@ -37,7 +37,7 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
)}
{activity.activity_sub_type === 'SUBTYPE_VIDEO_YOUTUBE' && (
<div className="my-3 md:my-5 w-full">
<div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
<div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-xs sm:shadow-none">
<YouTube
className="w-full h-full"
opts={{

2
apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx
View file

@ -155,7 +155,7 @@ const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobil
</div>
</div>
<div className="flex-shrink-0">
<div className="shrink-0">
{linkedProducts.length > 0 ? (
hasAccess ? (
<button

2
apps/web/components/Objects/Courses/CourseActions/CoursePaidOptions.tsx
View file

@ -85,7 +85,7 @@ function CoursePaidOptions({ course }: CoursePaidOptionsProps) {
</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">

8
apps/web/components/Objects/Editor/AI/AIEditorToolkit.tsx
View file

@ -86,7 +86,7 @@ function AIEditorToolkit(props: AIEditorToolkitProps) {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 98%)',
}}
className="z-50 rounded-2xl max-w-screen-2xl my-10 mx-auto w-fit fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse backdrop-blur-md"
className="z-50 rounded-2xl max-w-(--breakpoint-2xl) my-10 mx-auto w-fit fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse backdrop-blur-md"
>
<div className="flex space-x-2">
<div className="pr-1">
@ -447,7 +447,7 @@ const UserFeedbackModal = (props: AIEditorToolkitProps) => {
background:
'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(2 1 25 / 95%)',
}}
className="backdrop-blur-md z-50 rounded-2xl max-w-screen-2xl my-10 mx-auto w-[500px] h-[200px] fixed bottom-16 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse"
className="backdrop-blur-md z-50 rounded-2xl max-w-(--breakpoint-2xl) my-10 mx-auto w-[500px] h-[200px] fixed bottom-16 left-1/2 transform -translate-x-1/2 shadow-xl ring-1 ring-inset ring-white/10 text-white p-3 flex-col-reverse"
>
<div className="flex space-x-2 justify-center">
<Image
@ -469,7 +469,7 @@ const UserFeedbackModal = (props: AIEditorToolkitProps) => {
value={aiEditorState.chatInputValue}
onChange={handleChange}
placeholder="Ask AI"
className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-none px-4 py-2 text-white text-sm placeholder:text-white/30"
className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-hidden px-4 py-2 text-white text-sm placeholder:text-white/30"
></input>
<div
onClick={() =>
@ -620,7 +620,7 @@ const AiEditorActionScreen = ({
value={aiEditorState.chatInputValue}
onChange={handleChange}
placeholder="Japanese, Arabic, German, etc. "
className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-none px-4 py- text-white text-sm placeholder:text-white/30"
className="ring-1 ring-inset ring-white/20 w-full bg-gray-950/20 rounded-lg outline-hidden px-4 py- text-white text-sm placeholder:text-white/30"
></input>
</div>
<div

6
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -182,7 +182,7 @@ function Editor(props: Editor) {
}}
exit={{ opacity: 0 }}
>
<EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur backdrop-brightness-125">
<EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur-sm backdrop-brightness-125">
<EditorDocSection>
<EditorInfoWrapper>
<Link href="/">
@ -254,7 +254,7 @@ function Editor(props: Editor) {
/>
<EditorLeftOptionsSection className="space-x-2 ">
<div
className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow text-teal-100 rounded-lg hover:cursor-pointer"
className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow-sm text-teal-100 rounded-lg hover:cursor-pointer"
onClick={() => props.setContent(editor.getJSON())}
>
{' '}
@ -265,7 +265,7 @@ function Editor(props: Editor) {
target="_blank"
href={`/course/${course_uuid}/activity/${activity_uuid}`}
>
<div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow text-neutral-100 rounded-lg hover:cursor-pointer">
<div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow-sm text-neutral-100 rounded-lg hover:cursor-pointer">
<Eye className="mx-auto items-center" size={15} />
</div>
</Link>

2
apps/web/components/Objects/Editor/Extensions/Badges/BadgesExtension.tsx
View file

@ -164,7 +164,7 @@ const BadgesExtension: React.FC = (props: any) => {
{colors.map((c) => (
<button
key={c}
className={`w-8 h-8 rounded-full ${getBadgeColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-none focus:ring-2 focus:ring-opacity-50`}
className={`w-8 h-8 rounded-full ${getBadgeColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-hidden focus:ring-2 focus:ring-opacity-50`}
onClick={() => handleColorSelect(c)}
/>
))}

2
apps/web/components/Objects/Editor/Extensions/Buttons/ButtonsExtension.tsx
View file

@ -154,7 +154,7 @@ const ButtonsExtension: React.FC = (props: any) => {
{colors.map((c) => (
<button
key={c}
className={`w-6 h-6 rounded-full ${getButtonColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-none focus:ring-2 focus:ring-opacity-50`}
className={`w-6 h-6 rounded-full ${getButtonColor(c)} hover:ring-2 hover:ring-opacity-50 focus:outline-hidden focus:ring-2 focus:ring-opacity-50`}
onClick={() => handleColorSelect(c)}
/>
))}

4
apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
View file

@ -14,7 +14,7 @@ const IconWrapper = styled.div<{ size?: string }>`
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
shrink: 0;
margin-right: 0.5rem;
padding-left: 0.5rem;
@ -126,7 +126,7 @@ function InfoCalloutComponent(props: any) {
<IconWrapper size={options.size}>
<AlertCircle />
</IconWrapper>
<ContentWrapper className="flex-grow">
<ContentWrapper className="grow">
<NodeViewContent contentEditable={isEditable} className="content" />
</ContentWrapper>
{options.dismissible && !isEditable && (

4
apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx
View file

@ -14,7 +14,7 @@ const IconWrapper = styled.div<{ size?: string }>`
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
shrink: 0;
margin-right: 0.5rem;
padding-left: 0.5rem;
@ -126,7 +126,7 @@ function WarningCalloutComponent(props: any) {
<IconWrapper size={options.size}>
<AlertTriangle />
</IconWrapper>
<ContentWrapper className="flex-grow">
<ContentWrapper className="grow">
<NodeViewContent contentEditable={isEditable} className="content" />
</ContentWrapper>
{options.dismissible && !isEditable && (

12
apps/web/components/Objects/Editor/Extensions/EmbedObjects/EmbedObjectsComponent.tsx
View file

@ -417,7 +417,7 @@ function EmbedObjectsComponent(props: any) {
{/* Minimal toolbar for existing embeds */}
{isEditable && (
<div className="absolute top-2 right-2 flex items-center gap-1.5 bg-white bg-opacity-90 backdrop-blur-sm rounded-lg p-1 shadow-sm transition-opacity opacity-70 hover:opacity-100">
<div className="absolute top-2 right-2 flex items-center gap-1.5 bg-white bg-opacity-90 backdrop-blur-xs rounded-lg p-1 shadow-xs transition-opacity opacity-70 hover:opacity-100">
<button
onClick={() => setActiveInput(embedType)}
className="p-1.5 rounded-md hover:bg-gray-100 text-gray-600"
@ -487,7 +487,7 @@ function EmbedObjectsComponent(props: any) {
setEmbedType('url');
setActiveInput('url');
}}
className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md transition-all text-sm text-gray-700"
className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-xs hover:shadow-md transition-all text-sm text-gray-700"
>
<LinkIcon size={14} />
<span>URL</span>
@ -497,7 +497,7 @@ function EmbedObjectsComponent(props: any) {
setEmbedType('code');
setActiveInput('code');
}}
className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md transition-all text-sm text-gray-700"
className="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg shadow-xs hover:shadow-md transition-all text-sm text-gray-700"
>
<Code size={14} />
<span>Code</span>
@ -509,7 +509,7 @@ function EmbedObjectsComponent(props: any) {
{/* Inline input UI - appears in place without covering content */}
{isEditable && activeInput !== 'none' && (
<div className="absolute inset-0 bg-gray-100 bg-opacity-95 backdrop-blur-sm flex items-center justify-center p-4 z-10">
<div className="absolute inset-0 bg-gray-100 bg-opacity-95 backdrop-blur-xs flex items-center justify-center p-4 z-10">
<form
onSubmit={handleInputSubmit}
className="w-full max-w-lg bg-white rounded-xl shadow-lg p-4"
@ -554,7 +554,7 @@ function EmbedObjectsComponent(props: any) {
type="text"
value={embedUrl}
onChange={handleUrlChange}
className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-all"
className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-hidden transition-all"
placeholder={selectedProduct ? `Paste ${selectedProduct.name} embed URL` : "Paste embed URL (YouTube, Spotify, etc.)"}
autoFocus
/>
@ -586,7 +586,7 @@ function EmbedObjectsComponent(props: any) {
ref={codeInputRef}
value={embedCode}
onChange={handleCodeChange}
className="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl h-32 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-all font-mono text-sm"
className="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl h-32 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-hidden transition-all font-mono text-sm"
placeholder="Paste embed code (iframe, embed script, etc.)"
autoFocus
/>

4
apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -110,7 +110,7 @@ function ImageBlockComponent(props: any) {
'imageBlock'
)}`}
alt=""
className="rounded-lg shadow max-w-full h-auto"
className="rounded-lg shadow-sm max-w-full h-auto"
style={{ width: '100%' }}
/>
</Resizable>
@ -129,7 +129,7 @@ function ImageBlockComponent(props: any) {
'imageBlock'
)}`}
alt=""
className="rounded-lg shadow max-w-full h-auto"
className="rounded-lg shadow-sm max-w-full h-auto"
style={{ width: imageSize.width, maxWidth: '100%' }}
/>
</div>

2
apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

@ -59,7 +59,7 @@ function PDFBlockComponent(props: any) {
{blockObject && (
<BlockPDF>
<iframe
className="shadow rounded-lg h-96 w-full object-scale-down bg-black"
className="shadow-sm rounded-lg h-96 w-full object-scale-down bg-black"
src={`${getActivityBlockMediaDirectory(
org?.org_uuid,
course?.courseStructure.course_uuid,

12
apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx
View file

@ -275,7 +275,7 @@ function QuizBlockComponent(props: any) {
<div key={question.question_id} className="pt-3 space-y-2">
<div className="question">
<div className="flex space-x-2 items-center">
<div className="flex-grow">
<div className="grow">
{isEditable ? (
<input
value={question.question}
@ -310,7 +310,7 @@ function QuizBlockComponent(props: any) {
<div
key={answer.answer_id}
className={twMerge(
'outline outline-2 pr-2 shadow w-full flex items-stretch space-x-2 min-h-[36px] bg-opacity-50 hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear',
'outline outline-2 pr-2 shadow-sm w-full flex items-stretch space-x-2 min-h-[36px] bg-opacity-50 hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear',
answer.correct && isEditable ? 'outline-lime-300' : 'outline-white',
userAnswers.some(
(userAnswer: any) =>
@ -335,16 +335,16 @@ function QuizBlockComponent(props: any) {
className={twMerge(
'font-bold text-base flex items-center justify-center self-stretch w-[40px] rounded-l-md text-slate-800 bg-white',
answer.correct && isEditable
? 'bg-lime-300 text-lime-800 outline-none'
? 'bg-lime-300 text-lime-800 outline-hidden'
: 'bg-white',
userAnswers.some(
(userAnswer: any) =>
userAnswer.question_id === question.question_id &&
userAnswer.answer_id === answer.answer_id &&
!isEditable && !submitted
) ? 'bg-blue-400 text-white outline-none' : '',
) ? 'bg-blue-400 text-white outline-hidden' : '',
submitted && answer.correct
? 'bg-lime-300 text-lime-800 outline-none'
? 'bg-lime-300 text-lime-800 outline-hidden'
: '',
submitted &&
!answer.correct &&
@ -353,7 +353,7 @@ function QuizBlockComponent(props: any) {
userAnswer.question_id === question.question_id &&
userAnswer.answer_id === answer.answer_id
)
? 'bg-red-400 text-red-800 outline-none'
? 'bg-red-400 text-red-800 outline-hidden'
: ''
)}
>

2
apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

@ -62,7 +62,7 @@ function VideoBlockComponents(props: any) {
<BlockVideo>
<video
controls
className="rounded-lg shadow h-96 w-full object-scale-down bg-black"
className="rounded-lg shadow-sm h-96 w-full object-scale-down bg-black"
src={`${getActivityBlockMediaDirectory(
org?.org_uuid,
course?.courseStructure.course_uuid,

4
apps/web/components/Objects/Menus/OrgMenu.tsx
View file

@ -30,7 +30,7 @@ export const OrgMenu = (props: any) => {
<>
<div className="backdrop-blur-lg h-[60px] blur-3xl -z-10"></div>
<div className="backdrop-blur-lg bg-white/90 fixed top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
<div className="flex items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
<div className="flex items-center justify-between w-full max-w-(--breakpoint-2xl) mx-auto px-4 sm:px-6 lg:px-16 h-full">
<div className="flex items-center space-x-5 md:w-auto w-full">
<div className="logo flex md:w-auto w-full justify-center">
<Link href={getUriWithOrg(orgslug, '/')}>
@ -63,7 +63,7 @@ export const OrgMenu = (props: any) => {
<HeaderProfileBox />
</div>
<button
className="md:hidden text-gray-600 focus:outline-none"
className="md:hidden text-gray-600 focus:outline-hidden"
onClick={toggleMenu}
>
{isMenuOpen ? (

2
apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx
View file

@ -23,7 +23,7 @@ function NewActivityModal({
return (
<>
{selectedView === 'home' && (
<div className="flex flex-row space-x-2 justify-start mt-2.5 w-full">
<div className="grid grid-cols-4 gap-2 mt-2.5 w-full">
<ActivityOption
onClick={() => {
setSelectedView('dynamic')

6
apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx
View file

@ -158,18 +158,18 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
label="Course Thumbnail"
message={formik.errors.thumbnail}
/>
<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">
{formik.values.thumbnail ? (
<img
src={URL.createObjectURL(formik.values.thumbnail)}
className={`${isUploading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`}
className={`${isUploading ? 'animate-pulse' : ''} shadow-sm w-[200px] h-[100px] rounded-md`}
/>
) : (
<img
src="/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 className="flex justify-center items-center space-x-2">

2
apps/web/components/Objects/Modals/Dash/EditCourseAccess/LinkToUserGroup.tsx
View file

@ -77,7 +77,7 @@ function LinkToUserGroup(props: LinkToUserGroupProps) {
<Link className='px-3 text-blue-700 font-bold rounded-full py-1 bg-blue-100 mx-1' target='_blank' href={getUriWithOrg(org.slug, '/dash/users/settings/usergroups')}>Create a UserGroup</Link>
</div>}
<div className='py-3'>
<button onClick={() => { handleLink() }} className='bg-green-700 text-white font-bold px-4 py-2 rounded-md shadow'>Link</button>
<button onClick={() => { handleLink() }} className='bg-green-700 text-white font-bold px-4 py-2 rounded-md shadow-sm'>Link</button>
</div>
</div>
</div>

4
apps/web/components/Objects/Onboarding/Onboarding.tsx
View file

@ -253,7 +253,7 @@ const Onboarding: React.FC = () => {
/>
}
dialogTrigger={
<div className='fixed pb-10 w-full bottom-0 bg-gradient-to-t from-1% from-gray-950/25 to-transparent'>
<div className='fixed pb-10 w-full bottom-0 bg-linear-to-t from-1% from-gray-950/25 to-transparent'>
<div className='bg-gray-950 flex space-x-2 font-bold cursor-pointer hover:bg-gray-900 shadow-md items-center text-gray-200 px-5 py-2 w-fit rounded-full mx-auto'>
<Sprout size={20} />
<p>Onboarding</p>
@ -299,7 +299,7 @@ const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
return (
<div className='flex flex-col'>
<div className='onboarding_screens flex-col px-4 py-4'>
<div className='flex-grow rounded-xl'>
<div className='grow rounded-xl'>
<Image
unoptimized
className='mx-auto shadow-md shadow-gray-200 rounded-lg w-[730px] h-[330px] object-cover'

2
apps/web/components/Objects/Search/SearchBar.tsx
View file

@ -93,7 +93,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ orgslug, className = '', i
}}
onFocus={handleSearchFocus}
placeholder="Search courses..."
className="w-full h-9 pl-10 pr-4 rounded-lg border border-gray-200 bg-white/50 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent text-sm placeholder:text-gray-400"
className="w-full h-9 pl-10 pr-4 rounded-lg border border-gray-200 bg-white/50 focus:outline-hidden focus:ring-2 focus:ring-gray-200 focus:border-transparent text-sm placeholder:text-gray-400"
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
</div>

2
apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
View file

@ -50,7 +50,7 @@ const ConfirmationModal = (params: ModalParams) => {
<Info size={35} />
)}
</div>
<div className="text pt-1 space-x-0 w-auto flex-grow">
<div className="text pt-1 space-x-0 w-auto grow">
<div className="text-xl font-bold text-black ">
{params.dialogTitle}
</div>

2
apps/web/components/Objects/StyledElements/Error/Error.tsx
View file

@ -14,7 +14,7 @@ function ErrorUI(params: { message?: string, submessage?: string }) {
}
return (
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-rose-100 to-rose-100/5 ">
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-linear-to-b from-rose-100 to-rose-100/5 ">
<div className="flex flex-row items-center space-x-5 rounded-xl ">
<AlertTriangle className="text-rose-700" size={45} />
<div className='flex flex-col'>

2
apps/web/components/Objects/StyledElements/Form/TagInput.tsx
View file

@ -62,7 +62,7 @@ const FormTagInput = ({
placeholder={placeholder}
styleClasses={{
inlineTagsContainer:
'border-input rounded-lg bg-background shadow-xs transition-shadow focus-within:border-ring/40 focus-within:outline-hidden focus-within:ring-[3px] ring-ring/8 dark:ring-ring/12 p-1 gap-1',
'border-input rounded-lg bg-background shadow-2xs transition-shadow focus-within:border-ring/40 focus-within:outline-hidden focus-within:ring-[3px] ring-ring/8 dark:ring-ring/12 p-1 gap-1',
input:
'w-full min-w-[80px] focus-visible:outline-hidden shadow-none px-2 h-7',
tag: {

2
apps/web/components/Objects/StyledElements/Info/Info.tsx
View file

@ -6,7 +6,7 @@ import React from 'react'
function InfoUI(params: { message?: string, submessage?: string, cta?: string, href: string }) {
return (
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-yellow-100 to-yellow-100/5 ">
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-linear-to-b from-yellow-100 to-yellow-100/5 ">
<div className="flex flex-row items-center space-x-5 rounded-xl ">
<Diamond className="text-yellow-700" size={45} />
<div className='flex flex-col'>

2
apps/web/components/Objects/StyledElements/Wrappers/GeneralWrapper.tsx
View file

@ -1,6 +1,6 @@
function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
return (
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-5 tracking-tight z-50">
<div className="max-w-(--breakpoint-2xl) mx-auto px-4 sm:px-6 lg:px-8 py-5 tracking-tight z-50">
{children}
</div>
)

2
apps/web/components/Objects/Thumbnails/CourseThumbnailLanding.tsx
View file

@ -113,7 +113,7 @@ const CourseThumbnailLanding: React.FC<PropsType> = ({ course, orgslug, customLi
: '../empty_thumbnail.png'
return (
<div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm flex-shrink-0 m-2">
<div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm shrink-0 m-2">
<AdminEditOptions
course={course}
orgslug={orgslug}

4
apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
View file

@ -67,7 +67,7 @@ function Activity(props: any) {
>
{(provided) => (
<div
className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear"
className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow-sm space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-xs transition-all delay-100 duration-75 ease-linear"
key={props.activity.id}
{...provided.draggableProps}
{...provided.dragHandleProps}
@ -113,7 +113,7 @@ function Activity(props: any) {
<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

8
apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
View file

@ -51,7 +51,7 @@ function Chapter(props: any) {
{...provided.draggableProps}
ref={provided.innerRef}
// isDragging={snapshot.isDragging}
className="max-w-screen-2xl mx-auto bg-white px-5"
className="max-w-(--breakpoint-2xl) mx-auto bg-white px-5"
key={props.info.list.chapter.id}
>
<div className="flex pt-3 pr-3 font-bold text-md items-center space-x-2">
@ -69,7 +69,7 @@ function Chapter(props: any) {
<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
<input
type="text"
className="bg-transparent outline-none text-sm text-neutral-700"
className="bg-transparent outline-hidden text-sm text-neutral-700"
placeholder="Chapter name"
value={
modifiedChapter
@ -116,7 +116,7 @@ function Chapter(props: any) {
dialogTitle={'Delete ' + props.info.list.chapter.name + ' ?'}
dialogTrigger={
<div
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow flex space-x-1 items-center text-rose-100 text-sm"
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow-sm flex space-x-1 items-center text-rose-100 text-sm"
rel="noopener noreferrer"
>
<X size={15} className="text-rose-200 font-bold" />
@ -157,7 +157,7 @@ function Chapter(props: any) {
onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id)
}}
className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white bg-black hover:cursor-pointer"
className="flex space-x-2 items-center py-5 my-3 rounded-md justify-center text-white bg-black hover:cursor-pointer"
>
<Sparkles className="" size={17} />
<div className="text-sm mx-auto my-auto items-center font-bold">

4
apps/web/components/Pages/Trail/TrailCourseElement.tsx
View file

@ -61,7 +61,7 @@ function TrailCourseElement(props: TrailCourseElementProps) {
}}
></div>
</Link>
<div className="course_meta pl-5 flex-grow space-y-1">
<div className="course_meta pl-5 grow space-y-1">
<div className="course_top">
<div className="course_info flex">
<div className="course_basic flex flex-col flex-end -space-y-2">
@ -72,7 +72,7 @@ function TrailCourseElement(props: TrailCourseElementProps) {
<h2>{course_progress}%</h2>
</div>
</div>
<div className="course_actions flex-grow flex flex-row-reverse">
<div className="course_actions grow flex flex-row-reverse">
<button
onClick={() => quitCourse(course.course_uuid)}
className="bg-red-200 text-red-700 hover:bg-red-300 rounded-full text-xs h-5 px-2 font-bold"

2
apps/web/components/Security/HeaderProfileBox.tsx
View file

@ -89,5 +89,5 @@ const ProfileArea = styled.div`
const UnidentifiedArea = styled.div`
display: flex;
place-items: stretch;
flex-grow: 1;
grow: 1;
`

6
apps/web/components/ui/badge.tsx
View file

@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
"border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
"border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
outline: "text-foreground",
},
},

10
apps/web/components/ui/button.tsx
View file

@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
"bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},

7
apps/web/components/ui/dialog.tsx
View file

@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/50 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/50 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@ -38,13 +38,14 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-5 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-2xl",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-2xl",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>

8
apps/web/components/ui/dropdown-menu.tsx
View file

@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
)}
@ -88,7 +88,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
inset && "pl-8",
className
)}
@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className
)}
checked={checked}
@ -128,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className
)}
{...props}

2
apps/web/components/ui/input.tsx
View file

@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}

4
apps/web/components/ui/select.tsx
View file

@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}
@ -123,7 +123,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className
)}
{...props}

2
apps/web/components/ui/switch.tsx
View file

@ -11,7 +11,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
)}
{...props}

2
apps/web/components/ui/table.tsx
View file

@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
<tfoot
ref={ref}
className={cn(
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
"border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
className
)}
{...props}

4
apps/web/components/ui/tabs.tsx
View file

@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className
)}
{...props}
@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
)}
{...props}

2
apps/web/components/ui/textarea.tsx
View file

@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}

4
apps/web/components/ui/toggle.tsx
View file

@ -7,13 +7,13 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-9 px-3",