binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: theming colors (#1533)

Browse source 
* chore: update border colors

* chore: loading screens bg color, custom theming default values

* chore: remove unnecessary images

* chore: update static colors

* chore: update old variable names

* chore: update issue activity icon colors

* chore: update user activity icon colors
This commit is contained in:
Aaryan Khandelwal 2023-07-17 16:28:23 +05:30 • committed by GitHub
parent 090870b03e
commit 538d67dbd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
196 changed files with 442 additions and 648 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/app/components/workspace/completed-issues-graph.tsx
View file

@ -38,7 +38,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
))}
</CustomMenu>
</div>
<div className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-8 pl-4">
<div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-8 pl-4">
{data.every((item) => item.completed_count === 0) ? (
<div className="flex items-center justify-center h-72">
<h4 className="text-[#d687ff]">No issues closed this month</h4>
@ -62,7 +62,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
colors={(datum) => datum.color}
enableSlices="x"
sliceTooltip={(datum) => (
<div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
<div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-custom-text-200"> issues closed in </span>
{datum.slice.points[0].data.xFormatted}

2
apps/app/components/workspace/create-workspace-form.tsx
View file

@ -138,7 +138,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
</div>
<div className="space-y-1 text-sm">
<label htmlFor="workspaceUrl">Workspace URL</label>
<div className="flex w-full items-center rounded-md border border-custom-border-300 px-3">
<div className="flex w-full items-center rounded-md border border-custom-border-200 px-3">
<span className="whitespace-nowrap text-sm text-custom-text-200">
{window && window.location.host}/
</span>

2
apps/app/components/workspace/delete-workspace-modal.tsx
View file

@ -103,7 +103,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
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 overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4">

4
apps/app/components/workspace/help-section.tsx
View file

@ -92,7 +92,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
/>
{!sidebarCollapse && (alert || issueNumber >= 750) && (
<div
className={`border-t border-custom-sidebar-border-100 p-4 ${
className={`border-t border-custom-sidebar-border-200 p-4 ${
issueNumber >= 750
? "bg-red-500/10 text-red-600"
: issueNumber >= 500
@ -120,7 +120,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
</div>
)}
<div
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-300 bg-custom-sidebar-background-100 px-4 py-2 ${
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
sidebarCollapse ? "flex-col" : ""
}`}
>

2
apps/app/components/workspace/issues-list.tsx
View file

@ -37,7 +37,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
<div>
<h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
{issues ? (
<div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4 text-sm">
<div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 text-sm">
<div
className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-custom-background-80"

4
apps/app/components/workspace/issues-pie-chart.tsx
View file

@ -14,7 +14,7 @@ type Props = {
export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
<div>
<h3 className="mb-2 font-semibold">Issues by States</h3>
<div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
<div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
<div className="grid grid-cols-1 sm:grid-cols-4">
<div className="sm:col-span-3">
<PieGraph
@ -36,7 +36,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
activeInnerRadiusOffset={5}
colors={(datum) => datum.data.color}
tooltip={(datum) => (
<div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
<div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
<span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
{datum.datum.value}
</div>

10
apps/app/components/workspace/issues-stats.tsx
View file

@ -12,8 +12,8 @@ type Props = {
};
export const IssuesStats: React.FC<Props> = ({ data }) => (
<div className="grid grid-cols-1 rounded-[10px] border border-custom-border-300 bg-custom-background-100 lg:grid-cols-3">
<div className="grid grid-cols-1 divide-y divide-custom-border-300 border-b border-custom-border-300 lg:border-r lg:border-b-0">
<div className="grid grid-cols-1 rounded-[10px] border border-custom-border-200 bg-custom-background-100 lg:grid-cols-3">
<div className="grid grid-cols-1 divide-y divide-custom-border-200 border-b border-custom-border-200 lg:border-r lg:border-b-0">
<div className="flex">
<div className="basis-1/2 p-4">
<h4 className="text-sm">Issues assigned to you</h4>
@ -27,7 +27,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
)}
</h5>
</div>
<div className="basis-1/2 border-l border-custom-border-300 p-4">
<div className="basis-1/2 border-l border-custom-border-200 p-4">
<h4 className="text-sm">Pending issues</h4>
<h5 className="mt-2 text-2xl font-semibold">
{data ? (
@ -53,7 +53,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
)}
</h5>
</div>
<div className="basis-1/2 border-l border-custom-border-300 p-4">
<div className="basis-1/2 border-l border-custom-border-200 p-4">
<h4 className="text-sm">Issues due by this week</h4>
<h5 className="mt-2 text-2xl font-semibold">
{data ? (
@ -72,7 +72,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
Activity Graph
<Tooltip
tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
className="w-72 border border-custom-border-300"
className="w-72 border border-custom-border-200"
>
<InformationCircleIcon className="h-3 w-3" />
</Tooltip>

4
apps/app/components/workspace/sidebar-dropdown.tsx
View file

@ -136,7 +136,7 @@ export const WorkspaceSidebarDropdown = () => {
>
<Menu.Items
className="fixed left-2 z-20 mt-1 flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
border border-custom-sidebar-border-100 bg-custom-sidebar-background-90 shadow-lg focus:outline-none"
border border-custom-sidebar-border-200 bg-custom-sidebar-background-90 shadow-lg focus:outline-none"
>
<div className="flex flex-col items-start justify-start gap-3 p-3">
<div className="text-sm text-custom-sidebar-text-200">{user?.email}</div>
@ -210,7 +210,7 @@ export const WorkspaceSidebarDropdown = () => {
</div>
)}
</div>
<div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-100 px-3 py-2 text-sm">
<div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-200 px-3 py-2 text-sm">
{userLinks(workspaceSlug as string).map((link, index) => (
<Menu.Item
key={index}

2
apps/app/components/workspace/single-invitation.tsx
View file

@ -51,7 +51,7 @@ const SingleInvitation: React.FC<Props> = ({
invitationsRespond.includes(invitation.id)
? "bg-custom-background-80 text-custom-text-200"
: "bg-custom-primary text-white"
} text-sm px-4 py-2 border border-custom-border-300 rounded-3xl`}
} text-sm px-4 py-2 border border-custom-border-200 rounded-3xl`}
onClick={(e) => {
handleInvitation(
invitation,

2
apps/app/components/workspace/upgrade-to-pro-modal.tsx
View file

@ -137,7 +137,7 @@ const UpgradeToProModal: React.FC<Props> = ({ isOpen, onClose, user, issueNumber
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 overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
<div className="flex flex-wrap">
<div className="w-full md:w-3/5 p-6 flex flex-col gap-y-6">
<div className="flex gap-2">