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

fix: updated text and background colors (#1496)

Browse source 
* fix: custom colors opacity

* chore: update text colors for dark mode

* fix: dropdown text colors, datepicker bg color

* chore: update text colors

* chore: updated primary bg color
This commit is contained in:
Aaryan Khandelwal 2023-07-11 15:18:47 +05:30 • committed by GitHub
parent 7554988164
commit 253edebb93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 158 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/app/components/analytics/custom-analytics/sidebar.tsx
View file

@ -238,8 +238,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{project?.name.charAt(0)}
</span>
)}
<h5 className="break-words">
{project.name}
<h5 className="flex items-center gap-1">
<p className="break-words">{project.name}</p>
<span className="text-custom-text-200 text-xs ml-1">
({project.identifier})
</span>

4
apps/app/components/core/board-view/single-issue.tsx
View file

@ -334,9 +334,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
)}
<h5 className="text-sm group-hover:text-custom-primary break-words line-clamp-3">
{issue.name}
</h5>
<h5 className="text-sm break-words line-clamp-3">{issue.name}</h5>
</a>
</Link>
<div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">

88
apps/app/components/core/filters/issues-view-filter.tsx
View file

@ -23,10 +23,33 @@ import {
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
import { Properties } from "types";
import { Properties, TIssueViewOptions } from "types";
// constants
import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
const issueViewOptions: { type: TIssueViewOptions; icon: any }[] = [
{
type: "list",
icon: <ListBulletIcon className="h-4 w-4" />,
},
{
type: "kanban",
icon: <Squares2X2Icon className="h-4 w-4" />,
},
{
type: "calendar",
icon: <CalendarDaysIcon className="h-4 w-4" />,
},
{
type: "spreadsheet",
icon: <Icon iconName="table_chart" />,
},
{
type: "gantt_chart",
icon: <Icon iconName="waterfall_chart" className="rotate-90" />,
},
];
export const IssuesFilterView: React.FC = () => {
const router = useRouter();
const { workspaceSlug, projectId, viewId } = router.query;
@ -56,53 +79,20 @@ export const IssuesFilterView: React.FC = () => {
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "list" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("list")}
>
<ListBulletIcon className="h-4 w-4 text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "kanban" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("kanban")}
>
<Squares2X2Icon className="h-4 w-4 text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "calendar" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("calendar")}
>
<CalendarDaysIcon className="h-4 w-4 text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "spreadsheet" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("spreadsheet")}
>
<Icon iconName="table_chart" className="text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "gantt_chart" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("gantt_chart")}
>
<span className="material-symbols-rounded text-custom-sidebar-text-200 text-[18px] rotate-90">
waterfall_chart
</span>
</button>
{issueViewOptions.map((option) => (
<button
key={option.type}
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
issueView === option.type
? "bg-custom-sidebar-background-80"
: "text-custom-sidebar-text-200"
}`}
onClick={() => setIssueView(option.type)}
>
{option.icon}
</button>
))}
</div>
<SelectFilters
filters={filters}
@ -146,7 +136,7 @@ export const IssuesFilterView: React.FC = () => {
{({ open }) => (
<>
<Popover.Button
className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none ${
className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
open
? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
: "text-custom-sidebar-text-200"

6
apps/app/components/cycles/single-cycle-card.tsx
View file

@ -279,11 +279,9 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
e.preventDefault();
handleEditCycle();
}}
className="flex cursor-pointer items-center rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-90"
className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
>
<span>
<PencilIcon className="h-4 w-4" />
</span>
<PencilIcon className="h-4 w-4" />
</button>
)}

23
apps/app/components/cycles/single-cycle-list.tsx
View file

@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
// hooks
@ -157,7 +156,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
<a className="w-full">
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
<div className="flex items-center justify-between gap-1">
<span className="flex items-start gap-2">
<div className="flex items-start gap-2">
<ContrastIcon
className="mt-1 h-5 w-5"
color={`${
@ -179,15 +178,15 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
position="top-left"
>
<h3 className="break-words w-full text-base font-semibold">
{truncateText(cycle.name, 70)}
{truncateText(cycle.name, 60)}
</h3>
</Tooltip>
<p className="mt-2 text-custom-text-200 break-words w-full">
{cycle.description}
</p>
</div>
</span>
<span className="flex items-center gap-4 capitalize">
</div>
<div className="flex-shrink-0 flex items-center gap-4">
<span
className={`rounded-full px-1.5 py-0.5
${
@ -203,14 +202,14 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1">
<span className="flex gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
{findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
</span>
) : cycleStatus === "upcoming" ? (
<span className="flex gap-1">
<AlarmClockIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
{findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
</span>
) : cycleStatus === "completed" ? (
<span className="flex items-center gap-1">
@ -236,12 +235,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
{cycleStatus !== "draft" && (
<div className="flex items-center justify-start gap-2 text-custom-text-200">
<div className="flex items-start gap-1 ">
<div className="flex items-start gap-1 whitespace-nowrap">
<CalendarDaysIcon className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<ArrowRightIcon className="h-4 w-4" />
<div className="flex items-start gap-1 ">
<div className="flex items-start gap-1 whitespace-nowrap">
<TargetIcon className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
@ -287,7 +286,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1">
<span className="flex gap-1 whitespace-nowrap">
{cycle.total_issues > 0 ? (
<>
<RadialProgressBar
@ -380,7 +379,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</span>
</div>
</div>
</div>
</a>

7
apps/app/components/estimates/single-estimate.tsx
View file

@ -72,7 +72,7 @@ export const SingleEstimate: React.FC<Props> = ({
<h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
{estimate.name}
{projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs capitalize text-green-500">
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">
In use
</span>
)}
@ -83,7 +83,10 @@ export const SingleEstimate: React.FC<Props> = ({
</div>
<div className="flex items-center gap-2">
{projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
<SecondaryButton onClick={handleUseEstimate} className="py-1">
<SecondaryButton
onClick={handleUseEstimate}
className="!py-1 text-custom-text-200 hover:text-custom-text-100"
>
Use
</SecondaryButton>
)}

7
apps/app/components/issues/view-select/due-date.tsx
View file

@ -8,6 +8,7 @@ import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date
import trackEventServices from "services/track-event.service";
// types
import { ICurrentUserResponse, IIssue } from "types";
import useIssuesView from "hooks/use-issues-view";
type Props = {
issue: IIssue;
@ -29,6 +30,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug } = router.query;
const { issueView } = useIssuesView();
return (
<Tooltip
tooltipHeading="Due Date"
@ -71,7 +74,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
user
);
}}
className={issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}
className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
}`}
noBorder={noBorder}
disabled={isNotAllowed}
/>

41
apps/app/components/issues/view-select/label.tsx
View file

@ -71,9 +71,15 @@ export const ViewLabelSelect: React.FC<Props> = ({
position={tooltipPosition}
tooltipHeading="Labels"
tooltipContent={
issue.label_details.length > 0
? issue.label_details.map((label) => label.name ?? "").join(", ")
: "No Label"
issue.labels.length > 0
? issue.labels
.map((labelId) => {
const label = issueLabels?.find((l) => l.id === labelId);
return label?.name ?? "";
})
.join(", ")
: "No label"
}
>
<div
@ -81,20 +87,23 @@ export const ViewLabelSelect: React.FC<Props> = ({
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center gap-2 text-custom-text-200`}
>
{issue.label_details.length > 0 ? (
{issue.labels.length > 0 ? (
<>
{issue.label_details.slice(0, 4).map((label, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100
`}
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
}}
/>
</div>
))}
{issue.label_details.length > 4 ? <span>+{issue.label_details.length - 4}</span> : null}
{issue.labels.slice(0, 4).map((labelId, index) => {
const label = issueLabels?.find((l) => l.id === labelId);
return (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100`}
style={{
backgroundColor: label?.color ?? "#000000",
}}
/>
</div>
);
})}
{issue.labels.length > 4 ? <span>+{issue.labels.length - 4}</span> : null}
</>
) : (
<>

3
apps/app/components/issues/view-select/state.tsx
View file

@ -10,7 +10,6 @@ import { CustomSearchSelect, Tooltip } from "components/ui";
// icons
import { getStateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { getStatesList } from "helpers/state.helper";
// types
import { ICurrentUserResponse, IIssue } from "types";
@ -67,7 +66,7 @@ export const ViewStateSelect: React.FC<Props> = ({
const stateLabel = (
<Tooltip
tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
tooltipContent={selectedOption?.name ?? ""}
position={tooltipPosition}
>
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">

4
apps/app/components/modules/single-module-card.tsx
View file

@ -185,12 +185,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4" />
<span>Start:</span>
<span>{renderShortDateWithYearFormat(startDate)}</span>
<span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
</div>
<div className="flex items-start gap-1">
<TargetIcon className="h-4 w-4" />
<span>End:</span>
<span>{renderShortDateWithYearFormat(endDate)}</span>
<span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
</div>
</div>
</div>

2
apps/app/components/project/create-project-modal.tsx
View file

@ -184,7 +184,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
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="transform rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
{watch("cover_image") !== null && (
<img

4
apps/app/components/project/single-sidebar-project.tsx
View file

@ -111,9 +111,9 @@ export const SingleSidebarProject: React.FC<Props> = ({
)}
{!sidebarCollapse && (
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
<h5 className={`overflow-hidden text-sm ${open ? "" : "text-custom-text-200"}`}>
{truncateText(project?.name, 20)}
</p>
</h5>
)}
</div>
{!sidebarCollapse && (

2
apps/app/components/ui/custom-menu.tsx
View file

@ -59,7 +59,7 @@ const CustomMenu = ({
{ellipsis || verticalEllipsis ? (
<Menu.Button
type="button"
className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 outline-none"
>
<EllipsisHorizontalIcon
className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}

6
apps/app/components/ui/custom-search-select.tsx
View file

@ -148,8 +148,8 @@ export const CustomSearchSelect = ({
value={option.value}
className={({ active, selected }) =>
`${active || selected ? "bg-custom-background-80" : ""} ${
selected ? "font-medium" : ""
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
selected ? "text-custom-text-100" : "text-custom-text-200"
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
}
>
{({ active, selected }) => (
@ -157,7 +157,7 @@ export const CustomSearchSelect = ({
{option.content}
{multiple ? (
<div
className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
active || selected ? "opacity-100" : "opacity-0"
}`}
>

4
apps/app/components/ui/custom-select.tsx
View file

@ -118,8 +118,8 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
value={value}
className={({ active, selected }) =>
`${className} ${active || selected ? "bg-custom-background-80" : ""} ${
selected ? "font-medium" : ""
} cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200`
selected ? "text-custom-text-100" : "text-custom-text-200"
} cursor-pointer select-none truncate rounded px-1 py-1.5`
}
>
{({ selected }) => (

4
apps/app/components/ui/datepicker.tsx
View file

@ -42,13 +42,13 @@ export const CustomDatePicker: React.FC<Props> = ({
: renderAs === "button"
? `px-2 py-1 text-xs shadow-sm ${
disabled ? "" : "hover:bg-custom-background-80"
} duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
} duration-300`
: ""
} ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} ${
noBorder ? "" : "border border-custom-border-100"
} w-full rounded-md bg-transparent caret-transparent ${className}`}
} w-full rounded-md caret-transparent outline-none ${className}`}
dateFormat="MMM dd, yyyy"
isClearable={isClearable}
disabled={disabled}

8
apps/app/components/ui/empty-space.tsx
View file

@ -64,13 +64,13 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
<Icon className="h-6 w-6 text-white" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-custom-text-100">{title}</div>
{description ? <div className="text-sm text-custom-text-200">{description}</div> : null}
<div className="min-w-0 flex-1 text-custom-text-200">
<div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
{description ? <div className="text-sm">{description}</div> : null}
</div>
<div className="flex-shrink-0 self-center">
<ChevronRightIcon
className="h-5 w-5 text-custom-text-100 group-hover:text-custom-text-200"
className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
aria-hidden="true"
/>
</div>

2
apps/app/components/ui/multi-level-dropdown.tsx
View file

@ -43,7 +43,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
<div>
<Menu.Button
onClick={() => setOpenChildFor(null)}
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
}`}
>

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

@ -108,9 +108,9 @@ export const WorkspaceSidebarDropdown = () => {
</div>
{!sidebarCollapse && (
<p>
<h4 className="text-custom-text-100">
{activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
</p>
</h4>
)}
</div>
</Menu.Button>
@ -166,7 +166,13 @@ export const WorkspaceSidebarDropdown = () => {
)}
</span>
<h5 className="text-sm">{truncateText(workspace.name, 18)}</h5>
<h5
className={`text-sm ${
workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
}`}
>
{truncateText(workspace.name, 18)}
</h5>
</div>
<span className="p-1">
<CheckIcon