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

4
apps/web/app/auth/forgot/forgot.tsx
View file

@ -113,13 +113,13 @@ function ForgotPasswordClient() {
</p>
{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>
)}
{message && (
<div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
<div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
<Info size={18} />
<div className="font-bold text-sm">{message}</div>
</div>

6
apps/web/app/auth/login/login.tsx
View file

@ -132,7 +132,7 @@ const LoginClient = (props: LoginClientProps) => {
<div className="left-login-part bg-white flex flex-row">
<div className="login-form m-auto w-72">
{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>
@ -188,11 +188,11 @@ const LoginClient = (props: LoginClientProps) => {
<div className='flex h-0.5 rounded-2xl bg-slate-100 mt-5 mx-10'></div>
<div className='flex justify-center py-5 mx-auto'>OR </div>
<div className='flex flex-col space-y-4'>
<Link href={{ pathname: getUriWithoutOrg('/signup'), query: props.org.slug ? { orgslug: props.org.slug } : null }} className="flex justify-center items-center py-3 text-md w-full bg-gray-800 text-gray-300 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
<Link href={{ pathname: getUriWithoutOrg('/signup'), query: props.org.slug ? { orgslug: props.org.slug } : null }} className="flex justify-center items-center py-3 text-md w-full bg-gray-800 text-gray-300 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
<UserRoundPlus size={17} />
<span>Sign up</span>
</Link>
<button onClick={() => signIn('google', { callbackUrl: '/redirect_from_auth' })} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
<button onClick={() => signIn('google', { callbackUrl: '/redirect_from_auth' })} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
<img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" alt="" />
<span>Sign in with Google</span>
</button>

4
apps/web/app/auth/reset/reset.tsx
View file

@ -133,14 +133,14 @@ function ResetPasswordClient() {
</p>
{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>
)}
{message && (
<div className="flex flex-col gap-2">
<div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
<div className="flex justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
<Info size={18} />
<div className="font-bold text-sm">{message}</div>
</div>

6
apps/web/app/auth/signup/InviteOnlySignUp.tsx
View file

@ -98,13 +98,13 @@ function InviteOnlySignUpComponent(props: InviteOnlySignUpProps) {
return (
<div className="login-form m-auto w-72">
{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>
)}
{message && (
<div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
<div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
<div className="flex space-x-2">
<Check size={18} />
<div className="font-bold text-sm">{message}</div>
@ -185,7 +185,7 @@ function InviteOnlySignUpComponent(props: InviteOnlySignUpProps) {
</FormLayout>
<div>
<div className='flex h-0.5 rounded-2xl bg-slate-100 mt-5 mb-5 mx-10'></div>
<button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
<button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
<img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" alt="" />
<span>Sign in with Google</span>
</button>

6
apps/web/app/auth/signup/OpenSignup.tsx
View file

@ -94,13 +94,13 @@ function OpenSignUpComponent() {
return (
<div className="login-form m-auto w-72">
{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>
)}
{message && (
<div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-sm">
<div className="flex flex-col space-y-4 justify-center bg-green-200 rounded-md text-green-950 space-x-2 items-center p-4 transition-all shadow-xs">
<div className="flex space-x-2">
<Check size={18} />
<div className="font-bold text-sm">{message}</div>
@ -179,7 +179,7 @@ function OpenSignUpComponent() {
</FormLayout>
<div>
<div className='flex h-0.5 rounded-2xl bg-slate-100 mt-5 mb-5 mx-10'></div>
<button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow hover:cursor-pointer">
<button onClick={() => signIn('google')} className="flex justify-center py-3 text-md w-full bg-white text-slate-600 space-x-3 font-semibold text-center p-2 rounded-md shadow-sm hover:cursor-pointer">
<img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" alt="" />
<span>Sign in with Google</span>
</button>

12
apps/web/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx
View file

@ -107,7 +107,7 @@ function NewCollection(params: any) {
placeholder="Enter collection name"
value={name}
onChange={handleNameChange}
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
maxLength={100}
/>
</label>
@ -116,7 +116,7 @@ function NewCollection(params: any) {
<span className="text-sm font-medium text-gray-700">Visibility</span>
<select
onChange={handleVisibilityChange}
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
defaultValue={isPublic}
>
<option value="true">Public Collection - Visible to everyone</option>
@ -131,7 +131,7 @@ function NewCollection(params: any) {
value={description}
onChange={handleDescriptionChange}
rows={4}
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
maxLength={500}
/>
</label>
@ -168,7 +168,7 @@ function NewCollection(params: any) {
}}
className="h-4 w-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500"
/>
<div className="relative w-24 h-16 rounded-md overflow-hidden bg-gray-100 flex-shrink-0">
<div className="relative w-24 h-16 rounded-md overflow-hidden bg-gray-100 shrink-0">
{course.thumbnail_image ? (
<img
src={getCourseThumbnailMediaDirectory(org.org_uuid, course.course_uuid, course.thumbnail_image)}
@ -204,14 +204,14 @@ function NewCollection(params: any) {
<button
type="button"
onClick={() => router.back()}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
>
Cancel
</button>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow-xs hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
>
{isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
<span>{isSubmitting ? 'Creating...' : 'Create Collection'}</span>

16
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -171,7 +171,7 @@ function ActivityClient(props: ActivityClientProps) {
</div>
</div>
{activity && activity.published == false && (
<div className="p-7 drop-shadow-sm rounded-lg bg-gray-800">
<div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
<div className="text-white">
<h1 className="font-bold text-2xl">
This activity is not published yet
@ -185,7 +185,7 @@ function ActivityClient(props: ActivityClientProps) {
{activity.content.paid_access == false ? (
<PaidCourseActivityDisclaimer course={course} />
) : (
<div className={`p-7 drop-shadow-sm rounded-lg ${bgColor}`}>
<div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
{/* Activity Types */}
<div>
{activity.activity_type == 'TYPE_DYNAMIC' && (
@ -519,7 +519,7 @@ function ActivityChapterDropdown(props: {
)?.steps?.find(
(step: any) => (step.activity_id === activity.id || step.activity_id === activity.activity_uuid) && step.complete === true
) && (
<span className="ml-2 text-gray-400 flex-shrink-0">
<span className="ml-2 text-gray-400 shrink-0">
<Check size={14} />
</span>
)}
@ -638,7 +638,7 @@ function ActivityNavigation(props: {
disabled={!prevActivity}
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
>
<ChevronLeft size={20} className="text-gray-800 flex-shrink-0" />
<ChevronLeft size={20} className="text-gray-800 shrink-0" />
<div className="flex flex-col items-start">
<span className="text-xs text-gray-500">Previous</span>
<span className="text-sm capitalize font-semibold text-left">
@ -663,7 +663,7 @@ function ActivityNavigation(props: {
{nextActivity ? nextActivity.name : 'No next activity'}
</span>
</div>
<ChevronRight size={20} className="text-gray-800 flex-shrink-0" />
<ChevronRight size={20} className="text-gray-800 shrink-0" />
</button>
</>
) : (
@ -680,7 +680,7 @@ function ActivityNavigation(props: {
disabled={!prevActivity}
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
>
<ChevronLeft size={16} className="flex-shrink-0" />
<ChevronLeft size={16} className="shrink-0" />
<div className="flex flex-col items-start">
<span className="text-xs text-gray-500">Previous</span>
<span className="text-sm capitalize font-semibold text-left">
@ -711,7 +711,7 @@ function ActivityNavigation(props: {
{nextActivity ? nextActivity.name : 'No next activity'}
</span>
</div>
<ChevronRight size={16} className="flex-shrink-0" />
<ChevronRight size={16} className="shrink-0" />
</button>
</div>
</>
@ -730,7 +730,7 @@ function ActivityNavigation(props: {
{!isBottomNavVisible && (
<div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[85%] sm:w-auto sm:min-w-[350px] max-w-lg transition-all duration-300 ease-in-out">
<div
className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-sm animate-in fade-in slide-in-from-bottom duration-300"
className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-xs animate-in fade-in slide-in-from-bottom duration-300"
>
<NavigationButtons isFloating={true} />
</div>

2
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
View file

@ -166,7 +166,7 @@ const CourseClient = (props: any) => {
<div key={chapter} className="">
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
<h3 className="grow mr-3 break-words">{chapter.name}</h3>
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap shrink-0">
{chapter.activities.length} Activities
</p>
</div>

4
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/AssignmentTaskGeneralEdit.tsx
View file

@ -209,12 +209,12 @@ function UpdateTaskRef() {
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>
)}

20
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskFileObject.tsx
View file

@ -224,8 +224,8 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
<Link
href={getTaskFileSubmissionDir(org?.org_uuid, assignment.course_object.course_uuid, assignment.activity_object.activity_uuid, assignment.assignment_object.assignment_uuid, assignmentTaskUUID, userSubmissions.fileUUID)}
target='_blank'
className='flex flex-col rounded-lg bg-white text-gray-500 shadow-sm hover:shadow-md transition-shadow border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mx-auto'>
<div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-sm'>
className='flex flex-col rounded-lg bg-white text-gray-500 shadow-xs hover:shadow-md transition-shadow border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mx-auto'>
<div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-xs'>
<Cloud size={14} />
</div>
@ -241,19 +241,19 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
)}
{view === 'student' && (
<>
<div className="w-full bg-white rounded-lg border border-gray-100 min-h-[200px] shadow-sm px-4 sm:px-6 py-5 sm:py-6">
<div className="w-full bg-white rounded-lg border border-gray-100 min-h-[200px] shadow-xs px-4 sm:px-6 py-5 sm:py-6">
<div className="flex flex-col justify-center items-center h-full w-full">
<div className="flex flex-col justify-center items-center w-full max-w-full">
<div className="flex flex-col justify-center items-center w-full">
{error && (
<div className="flex justify-center bg-red-50 border border-red-100 rounded-md text-red-600 space-x-2 items-center p-3 transition-all shadow-sm w-full sm:w-auto mb-4">
<div className="flex justify-center bg-red-50 border border-red-100 rounded-md text-red-600 space-x-2 items-center p-3 transition-all shadow-xs w-full sm:w-auto mb-4">
<div className="text-xs sm:text-sm font-medium">{error}</div>
</div>
)}
</div>
{localUploadFile && !isLoading && (
<div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-sm border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
<div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-sm'>
<div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-xs border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
<div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-xs'>
<Cloud size={14} />
</div>
@ -268,8 +268,8 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
</div>
)}
{userSubmissions.fileUUID && !isLoading && !localUploadFile && (
<div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-sm border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
<div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-sm'>
<div className='flex flex-col rounded-lg bg-white text-gray-500 shadow-xs border border-gray-100 px-4 sm:px-5 py-4 space-y-1 items-center relative w-full sm:w-auto mt-3'>
<div className='absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 bg-emerald-500 rounded-full p-1.5 text-white flex justify-center items-center shadow-xs'>
<Cloud size={14} />
</div>
@ -287,7 +287,7 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
</div>
{!access_token ? (
<div className="flex justify-center items-center w-full mt-5">
<div className="flex justify-center bg-amber-50 border border-amber-100 rounded-md text-amber-600 space-x-2 items-center p-3 transition-all shadow-sm w-full sm:w-auto">
<div className="flex justify-center bg-amber-50 border border-amber-100 rounded-md text-amber-600 space-x-2 items-center p-3 transition-all shadow-xs w-full sm:w-auto">
<Info size={15} className="text-amber-500" />
<div className="text-xs sm:text-sm font-medium">Please sign in to upload files</div>
</div>
@ -314,7 +314,7 @@ export default function TaskFileObject({ view, user_id, assignmentTaskUUID }: Ta
onChange={handleFileChange}
/>
<button
className="font-medium antialiased items-center text-white text-xs sm:text-sm rounded-md px-4 sm:px-5 py-2.5 flex bg-emerald-500 hover:bg-emerald-600 transition-colors shadow-sm"
className="font-medium antialiased items-center text-white text-xs sm:text-sm rounded-md px-4 sm:px-5 py-2.5 flex bg-emerald-500 hover:bg-emerald-600 transition-colors shadow-xs"
onClick={() => document.getElementById("fileInput_" + assignmentTaskUUID)?.click()}
>
<UploadCloud size={15} className="mr-2" />

6
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/Subs/TaskTypes/TaskQuizObject.tsx
View file

@ -346,7 +346,7 @@ function TaskQuizObject({ view, assignmentTaskUUID, user_id }: TaskQuizObjectPro
<div className="flex" key={oIndex}>
<div
onClick={() => view === 'student' && chooseOption(qIndex, oIndex)}
className={"answer outline outline-3 outline-white pr-2 shadow w-full flex items-center space-x-2 h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear nice-shadow " + (view == 'student' ? 'active:scale-110' : '')}
className={"answer outline outline-3 outline-white pr-2 shadow-sm w-full flex items-center space-x-2 h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm duration-150 cursor-pointer ease-linear nice-shadow " + (view == 'student' ? 'active:scale-110' : '')}
>
<div className="font-bold text-base flex items-center h-full w-[40px] rounded-l-md text-slate-800 bg-slate-100/80">
<p className="mx-auto font-bold text-sm">{String.fromCharCode(65 + oIndex)}</p>
@ -459,7 +459,7 @@ function TaskQuizObject({ view, assignmentTaskUUID, user_id }: TaskQuizObjectPro
{view === 'teacher' && oIndex === question.options.length - 1 && questions[qIndex].options.length <= 4 && (
<div className="flex justify-center mx-auto px-2">
<div
className="outline text-xs outline-3 outline-white px-2 shadow w-full flex items-center h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white duration-150 cursor-pointer ease-linear nice-shadow"
className="outline text-xs outline-3 outline-white px-2 shadow-sm w-full flex items-center h-[30px] hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white duration-150 cursor-pointer ease-linear nice-shadow"
onClick={() => addOption(qIndex)}
>
<Plus size={14} className="inline-block" />
@ -476,7 +476,7 @@ function TaskQuizObject({ view, assignmentTaskUUID, user_id }: TaskQuizObjectPro
{view === 'teacher' && questions.length <= 5 && (
<div className="flex justify-center mx-auto px-2">
<div
className="flex w-full my-2 py-2 px-4 bg-white text-slate text-xs rounded-md nice-shadow hover:shadow-sm cursor-pointer space-x-3 items-center transition duration-150 ease-linear"
className="flex w-full my-2 py-2 px-4 bg-white text-slate text-xs rounded-md nice-shadow hover:shadow-xs cursor-pointer space-x-3 items-center transition duration-150 ease-linear"
onClick={addQuestion}
>
<PlusCircle size={14} className="inline-block" />

4
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor/TaskEditor.tsx
View file

@ -58,7 +58,7 @@ function AssignmentTaskEditor({ page }: any) {
<div>
<div
onClick={() => deleteTaskUI()}
className='flex px-2 py-1.5 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-red-800 bg-rose-100 border border-rose-600/10 shadow-rose-900/10 shadow-lg'>
className='flex px-2 py-1.5 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-red-800 bg-rose-100 border border-rose-600/10 shadow-rose-900/10 shadow-lg'>
<Trash size={18} />
<p className='text-xs font-semibold'>Delete Task</p>
</div>
@ -91,7 +91,7 @@ function AssignmentTaskEditor({ page }: any) {
</div>
</div>
</div>
<div className='ml-10 mr-10 mt-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5 nice-shadow'>
<div className='ml-10 mr-10 mt-10 mx-auto bg-white rounded-xl shadow-xs px-6 py-5 nice-shadow'>
{selectedSubPage === 'general' && <AssignmentTaskGeneralEdit />}
{selectedSubPage === 'content' && <AssignmentTaskContentEdit />}
</div>

6
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx
View file

@ -139,7 +139,7 @@ function PublishingState() {
<Link
target='_blank'
href={`/course/${assignment?.course_object?.course_uuid.replace('course_', '')}/activity/${assignment?.activity_object?.activity_uuid.replace('activity_', '')}`}
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-cyan-800 font-medium from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-cyan-900/10 shadow-lg'>
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-cyan-800 font-medium from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-cyan-900/10 shadow-lg'>
<Eye size={18} />
<p className=' text-sm font-bold'>Preview</p>
</Link>
@ -151,7 +151,7 @@ function PublishingState() {
content="Make your Assignment unavailable for students" >
<div
onClick={() => updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)}
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg'>
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg'>
<BookX size={18} />
<p className='text-sm font-bold'>Unpublish</p>
</div>
@ -164,7 +164,7 @@ function PublishingState() {
content="Make your Assignment public and available for students" >
<div
onClick={() => updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)}
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-green-800 font-medium from-green-400/50 to-lime-200/80 border border-green-600/10 shadow-green-900/10 shadow-lg'>
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-green-800 font-medium from-green-400/50 to-lime-200/80 border border-green-600/10 shadow-green-900/10 shadow-lg'>
<BookOpen size={18} />
<p className=' text-sm font-bold'>Publish</p>
</div>

2
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/subpages/AssignmentEditorSubPage.tsx
View file

@ -17,7 +17,7 @@ function AssignmentEditorSubPage({ assignmentuuid }: { assignmentuuid: string })
</div>
<AssignmentTasks assignment_uuid={'assignment_' + assignmentuuid} />
</div>
<div className='flex flex-grow bg-[#fefcfe] nice-shadow h-full w-full'>
<div className='flex grow bg-[#fefcfe] nice-shadow h-full w-full'>
<AssignmentProvider assignment_uuid={'assignment_' + assignmentuuid}>
<AssignmentTaskEditor page='general' />
</AssignmentProvider>

2
apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
View file

@ -23,7 +23,7 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
}
return (
<div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto,1fr]">
<div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto_1fr]">
<CourseProvider courseuuid={getEntireCourseUUID(params.courseuuid)}>
<div className="pl-10 pr-10 text-sm tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
<CourseOverviewTop params={params} />

34
apps/web/app/orgs/[orgslug]/dash/page.tsx
View file

@ -17,55 +17,55 @@ function DashboardHome() {
/>
</div>
<AdminAuthorization authorizationMode="component">
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 lg:space-x-10">
<div className="flex flex-col sm:flex-row gap-4 lg:gap-10">
{/* Card components */}
<DashboardCard
href="/dash/courses"
icon={<BookCopy className="mx-auto text-gray-500" size={50} />}
icon={<BookCopy className="mx-auto text-gray-500/100" size={50} />}
title="Courses"
description="Create and manage courses, chapters and activities"
/>
<DashboardCard
href="/dash/org/settings/general"
icon={<School className="mx-auto text-gray-500" size={50} />}
icon={<School className="mx-auto text-gray-500/100" size={50} />}
title="Organization"
description="Configure your Organization general settings"
/>
<DashboardCard
href="/dash/users/settings/users"
icon={<Users className="mx-auto text-gray-500" size={50} />}
icon={<Users className="mx-auto text-gray-500/100" size={50} />}
title="Users"
description="Manage your Organization's users, roles"
/>
</div>
</AdminAuthorization>
<div className="flex flex-col space-y-6 sm:space-y-10 mt-6 sm:mt-10">
<div className="flex flex-col gap-6 sm:gap-10 mt-6 sm:mt-10">
<AdminAuthorization authorizationMode="component">
<div className="h-1 w-[100px] bg-neutral-200 rounded-full mx-auto"></div>
<div className="h-1 w-[100px] bg-neutral-200/100 rounded-full mx-auto"></div>
<div className="flex justify-center items-center">
<Link
href={'https://university.learnhouse.io/'}
target='_blank'
className="flex mt-4 sm:mt-[40px] bg-black space-x-2 items-center py-3 px-7 rounded-lg shadow-lg hover:scale-105 transition-all ease-linear cursor-pointer"
className="flex mt-4 sm:mt-[40px] bg-black gap-2 items-center py-3 px-7 rounded-lg shadow-lg hover:scale-105 transition-all ease-linear cursor-pointer"
>
<University className="text-gray-100" size={20} />
<div className="text-sm font-bold text-gray-100">
<University className="text-gray-100/100" size={20} />
<div className="text-sm font-bold text-gray-100/100">
LearnHouse University
</div>
</Link>
</div>
<div className="mx-auto mt-4 sm:mt-[40px] w-28 h-1 bg-neutral-200 rounded-full"></div>
<div className="mx-auto mt-4 sm:mt-[40px] w-28 h-1 bg-neutral-200/100 rounded-full"></div>
</AdminAuthorization>
<Link
href={'/dash/user-account/settings/general'}
className="flex bg-white shadow-lg p-4 items-center rounded-lg mx-auto hover:scale-105 transition-all ease-linear cursor-pointer max-w-md"
>
<div className="flex flex-col sm:flex-row mx-auto space-y-2 sm:space-y-0 sm:space-x-3 items-center text-center sm:text-left">
<Settings className="text-gray-500" size={20} />
<div className="flex flex-col sm:flex-row mx-auto gap-2 sm:gap-3 items-center text-center sm:text-left">
<Settings className="text-gray-500/100" size={20} />
<div>
<div className="font-bold text-gray-500">Account Settings</div>
<p className="text-sm text-gray-400">
<div className="font-bold text-gray-500/100">Account Settings</div>
<p className="text-sm text-gray-400/100">
Configure your personal settings, passwords, email
</p>
</div>
@ -83,10 +83,10 @@ function DashboardCard({ href, icon, title, description }: { href: string, icon:
href={href}
className="flex bg-white shadow-lg p-6 w-full sm:w-[250px] rounded-lg items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
>
<div className="flex flex-col mx-auto space-y-2">
<div className="flex flex-col mx-auto gap-2">
{icon}
<div className="text-center font-bold text-gray-500">{title}</div>
<p className="text-center text-sm text-gray-400">{description}</p>
<div className="text-center font-bold text-gray-500/100">{title}</div>
<p className="text-center text-sm text-gray-400/100">{description}</p>
</div>
</Link>
)

2
apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx
View file

@ -63,7 +63,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
}
return (
<div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto,1fr]">
<div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto_1fr]">
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
<BreadCrumbs type="orgusers"></BreadCrumbs>
<div className="my-2 py-3">

3
apps/web/components.json
View file

@ -16,5 +16,6 @@
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
},
"iconLibrary": "lucide"
}

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",
},

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

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

4
apps/web/package.json
View file

@ -85,6 +85,7 @@
"yup": "^1.4.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.0.12",
"@types/node": "20.12.2",
"@types/react": "18.2.74",
"@types/react-beautiful-dnd": "^13.1.8",
@ -93,12 +94,11 @@
"@types/react-transition-group": "^4.4.11",
"@types/styled-components": "^5.1.34",
"@types/uuid": "^9.0.8",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.1",
"eslint-config-next": "^14.2.16",
"eslint-plugin-unused-imports": "^3.2.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.14",
"tailwindcss": "^4.0.12",
"typescript": "5.4.4"
}
}

498
apps/web/pnpm-lock.yaml generated
View file

@ -208,10 +208,10 @@ importers:
version: 2.5.4
tailwind-scrollbar:
specifier: ^3.1.0
version: 3.1.0(tailwindcss@3.4.14)
version: 3.1.0(tailwindcss@4.0.12)
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.14)
version: 1.0.7(tailwindcss@4.0.12)
unsplash-js:
specifier: ^7.0.19
version: 7.0.19
@ -225,6 +225,9 @@ importers:
specifier: ^1.4.0
version: 1.4.0
devDependencies:
'@tailwindcss/postcss':
specifier: ^4.0.12
version: 4.0.12
'@types/node':
specifier: 20.12.2
version: 20.12.2
@ -249,9 +252,6 @@ importers:
'@types/uuid':
specifier: ^9.0.8
version: 9.0.8
autoprefixer:
specifier: ^10.4.20
version: 10.4.20(postcss@8.4.47)
eslint:
specifier: ^8.57.1
version: 8.57.1
@ -265,8 +265,8 @@ importers:
specifier: ^8.4.47
version: 8.4.47
tailwindcss:
specifier: ^3.4.14
version: 3.4.14
specifier: ^4.0.12
version: 4.0.12
typescript:
specifier: 5.4.4
version: 5.4.4
@ -1971,6 +1971,82 @@ packages:
'@swc/helpers@0.5.5':
resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
'@tailwindcss/node@4.0.12':
resolution: {integrity: sha512-a6J11K1Ztdln9OrGfoM75/hChYPcHYGNYimqciMrvKXRmmPaS8XZTHhdvb5a3glz4Kd4ZxE1MnuFE2c0fGGmtg==}
'@tailwindcss/oxide-android-arm64@4.0.12':
resolution: {integrity: sha512-dAXCaemu3mHLXcA5GwGlQynX8n7tTdvn5i1zAxRvZ5iC9fWLl5bGnjZnzrQqT7ttxCvRwdVf3IHUnMVdDBO/kQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
'@tailwindcss/oxide-darwin-arm64@4.0.12':
resolution: {integrity: sha512-vPNI+TpJQ7sizselDXIJdYkx9Cu6JBdtmRWujw9pVIxW8uz3O2PjgGGzL/7A0sXI8XDjSyRChrUnEW9rQygmJQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@tailwindcss/oxide-darwin-x64@4.0.12':
resolution: {integrity: sha512-RL/9jM41Fdq4Efr35C5wgLx98BirnrfwuD+zgMFK6Ir68HeOSqBhW9jsEeC7Y/JcGyPd3MEoJVIU4fAb7YLg7A==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@tailwindcss/oxide-freebsd-x64@4.0.12':
resolution: {integrity: sha512-7WzWiax+LguJcMEimY0Q4sBLlFXu1tYxVka3+G2M9KmU/3m84J3jAIV4KZWnockbHsbb2XgrEjtlJKVwHQCoRA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [freebsd]
'@tailwindcss/oxide-linux-arm-gnueabihf@4.0.12':
resolution: {integrity: sha512-X9LRC7jjE1QlfIaBbXjY0PGeQP87lz5mEfLSVs2J1yRc9PSg1tEPS9NBqY4BU9v5toZgJgzKeaNltORyTs22TQ==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
'@tailwindcss/oxide-linux-arm64-gnu@4.0.12':
resolution: {integrity: sha512-i24IFNq2402zfDdoWKypXz0ZNS2G4NKaA82tgBlE2OhHIE+4mg2JDb5wVfyP6R+MCm5grgXvurcIcKWvo44QiQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tailwindcss/oxide-linux-arm64-musl@4.0.12':
resolution: {integrity: sha512-LmOdshJBfAGIBG0DdBWhI0n5LTMurnGGJCHcsm9F//ISfsHtCnnYIKgYQui5oOz1SUCkqsMGfkAzWyNKZqbGNw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tailwindcss/oxide-linux-x64-gnu@4.0.12':
resolution: {integrity: sha512-OSK667qZRH30ep8RiHbZDQfqkXjnzKxdn0oRwWzgCO8CoTxV+MvIkd0BWdQbYtYuM1wrakARV/Hwp0eA/qzdbw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tailwindcss/oxide-linux-x64-musl@4.0.12':
resolution: {integrity: sha512-uylhWq6OWQ8krV8Jk+v0H/3AZKJW6xYMgNMyNnUbbYXWi7hIVdxRKNUB5UvrlC3RxtgsK5EAV2i1CWTRsNcAnA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tailwindcss/oxide-win32-arm64-msvc@4.0.12':
resolution: {integrity: sha512-XDLnhMoXZEEOir1LK43/gHHwK84V1GlV8+pAncUAIN2wloeD+nNciI9WRIY/BeFTqES22DhTIGoilSO39xDb2g==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@tailwindcss/oxide-win32-x64-msvc@4.0.12':
resolution: {integrity: sha512-I/BbjCLpKDQucvtn6rFuYLst1nfFwSMYyPzkx/095RE+tuzk5+fwXuzQh7T3fIBTcbn82qH/sFka7yPGA50tLw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
'@tailwindcss/oxide@4.0.12':
resolution: {integrity: sha512-DWb+myvJB9xJwelwT9GHaMc1qJj6MDXRDR0CS+T8IdkejAtu8ctJAgV4r1drQJLPeS7mNwq2UHW2GWrudTf63A==}
engines: {node: '>= 10'}
'@tailwindcss/postcss@4.0.12':
resolution: {integrity: sha512-r59Sdr8djCW4dL3kvc4aWU8PHdUAVM3O3te2nbYzXsWwKLlHPCuUoZAc9FafXb/YyNDZOMI7sTbKTKFmwOrMjw==}
'@tanstack/react-table@8.20.5':
resolution: {integrity: sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==}
engines: {node: '>=12'}
@ -2421,9 +2497,6 @@ packages:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'}
arg@5.0.2:
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
argparse@2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@ -2478,13 +2551,6 @@ packages:
ast-types-flow@0.0.8:
resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
autoprefixer@10.4.20:
resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
engines: {node: ^10 || ^12 || >=14}
hasBin: true
peerDependencies:
postcss: ^8.1.0
available-typed-arrays@1.0.7:
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
engines: {node: '>= 0.4'}
@ -2520,11 +2586,6 @@ packages:
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
engines: {node: '>=8'}
browserslist@4.24.2:
resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
browserslist@4.24.4:
resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@ -2555,10 +2616,6 @@ packages:
resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
engines: {node: '>=6'}
camelcase-css@2.0.1:
resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
engines: {node: '>= 6'}
camelize@1.0.1:
resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
@ -2669,11 +2726,6 @@ packages:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'}
cssesc@3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
hasBin: true
csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
@ -2761,16 +2813,10 @@ packages:
devlop@1.1.0:
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
didyoumean@1.2.2:
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
dir-glob@3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
engines: {node: '>=8'}
dlv@1.1.3:
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
doctrine@2.1.0:
resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
engines: {node: '>=0.10.0'}
@ -2792,9 +2838,6 @@ packages:
electron-to-chromium@1.5.102:
resolution: {integrity: sha512-eHhqaja8tE/FNpIiBrvBjFV/SSKpyWHLvxuR9dPTdo+3V9ppdLmFB7ZZQ98qNovcngPLYIz0oOBF9P0FfZef5Q==}
electron-to-chromium@1.5.49:
resolution: {integrity: sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==}
emblor@1.4.7:
resolution: {integrity: sha512-sFrZ96ALdRwsoiWM/fZ2liM6z4CF4iOqPMwi72wDlFm9nIP4wUN01f7dSajrT+L4FAbUf3+e73UWtWXzAOj8zQ==}
peerDependencies:
@ -3078,9 +3121,6 @@ packages:
forwarded-parse@2.1.2:
resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
fraction.js@4.3.7:
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
framer-motion@10.18.0:
resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
peerDependencies:
@ -3415,8 +3455,8 @@ packages:
resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
engines: {node: '>= 10.13.0'}
jiti@1.21.6:
resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
jiti@2.4.2:
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
hasBin: true
jose@4.15.9:
@ -3484,14 +3524,74 @@ packages:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'}
lightningcss-darwin-arm64@1.29.2:
resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [darwin]
lightningcss-darwin-x64@1.29.2:
resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [darwin]
lightningcss-freebsd-x64@1.29.2:
resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [freebsd]
lightningcss-linux-arm-gnueabihf@1.29.2:
resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
engines: {node: '>= 12.0.0'}
cpu: [arm]
os: [linux]
lightningcss-linux-arm64-gnu@1.29.2:
resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-arm64-musl@1.29.2:
resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-x64-gnu@1.29.2:
resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-linux-x64-musl@1.29.2:
resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-win32-arm64-msvc@1.29.2:
resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [win32]
lightningcss-win32-x64-msvc@1.29.2:
resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [win32]
lightningcss@1.29.2:
resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
engines: {node: '>= 12.0.0'}
lilconfig@2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
lilconfig@3.1.2:
resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
engines: {node: '>=14'}
lines-and-columns@1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@ -3683,9 +3783,6 @@ packages:
encoding:
optional: true
node-releases@2.0.18:
resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
node-releases@2.0.19:
resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
@ -3693,10 +3790,6 @@ packages:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
normalize-range@0.1.2:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
engines: {node: '>=0.10.0'}
npm-run-path@4.0.1:
resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
engines: {node: '>=8'}
@ -3718,10 +3811,6 @@ packages:
resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
engines: {node: '>= 6'}
object-hash@3.0.0:
resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
engines: {node: '>= 6'}
object-inspect@1.13.2:
resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
engines: {node: '>= 0.4'}
@ -3831,10 +3920,6 @@ packages:
resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
engines: {node: '>=12'}
pify@2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
engines: {node: '>=0.10.0'}
pirates@4.0.6:
resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
engines: {node: '>= 6'}
@ -3843,18 +3928,6 @@ packages:
resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
engines: {node: '>= 0.4'}
postcss-import@15.1.0:
resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
engines: {node: '>=14.0.0'}
peerDependencies:
postcss: ^8.0.0
postcss-js@4.0.1:
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
engines: {node: ^12 || ^14 || >= 16}
peerDependencies:
postcss: ^8.4.21
postcss-load-config@3.1.4:
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
engines: {node: '>= 10'}
@ -3867,28 +3940,6 @@ packages:
ts-node:
optional: true
postcss-load-config@4.0.2:
resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
engines: {node: '>= 14'}
peerDependencies:
postcss: '>=8.0.9'
ts-node: '>=9.0.0'
peerDependenciesMeta:
postcss:
optional: true
ts-node:
optional: true
postcss-nested@6.2.0:
resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.2.14
postcss-selector-parser@6.1.2:
resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
engines: {node: '>=4'}
postcss-value-parser@4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
@ -4187,9 +4238,6 @@ packages:
resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
engines: {node: '>=0.10.0'}
read-cache@1.0.0:
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
readdirp@3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
@ -4481,10 +4529,8 @@ packages:
peerDependencies:
tailwindcss: '>=3.0.0 || insiders'
tailwindcss@3.4.14:
resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
engines: {node: '>=14.0.0'}
hasBin: true
tailwindcss@4.0.12:
resolution: {integrity: sha512-bT0hJo91FtncsAMSsMzUkoo/iEU0Xs5xgFgVC9XmdM9bw5MhZuQFjPNl6wxAE0SiQF/YTZJa+PndGWYSDtuxAg==}
tapable@2.2.1:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@ -4643,12 +4689,6 @@ packages:
resolution: {integrity: sha512-j6qT2floy5Q2g2d939FJpwey1yw/GpQecFiSouyJtsHQPj3oqmqq3K4rI+GF8vU1zwGCT7ZwIGQd2dtCQLjYJw==}
engines: {node: '>=10'}
update-browserslist-db@1.1.1:
resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
hasBin: true
peerDependencies:
browserslist: '>= 4.21.0'
update-browserslist-db@1.1.2:
resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
hasBin: true
@ -4714,9 +4754,6 @@ packages:
peerDependencies:
react: ^16.8.0 || ^17 || ^18
util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
uuid@8.3.2:
resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
hasBin: true
@ -4810,11 +4847,6 @@ packages:
resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
engines: {node: '>= 6'}
yaml@2.6.0:
resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
engines: {node: '>= 14'}
hasBin: true
yocto-queue@0.1.0:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
@ -6589,6 +6621,68 @@ snapshots:
'@swc/counter': 0.1.3
tslib: 2.8.0
'@tailwindcss/node@4.0.12':
dependencies:
enhanced-resolve: 5.18.1
jiti: 2.4.2
tailwindcss: 4.0.12
'@tailwindcss/oxide-android-arm64@4.0.12':
optional: true
'@tailwindcss/oxide-darwin-arm64@4.0.12':
optional: true
'@tailwindcss/oxide-darwin-x64@4.0.12':
optional: true
'@tailwindcss/oxide-freebsd-x64@4.0.12':
optional: true
'@tailwindcss/oxide-linux-arm-gnueabihf@4.0.12':
optional: true
'@tailwindcss/oxide-linux-arm64-gnu@4.0.12':
optional: true
'@tailwindcss/oxide-linux-arm64-musl@4.0.12':
optional: true
'@tailwindcss/oxide-linux-x64-gnu@4.0.12':
optional: true
'@tailwindcss/oxide-linux-x64-musl@4.0.12':
optional: true
'@tailwindcss/oxide-win32-arm64-msvc@4.0.12':
optional: true
'@tailwindcss/oxide-win32-x64-msvc@4.0.12':
optional: true
'@tailwindcss/oxide@4.0.12':
optionalDependencies:
'@tailwindcss/oxide-android-arm64': 4.0.12
'@tailwindcss/oxide-darwin-arm64': 4.0.12
'@tailwindcss/oxide-darwin-x64': 4.0.12
'@tailwindcss/oxide-freebsd-x64': 4.0.12
'@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.12
'@tailwindcss/oxide-linux-arm64-gnu': 4.0.12
'@tailwindcss/oxide-linux-arm64-musl': 4.0.12
'@tailwindcss/oxide-linux-x64-gnu': 4.0.12
'@tailwindcss/oxide-linux-x64-musl': 4.0.12
'@tailwindcss/oxide-win32-arm64-msvc': 4.0.12
'@tailwindcss/oxide-win32-x64-msvc': 4.0.12
'@tailwindcss/postcss@4.0.12':
dependencies:
'@alloc/quick-lru': 5.2.0
'@tailwindcss/node': 4.0.12
'@tailwindcss/oxide': 4.0.12
lightningcss: 1.29.2
postcss: 8.4.47
tailwindcss: 4.0.12
'@tanstack/react-table@8.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@tanstack/table-core': 8.20.5
@ -7113,8 +7207,6 @@ snapshots:
normalize-path: 3.0.0
picomatch: 2.3.1
arg@5.0.2: {}
argparse@2.0.1: {}
aria-hidden@1.2.4:
@ -7194,16 +7286,6 @@ snapshots:
ast-types-flow@0.0.8: {}
autoprefixer@10.4.20(postcss@8.4.47):
dependencies:
browserslist: 4.24.2
caniuse-lite: 1.0.30001675
fraction.js: 4.3.7
normalize-range: 0.1.2
picocolors: 1.1.1
postcss: 8.4.47
postcss-value-parser: 4.2.0
available-typed-arrays@1.0.7:
dependencies:
possible-typed-array-names: 1.0.0
@ -7237,13 +7319,6 @@ snapshots:
dependencies:
fill-range: 7.1.1
browserslist@4.24.2:
dependencies:
caniuse-lite: 1.0.30001675
electron-to-chromium: 1.5.49
node-releases: 2.0.18
update-browserslist-db: 1.1.1(browserslist@4.24.2)
browserslist@4.24.4:
dependencies:
caniuse-lite: 1.0.30001700
@ -7274,8 +7349,6 @@ snapshots:
callsites@3.1.0: {}
camelcase-css@2.0.1: {}
camelize@1.0.1: {}
caniuse-lite@1.0.30001675: {}
@ -7382,8 +7455,6 @@ snapshots:
css-what@6.1.0: {}
cssesc@3.0.0: {}
csstype@3.1.3: {}
currency-codes@2.2.0:
@ -7455,14 +7526,10 @@ snapshots:
dependencies:
dequal: 2.0.3
didyoumean@1.2.2: {}
dir-glob@3.0.1:
dependencies:
path-type: 4.0.0
dlv@1.1.3: {}
doctrine@2.1.0:
dependencies:
esutils: 2.0.3
@ -7481,8 +7548,6 @@ snapshots:
electron-to-chromium@1.5.102: {}
electron-to-chromium@1.5.49: {}
emblor@1.4.7(@types/react-dom@18.2.23)(@types/react@18.2.74)(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.4.4):
dependencies:
'@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -7948,8 +8013,6 @@ snapshots:
forwarded-parse@2.1.2: {}
fraction.js@4.3.7: {}
framer-motion@10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
tslib: 2.8.0
@ -8289,7 +8352,7 @@ snapshots:
merge-stream: 2.0.0
supports-color: 8.1.1
jiti@1.21.6: {}
jiti@2.4.2: {}
jose@4.15.9: {}
@ -8345,9 +8408,52 @@ snapshots:
prelude-ls: 1.2.1
type-check: 0.4.0
lilconfig@2.1.0: {}
lightningcss-darwin-arm64@1.29.2:
optional: true
lilconfig@3.1.2: {}
lightningcss-darwin-x64@1.29.2:
optional: true
lightningcss-freebsd-x64@1.29.2:
optional: true
lightningcss-linux-arm-gnueabihf@1.29.2:
optional: true
lightningcss-linux-arm64-gnu@1.29.2:
optional: true
lightningcss-linux-arm64-musl@1.29.2:
optional: true
lightningcss-linux-x64-gnu@1.29.2:
optional: true
lightningcss-linux-x64-musl@1.29.2:
optional: true
lightningcss-win32-arm64-msvc@1.29.2:
optional: true
lightningcss-win32-x64-msvc@1.29.2:
optional: true
lightningcss@1.29.2:
dependencies:
detect-libc: 2.0.3
optionalDependencies:
lightningcss-darwin-arm64: 1.29.2
lightningcss-darwin-x64: 1.29.2
lightningcss-freebsd-x64: 1.29.2
lightningcss-linux-arm-gnueabihf: 1.29.2
lightningcss-linux-arm64-gnu: 1.29.2
lightningcss-linux-arm64-musl: 1.29.2
lightningcss-linux-x64-gnu: 1.29.2
lightningcss-linux-x64-musl: 1.29.2
lightningcss-win32-arm64-msvc: 1.29.2
lightningcss-win32-x64-msvc: 1.29.2
lilconfig@2.1.0: {}
lines-and-columns@1.2.4: {}
@ -8526,14 +8632,10 @@ snapshots:
dependencies:
whatwg-url: 5.0.0
node-releases@2.0.18: {}
node-releases@2.0.19: {}
normalize-path@3.0.0: {}
normalize-range@0.1.2: {}
npm-run-path@4.0.1:
dependencies:
path-key: 3.1.1
@ -8548,8 +8650,6 @@ snapshots:
object-hash@2.2.0: {}
object-hash@3.0.0: {}
object-inspect@1.13.2: {}
object-keys@1.1.1: {}
@ -8661,24 +8761,10 @@ snapshots:
picomatch@4.0.2: {}
pify@2.3.0: {}
pirates@4.0.6: {}
possible-typed-array-names@1.0.0: {}
postcss-import@15.1.0(postcss@8.4.47):
dependencies:
postcss: 8.4.47
postcss-value-parser: 4.2.0
read-cache: 1.0.0
resolve: 1.22.8
postcss-js@4.0.1(postcss@8.4.47):
dependencies:
camelcase-css: 2.0.1
postcss: 8.4.47
postcss-load-config@3.1.4(postcss@8.4.47):
dependencies:
lilconfig: 2.1.0
@ -8686,23 +8772,6 @@ snapshots:
optionalDependencies:
postcss: 8.4.47
postcss-load-config@4.0.2(postcss@8.4.47):
dependencies:
lilconfig: 3.1.2
yaml: 2.6.0
optionalDependencies:
postcss: 8.4.47
postcss-nested@6.2.0(postcss@8.4.47):
dependencies:
postcss: 8.4.47
postcss-selector-parser: 6.1.2
postcss-selector-parser@6.1.2:
dependencies:
cssesc: 3.0.0
util-deprecate: 1.0.2
postcss-value-parser@4.2.0: {}
postcss@8.4.31:
@ -9037,10 +9106,6 @@ snapshots:
dependencies:
loose-envify: 1.4.0
read-cache@1.0.0:
dependencies:
pify: 2.3.0
readdirp@3.6.0:
dependencies:
picomatch: 2.3.1
@ -9374,40 +9439,15 @@ snapshots:
tailwind-merge@3.0.2: {}
tailwind-scrollbar@3.1.0(tailwindcss@3.4.14):
tailwind-scrollbar@3.1.0(tailwindcss@4.0.12):
dependencies:
tailwindcss: 3.4.14
tailwindcss: 4.0.12
tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
tailwindcss-animate@1.0.7(tailwindcss@4.0.12):
dependencies:
tailwindcss: 3.4.14
tailwindcss: 4.0.12
tailwindcss@3.4.14:
dependencies:
'@alloc/quick-lru': 5.2.0
arg: 5.0.2
chokidar: 3.6.0
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.3.2
glob-parent: 6.0.2
is-glob: 4.0.3
jiti: 1.21.6
lilconfig: 2.1.0
micromatch: 4.0.8
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.1.1
postcss: 8.4.47
postcss-import: 15.1.0(postcss@8.4.47)
postcss-js: 4.0.1(postcss@8.4.47)
postcss-load-config: 4.0.2(postcss@8.4.47)
postcss-nested: 6.2.0(postcss@8.4.47)
postcss-selector-parser: 6.1.2
resolve: 1.22.8
sucrase: 3.35.0
transitivePeerDependencies:
- ts-node
tailwindcss@4.0.12: {}
tapable@2.2.1: {}
@ -9571,12 +9611,6 @@ snapshots:
unsplash-js@7.0.19: {}
update-browserslist-db@1.1.1(browserslist@4.24.2):
dependencies:
browserslist: 4.24.2
escalade: 3.2.0
picocolors: 1.1.1
update-browserslist-db@1.1.2(browserslist@4.24.4):
dependencies:
browserslist: 4.24.4
@ -9630,8 +9664,6 @@ snapshots:
lodash.debounce: 4.0.8
react: 18.3.1
util-deprecate@1.0.2: {}
uuid@8.3.2: {}
uuid@9.0.1: {}
@ -9758,8 +9790,6 @@ snapshots:
yaml@1.10.2: {}
yaml@2.6.0: {}
yocto-queue@0.1.0: {}
youtube-player@5.5.2:

3
apps/web/postcss.config.js
View file

@ -1,6 +1,5 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
}

110
apps/web/styles/globals.css
View file

@ -1,24 +1,89 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap')
layer(base);
/*
---break---
*/
@plugin 'tailwindcss-animate';
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
@import 'tailwindcss';
@tailwind base;
@tailwind components;
@tailwind utilities;
@custom-variant dark (&:is(.dark *));
@theme {
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
@layer utilities {
.nice-shadow {
@apply shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40
@apply shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40;
}
.light-shadow {
@apply shadow-lg shadow-gray-300/15 outline outline-1 outline-neutral-200/30
@apply shadow-lg shadow-gray-300/15 outline outline-1 outline-neutral-200/30;
}
.custom-dots-bg {
@apply bg-fixed;
background-image: radial-gradient(#4744446b 1px, transparent 1px),
background-image:
radial-gradient(#4744446b 1px, transparent 1px),
radial-gradient(#4744446b 1px, transparent 1px);
background-position: 0 0, 25px 25px;
background-position:
0 0,
25px 25px;
background-size: 50px 50px;
background-repeat: repeat;
}
@ -28,7 +93,19 @@ body {
padding: 0;
margin: 0;
transition: all 0.2s ease;
font-family: 'DM Sans' , -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
'DM Sans',
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
a {
@ -41,10 +118,9 @@ a {
}
@media (prefers-color-scheme: dark) {
body {
color: black;
background: #FBFBFB;
background: #fbfbfb;
}
}
@ -86,7 +162,6 @@ a {
white-space: nowrap;
}
.fade-enter {
opacity: 0;
transform: translateY(-20px);
@ -95,7 +170,9 @@ a {
.fade-enter-active {
opacity: 1;
transform: translateY(0);
transition: opacity 300ms, transform 300ms;
transition:
opacity 300ms,
transform 300ms;
}
.fade-exit {
@ -106,7 +183,10 @@ a {
.fade-exit-active {
opacity: 0;
transform: translateY(-20px);
transition: opacity 300ms, transform 300ms;
transition:
opacity 300ms,
transform 300ms;
}
}
@layer base {

140
apps/web/tailwind.config.js
View file

@ -1,64 +1,106 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
darkMode: ["class"],
content: [
'./app/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
}
}
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
plugins: [
require('tailwind-scrollbar')({ nocompatible: true }),
require("tailwindcss-animate")
],
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
"fade-in": {
from: { opacity: "0" },
to: { opacity: "1" },
},
"fade-out": {
from: { opacity: "1" },
to: { opacity: "0" },
},
"zoom-in": {
from: { transform: "scale(0.95)" },
to: { transform: "scale(1)" },
},
"zoom-out": {
from: { transform: "scale(1)" },
to: { transform: "scale(0.95)" },
},
"slide-in-from-top": {
from: { transform: "translateY(-100%)" },
to: { transform: "translateY(0)" },
},
"slide-in-from-bottom": {
from: { transform: "translateY(100%)" },
to: { transform: "translateY(0)" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"fade-in": "fade-in 0.2s ease-out",
"fade-out": "fade-out 0.2s ease-out",
"zoom-in": "zoom-in 0.2s ease-out",
"zoom-out": "zoom-out 0.2s ease-out",
"slide-in-from-top": "slide-in-from-top 0.2s ease-out",
"slide-in-from-bottom": "slide-in-from-bottom 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}