Skip to content

Commit

Permalink
chore: update classnames according to new variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryan610
aaryan610 committed Jul 6, 2023
1 parent b9ada76 commit 60a8745
Show file tree
Hide file tree
Showing 294 changed files with 1,710 additions and 1,616 deletions.
4 changes: 2 additions & 2 deletions apps/app/components/account/email-code-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
type="button"
className={`mt-5 flex w-full justify-end text-xs outline-none ${
isResendDisabled
? "cursor-default text-brand-secondary"
: "cursor-pointer text-brand-accent"
? "cursor-default text-custom-text-200"
: "cursor-pointer text-custom-primary"
} `}
onClick={() => {
setIsCodeResending(true);
Expand Down
6 changes: 3 additions & 3 deletions apps/app/components/account/email-password-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,15 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
<div className="ml-auto text-sm">
{isSignUpPage ? (
<Link href="/">
<a className="font-medium text-brand-accent hover:text-brand-accent">
<a className="font-medium text-custom-primary hover:text-custom-primary">
Already have an account? Sign in.
</a>
</Link>
) : (
<button
type="button"
onClick={() => setIsResettingPassword(true)}
className="font-medium text-brand-accent hover:text-brand-accent"
className="font-medium text-custom-primary hover:text-custom-primary"
>
Forgot your password?
</button>
Expand All @@ -112,7 +112,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
</SecondaryButton>
{!isSignUpPage && (
<Link href="/sign-up">
<a className="block font-medium text-brand-accent hover:text-brand-accent text-sm mt-1">
<a className="block font-medium text-custom-primary hover:text-custom-primary text-sm mt-1">
Don{"'"}t have an account? Sign up.
</a>
</Link>
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/account/github-login-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
<Link
href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
>
<button className="flex w-full items-center justify-center gap-3 rounded border border-brand-base p-2 text-sm font-medium text-brand-secondary duration-300 hover:bg-brand-surface-2">
<button className="flex w-full items-center justify-center gap-3 rounded border border-custom-border-80 p-2 text-sm font-medium text-custom-text-200 duration-300 hover:bg-custom-background-80">
<Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
<span>Sign In with Github</span>
</button>
Expand Down
9 changes: 6 additions & 3 deletions apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>

<div className="fixed inset-0 z-10 overflow-y-auto">
Expand All @@ -111,10 +111,13 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-custom-text-100"
>
Save Analytics
</Dialog.Title>
<div className="mt-5">
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/analytics/custom-analytics/custom-analytics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const CustomAnalytics: React.FC<Props> = ({
</div>
) : (
<div className="grid h-full place-items-center p-5">
<div className="space-y-4 text-brand-secondary">
<div className="space-y-4 text-custom-text-200">
<p className="text-sm">No matching issues found. Try changing the parameters.</p>
</div>
</div>
Expand All @@ -104,7 +104,7 @@ export const CustomAnalytics: React.FC<Props> = ({
)
) : (
<div className="grid h-full place-items-center p-5">
<div className="space-y-4 text-brand-secondary">
<div className="space-y-4 text-custom-text-200">
<p className="text-sm">There was some error in fetching the data.</p>
<div className="flex items-center justify-center gap-2">
<PrimaryButton
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
}

return (
<div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
<div className="flex items-center gap-2 rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
<span
className="h-3 w-3 rounded"
style={{
backgroundColor: datum.color,
}}
/>
<span
className={`font-medium text-brand-secondary ${
className={`font-medium text-custom-text-200 ${
params.segment
? params.segment === "priority" || params.segment === "state__group"
? "capitalize"
Expand Down
1 change: 0 additions & 1 deletion apps/app/components/analytics/custom-analytics/graph/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ export const AnalyticsGraph: React.FC<Props> = ({
: undefined,
}}
theme={{
background: "rgb(var(--color-bg-base))",
axis: {},
}}
/>
Expand Down
8 changes: 4 additions & 4 deletions apps/app/components/analytics/custom-analytics/select-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
>
{!isProjectLevel && (
<div>
<h6 className="text-xs text-brand-secondary">Project</h6>
<h6 className="text-xs text-custom-text-200">Project</h6>
<Controller
name="project"
control={control}
Expand All @@ -40,7 +40,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
</div>
)}
<div>
<h6 className="text-xs text-brand-secondary">Measure (y-axis)</h6>
<h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
<Controller
name="y_axis"
control={control}
Expand All @@ -50,7 +50,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
/>
</div>
<div>
<h6 className="text-xs text-brand-secondary">Dimension (x-axis)</h6>
<h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
<Controller
name="x_axis"
control={control}
Expand All @@ -67,7 +67,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
/>
</div>
<div>
<h6 className="text-xs text-brand-secondary">Group</h6>
<h6 className="text-xs text-custom-text-200">Group</h6>
<Controller
name="segment"
control={control}
Expand Down
32 changes: 16 additions & 16 deletions apps/app/components/analytics/custom-analytics/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,17 +185,17 @@ export const AnalyticsSidebar: React.FC<Props> = ({
<div
className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
fullScreen
? "border-l border-brand-base md:h-full md:border-l md:border-brand-base md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
? "border-l border-custom-border-80 md:h-full md:border-l md:border-custom-border-80 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
: ""
}`}
>
<div className="flex items-center gap-2 flex-wrap">
<div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
<div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
<LayerDiagonalIcon height={14} width={14} />
{analytics ? analytics.total : "..."} Issues
</div>
{isProjectLevel && (
<div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
<div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
<CalendarDaysIcon className="h-3.5 w-3.5" />
{renderShortDate(
(cycleId
Expand Down Expand Up @@ -240,32 +240,32 @@ export const AnalyticsSidebar: React.FC<Props> = ({
)}
<h5 className="break-words">
{project.name}
<span className="text-brand-secondary text-xs ml-1">
<span className="text-custom-text-200 text-xs ml-1">
({project.identifier})
</span>
</h5>
</div>
<div className="mt-4 space-y-3 pl-2">
<div className="flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2">
<UserGroupIcon className="h-4 w-4 text-brand-secondary" />
<UserGroupIcon className="h-4 w-4 text-custom-text-200" />
<h6>Total members</h6>
</div>
<span className="text-brand-secondary">{project.total_members}</span>
<span className="text-custom-text-200">{project.total_members}</span>
</div>
<div className="flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2">
<ContrastIcon height={16} width={16} />
<h6>Total cycles</h6>
</div>
<span className="text-brand-secondary">{project.total_cycles}</span>
<span className="text-custom-text-200">{project.total_cycles}</span>
</div>
<div className="flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2">
<UserGroupIcon className="h-4 w-4 text-brand-secondary" />
<UserGroupIcon className="h-4 w-4 text-custom-text-200" />
<h6>Total modules</h6>
</div>
<span className="text-brand-secondary">{project.total_modules}</span>
<span className="text-custom-text-200">{project.total_modules}</span>
</div>
</div>
</div>
Expand All @@ -280,21 +280,21 @@ export const AnalyticsSidebar: React.FC<Props> = ({
<h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
<div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6>
<h6 className="text-custom-text-200">Lead</h6>
<span>
{cycleDetails.owned_by?.first_name} {cycleDetails.owned_by?.last_name}
</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Start Date</h6>
<h6 className="text-custom-text-200">Start Date</h6>
<span>
{cycleDetails.start_date && cycleDetails.start_date !== ""
? renderShortDate(cycleDetails.start_date)
: "No start date"}
</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Target Date</h6>
<h6 className="text-custom-text-200">Target Date</h6>
<span>
{cycleDetails.end_date && cycleDetails.end_date !== ""
? renderShortDate(cycleDetails.end_date)
Expand All @@ -308,22 +308,22 @@ export const AnalyticsSidebar: React.FC<Props> = ({
<h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
<div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6>
<h6 className="text-custom-text-200">Lead</h6>
<span>
{moduleDetails.lead_detail?.first_name}{" "}
{moduleDetails.lead_detail?.last_name}
</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Start Date</h6>
<h6 className="text-custom-text-200">Start Date</h6>
<span>
{moduleDetails.start_date && moduleDetails.start_date !== ""
? renderShortDate(moduleDetails.start_date)
: "No start date"}
</span>
</div>
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Target Date</h6>
<h6 className="text-custom-text-200">Target Date</h6>
<span>
{moduleDetails.target_date && moduleDetails.target_date !== ""
? renderShortDate(moduleDetails.target_date)
Expand Down Expand Up @@ -357,7 +357,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
</div>
<div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Network</h6>
<h6 className="text-custom-text-200">Network</h6>
<span>
{
NETWORK_CHOICES[
Expand Down
10 changes: 5 additions & 5 deletions apps/app/components/analytics/custom-analytics/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
<div className="flow-root">
<div className="overflow-x-auto">
<div className="inline-block min-w-full align-middle">
<table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
<thead className="bg-brand-surface-2">
<tr className="divide-x divide-brand-base text-sm text-brand-base">
<table className="min-w-full divide-y divide-custom-border-80 whitespace-nowrap border-y border-custom-border-80">
<thead className="bg-custom-background-80">
<tr className="divide-x divide-custom-border-80 text-sm text-custom-text-100">
<th scope="col" className="py-3 px-2.5 text-left font-medium">
{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
</th>
Expand Down Expand Up @@ -80,11 +80,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
)}
</tr>
</thead>
<tbody className="divide-y divide-brand-base">
<tbody className="divide-y divide-custom-border-80">
{barGraphData.data.map((item, index) => (
<tr
key={`table-row-${index}`}
className="divide-x divide-brand-base text-xs text-brand-secondary"
className="divide-x divide-custom-border-80 text-xs text-custom-text-200"
>
<td
className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
Expand Down
16 changes: 8 additions & 8 deletions apps/app/components/analytics/project-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,24 +150,24 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {

return (
<div
className={`absolute top-0 z-30 h-full bg-brand-surface-1 ${
className={`absolute top-0 z-30 h-full bg-custom-background-90 ${
fullScreen ? "p-2 w-full" : "w-1/2"
} ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
>
<div
className={`flex h-full flex-col overflow-hidden border-brand-base bg-brand-base text-left ${
className={`flex h-full flex-col overflow-hidden border-custom-border-80 bg-custom-background-100 text-left ${
fullScreen ? "rounded-lg border" : "border-l"
}`}
>
<div className="flex items-center justify-between gap-4 bg-brand-base px-5 py-4 text-sm">
<div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
<h3 className="break-words">
Analytics for{" "}
{cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
</h3>
<div className="flex items-center gap-2">
<button
type="button"
className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
onClick={() => setFullScreen((prevData) => !prevData)}
>
{fullScreen ? (
Expand All @@ -178,21 +178,21 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
</button>
<button
type="button"
className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
onClick={handleClose}
>
<XMarkIcon className="h-4 w-4" />
</button>
</div>
</div>
<Tab.Group as={Fragment}>
<Tab.List as="div" className="space-x-2 border-b border-brand-base p-5 pt-0">
<Tab.List as="div" className="space-x-2 border-b border-custom-border-80 p-5 pt-0">
{tabsList.map((tab) => (
<Tab
key={tab}
className={({ selected }) =>
`rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
selected ? "bg-brand-surface-2" : ""
`rounded-3xl border border-custom-border-80 px-4 py-2 text-xs hover:bg-custom-background-80 ${
selected ? "bg-custom-background-80" : ""
}`
}
onClick={() => trackAnalyticsEvent(tab)}
Expand Down

0 comments on commit 60a8745

Please sign in to comment.