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/ui/avatar.tsx
View file

@ -37,7 +37,7 @@ export const Avatar: React.FC<AvatarProps> = ({
{user && user.avatar && user.avatar !== "" ? (
<div
className={`rounded-full border-2 ${
index ? "border-custom-border-300 bg-custom-background-80" : "border-transparent"
index ? "border-custom-border-200 bg-custom-background-80" : "border-transparent"
}`}
style={{
height: height,
@ -52,7 +52,7 @@ export const Avatar: React.FC<AvatarProps> = ({
</div>
) : (
<div
className="grid place-items-center rounded-full border-2 border-custom-border-300 bg-gray-700 text-xs capitalize text-white"
className="grid place-items-center rounded-full border-2 border-custom-border-200 bg-gray-700 text-xs capitalize text-white"
style={{
height: height,
width: width,

4
apps/app/components/ui/buttons/secondary-button.tsx
View file

@ -13,13 +13,13 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
}) => (
<button
type={type}
className={`${className} border border-custom-border-300 font-medium duration-300 ${
className={`${className} border border-custom-border-200 font-medium duration-300 ${
size === "sm"
? "rounded px-3 py-2 text-xs"
: size === "md"
? "rounded-md px-3.5 py-2 text-sm"
: "rounded-lg px-4 py-2 text-base"
} ${disabled ? "cursor-not-allowed border-custom-border-300 bg-custom-background-90" : ""} ${
} ${disabled ? "cursor-not-allowed border-custom-border-200 bg-custom-background-90" : ""} ${
outline
? "bg-transparent hover:bg-custom-background-80"
: "bg-custom-background-80 hover:border-opacity-70 hover:bg-opacity-70"

4
apps/app/components/ui/context-menu.tsx
View file

@ -37,14 +37,14 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
}`}
>
<div
className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-custom-border-300 bg-custom-background-90 p-2 text-xs shadow-lg`}
className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs shadow-lg`}
style={{
left: `${position.x}px`,
top: `${position.y}px`,
}}
>
{title && (
<h4 className="border-b border-custom-border-300 px-1 py-1 pb-2 text-[0.8rem] font-medium">
<h4 className="border-b border-custom-border-200 px-1 py-1 pb-2 text-[0.8rem] font-medium">
{title}
</h4>
)}

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

@ -81,7 +81,7 @@ const CustomMenu = ({
} ${
noBorder
? "rounded-md"
: "rounded-md border border-custom-border-300 shadow-sm focus:outline-none"
: "rounded-md border border-custom-border-200 shadow-sm focus:outline-none"
} ${
width === "sm"
? "w-10"
@ -136,7 +136,7 @@ const CustomMenu = ({
} ${
menuItemsWhiteBg
? "border-custom-border-200 bg-custom-background-100"
: "border-custom-border-300 bg-custom-background-90"
: "border-custom-border-200 bg-custom-background-90"
} ${menuItemsClassName}`}
>
<div className="py-1">{children}</div>

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

@ -81,7 +81,7 @@ export const CustomSearchSelect = ({
<Combobox.Button as="div">{customButton}</Combobox.Button>
) : (
<Combobox.Button
className={`flex w-full border border-custom-border-300 ${
className={`flex w-full border border-custom-border-200 ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
} ${
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
@ -110,7 +110,7 @@ export const CustomSearchSelect = ({
leaveTo="opacity-0 translate-y-1"
>
<Combobox.Options
className={`${optionsClassName} absolute min-w-[10rem] border border-custom-border-300 p-2 ${
className={`${optionsClassName} absolute min-w-[10rem] border border-custom-border-200 p-2 ${
position === "right" ? "right-0" : "left-0"
} ${
verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
@ -118,7 +118,7 @@ export const CustomSearchSelect = ({
dropdownWidth ? dropdownWidth : ``
} `}
>
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-300 bg-custom-background-90 px-2">
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"

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

@ -57,8 +57,8 @@ const CustomSelect = ({
disabled
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} items-center justify-between gap-1 rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
input ? "border-custom-border-300 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 focus:outline-none ${
input ? "border-custom-border-200 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${
textAlignment === "right"
? "text-right"
@ -83,7 +83,7 @@ const CustomSelect = ({
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options
className={`${optionsClassName} absolute border border-custom-border-300 ${
className={`${optionsClassName} absolute border border-custom-border-200 ${
position === "right" ? "right-0" : "left-0"
} ${
verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"

2
apps/app/components/ui/date.tsx
View file

@ -17,7 +17,7 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
<Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => (
<>
<Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-300 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
<Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
{value ? (
<>

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

@ -47,7 +47,7 @@ export const CustomDatePicker: React.FC<Props> = ({
} ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} ${
noBorder ? "" : "border border-custom-border-300"
noBorder ? "" : "border border-custom-border-200"
} w-full rounded-md caret-transparent outline-none ${className}`}
dateFormat="MMM dd, yyyy"
isClearable={isClearable}

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

@ -26,7 +26,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
<div className="mt-1 text-sm text-custom-text-200">{description}</div>
<ul
role="list"
className="mt-6 divide-y divide-custom-border-300 border-t border-b border-custom-border-300"
className="mt-6 divide-y divide-custom-border-200 border-t border-b border-custom-border-200"
>
{children}
</ul>

1
apps/app/components/ui/index.ts
View file

@ -14,7 +14,6 @@ export * from "./empty-state";
export * from "./labels-list";
export * from "./linear-progress-indicator";
export * from "./loader";
export * from "./multi-input";
export * from "./multi-level-dropdown";
export * from "./multi-level-select";
export * from "./progress-bar";

2
apps/app/components/ui/input/index.tsx
View file

@ -36,7 +36,7 @@ export const Input: React.FC<Props> = ({
}}
className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
mode === "primary"
? "rounded-md border border-custom-border-300"
? "rounded-md border border-custom-border-200"
: mode === "transparent"
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
: mode === "trueTransparent"

2
apps/app/components/ui/labels-list.tsx
View file

@ -17,7 +17,7 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
{labels.slice(0, length).map((color, 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 border-custom-border-300
className={`h-4 w-4 flex-shrink-0 rounded-full border border-custom-border-200
`}
style={{
backgroundColor: color && color !== "" ? color : "#000000",

78
apps/app/components/ui/multi-input.tsx
View file

@ -1,78 +0,0 @@
// react
import React from "react";
const isEmailValid = (email: string) =>
String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) => {
const handleKeyDown = (e: any) => {
if (e.key !== "Enter") return;
const value = e.target.value;
if (!value.trim()) return;
if (isEmailValid(value) && !watch(name)?.find((item: any) => item.email === value)) {
setValue(name, [...(watch(name) || []), { email: value }]);
e.target.value = "";
}
};
const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
const value = e.target.value;
if (!value.trim()) return;
if (isEmailValid(value) && !watch(name)?.find((item: any) => item.email === value)) {
setValue(name, [...(watch(name) || []), { email: value }]);
e.target.value = "";
} else {
e.target.value = "";
}
};
const handleChange = (e: any) => {
const value = e.target.value.trim();
if (!value) return;
if (value.includes(",")) {
const tags = value.split(",");
tags.forEach((tag: string) => {
if (isEmailValid(tag) && !watch(name)?.find((item: any) => item.email === tag)) {
setValue(name, [...(watch(name) || []), { email: tag }]);
}
});
e.target.value = "";
}
};
const removeTag = (index: Number) => {
setValue(
name,
watch(name).filter((_: string, i: any) => i !== index)
);
};
return (
<>
{label && <label className="mb-2 text-custom-text-200">{label}</label>}
<div className="rounded-md border border-custom-border-300 p-2">
{watch(name)?.map((tag: any, index: number) => (
<button
type="button"
className="m-1.5 rounded-full bg-custom-background-80 px-3 py-2 "
key={index}
>
{tag.email} <span onClick={() => removeTag(index)}>&times;</span>
</button>
))}
<input
onKeyDown={handleKeyDown}
onBlur={handleBlur}
onChange={handleChange}
type="text"
placeholder={placeholder}
className="block w-full rounded-md bg-transparent p-1.5 text-sm focus:outline-none"
/>
</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-300 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 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"
}`}
>

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

@ -88,7 +88,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
<>
{openChildFor?.id === option.id && (
<div
className={`absolute h-auto max-h-72 w-72 rounded-lg border border-custom-border-300 bg-custom-background-80 ${
className={`absolute h-auto max-h-72 w-72 rounded-lg border border-custom-border-200 bg-custom-background-80 ${
direction === "right"
? "left-full translate-x-2 rounded-tl-none shadow-md"
: "right-full -translate-x-2 rounded-tr-none shadow-md"
@ -123,7 +123,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
))}
<div
className={`absolute h-0 w-0 border-t-8 border-custom-border-300 ${
className={`absolute h-0 w-0 border-t-8 border-custom-border-200 ${
direction === "right"
? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
: "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"

4
apps/app/components/ui/product-updates-modal.tsx
View file

@ -67,12 +67,12 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
updates.map((item, index) => (
<React.Fragment key={item.id}>
<div className="flex items-center gap-3 text-xs text-custom-text-200">
<span className="flex items-center rounded-full border border-custom-border-300 bg-custom-background-90 px-3 py-1.5 text-xs">
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
{item.tag_name}
</span>
<span>{renderLongDateFormat(item.published_at)}</span>
{index === 0 && (
<span className="flex items-center rounded-full border border-custom-border-300 bg-custom-primary px-3 py-1.5 text-xs text-white">
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
New
</span>
)}

2
apps/app/components/ui/range-datepicker.tsx
View file

@ -50,7 +50,7 @@ export const CustomRangeDatePicker: React.FC<Props> = ({
: ""
} ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} w-full rounded-md border border-custom-border-300 bg-transparent caret-transparent ${className}`}
} w-full rounded-md border border-custom-border-200 bg-transparent caret-transparent ${className}`}
dateFormat="dd-MM-yyyy"
disabled={disabled}
selectsStart={selectsStart}

2
apps/app/components/ui/text-area/index.tsx
View file

@ -70,7 +70,7 @@ export const TextArea: React.FC<Props> = ({
noPadding ? "" : "px-3 py-2"
} outline-none ${
mode === "primary"
? "rounded-md border border-custom-border-300"
? "rounded-md border border-custom-border-200"
: mode === "transparent"
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
: ""

2
apps/app/components/ui/toggle-switch.tsx
View file

@ -19,7 +19,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
onChange={onChange}
className={`relative inline-flex ${
size === "sm" ? "h-3.5 w-6" : size === "md" ? "h-4 w-7" : "h-6 w-11"
} flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-300 transition-colors duration-200 ease-in-out focus:outline-none ${
} flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
value ? "bg-green-500" : "bg-custom-background-80"
} ${className || ""}`}
>