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

chore: theme and code refactor (#5983)

Browse source 
* chore: added pi colors

* chore: de-dupe modal height

---------

Co-authored-by: gakshita <akshitagoyal1516@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2024-11-11 19:53:43 +05:30 • committed by GitHub
parent a6cc2c93f8
commit db8c4f92e8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 79 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

38
packages/ui/styles/globals.css
View file

@ -101,6 +101,19 @@
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
/* pi */
--color-pi-50: var(--color-background-90);
--color-pi-100: var(--color-background-90);
--color-pi-200: var(--color-primary-200);
--color-pi-300: var(--color-primary-200);
--color-pi-400: var(--color-primary-200);
--color-pi-500: var(--color-primary-200);
--color-pi-600: 151, 150, 246;
--color-pi-700: var(--color-primary-100);
--color-pi-800: 57, 56, 149;
--color-pi-900: 30, 29, 78;
--color-pi-950: 14, 14, 37;
}
[data-theme="light"],
@ -110,6 +123,19 @@
--color-background-100: 255, 255, 255; /* primary bg */
--color-background-90: 247, 247, 247; /* secondary bg */
--color-background-80: 232, 232, 232; /* tertiary bg */
/* pi */
--color-pi-50: var(--color-background-90);
--color-pi-100: var(--color-background-90);
--color-pi-200: var(--color-primary-200);
--color-pi-300: var(--color-primary-200);
--color-pi-400: var(--color-primary-200);
--color-pi-500: var(--color-primary-200);
--color-pi-600: 151, 150, 246;
--color-pi-700: var(--color-primary-100);
--color-pi-800: 57, 56, 149;
--color-pi-900: 30, 29, 78;
--color-pi-950: 14, 14, 37;
}
[data-theme="light"] {
@ -200,6 +226,18 @@
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
/* pi */
--color-pi-50: var(--color-background-90);
--color-pi-100: var(--color-background-90);
--color-pi-200: var(--color-primary-200);
--color-pi-300: var(--color-primary-200);
--color-pi-400: var(--color-primary-200);
--color-pi-500: var(--color-primary-200);
--color-pi-600: 151, 150, 246;
--color-pi-700: var(--color-primary-100);
--color-pi-800: 57, 56, 149;
--color-pi-900: 30, 29, 78;
--color-pi-950: 14, 14, 37;
}
[data-theme="dark"] {

2
web/core/components/inbox/modals/create-modal/create-root.tsx
View file

@ -286,7 +286,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
{shouldRenderDuplicateModal && (
<div
ref={modalContainerRef}
className="relative flex flex-col gap-2.5 h-full px-3 py-4 rounded-lg shadow-xl bg-pi-50"
className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
>
<DuplicateModalRoot

2
web/core/components/issues/issue-modal/form.tsx
View file

@ -513,7 +513,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
{shouldRenderDuplicateModal && (
<div
ref={modalContainerRef}
className="relative flex flex-col gap-2.5 h-full px-3 py-4 rounded-lg shadow-xl bg-pi-50"
className="relative flex flex-col gap-2.5 px-3 py-4 rounded-lg shadow-xl bg-pi-50"
style={{ maxHeight: formRef?.current?.offsetHeight ? `${formRef.current.offsetHeight}px` : "436px" }}
>
<DuplicateModalRoot

39
web/styles/globals.css
View file

@ -120,6 +120,19 @@
--color-sidebar-shadow-2xl: var(--color-shadow-2xl);
--color-sidebar-shadow-3xl: var(--color-shadow-3xl);
--color-sidebar-shadow-4xl: var(--color-shadow-4xl);
/* pi */
--color-pi-50: var(--color-background-90);
--color-pi-100: var(--color-background-90);
--color-pi-200: var(--color-primary-200);
--color-pi-300: var(--color-primary-200);
--color-pi-400: var(--color-primary-200);
--color-pi-500: var(--color-primary-200);
--color-pi-600: 151, 150, 246;
--color-pi-700: var(--color-primary-100);
--color-pi-800: 57, 56, 149;
--color-pi-900: 30, 29, 78;
--color-pi-950: 14, 14, 37;
}
[data-theme="light"],
@ -129,6 +142,19 @@
--color-background-100: 255, 255, 255; /* primary bg */
--color-background-90: 247, 247, 247; /* secondary bg */
--color-background-80: 232, 232, 232; /* tertiary bg */
/* pi */
--color-pi-50: var(--color-background-90);
--color-pi-100: var(--color-background-90);
--color-pi-200: var(--color-primary-200);
--color-pi-300: var(--color-primary-200);
--color-pi-400: var(--color-primary-200);
--color-pi-500: var(--color-primary-200);
--color-pi-600: 151, 150, 246;
--color-pi-700: var(--color-primary-100);
--color-pi-800: 57, 56, 149;
--color-pi-900: 30, 29, 78;
--color-pi-950: 14, 14, 37;
}
[data-theme="light"] {
@ -230,6 +256,19 @@
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
/* pi */
--color-pi-50: var(--color-background-90);
--color-pi-100: var(--color-background-90);
--color-pi-200: var(--color-primary-200);
--color-pi-300: var(--color-primary-200);
--color-pi-400: var(--color-primary-200);
--color-pi-500: var(--color-primary-200);
--color-pi-600: 151, 150, 246;
--color-pi-700: var(--color-primary-100);
--color-pi-800: 57, 56, 149;
--color-pi-900: 30, 29, 78;
--color-pi-950: 14, 14, 37;
}
[data-theme="dark"] {