chore(icons): change heroicons from v1 to v2 (#95)

apps/site/components/overview/author.tsx

@@ -1,4 +1,4 @@
-import { CogIcon, PencilIcon, PlusIcon } from "@heroicons/react/solid";
+import { CogIcon, PencilIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { database } from "@self-learning/database";
 import {

apps/site/components/overview/student.tsx

@@ -16,7 +16,7 @@ import { LabeledField } from "@self-learning/ui/forms";
 import { useState } from "react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
-import { CogIcon } from "@heroicons/react/solid";
+import { CogIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { TRPCClientError } from "@trpc/client";
 import { useRouter } from "next/router";

apps/site/pages/admin/authors.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { SearchUserDialog, EditAuthorDialog } from "@self-learning/admin";
 import { trpc } from "@self-learning/api-client";
 import {

apps/site/pages/admin/courses.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import {
 	ImageOrPlaceholder,

apps/site/pages/admin/lessons.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { Paginator, Table, TableDataColumn, TableHeaderColumn } from "@self-learning/ui/common";
 import { SearchField } from "@self-learning/ui/forms";

apps/site/pages/admin/licenses.tsx

@@ -1,4 +1,4 @@
-import { BadgeCheckIcon, BanIcon, PlusIcon } from "@heroicons/react/solid";
+import { CheckBadgeIcon, NoSymbolIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { CreateLicenseDialog, EditLicenseDialog } from "@self-learning/admin";
 import { trpc } from "@self-learning/api-client";
 import {
@@ -7,15 +7,15 @@ import {
 	LoadingBox,
 	Table,
 	TableDataColumn,
-	TableHeaderColumn
+	TableHeaderColumn,
+	Tooltip
 } from "@self-learning/ui/common";
 import { SearchField } from "@self-learning/ui/forms";
 import { AdminGuard, CenteredSection, useRequiredSession } from "@self-learning/ui/layouts";
 import { Fragment, useMemo, useState } from "react";
 import { License } from "@self-learning/types";
 import Link from "next/link";
-import { ShareIcon } from "@heroicons/react/outline";
-import Tooltip from "../../../../libs/ui/common/src/lib/tooltip/tooltips";
+import { ShareIcon } from "@heroicons/react/24/outline";
 
 export default function LicensesPage() {
 	useRequiredSession();
@@ -152,7 +152,7 @@ function LicenseFeatureIcons({
 		<>
 			{defaultSuggestion && (
 				<Tooltip title="Standard Lizenz">
-					<BadgeCheckIcon className="icon h-5" />
+					<CheckBadgeIcon className="icon h-5" />
 				</Tooltip>
 			)}
 			{oerCompatible && (
@@ -162,7 +162,7 @@ function LicenseFeatureIcons({
 			)}
 			{!selectable && (
 				<Tooltip title="Lizenz ist nicht in neuen Lerneinheiten auswählbar.">
-					<BanIcon className="icon h-5" />
+					<NoSymbolIcon className="icon h-5" />
 				</Tooltip>
 			)}
 		</>

apps/site/pages/admin/subjects.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { AuthorChip, ImageOrPlaceholder, LoadingBox } from "@self-learning/ui/common";
 import { AdminGuard, CenteredSection, useRequiredSession } from "@self-learning/ui/layouts";

apps/site/pages/courses/[courseSlug]/[lessonSlug]/index.tsx

@@ -1,4 +1,4 @@
-import { CheckCircleIcon, PlayIcon } from "@heroicons/react/solid";
+import { CheckCircleIcon, PlayIcon } from "@heroicons/react/24/solid";
 import { LessonType } from "@prisma/client";
 import { trpc } from "@self-learning/api-client";
 import { useCourseCompletion, useMarkAsCompleted } from "@self-learning/completion";

apps/site/pages/courses/[courseSlug]/[lessonSlug]/quiz.tsx

@@ -1,5 +1,8 @@
-import { CheckCircleIcon as CheckCircleIconOutline, XCircleIcon } from "@heroicons/react/outline";
-import { CheckCircleIcon, PlayIcon, RefreshIcon } from "@heroicons/react/solid";
+import {
+	CheckCircleIcon as CheckCircleIconOutline,
+	XCircleIcon
+} from "@heroicons/react/24/outline";
+import { CheckCircleIcon, PlayIcon, ArrowPathIcon } from "@heroicons/react/24/solid";
 import { LessonType } from "@prisma/client";
 import { useMarkAsCompleted } from "@self-learning/completion";
 import {
@@ -372,7 +375,7 @@ function QuizFailedDialog({
 			<DialogActions onClose={onClose}>
 				<button className="btn-primary" onClick={reload}>
 					<span>Erneut probieren</span>
-					<RefreshIcon className="h-5 shrink-0" />
+					<ArrowPathIcon className="h-5 shrink-0" />
 				</button>
 			</DialogActions>
 		</Dialog>

apps/site/pages/courses/[courseSlug]/index.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useMemo } from "react";
 
-import { PlayIcon, PlusCircleIcon } from "@heroicons/react/solid";
+import { PlayIcon, PlusCircleIcon } from "@heroicons/react/24/solid";
 import { useCourseCompletion } from "@self-learning/completion";
 import { database } from "@self-learning/database";
 import { useEnrollmentMutations, useEnrollments } from "@self-learning/enrollment";

apps/site/pages/learning-diary.tsx

@@ -1,4 +1,4 @@
-import { ArrowCircleRightIcon } from "@heroicons/react/outline";
+import { ArrowRightCircleIcon } from "@heroicons/react/24/outline";
 import { authOptions } from "@self-learning/api";
 import { trpc } from "@self-learning/api-client";
 import { database } from "@self-learning/database";
@@ -123,7 +123,7 @@ export default function LearningDiary({ completedLessons, goals }: LearningDiary
 				<section className="flex justify-end">
 					<button className="flex flex-col items-end gap-2 text-sm text-light">
 						<span className="font-medium">Vorherige Woche anzeigen</span>
-						<ArrowCircleRightIcon className="h-6" />
+						<ArrowRightCircleIcon className="h-6" />
 					</button>
 				</section>
 			</section>

apps/site/pages/subjects/[subjectSlug]/[specializationSlug].tsx

@@ -1,4 +1,4 @@
-import { PuzzleIcon } from "@heroicons/react/solid";
+import { PuzzlePieceIcon } from "@heroicons/react/24/solid";
 import { database } from "@self-learning/database";
 import { CourseMeta, Defined, ResolvedValue } from "@self-learning/types";
 import { ImageCard, ImageCardBadge } from "@self-learning/ui/common";
@@ -109,7 +109,7 @@ function CourseCard({
 				badge={<ImageCardBadge text="Lernkurs" className="bg-emerald-500" />}
 				footer={
 					<span className="flex items-center gap-3 text-sm font-semibold text-emerald-500">
-						<PuzzleIcon className="h-5" />
+						<PuzzlePieceIcon className="h-5" />
 						<span>
 							{meta.lessonCount}{" "}
 							{meta.lessonCount === 1 ? "Lerneinheit" : "Lerneinheiten"}

apps/site/pages/subjects/[subjectSlug]/index.tsx

@@ -1,4 +1,4 @@
-import { CollectionIcon } from "@heroicons/react/solid";
+import { Square3Stack3DIcon } from "@heroicons/react/24/solid";
 import { database } from "@self-learning/database";
 import { ResolvedValue } from "@self-learning/types";
 import { ImageCard, ImageCardBadge } from "@self-learning/ui/common";
@@ -104,7 +104,7 @@ function SpecializationCard({
 				badge={<ImageCardBadge text="Spezialisierung" className="bg-purple-500" />}
 				footer={
 					<span className="flex items-center gap-3 text-sm font-semibold text-emerald-500">
-						<CollectionIcon className="h-5" />
+						<Square3Stack3DIcon className="h-5" />
 						<span>
 							{specialization._count.courses}{" "}
 							{specialization._count.courses === 1 ? "Kurs" : "Kurse"}

apps/site/pages/subjects/index.tsx

@@ -1,4 +1,4 @@
-import { SparklesIcon } from "@heroicons/react/solid";
+import { SparklesIcon } from "@heroicons/react/24/solid";
 import { database } from "@self-learning/database";
 import { ResolvedValue } from "@self-learning/types";
 import { ImageCard } from "@self-learning/ui/common";

apps/site/pages/teaching/subjects/[subjectId]/[specializationId]/index.tsx

@@ -1,4 +1,4 @@
-import { LinkIcon, PencilIcon, PlusIcon, XIcon } from "@heroicons/react/solid";
+import { LinkIcon, PencilIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { SearchCourseDialog } from "@self-learning/admin";
 import { trpc } from "@self-learning/api-client";
 import {
@@ -214,7 +214,7 @@ export default function SpecializationManagementPage() {
 												title="Aus Spezialisierung entfernen"
 												onClick={() => handleRemoveCourse(course)}
 											>
-												<XIcon className="h-5" />
+												<XMarkIcon className="h-5" />
 											</button>
 										</div>
 									</TableDataColumn>

apps/site/pages/teaching/subjects/[subjectId]/index.tsx

@@ -1,4 +1,4 @@
-import { PencilIcon, PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
+import { PencilIcon, PlusIcon, UserGroupIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { SpecializationPermissionsDialog } from "@self-learning/teaching";
 import { AuthorChip, ImageOrPlaceholder, SectionHeader } from "@self-learning/ui/common";

libs/feature/question-types/src/lib/question-types/arrange/form.tsx

@@ -1,4 +1,4 @@
-import { PencilIcon, PlusIcon, TrashIcon, XIcon } from "@heroicons/react/solid";
+import { PencilIcon, PlusIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import {
 	LabeledField,
 	MarkdownEditorDialog,
@@ -147,7 +147,7 @@ export default function ArrangeForm({
 												title="Kategorie entfernen"
 												onClick={() => onDeleteContainer(containerId)}
 											>
-												<XIcon className="h-5 text-red-500" />
+												<XMarkIcon className="h-5 text-red-500" />
 											</button>
 										</div>
 									</span>
@@ -198,7 +198,7 @@ export default function ArrangeForm({
 																			)
 																		}
 																	>
-																		<XIcon className="h-5 text-red-500" />
+																		<XMarkIcon className="h-5 text-red-500" />
 																	</button>
 																</div>
 

libs/feature/question-types/src/lib/question-types/exact/form.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { getRandomId } from "@self-learning/util/common";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { QuestionTypeForm } from "../../base-question";

libs/feature/question-types/src/lib/question-types/multiple-choice/form.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { MarkdownField } from "@self-learning/ui/forms";
 import { getRandomId } from "@self-learning/util/common";
 import { Controller, useFieldArray, useFormContext, useWatch } from "react-hook-form";

libs/feature/question-types/src/lib/question-types/programming/component.tsx

@@ -1,4 +1,4 @@
-import { CheckCircleIcon, QuestionMarkCircleIcon, XCircleIcon } from "@heroicons/react/solid";
+import { CheckCircleIcon, QuestionMarkCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { EditorField, LabeledField } from "@self-learning/ui/forms";
 import { TRPCClientError } from "@trpc/client";

libs/feature/quiz/src/lib/components/hints.tsx

@@ -1,4 +1,4 @@
-import { LightBulbIcon } from "@heroicons/react/outline";
+import { LightBulbIcon } from "@heroicons/react/24/outline";
 import { useQuestion } from "@self-learning/question-types";
 import { Divider } from "@self-learning/ui/common";
 import { MarkdownContainer } from "@self-learning/ui/layouts";

libs/feature/quiz/src/lib/components/question.tsx

@@ -1,4 +1,4 @@
-import { RefreshIcon } from "@heroicons/react/solid";
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import type { MdLookup, MdLookupArray } from "@self-learning/markdown";
 import {
 	AnswerContextProvider,
@@ -173,7 +173,7 @@ function CheckResult({
 			) : completionState === "failed" ? (
 				<button className="btn bg-red-500" onClick={reload}>
 					<span>Erneut probieren</span>
-					<RefreshIcon className="h-5" />
+					<ArrowPathIcon className="h-5" />
 				</button>
 			) : (
 				// eslint-disable-next-line react/jsx-no-useless-fragment

libs/feature/teaching/src/lib/author/authors-form.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { IconButton, ImageChip, OnDialogCloseFn } from "@self-learning/ui/common";
 import { Form } from "@self-learning/ui/forms";

libs/feature/teaching/src/lib/course/course-content-editor/course-content-form.tsx

@@ -6,8 +6,8 @@ import {
 	LinkIcon,
 	PencilIcon,
 	PlusIcon,
-	XIcon
-} from "@heroicons/react/solid";
+	XMarkIcon
+} from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { Quiz } from "@self-learning/quiz";
 import { CourseChapter, LessonContent, LessonMeta } from "@self-learning/types";
@@ -204,7 +204,7 @@ function LessonNode({
 					title="Entfernen"
 					onClick={onRemove}
 				>
-					<XIcon className="h-4 " />
+					<XMarkIcon className="h-4 " />
 				</button>
 			</div>
 		</span>

libs/feature/teaching/src/lib/lesson/forms/lesson-content.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import {
 	getContentTypeDisplayName,
 	LessonContent,

libs/feature/teaching/src/lib/lesson/forms/quiz-editor.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import {
 	INITIAL_QUESTION_CONFIGURATION_FUNCTIONS,
 	QuestionFormRenderer,

libs/feature/teaching/src/lib/skills/folder-editor/skill-edit-form.tsx

@@ -8,8 +8,8 @@ import { SkillResolved } from "@self-learning/api";
 import { SkillDeleteOption } from "./skill-taskbar";
 import { showToast } from "@self-learning/ui/common";
 import { SelectSkillsView } from "../skill-dialog/select-skill-view";
-import { XIcon } from "@heroicons/react/solid";
 import { SkillSelectHandler } from "./skill-display";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 
 export function SelectedSkillsInfoForm({
 	skills,
@@ -111,7 +111,7 @@ export function SkillInfoForm({
 							title="Ansicht ohne Veränderungen schließen"
 							onClick={resetEditTarget}
 						>
-							<XIcon className="h-5" />
+							<XMarkIcon className="h-5" />
 						</button>
 					</div>
 					<div className="flex flex-col gap-4 border-b-2 border-light-border">

libs/feature/teaching/src/lib/skills/folder-editor/skill-row-entry.tsx

@@ -4,10 +4,10 @@ import {
 	ChevronDownIcon,
 	ChevronRightIcon,
 	FolderIcon,
-	RefreshIcon,
+	ArrowPathRoundedSquareIcon,
 	ShieldExclamationIcon
-} from "@heroicons/react/solid";
-import { PencilIcon, PuzzleIcon } from "@heroicons/react/outline";
+} from "@heroicons/react/24/solid";
+import { PencilIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
 import { AddChildButton, SkillDeleteOption } from "./skill-taskbar";
 import styles from "./folder-table.module.css";
 import { SkillFolderVisualization, SkillSelectHandler, UpdateVisuals } from "./skill-display";
@@ -148,11 +148,13 @@ function SkillRow({
 								</>
 							) : (
 								<div className="ml-6">
-									<PuzzleIcon className="icon h-5 text-lg" />
+									<PuzzlePieceIcon className="icon h-5 text-lg" />
 								</div>
 							)}
 						</div>
-						{cycleError && <RefreshIcon className="icon h-5 text-lg text-red-500" />}
+						{cycleError && (
+							<ArrowPathRoundedSquareIcon className="icon h-5 text-lg text-red-500" />
+						)}
 						{cycleWarning && (
 							<ShieldExclamationIcon className="icon h-5 text-lg text-yellow-500" />
 						)}

libs/feature/teaching/src/lib/skills/folder-editor/skill-taskbar.tsx

@@ -6,8 +6,8 @@ import {
 	showToast,
 	SimpleDialog
 } from "@self-learning/ui/common";
-import { PlusIcon, TrashIcon } from "@heroicons/react/solid";
-import { FolderAddIcon } from "@heroicons/react/outline";
+import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
+import { FolderPlusIcon } from "@heroicons/react/24/outline";
 import { SkillSelectHandler, UpdateVisuals } from "./skill-display";
 import { trpc } from "@self-learning/api-client";
 import { Skill } from "@prisma/client";
@@ -81,7 +81,7 @@ export function AddChildButton({
 			className="hover:text-secondary"
 			onClick={handleAddSkill}
 		>
-			<FolderAddIcon className="icon h-5 text-lg" style={{ cursor: "pointer" }} />
+			<FolderPlusIcon className="icon h-5 text-lg" style={{ cursor: "pointer" }} />
 		</button>
 	);
 }

libs/feature/teaching/src/lib/skills/repository/repository-overview.tsx

@@ -11,7 +11,7 @@ import { AuthorGuard, useRequiredSession } from "@self-learning/ui/layouts";
 import { Fragment, useMemo, useState } from "react";
 import Link from "next/link";
 import { trpc } from "@self-learning/api-client";
-import { PencilIcon, TrashIcon } from "@heroicons/react/solid";
+import { PencilIcon, TrashIcon } from "@heroicons/react/24/solid";
 
 export function SkillRepositoryOverview() {
 	useRequiredSession();

libs/feature/teaching/src/lib/skills/skill-dialog/select-skill-view.tsx

@@ -1,8 +1,8 @@
-import { PlusIcon, XIcon } from "@heroicons/react/solid";
 import { IconButton } from "@self-learning/ui/common";
 import { SelectSkillDialog } from "./select-skill-dialog";
 import { useState } from "react";
 import { SkillFormModel } from "@self-learning/types";
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 
 export function SelectSkillsView({
 	skills,
@@ -78,7 +78,7 @@ function InlineRemoveButton({
 					className="mr-2 rounded-full p-2 hover:bg-gray-50 hover:text-red-500"
 					onClick={onRemove}
 				>
-					<XIcon className="h-3" />
+					<XMarkIcon className="h-3" />
 				</button>
 			</div>
 		</div>

libs/feature/teaching/src/lib/subject/permissions-dialog.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { AppRouter } from "@self-learning/api";
 import { trpc } from "@self-learning/api-client";
 import {

libs/feature/teaching/src/lib/subject/subject-form.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
 import { trpc } from "@self-learning/api-client";
 import { SpecializationRelation } from "@self-learning/types";
 import { IconButton, ImageChip, OnDialogCloseFn, showToast } from "@self-learning/ui/common";