Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: change tailwind css colors to fit with figma #651

Merged
merged 1 commit into from
Jan 14, 2025
Merged

refactor: change tailwind css colors to fit with figma #651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/app-builder/src/components/Auth/AuthError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function AuthError({
return (
<p
className={clsx(
'text-m bg-red-05 w-full rounded-sm p-2 font-normal text-red-100',
'text-m bg-red-95 text-red-47 w-full rounded-sm p-2 font-normal',
className,
)}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/app-builder/src/components/Auth/SignInWithGoogle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ function SignInWithGoogleButton({
onClick={onClick}
disabled={loading}
>
<div className="bg-grey-00 flex h-full w-10 shrink-0 items-center justify-center rounded-s-[3px]">
<div className="bg-grey-100 flex h-full w-10 shrink-0 items-center justify-center rounded-s-[3px]">
<Logo logo="google-logo" className="size-6" />
</div>
<span className="text-s text-grey-00 w-full whitespace-nowrap text-center align-middle font-medium">
<span className="text-s text-grey-100 w-full whitespace-nowrap text-center align-middle font-medium">
{t('auth:sign_in.google')}
</span>
<span className="absolute end-0 mx-2 size-4">
Expand Down
2 changes: 1 addition & 1 deletion packages/app-builder/src/components/Auth/SignInWithMicrosoft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function SignInWithMicrosoftButton({

return (
<button
className="bg-grey-00 hover:bg-grey-05 active:bg-grey-10 relative flex h-10 w-full items-center border border-[#8C8C8C] p-px transition disabled:cursor-wait"
className="bg-grey-100 hover:bg-grey-95 active:bg-grey-90 relative flex h-10 w-full items-center border border-[#8C8C8C] p-px transition disabled:cursor-wait"
onClick={() => {
void onClick?.();
}}
Expand Down
12 changes: 6 additions & 6 deletions packages/app-builder/src/components/Callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@ import { Icon } from 'ui-icons';
export const variants = ['info', 'error'] as const;

const callout = cva(
'text-s text-grey-100 flex flex-row items-center gap-2 rounded p-2 font-normal',
'text-s text-grey-00 flex flex-row items-center gap-2 rounded p-2 font-normal',
{
variants: {
/**
* Outlined variant is usefull when you want to use the callout on non white background
* @default soft
*/
variant: {
outlined: 'bg-grey-00 border-grey-10 border',
soft: 'bg-grey-02',
outlined: 'bg-grey-100 border-grey-90 border',
soft: 'bg-grey-98',
},
color: {
purple: 'border-s-2 border-s-purple-100',
red: 'border-s-2 border-s-red-100',
purple: 'border-s-2 border-s-purple-65',
red: 'border-s-2 border-s-red-47',
},
},
},
Expand Down Expand Up @@ -55,7 +55,7 @@ export function CalloutV2({
return (
<aside
className={clsx(
'bg-purple-05 text-s flex flex-row gap-2 rounded-lg p-4 font-normal text-purple-100',
'bg-purple-98 text-s text-purple-65 flex flex-row gap-2 rounded-lg p-4 font-normal',
className,
)}
{...otherProps}
Expand Down
6 changes: 3 additions & 3 deletions packages/app-builder/src/components/Cases/CaseContributors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function CaseContributors({
firstName={user?.firstName}
lastName={user?.lastName}
/>
<div className="text-grey-100 text-xs font-normal capitalize">
<div className="text-grey-00 text-xs font-normal capitalize">
{getFullName(user) || t('cases:case_detail.unknown_user')}
</div>
</div>
Expand All @@ -49,7 +49,7 @@ export function CaseContributors({
<Avatar
key={contributor.id}
className={cx(
'border-grey-00 border-2',
'border-grey-100 border-2',
index === 0 && 'z-30',
index === 1 && 'z-20',
index === 2 && 'z-10',
Expand All @@ -62,7 +62,7 @@ export function CaseContributors({
})}
</div>
{contributors.length > 3 ? (
<div className="text-s text-grey-100 font-normal">
<div className="text-s text-grey-00 font-normal">
+{contributors.length - 3}
</div>
) : null}
Expand Down
54 changes: 27 additions & 27 deletions packages/app-builder/src/components/Cases/CaseDecisions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,19 @@ export function CaseDecisions({
return (
<div className="grid grid-cols-[repeat(2,_max-content)_2fr_1fr_repeat(3,_max-content)] gap-x-6 gap-y-2">
<div className="col-span-full grid grid-cols-subgrid px-4">
<div className="text-grey-100 text-s col-start-2 font-semibold">
<div className="text-grey-00 text-s col-start-2 font-semibold">
{t('decisions:created_at')}
</div>
<div className="text-grey-100 text-s font-semibold">
<div className="text-grey-00 text-s font-semibold">
{t('decisions:scenario.name')}
</div>
<div className="text-grey-100 text-s font-semibold">
<div className="text-grey-00 text-s font-semibold">
{t('decisions:trigger_object.type')}
</div>
<div className="text-grey-100 text-s font-semibold">
<div className="text-grey-00 text-s font-semibold">
{t('decisions:score')}
</div>
<div className="text-grey-100 text-s font-semibold">
<div className="text-grey-00 text-s font-semibold">
{t('decisions:outcome')}
</div>
</div>
Expand All @@ -107,9 +107,9 @@ export function CaseDecisions({
key={row.id}
defaultOpen={decisions.length === 1}
>
<div className="bg-grey-00 border-grey-10 col-span-full grid grid-cols-subgrid rounded-md border">
<div className="bg-grey-100 border-grey-90 col-span-full grid grid-cols-subgrid rounded-md border">
<div className="col-span-full grid grid-cols-subgrid items-center px-4 py-3">
<CollapsibleV2.Title className="border-grey-10 group rounded border outline-none transition-colors focus-visible:border-purple-100">
<CollapsibleV2.Title className="border-grey-90 focus-visible:border-purple-65 group rounded border outline-none transition-colors">
<Icon
icon="smallarrow-up"
aria-hidden
Expand All @@ -128,18 +128,18 @@ export function CaseDecisions({
to={getRoute('/scenarios/:scenarioId', {
scenarioId: fromUUID(row.scenario.id),
})}
className="hover:text-purple-120 focus:text-purple-120 relative line-clamp-2 font-semibold text-purple-100 hover:underline focus:underline"
className="hover:text-purple-60 focus:text-purple-60 text-purple-65 relative line-clamp-2 font-semibold hover:underline focus:underline"
>
{row.scenario.name}
</Link>
</Tooltip.Default>
<div className="border-grey-10 text-grey-100 rounded-full border px-3 py-1 font-semibold">
<div className="border-grey-90 text-grey-00 rounded-full border px-3 py-1 font-semibold">
{`V${row.scenario.version}`}
</div>
</div>
<div>
<Tooltip.Default content={row.triggerObjectType}>
<span className="text-grey-100 text-s line-clamp-2 w-fit break-all font-normal">
<span className="text-grey-00 text-s line-clamp-2 w-fit break-all font-normal">
{row.triggerObjectType}
</span>
</Tooltip.Default>
Expand Down Expand Up @@ -193,7 +193,7 @@ function OutcomeAndReviewStatusWithModal({ decision }: { decision: Decision }) {
<OutcomeAndReviewStatus
outcome={decision.outcome}
reviewStatus={decision.reviewStatus}
className="hover:bg-orange-25 transition-colors"
className="hover:bg-orange-87 transition-colors"
/>
</Ariakit.DialogDisclosure>
<ReviewDecisionModal
Expand Down Expand Up @@ -223,15 +223,15 @@ function DecisionActions({ decision }: { decision: Decision }) {
<MenuRoot rtl={i18n.dir() === 'rtl'}>
<MenuButton
render={
<button className="hover:bg-purple-05 active:bg-purple-10 rounded">
<button className="hover:bg-purple-98 active:bg-purple-96 rounded">
<Icon icon="more-menu" className="size-6" />
<span className="sr-only">{t('common:more_options')}</span>
</button>
}
/>
<MenuPopover modal className="flex flex-col gap-2 p-2">
<MenuItem
className="data-[active-item]:bg-purple-05 group flex flex-row gap-2 rounded p-2 outline-none"
className="data-[active-item]:bg-purple-98 group flex flex-row gap-2 rounded p-2 outline-none"
render={
<Link
to={getRoute('/decisions/:decisionId', {
Expand All @@ -244,7 +244,7 @@ function DecisionActions({ decision }: { decision: Decision }) {
</MenuItem>
{withReviewDecisionModal ? (
<MenuItem
className="data-[active-item]:bg-purple-05 group flex flex-row gap-2 rounded p-2 outline-none"
className="data-[active-item]:bg-purple-98 group flex flex-row gap-2 rounded p-2 outline-none"
render={
<Ariakit.DialogDisclosure store={reviewDecisionModalStore} />
}
Expand Down Expand Up @@ -323,7 +323,7 @@ function DecisionDetail({
<div className="flex flex-row gap-6 p-4">
<div className="flex h-fit flex-[2] flex-col gap-2">
<div className="flex flex-row items-center justify-between gap-2">
<span className="text-grey-100 text-xs font-medium first-letter:capitalize">
<span className="text-grey-00 text-xs font-medium first-letter:capitalize">
{t('cases:case_detail.rules_execution', {
count: decisionDetail.ruleExecutions.length,
})}
Expand Down Expand Up @@ -385,7 +385,7 @@ function DecisionDetail({
<div className="sticky top-0 flex h-fit flex-1 flex-col gap-6">
<div className="flex h-fit flex-col gap-2">
<div className="col-start-2 row-start-1 flex flex-row items-center justify-between gap-2">
<span className="text-grey-100 text-xs font-medium first-letter:capitalize">
<span className="text-grey-00 text-xs font-medium first-letter:capitalize">
{t('cases:case_detail.pivot_values')}
</span>
</div>
Expand All @@ -394,7 +394,7 @@ function DecisionDetail({

<div className="flex h-fit flex-col gap-2">
<div className="flex flex-row items-center justify-between gap-2">
<span className="text-grey-100 text-xs font-medium first-letter:capitalize">
<span className="text-grey-00 text-xs font-medium first-letter:capitalize">
{t('cases:case_detail.trigger_object')}
</span>
</div>
Expand Down Expand Up @@ -422,7 +422,7 @@ function ShowHitOnlySwitch({
<div className="flex flex-row items-center gap-2">
<label
htmlFor={id}
className="text-grey-100 cursor-pointer select-none text-xs"
className="text-grey-00 cursor-pointer select-none text-xs"
>
{t('cases:case_detail.rules_execution.show_hit_only')}
</label>
Expand All @@ -436,27 +436,27 @@ function DecisionDetailSkeleton() {
<div className="flex flex-row gap-6 p-4">
<div className="flex h-fit flex-[2] flex-col gap-2">
<div className="flex flex-row items-center justify-between gap-2">
<div className="bg-grey-10 h-4 w-32 animate-pulse rounded-md" />
<div className="bg-grey-10 h-4 w-32 animate-pulse rounded-md" />
<div className="bg-grey-90 h-4 w-32 animate-pulse rounded-md" />
<div className="bg-grey-90 h-4 w-32 animate-pulse rounded-md" />
</div>
<div className="bg-grey-10 h-12 animate-pulse rounded-lg" />
<div className="bg-grey-10 h-12 animate-pulse rounded-lg" />
<div className="bg-grey-10 h-12 animate-pulse rounded-lg" />
<div className="bg-grey-90 h-12 animate-pulse rounded-lg" />
<div className="bg-grey-90 h-12 animate-pulse rounded-lg" />
<div className="bg-grey-90 h-12 animate-pulse rounded-lg" />
</div>

<div className="flex h-fit flex-1 flex-col gap-6">
<div className="flex h-fit flex-col gap-2">
<div className="col-start-2 row-start-1 flex flex-row items-center justify-between gap-2">
<div className="bg-grey-10 h-4 w-32 animate-pulse rounded-md" />
<div className="bg-grey-90 h-4 w-32 animate-pulse rounded-md" />
</div>
<div className="bg-grey-10 h-8 w-full animate-pulse rounded-md" />
<div className="bg-grey-90 h-8 w-full animate-pulse rounded-md" />
</div>

<div className="flex h-fit flex-col gap-2">
<div className="flex flex-row items-center justify-between gap-2">
<div className="bg-grey-10 h-4 w-32 animate-pulse rounded-md" />
<div className="bg-grey-90 h-4 w-32 animate-pulse rounded-md" />
</div>
<div className="bg-grey-10 h-60 w-full animate-pulse rounded-md" />
<div className="bg-grey-90 h-60 w-full animate-pulse rounded-md" />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/app-builder/src/components/Cases/CaseFiles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function FilesList({ files }: { files: CaseFile[] }) {
});

return (
<Table.Container {...getContainerProps()} className="bg-grey-00 max-h-96">
<Table.Container {...getContainerProps()} className="bg-grey-100 max-h-96">
<Table.Header headerGroups={table.getHeaderGroups()} />
<Table.Body {...getBodyProps()}>
{rows.map((row) => {
Expand Down
Loading
Loading