diff --git a/front_end/package-lock.json b/front_end/package-lock.json index 44f26a0e9..edc1082fd 100644 --- a/front_end/package-lock.json +++ b/front_end/package-lock.json @@ -33,7 +33,7 @@ "@types/react": "^18", "@types/react-dom": "^18", "better-react-mathjax": "^2.0.3", - "classnames": "^2.5.1", + "clsx": "^2.1.1", "d3": "^7.9.0", "date-fns": "^3.6.0", "date-fns-tz": "^3.1.3", @@ -60,6 +60,7 @@ "sass": "^1.77.6", "sharp": "^0.33.5", "strip-markdown": "^6.0.0", + "tailwind-merge": "^2.5.5", "ts-invariant": "^0.10.3", "victory": "^37.0.2", "zod": "^3.23.8" @@ -14287,6 +14288,15 @@ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" }, + "node_modules/tailwind-merge": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz", + "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz", diff --git a/front_end/package.json b/front_end/package.json index 39308c24b..2dfcfdef3 100644 --- a/front_end/package.json +++ b/front_end/package.json @@ -38,7 +38,7 @@ "@types/react": "^18", "@types/react-dom": "^18", "better-react-mathjax": "^2.0.3", - "classnames": "^2.5.1", + "clsx": "^2.1.1", "d3": "^7.9.0", "date-fns": "^3.6.0", "date-fns-tz": "^3.1.3", @@ -65,6 +65,7 @@ "sass": "^1.77.6", "sharp": "^0.33.5", "strip-markdown": "^6.0.0", + "tailwind-merge": "^2.5.5", "ts-invariant": "^0.10.3", "victory": "^37.0.2", "zod": "^3.23.8" diff --git a/front_end/src/app/(campaigns-registration)/bridgewater/components/cards.tsx b/front_end/src/app/(campaigns-registration)/bridgewater/components/cards.tsx index 657de42ce..c9a81e3f2 100644 --- a/front_end/src/app/(campaigns-registration)/bridgewater/components/cards.tsx +++ b/front_end/src/app/(campaigns-registration)/bridgewater/components/cards.tsx @@ -1,10 +1,11 @@ "use client"; -import React, { FC } from "react"; import { useRouter } from "next/navigation"; +import React, { FC } from "react"; import Button from "@/components/ui/button"; import { useModal } from "@/contexts/modal_context"; + import { HeroSection } from "./hero-section"; export const SucessfullyRegistered = () => { diff --git a/front_end/src/app/(campaigns-registration)/bridgewater/components/header.tsx b/front_end/src/app/(campaigns-registration)/bridgewater/components/header.tsx index 9539748e2..ba7845f8f 100644 --- a/front_end/src/app/(campaigns-registration)/bridgewater/components/header.tsx +++ b/front_end/src/app/(campaigns-registration)/bridgewater/components/header.tsx @@ -1,12 +1,12 @@ "use client"; -import classNames from "classnames"; import Link from "next/link"; import { FC } from "react"; import NavUserButton from "@/components/auth"; -import { useAuth } from "@/contexts/auth_context"; import ThemeToggle from "@/components/theme_toggle"; +import { useAuth } from "@/contexts/auth_context"; +import cn from "@/utils/cn"; const Header: FC = () => { const { user } = useAuth(); @@ -15,7 +15,7 @@ const Header: FC = () => {
diff --git a/front_end/src/app/(campaigns-registration)/bridgewater/components/hero-section.tsx b/front_end/src/app/(campaigns-registration)/bridgewater/components/hero-section.tsx index 37851b53f..01ae6cb8e 100644 --- a/front_end/src/app/(campaigns-registration)/bridgewater/components/hero-section.tsx +++ b/front_end/src/app/(campaigns-registration)/bridgewater/components/hero-section.tsx @@ -1,12 +1,14 @@ "use client"; -import { FC, PropsWithChildren } from "react"; -import clsx from "clsx"; import Image from "next/image"; -import { XIcon } from "./x-icon"; -import { useModal } from "@/contexts/modal_context"; import { usePathname } from "next/navigation"; +import { FC, PropsWithChildren } from "react"; + import Button from "@/components/ui/button"; +import { useModal } from "@/contexts/modal_context"; +import cn from "@/utils/cn"; + +import { XIcon } from "./x-icon"; export const ChoicesButtons = () => { const { setCurrentModal } = useModal(); @@ -64,7 +66,7 @@ export const HeroSection: FC> = ({ }) => { return (
= ({ title, text, Icon, href, id }) => { return ( = ({ title, text, Icon, href, id }) => { )} >
= ({ = ({ className="border-b border-gray-300 bg-gray-0 text-gray-800 dark:border-gray-300-dark dark:bg-gray-0-dark dark:text-gray-800-dark" > > = ({ className, children, ...props }) => ( - + {children} ); @@ -281,10 +278,7 @@ const HeaderTd: FC< > > = ({ className, children, ...props }) => ( {children} @@ -294,7 +288,7 @@ const HeaderTd: FC< const SortArrow: FC<{ isAsc: boolean }> = ({ isAsc }) => ( diff --git a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/leaderboard_table/table_row.tsx b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/leaderboard_table/table_row.tsx index 87f9ac6e4..64cbecafc 100644 --- a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/leaderboard_table/table_row.tsx +++ b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/leaderboard_table/table_row.tsx @@ -1,4 +1,3 @@ -import classNames from "classnames"; import Link from "next/link"; import { FC } from "react"; @@ -8,6 +7,7 @@ import { LeaderboardEntry, LeaderboardType, } from "@/types/scoring"; +import cn from "@/utils/cn"; import { abbreviatedNumber } from "@/utils/number_formatters"; import MedalIcon from "../../../components/medal_icon"; @@ -44,7 +44,7 @@ const LeaderboardRow: FC = ({ return ( = ({ = ({ )} > = ({ className, children }) => ( > = ({ highlight, className, children }) => (
= ({ className }) => (
= ({ medalEntries, userId }) => {
{categories.map((category) => (
= async ({ profileId }) => { {categories?.map((category, index) => (
= async ({ profileId }) => { {categories?.map((category, index) => (
diff --git a/front_end/src/app/(main)/(tournaments)/tournament/[slug]/page.tsx b/front_end/src/app/(main)/(tournaments)/tournament/[slug]/page.tsx index a617b183e..d56bafecd 100644 --- a/front_end/src/app/(main)/(tournaments)/tournament/[slug]/page.tsx +++ b/front_end/src/app/(main)/(tournaments)/tournament/[slug]/page.tsx @@ -1,4 +1,3 @@ -import classNames from "classnames"; import { Metadata } from "next"; import dynamic from "next/dynamic"; import Image from "next/image"; @@ -19,6 +18,7 @@ import ProjectsApi from "@/services/projects"; import { SearchParams } from "@/types/navigation"; import { ProjectPermissions } from "@/types/post"; import { ProjectVisibility, TournamentType } from "@/types/projects"; +import cn from "@/utils/cn"; import { formatDate } from "@/utils/date_formatters"; import TournamentFeed from "../components/tournament_feed"; @@ -72,7 +72,7 @@ export default async function TournamentSlug({ params }: Props) {
+ {beforePanel}
{!hideClose && ( @@ -42,10 +42,9 @@ function ModalPanel({
{title ? ( {title} diff --git a/front_end/src/app/(main)/accounts/profile/[id]/components/profile_page_tab.tsx b/front_end/src/app/(main)/accounts/profile/[id]/components/profile_page_tab.tsx index 8857bec83..e36a4bbe1 100644 --- a/front_end/src/app/(main)/accounts/profile/[id]/components/profile_page_tab.tsx +++ b/front_end/src/app/(main)/accounts/profile/[id]/components/profile_page_tab.tsx @@ -1,11 +1,11 @@ "use client"; -import classNames from "classnames"; import { useTranslations } from "next-intl"; import { FC } from "react"; import ButtonGroup, { GroupButton } from "@/components/ui/button_group"; import { ProfilePageMode } from "@/types/users"; +import cn from "@/utils/cn"; type Props = { mode: ProfilePageMode; @@ -42,11 +42,11 @@ const ProfilePageTabs: FC = ({ mode, id }) => { buttons={managementModeButtons} onChange={() => {}} variant="tertiary" - className={classNames( - "hover:!dark:bg-blue-800 !bg-blue-100 !font-light capitalize !leading-5 !text-blue-900 hover:!bg-blue-200 dark:!border-blue-950 dark:!bg-blue-950 dark:!text-white" + className={cn( + "bg-blue-100 font-light capitalize leading-5 text-blue-900 hover:bg-blue-200 dark:border-blue-950 dark:bg-blue-950 dark:text-white hover:dark:bg-blue-800" )} - activeClassName={classNames( - "!bg-blue-900 !text-white hover:!bg-blue-800 dark:!bg-blue-100 dark:!text-blue-900 dark:hover:!bg-blue-200" + activeClassName={cn( + "bg-blue-900 text-white hover:bg-blue-800 dark:bg-blue-100 dark:text-blue-900 dark:hover:bg-blue-200" )} /> ); diff --git a/front_end/src/app/(main)/accounts/settings/components/question_notifications.tsx b/front_end/src/app/(main)/accounts/settings/components/question_notifications.tsx index ca2086b25..70eeb6539 100644 --- a/front_end/src/app/(main)/accounts/settings/components/question_notifications.tsx +++ b/front_end/src/app/(main)/accounts/settings/components/question_notifications.tsx @@ -2,7 +2,6 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classNames from "classnames"; import { useLocale, useTranslations } from "next-intl"; import React, { FC, useCallback, useState } from "react"; @@ -13,6 +12,7 @@ import Button from "@/components/ui/button"; import { Post, PostSubscriptionType } from "@/types/post"; import { CurrentUser } from "@/types/users"; import { Require } from "@/types/utils"; +import cn from "@/utils/cn"; import { formatDate } from "@/utils/date_formatters"; type PostWithSubscriptions = Require; @@ -101,12 +101,12 @@ const QuestionNotifications: FC = ({ {posts.map((post, index) => ( = ({ = ({ {getSubscriptionsLabel(t, locale, post)} = ({ )} = ({ }) => { return (
= ({ }) => { return (
= ({ community }) => { } />
diff --git a/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/choices_legend/index.tsx b/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/choices_legend/index.tsx index de05a4bee..d621a54ea 100644 --- a/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/choices_legend/index.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/choices_legend/index.tsx @@ -1,7 +1,6 @@ import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react"; -import classNames from "classnames"; import { useTranslations } from "next-intl"; import React, { FC, useMemo } from "react"; @@ -9,6 +8,7 @@ import ChoiceCheckbox from "@/components/choice_checkbox"; import Button from "@/components/ui/button"; import Checkbox from "@/components/ui/checkbox"; import { ChoiceItem } from "@/types/choices"; +import cn from "@/utils/cn"; type Props = { choices: ChoiceItem[]; @@ -63,7 +63,7 @@ const ChoicesLegend: FC = ({ as={Button} variant="text" size="xs" - className={classNames("focus:outline-none", { + className={cn("focus:outline-none", { "bg-gray-300 dark:bg-gray-300-dark": open, })} > diff --git a/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx b/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx index 276cf7f4f..201de0d0d 100644 --- a/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx @@ -1,5 +1,4 @@ "use client"; -import classNames from "classnames"; import { isNil } from "lodash"; import { useTranslations } from "next-intl"; import React, { FC, useCallback, useEffect, useRef, useState } from "react"; @@ -11,6 +10,7 @@ import useChartTooltip from "@/hooks/use_chart_tooltip"; import { TickFormat, TimelineChartZoomOption } from "@/types/charts"; import { ChoiceItem, ChoiceTooltipItem, UserChoiceItem } from "@/types/choices"; import { QuestionType, Scaling } from "@/types/question"; +import cn from "@/utils/cn"; import ChoicesLegend from "./choices_legend"; import ChoicesTooltip from "./choices_tooltip"; @@ -143,7 +143,7 @@ const MultiChoicesChartView: FC = ({ return (
= ({ className }) => { const t = useTranslations(); return ( -
+
{t("CPIsHidden")}
@@ -112,7 +111,7 @@ const QuestionTopics: FC = ({ topics }) => { )}
= ({ isActive, onClick, text, emoji, href }) => {
= ({ return (
= ({
0 && "pr-1.5 md:pr-2")} + className={cn(treeDepth > 0 && "pr-1.5 md:pr-2")} >
diff --git a/front_end/src/components/comment_feed/comment_cmm.tsx b/front_end/src/components/comment_feed/comment_cmm.tsx index 76ce4fcba..359edffba 100644 --- a/front_end/src/components/comment_feed/comment_cmm.tsx +++ b/front_end/src/components/comment_feed/comment_cmm.tsx @@ -17,7 +17,6 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { sendGAEvent } from "@next/third-parties/google"; -import classNames from "classnames"; import { useTranslations } from "next-intl"; import React, { useState, forwardRef, FC } from "react"; @@ -25,6 +24,7 @@ import ForecastTextInput from "@/app/(main)/questions/[id]/components/forecast_m import { toggleCMMComment } from "@/app/(main)/questions/actions"; import Button from "@/components/ui/button"; import { FormErrorMessage } from "@/components/ui/form_field"; +import cn from "@/utils/cn"; import { logError } from "@/utils/errors"; export const BINARY_MIN_VALUE = 0.001; @@ -330,7 +330,7 @@ const CmmToggleButton = forwardRef( > ( // > // = ({ )*/}
= ({ forecast }) => {
    {choices.map((choice, index) => (
  1. 1, })} key={index} diff --git a/front_end/src/components/comment_feed/index.tsx b/front_end/src/components/comment_feed/index.tsx index d5b60fd0e..daa68eca5 100644 --- a/front_end/src/components/comment_feed/index.tsx +++ b/front_end/src/components/comment_feed/index.tsx @@ -2,7 +2,6 @@ import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classNames from "classnames"; import { isNil } from "lodash"; import Link from "next/link"; import { useTranslations } from "next-intl"; @@ -23,6 +22,7 @@ import { getCommentsParams } from "@/services/comments"; import { BECommentType, CommentType } from "@/types/comment"; import { PostWithForecasts } from "@/types/post"; import { QuestionType } from "@/types/question"; +import cn from "@/utils/cn"; import { parseComment } from "@/utils/comments"; import { logError } from "@/utils/errors"; @@ -343,7 +343,7 @@ const CommentFeed: FC = ({ >
    = ({ {comments.map((comment: CommentType) => (
    = ({ community }) => {
    -
    +

    {t("followers")} diff --git a/front_end/src/components/conditional_tile/conditional_card.tsx b/front_end/src/components/conditional_tile/conditional_card.tsx index 3033d49d2..2b380d93b 100644 --- a/front_end/src/components/conditional_tile/conditional_card.tsx +++ b/front_end/src/components/conditional_tile/conditional_card.tsx @@ -1,8 +1,8 @@ -import classNames from "classnames"; import Link from "next/link"; import { FC, PropsWithChildren } from "react"; import { Href } from "@/types/navigation"; +import cn from "@/utils/cn"; type Props = { title: string; @@ -20,7 +20,7 @@ const ConditionalCard: FC> = ({ }) => { const CardContent = (

    & { didHappen?: boolean; }; @@ -18,7 +19,7 @@ const Arrow: FC = ({ didHappen, ...props }) => { > diff --git a/front_end/src/components/conditional_tile/index.tsx b/front_end/src/components/conditional_tile/index.tsx index 3e17b84a9..c0da1097c 100644 --- a/front_end/src/components/conditional_tile/index.tsx +++ b/front_end/src/components/conditional_tile/index.tsx @@ -1,7 +1,6 @@ "use client"; import { sendGAEvent } from "@next/third-parties/google"; -import classNames from "classnames"; import { useTranslations } from "next-intl"; import React, { FC, useEffect } from "react"; import { VictoryThemeDefinition } from "victory"; @@ -13,6 +12,7 @@ import ForecastersCounter from "@/app/(main)/questions/components/forecaster_cou import PredictionChip from "@/components/prediction_chip"; import { PostConditional, PostStatus } from "@/types/post"; import { QuestionWithForecasts } from "@/types/question"; +import cn from "@/utils/cn"; import { getConditionalQuestionTitle, getConditionTitle, @@ -86,7 +86,7 @@ const ConditionalTile: FC = ({ <>
    = ({
    = ({ />
    = ({ label, disabled, didHappen, className }) => { return (
    -
    +
    {disabled ? : }
    = ({ isOpen, onClose, onConfirm }) => { return ( diff --git a/front_end/src/components/contact_us_modal.tsx b/front_end/src/components/contact_us_modal.tsx index 8dd841b7d..1612ce11c 100644 --- a/front_end/src/components/contact_us_modal.tsx +++ b/front_end/src/components/contact_us_modal.tsx @@ -87,7 +87,7 @@ const ContactUsModal: FC = ({ isOpen, onClose, defaultSubject }) => { return ( <> = ({ isOpen, onClose, defaultSubject }) => {
    setIsSuccessModalOpen(false)} diff --git a/front_end/src/components/cp_weekly_movement.tsx b/front_end/src/components/cp_weekly_movement.tsx index cbf301e3e..8e0d0ad3f 100644 --- a/front_end/src/components/cp_weekly_movement.tsx +++ b/front_end/src/components/cp_weekly_movement.tsx @@ -1,10 +1,10 @@ -import classNames from "classnames"; import { fromUnixTime, subWeeks } from "date-fns"; import { useTranslations } from "next-intl"; import { FC } from "react"; import { QuestionType, QuestionWithForecasts } from "@/types/question"; import { displayValue, scaleInternalLocation } from "@/utils/charts"; +import cn from "@/utils/cn"; import WeeklyMovement from "./weekly_movement"; @@ -32,7 +32,7 @@ const CPWeeklyMovement: FC = ({ question, className }) => { ); diff --git a/front_end/src/components/forecast_card.tsx b/front_end/src/components/forecast_card.tsx index f494c5dc6..7d9f2b136 100644 --- a/front_end/src/components/forecast_card.tsx +++ b/front_end/src/components/forecast_card.tsx @@ -1,12 +1,10 @@ "use client"; -import classNames from "classnames"; import Link from "next/link"; import { FC, useEffect, useMemo, useRef, useState } from "react"; import { EmbedTheme } from "@/app/(embed)/questions/constants/embed_theme"; import DetailedMultipleChoiceChartCard from "@/app/(main)/questions/[id]/components/detailed_question_card/multiple_choice_chart_card"; import MultipleChoiceGroupChart from "@/app/(main)/questions/[id]/components/multiple_choice_group_chart"; -import ChartOverflowContainer from "@/components/charts/cp_reveal_time_overflow"; import FanChart from "@/components/charts/fan_chart"; import NumericChart from "@/components/charts/numeric_chart"; import ConditionalTile from "@/components/conditional_tile"; @@ -24,6 +22,7 @@ import { getGroupQuestionsTimestamps, getContinuousChartTypeFromQuestion, } from "@/utils/charts"; +import cn from "@/utils/cn"; import { getPostLink } from "@/utils/navigation"; import { getGroupForecastAvailability, @@ -196,7 +195,7 @@ const ForecastCard: FC = ({ />
    ); @@ -256,7 +255,7 @@ const ForecastCard: FC = ({ return (
    = ({
    = ({ content, className }) => { }; return ( -
    +
    {parse(content, { replace: transform })}
    ); diff --git a/front_end/src/components/icons/admin.tsx b/front_end/src/components/icons/admin.tsx index 771a00c02..4430c7072 100644 --- a/front_end/src/components/icons/admin.tsx +++ b/front_end/src/components/icons/admin.tsx @@ -1,4 +1,4 @@ -import clsx from "clsx"; +import cn from "@/utils/cn"; export function Admin({ className, ...props }: React.SVGProps) { return ( @@ -8,7 +8,7 @@ export function Admin({ className, ...props }: React.SVGProps) { viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" - className={clsx("size-[1em]", className)} + className={cn("size-[1em]", className)} {...props} > ) { viewBox="0 0 450 510" fill="none" xmlns="http://www.w3.org/2000/svg" - className={clsx("size-[1em]", className)} + className={cn("size-[1em]", className)} {...props} > ) { return ( @@ -8,7 +8,7 @@ export function Google({ className, ...props }: React.SVGProps) { viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" - className={clsx("size-[1em]", className)} + className={cn("size-[1em]", className)} {...props} > = ({ className }) => { = ({ className }) => { = ({ content }) => { return (
    (({ selected, item, ...props }, ref) => (
  2. = ({ )}
    & { href: string; activeClassName: string; @@ -22,7 +23,7 @@ const NavLink: FC = ({ {children} diff --git a/front_end/src/components/popover_filter/index.tsx b/front_end/src/components/popover_filter/index.tsx index 8de6a028c..86b972bfe 100644 --- a/front_end/src/components/popover_filter/index.tsx +++ b/front_end/src/components/popover_filter/index.tsx @@ -2,7 +2,6 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react"; import { sendGAEvent } from "@next/third-parties/google"; -import classNames from "classnames"; import { useTranslations } from "next-intl"; import { FC, PropsWithChildren, useEffect } from "react"; @@ -11,6 +10,7 @@ import MultiChipFilter from "@/components/popover_filter/multi_chip_filter"; import ToggleChipFilter from "@/components/popover_filter/toggle_chip_filter"; import Button from "@/components/ui/button"; import { useBreakpoint } from "@/hooks/tailwind"; +import cn from "@/utils/cn"; import { FilterOptionType, FilterReplaceInfo, FilterSection } from "./types"; @@ -41,7 +41,7 @@ const Panel: FC> = ({ return ( = ({ <> diff --git a/front_end/src/components/post_actions/share_post_menu.tsx b/front_end/src/components/post_actions/share_post_menu.tsx index d9adf1f94..5d8507c0d 100644 --- a/front_end/src/components/post_actions/share_post_menu.tsx +++ b/front_end/src/components/post_actions/share_post_menu.tsx @@ -1,7 +1,6 @@ "use client"; import { faShareNodes } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classNames from "classnames"; import { useTranslations } from "next-intl"; import { FC } from "react"; @@ -14,6 +13,7 @@ import { useShareOnTwitterLink, } from "@/hooks/share"; import { useBreakpoint } from "@/hooks/tailwind"; +import cn from "@/utils/cn"; type Props = { questionTitle: string; @@ -78,7 +78,7 @@ export const SharePostMenu: FC = ({ > {expanded && ( diff --git a/front_end/src/components/ui/dropdown_menu.tsx b/front_end/src/components/ui/dropdown_menu.tsx index 8e8776285..36ed4e15b 100644 --- a/front_end/src/components/ui/dropdown_menu.tsx +++ b/front_end/src/components/ui/dropdown_menu.tsx @@ -1,9 +1,10 @@ import { faEllipsis } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Menu, MenuItem, MenuItems, MenuButton } from "@headlessui/react"; -import clsx from "clsx"; import { Fragment } from "react"; +import cn from "@/utils/cn"; + import Button from "./button"; export type MenuItemProps = { @@ -46,7 +47,7 @@ export default function DropdownMenu({ {children} > = ({ }, [maxCollapsedHeight]); return ( -
    +
    > = ({ > {children}
    = ({ {message && (
    ( return ( <>