[WEB-5602] feat: new design system (#8220)
* chore: init tailwind v4 * chore: update all configs * chore: add source to parse monorepo packages * chore: combine all css files * feat: added extended colors * chore: update typography * chore: update extended color var names * refactor: remove initial spacing variable and update dark mode selector * chore: update css files * chore: update animations * chore: remove spacing tokens * fix: external css files * chore: update tailwind-merge version * chore: update font family * chore: added brief agents.md and story for new design system * chore: enhance design system documentation with rare exceptions for visual separation * chore: add fontsource package for typography * chore: material symbols font added * chore: update shadow default * chore: add stroke and outline theme vars * chore: update ring and fill colors * chore: overwrite tailwind typography tokens * chore: add high contrast mode tokens * chore: update scrollbar colors * chore: backward compatibility for buttons and placeholders * chore: add priority colors * chore: update urgent priority color * chore: update plan colors * chore: add missing utility class * chore: update height and padding classes * chore: update label colors * chore: add missing utlity * chore: add typography plugin to space app * chore: replace existing classNames with new design system tokens #8244 (#8278) * chore: update border colors * chore: update all borders * chore: update text colors * chore: update css variables * chore: update font sizes and weights * chore: update bg colors * chore: sync changes * fix: uncomment spacing-1200 variable in variables.css * chore: update primary colors * refactor: updated border to border-subtle * refactor: update various components and improve UI consistency across the application * updated classnames * updated classnames * refactor: update color-related class names to use new design system variables for consistency * chore: default automations * chore: update text sizes * chore: home and power k * chore: home and power k * chore: replace ui package button components * chore: update text sizes * chore: updated issue identifier (#8275) * refactor: top navigation and sidebar design token (#8276) * chore: update all button components (#8277) * chore: new button component * chore: update existing buttons * chore: overwrite tailwind typography tokens * fix: twMerge config + fixed cn instances * refactor: toast design token updated (#8279) * chore: update existing buttons * chore: tooltip design token updatged (#8280) * chore: moved cn utility to propel (#8281) * chore: update space app UI (#8285) * chore; update space app filters component * fix: button whitespace wrap * chore: space app votes * chore: update dropdown components * refactor: auth, onboarding, sidebar, and common component design token migration (#8291) * chore: checkbox component design token updated * chore: indicator and oauth component design token updated * chore: sidebar design token updated * chore: auth and onboarding design token updated * chore: update divider color * style: update background colors and hover effects across list components * fix: tailwind merge * refactor: toggle switch design token migration and header utility classname added (#8295) * chore: toggle component design token updated * chore: h-header utility class added * chore: updated color tokens for work item detail page (#8296) * chore: update react-day-picker UI * refactor: update button sizes and styles in filters components * refactor: breadcrumbs design token updated (#8297) * chore: update priority icon colors * refactor: updated layout variables * chore: update plan card primary CTA * Chore update editor design system (#8299) * refactor: update styles for callout, color selector, logo selector, and image uploader * refactor:fix image * chore: update settings UI * chore: updated notifications color and size tokens (#8302) * chore: update sm button border radius * fix: logo renderer * chore: icon button component * chore: remove deprecated classes * chore: remove deprecated classes * chore: update editor list spacing * fix: icon button size * chore: improvements (#8309) * chore: update cycles and modules pages * refactor: update background styles across various components to use new design system colors * fix: button type errors * chore: update modals design system (#8310) * refactor: callout bg * refactor: code bg * refactor: modal size and variant --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> * chore: update next-themes * design: update billing and plans component styles and remove unused utility functions (#8313) * refactor: empty state design token migration and improvements (#8315) * fix: profile page * refactor: tabs design token updated (#8316) * chore: updated buttons and tokens for work items (#8317) * fix: adjust trial button spacing in checkout modal * chore: update add button hover state * fix: type error (#8318) * fix: type error * chore: code refactor * refactor: update button sizes and background styles in rich filters components * refactor: update editor bg * refactor: enhance Gantt chart sidebar functionality and styling - Removed unused prop from . - Updated to include new props for better block management and scrolling behavior. - Improved auto-scroll functionality for Gantt chart items. - Adjusted styles in component for consistent design. * regression: gantt design * chore: new badge component * fix: favorite star * chore: update backgroung, typography and button sizes across workspace settings general and members pages * fix: header button sizes * fix: emoji icon logo (#8323) * more fixes * chore: update settings sidebar * refactor: avatar component * chore: updated work item detail sidebar (#8327) * refactor: update link preview * fix: work item property dropdowns * fix: dropdown buttons border radius * chore: update power k translation * chore: updated profile activity design (#8328) * chore: update settings pages * chore: update work item sidebar alignments (#8330) * refactor: admin design system * chore: update page header --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com> * fix: formatting * reexport types * fix: lint error --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
d86418aad8
commit
22339b9786
1342 changed files with 14227 additions and 15119 deletions
|
|
@ -1,8 +1,6 @@
|
|||
import type { FC } from "react";
|
||||
// plane imports
|
||||
import { observer } from "mobx-react";
|
||||
import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
|
||||
import { getSubscriptionBackgroundColor, getDiscountPillStyle } from "@plane/ui";
|
||||
import { calculateYearlyDiscount, cn } from "@plane/utils";
|
||||
|
||||
type TPlanFrequencyToggleProps = {
|
||||
|
|
@ -14,47 +12,42 @@ type TPlanFrequencyToggleProps = {
|
|||
};
|
||||
|
||||
export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props: TPlanFrequencyToggleProps) {
|
||||
const { subscriptionType, monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
|
||||
const { monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
|
||||
// derived values
|
||||
const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center cursor-pointer py-1 animate-slide-up">
|
||||
<div
|
||||
className={cn(
|
||||
"flex space-x-1 rounded-md bg-custom-primary-200/10 p-0.5 w-full",
|
||||
getSubscriptionBackgroundColor(subscriptionType, "50")
|
||||
)}
|
||||
>
|
||||
<div
|
||||
key="month"
|
||||
<div className="flex w-full items-center cursor-pointer py-1">
|
||||
<div className="flex space-x-1 rounded-md bg-layer-3 p-0.5 w-full">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedFrequency("month")}
|
||||
className={cn(
|
||||
"w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
|
||||
"w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
|
||||
selectedFrequency === "month"
|
||||
? "bg-custom-background-100 text-custom-text-100 shadow"
|
||||
: "text-custom-text-300 hover:text-custom-text-200"
|
||||
? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
|
||||
: "text-tertiary hover:text-secondary"
|
||||
)}
|
||||
>
|
||||
Monthly
|
||||
</div>
|
||||
<div
|
||||
key="year"
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedFrequency("year")}
|
||||
className={cn(
|
||||
"w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
|
||||
"w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
|
||||
selectedFrequency === "year"
|
||||
? "bg-custom-background-100 text-custom-text-100 shadow"
|
||||
: "text-custom-text-300 hover:text-custom-text-200"
|
||||
? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
|
||||
: "text-tertiary hover:text-secondary"
|
||||
)}
|
||||
>
|
||||
Yearly
|
||||
{yearlyDiscount > 0 && (
|
||||
<span className={cn(getDiscountPillStyle(subscriptionType), "rounded-full px-1 py-0.5 ml-1 text-[9px]")}>
|
||||
<span className="bg-accent-primary text-on-color rounded-full px-1 py-0.5 ml-1.5 text-caption-xs-regular">
|
||||
-{yearlyDiscount}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import type { FC } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
// plane imports
|
||||
import {
|
||||
|
|
@ -9,11 +8,10 @@ import {
|
|||
WORKSPACE_SETTINGS_TRACKER_EVENTS,
|
||||
} from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { getButtonStyling } from "@plane/propel/button";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import type { TBillingFrequency } from "@plane/types";
|
||||
import { EProductSubscriptionEnum } from "@plane/types";
|
||||
import { getUpgradeButtonStyle } from "@plane/ui";
|
||||
import { cn, getSubscriptionName } from "@plane/utils";
|
||||
import { getSubscriptionName } from "@plane/utils";
|
||||
// components
|
||||
import { DiscountInfo } from "@/components/license/modal/card/discount-info";
|
||||
import type { TPlanDetail } from "@/constants/plans";
|
||||
|
|
@ -28,9 +26,6 @@ type TPlanDetailProps = {
|
|||
setBillingFrequency: (frequency: TBillingFrequency) => void;
|
||||
};
|
||||
|
||||
const COMMON_BUTTON_STYLE =
|
||||
"relative inline-flex items-center justify-center w-full px-4 py-1.5 text-xs font-medium rounded-lg focus:outline-none transition-all duration-300 animate-slide-up";
|
||||
|
||||
export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps) {
|
||||
const { subscriptionType, planDetail, billingFrequency, setBillingFrequency } = props;
|
||||
// plane hooks
|
||||
|
|
@ -45,8 +40,6 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
|
|||
billingFrequency === "month"
|
||||
? planDetail.monthlyPriceSecondaryDescription
|
||||
: planDetail.yearlyPriceSecondaryDescription;
|
||||
// helper styles
|
||||
const upgradeButtonStyle = getUpgradeButtonStyle(subscriptionType, false) ?? getButtonStyling("primary", "lg");
|
||||
|
||||
const handleRedirection = () => {
|
||||
const frequency = billingFrequency ?? "year";
|
||||
|
|
@ -66,15 +59,17 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
|
|||
<div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
|
||||
{/* Plan name and pricing section */}
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="flex w-full gap-2 items-center text-xl font-medium">
|
||||
<span className="transition-all duration-300">{subscriptionName}</span>
|
||||
<div className="flex w-full gap-2 items-center text-h4-semibold">
|
||||
<span>{subscriptionName}</span>
|
||||
{subscriptionType === EProductSubscriptionEnum.PRO && (
|
||||
<span className="px-2 rounded text-custom-primary-200 bg-custom-primary-100/20 text-xs">Popular</span>
|
||||
<span className="px-2 py-0.5 rounded-sm text-on-color bg-accent-primary text-caption-sm-medium">
|
||||
Popular
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-x-2 items-start text-custom-text-300 pb-1 transition-all duration-300 animate-slide-up">
|
||||
<div className="flex gap-x-2 items-start text-tertiary pb-1">
|
||||
{isSubscriptionActive && displayPrice !== undefined && (
|
||||
<div className="flex items-center gap-1 text-2xl text-custom-text-100 font-semibold transition-all duration-300">
|
||||
<div className="flex items-center gap-1 text-h3-semibold text-primary">
|
||||
<DiscountInfo
|
||||
currency="$"
|
||||
frequency={billingFrequency ?? "month"}
|
||||
|
|
@ -85,11 +80,9 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
|
|||
</div>
|
||||
)}
|
||||
<div className="pt-1">
|
||||
{pricingDescription && <div className="transition-all duration-300">{pricingDescription}</div>}
|
||||
{pricingDescription && <div>{pricingDescription}</div>}
|
||||
{pricingSecondaryDescription && (
|
||||
<div className="text-xs text-custom-text-400 transition-all duration-300">
|
||||
{pricingSecondaryDescription}
|
||||
</div>
|
||||
<div className="text-caption-xs text-placeholder">{pricingSecondaryDescription}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -109,10 +102,12 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
|
|||
)}
|
||||
|
||||
{/* Subscription button */}
|
||||
<div className={cn("flex flex-col gap-1 py-3 items-start transition-all duration-300")}>
|
||||
<button
|
||||
<div className="flex flex-col gap-1 py-3 items-start">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
onClick={handleRedirection}
|
||||
className={cn(upgradeButtonStyle, COMMON_BUTTON_STYLE)}
|
||||
className="w-full"
|
||||
data-ph-element={
|
||||
isSubscriptionActive
|
||||
? WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_UPGRADE_BUTTON(subscriptionType)
|
||||
|
|
@ -120,7 +115,7 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
|
|||
}
|
||||
>
|
||||
{isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY
|
|||
import { useTranslation } from "@plane/i18n";
|
||||
import type { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
|
||||
import { EProductSubscriptionEnum } from "@plane/types";
|
||||
import { getSubscriptionTextColor } from "@plane/ui";
|
||||
import { cn } from "@plane/utils";
|
||||
// components
|
||||
import { SettingsHeading } from "@/components/settings/heading";
|
||||
// local imports
|
||||
|
|
@ -44,24 +42,20 @@ export const BillingRoot = observer(function BillingRoot() {
|
|||
title={t("workspace_settings.settings.billing_and_plans.heading")}
|
||||
description={t("workspace_settings.settings.billing_and_plans.description")}
|
||||
/>
|
||||
<div className={cn("transition-all duration-500 ease-in-out will-change-[height,opacity]")}>
|
||||
<div>
|
||||
<div className="py-6">
|
||||
<div className={cn("px-6 py-4 border border-custom-border-200 rounded-lg")}>
|
||||
<div className="flex gap-2 font-medium items-center justify-between">
|
||||
<div className="px-6 py-4 rounded-lg bg-layer-1">
|
||||
<div className="flex gap-2 items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h4
|
||||
className={cn("text-xl leading-6 font-bold", getSubscriptionTextColor(EProductSubscriptionEnum.FREE))}
|
||||
>
|
||||
Community
|
||||
</h4>
|
||||
<div className="text-sm text-custom-text-200 font-medium">
|
||||
<h4 className="text-h4-bold text-primary">Community</h4>
|
||||
<div className="text-caption-md-medium text-secondary">
|
||||
Unlimited projects, issues, cycles, modules, pages, and storage
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl font-semibold mt-3">All plans</div>
|
||||
<div className="text-h4-semibold mt-3">All plans</div>
|
||||
</div>
|
||||
<PlansComparison
|
||||
isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper
|
|||
const { shouldRenderAppRail } = useAppRailVisibility();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col relative size-full overflow-hidden bg-custom-background-90 transition-all ease-in-out duration-300">
|
||||
<div className="flex flex-col relative size-full overflow-hidden bg-canvas transition-all ease-in-out duration-300">
|
||||
<TopNavigationRoot />
|
||||
<div className="relative flex size-full overflow-hidden">
|
||||
{/* Conditionally render AppRailRoot based on context */}
|
||||
|
|
@ -25,7 +25,7 @@ export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper
|
|||
className={cn(
|
||||
"relative size-full pl-2 pb-2 pr-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden",
|
||||
{
|
||||
"pl-0": shouldRenderAppRail,
|
||||
"pl-0!": shouldRenderAppRail,
|
||||
}
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import type { FC } from "react";
|
||||
import { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
// types
|
||||
|
|
@ -30,7 +29,7 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
|
|||
isOpen={deleteWorkspaceModal}
|
||||
onClose={() => setDeleteWorkspaceModal(false)}
|
||||
/>
|
||||
<div className="border-t border-custom-border-100">
|
||||
<div className="border-t border-subtle">
|
||||
<div className="w-full">
|
||||
<Collapsible
|
||||
isOpen={isOpen}
|
||||
|
|
@ -39,7 +38,7 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
|
|||
buttonClassName="flex w-full items-center justify-between py-4"
|
||||
title={
|
||||
<>
|
||||
<span className="text-lg tracking-tight">
|
||||
<span className="text-body-md-medium tracking-tight">
|
||||
{t("workspace_settings.settings.general.delete_workspace")}
|
||||
</span>
|
||||
{isOpen ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
|
||||
|
|
@ -47,12 +46,13 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
|
|||
}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-base tracking-tight">
|
||||
<span className="text-body-sm-regular tracking-tight">
|
||||
{t("workspace_settings.settings.general.delete_workspace_description")}
|
||||
</span>
|
||||
<div>
|
||||
<Button
|
||||
variant="danger"
|
||||
variant="error-fill"
|
||||
size="lg"
|
||||
onClick={() => setDeleteWorkspaceModal(true)}
|
||||
data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@ import { useState } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
// ui
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
// hooks
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
import packageJson from "package.json";
|
||||
// local components
|
||||
import { PaidPlanUpgradeModal } from "../license";
|
||||
import { Button } from "@plane/propel/button";
|
||||
|
||||
export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
|
||||
// states
|
||||
|
|
@ -26,9 +26,8 @@ export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
|
|||
/>
|
||||
<Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
|
||||
<Button
|
||||
tabIndex={-1}
|
||||
variant="accent-primary"
|
||||
className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
|
||||
variant="tertiary"
|
||||
size="lg"
|
||||
onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
|
||||
aria-haspopup="dialog"
|
||||
aria-label={t("aria_labels.projects_sidebar.edition_badge")}
|
||||
|
|
|
|||
|
|
@ -62,9 +62,7 @@ export const useMemberColumns = () => {
|
|||
key: "Display name",
|
||||
content: t("workspace_settings.settings.members.details.display_name"),
|
||||
tdRender: (rowData: RowData) => (
|
||||
<div className={`w-32 ${isSuspended(rowData) ? "text-custom-text-400" : ""}`}>
|
||||
{rowData.member.display_name}
|
||||
</div>
|
||||
<div className={`w-32 ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.display_name}</div>
|
||||
),
|
||||
thRender: () => (
|
||||
<MemberHeaderColumn
|
||||
|
|
@ -79,9 +77,7 @@ export const useMemberColumns = () => {
|
|||
key: "Email address",
|
||||
content: t("workspace_settings.settings.members.details.email_address"),
|
||||
tdRender: (rowData: RowData) => (
|
||||
<div className={`w-48 truncate ${isSuspended(rowData) ? "text-custom-text-400" : ""}`}>
|
||||
{rowData.member.email}
|
||||
</div>
|
||||
<div className={`w-48 truncate ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.email}</div>
|
||||
),
|
||||
thRender: () => (
|
||||
<MemberHeaderColumn
|
||||
|
|
|
|||
|
|
@ -152,14 +152,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
|
|||
<div
|
||||
id={`sidebar-${item.key}`}
|
||||
className={cn("relative", {
|
||||
"bg-custom-sidebar-background-80 opacity-60": isDragging,
|
||||
"bg-layer-1 opacity-60": isDragging,
|
||||
})}
|
||||
ref={navigationIemRef}
|
||||
>
|
||||
<DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
|
||||
<div
|
||||
className={cn(
|
||||
"group/project-item relative w-full flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90"
|
||||
"group/project-item relative w-full flex items-center rounded-md text-primary hover:bg-surface-2"
|
||||
)}
|
||||
id={`${item.key}`}
|
||||
>
|
||||
|
|
@ -173,7 +173,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
|
|||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab group-hover/project-item:opacity-100 opacity-0",
|
||||
"flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-placeholder cursor-grab group-hover/project-item:opacity-100 opacity-0",
|
||||
{
|
||||
"cursor-grabbing": isDragging,
|
||||
"opacity-100": isDragging,
|
||||
|
|
@ -189,7 +189,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
|
|||
<Link href={itemHref} onClick={() => handleLinkClick()} className="group flex-grow">
|
||||
<div className="flex items-center gap-1.5 py-[1px]">
|
||||
{icon}
|
||||
<p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
|
||||
<p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -201,14 +201,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
|
|||
{isPinned ? (
|
||||
<Tooltip tooltipContent="Unpin">
|
||||
<PinOff
|
||||
className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
|
||||
className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
|
||||
onClick={() => unPinNavigationItem(item.key)}
|
||||
/>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip tooltipContent="Pin">
|
||||
<Pin
|
||||
className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
|
||||
className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
|
||||
onClick={() => pinNavigationItem(item.key)}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@ export function UpgradeBadge(props: TUpgradeBadge) {
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-custom-primary-100/20 text-center font-medium outline-none",
|
||||
"w-fit cursor-pointer rounded-2xl text-accent-secondary bg-accent-primary/20 text-center font-medium outline-none",
|
||||
{
|
||||
"text-sm px-3": size === "md",
|
||||
"text-xs px-2": size === "sm",
|
||||
"text-13 px-3": size === "md",
|
||||
"text-11 px-2": size === "sm",
|
||||
},
|
||||
className
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue