diff --git a/apps/frontend/public/postiz-text.svg b/apps/frontend/public/postiz-text.svg index 26c46d62..24c9218c 100644 --- a/apps/frontend/public/postiz-text.svg +++ b/apps/frontend/public/postiz-text.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/apps/frontend/src/app/(site)/messages/page.tsx b/apps/frontend/src/app/(site)/messages/page.tsx index c0525d21..626b781e 100644 --- a/apps/frontend/src/app/(site)/messages/page.tsx +++ b/apps/frontend/src/app/(site)/messages/page.tsx @@ -11,8 +11,8 @@ export const metadata: Metadata = { export default async function Index() { return ( -
-
+
+
Select a conversation and chat away.
diff --git a/apps/frontend/src/app/auth/layout.tsx b/apps/frontend/src/app/auth/layout.tsx index affad792..b823afca 100644 --- a/apps/frontend/src/app/auth/layout.tsx +++ b/apps/frontend/src/app/auth/layout.tsx @@ -20,7 +20,7 @@ export default async function AuthLayout({
-
+
{isGeneral() ? ( - + + + + + + ) : (
Gitroom
)}
-
+
{children}
-
+
-
+
-
-
+
+
diff --git a/apps/frontend/src/app/colors.scss b/apps/frontend/src/app/colors.scss new file mode 100644 index 00000000..0a3cf3ca --- /dev/null +++ b/apps/frontend/src/app/colors.scss @@ -0,0 +1,138 @@ +:root { + .dark { + --color-primary: #000000; + --color-secondary: #090b13; + --color-text: #ffffff; + --color-third: #080b13; + --color-forth: #612ad5; + --color-fifth: #28344f; + --color-sixth: #0b101b; + --color-seventh: #7236f1; + --color-gray: #8c8c8c; + --color-input: #131b2c; + --color-input-text: #64748b; + --color-table-border: #1f2941; + --color-custom1: #324264; + --color-custom2: #141c2c; + --color-custom3: #0b0f1c; + --color-custom4: #8155dd; + --color-custom5: #e9e9f1; + --color-custom6: #172034; + --color-custom7: #7950f2; + --color-custom8: #0f1524; + --color-custom9: #354258; + --color-custom10: #e4b895; + --color-custom11: #8b90ff; + --color-custom12: #b7c1ff; + --color-custom13: #ffac30; + --color-custom14: #576a9a; + --color-custom15: #0a0a0a; + --color-custom16: #121a2d; + --color-custom17: #d3d3d3; + --color-custom18: #aaaaaa; + --color-custom19: #f97066; + --color-custom20: #121b2c; + --color-custom21: #506490; + --color-custom22: #b91c1c; + --color-custom23: #06080d; + --color-custom24: #eaff00; + --color-custom25: #2e3336; + --color-custom26: #1d9bf0; + --color-custom27: #71767b; + --color-custom28: #b69dec; + --color-custom29: #291259; + --color-custom30: #5826c2; + --color-custom31: #0f1727; + --color-custom32: #181818; + --color-custom33: #f2f2f2; + --color-custom34: #334155; + --color-custom35: #242424; + --color-custom36: #6b6b6b; + --color-custom37: #0b1416; + --color-custom38: #d9d9d9; + --color-custom39: #ffffff; + --color-custom40: #0e0e0e; + --color-custom41: #cebdf2; + --color-custom42: #32d583; + --color-custom43: #425379; + --color-custom44: #283450; + --color-custom45: #832ad5; + --color-custom46: #658dac; + --color-custom47: #182034; + --color-custom48: #080b14; + --color-custom49: #0a0b14; + --color-custom50: #262373; + --color-custom51: #4f46e5; + --color-custom52: #eaeef2; + --color-custom53: #7c7d86; + --color-custom54: #afb8c1; + } + .light { + --color-primary: #fff; + --color-secondary: #fff; + --color-text: #000; + --color-third: white; + --color-forth: #612ad5; + --color-fifth: #efefef; + --color-sixth: #fff; + --color-seventh: #7236f1; + --color-gray: #8c8c8c; + --color-input: #f8f8f8; + --color-input-text: #64748b; + --color-table-border: #efefef; + --color-custom1: #324264; + --color-custom2: #f8f8f8; + --color-custom3: #fff; + --color-custom4: #8155dd; + --color-custom5: #e9e9f1; + --color-custom6: #fff; + --color-custom7: #7950f2; + --color-custom8: #efefef; + --color-custom9: #354258; + --color-custom10: #e4b895; + --color-custom11: #8b90ff; + --color-custom12: #b7c1ff; + --color-custom13: #ffac30; + --color-custom14: #576a9a; + --color-custom15: #0a0a0a; + --color-custom16: #121a2d; + --color-custom17: #000; + --color-custom18: #000; + --color-custom19: #f97066; + --color-custom20: #F5F5F5; + --color-custom21: #506490; + --color-custom22: #b91c1c; + --color-custom23: #F5F5F5; + --color-custom24: #eaff00; + --color-custom25: #2e3336; + --color-custom26: #1d9bf0; + --color-custom27: #71767b; + --color-custom28: #b69dec; + --color-custom29: #291259; + --color-custom30: #efefef; + --color-custom31: #E0E0E0; + --color-custom32: #181818; + --color-custom33: #f2f2f2; + --color-custom34: #334155; + --color-custom35: #242424; + --color-custom36: #6b6b6b; + --color-custom37: #0b1416; + --color-custom38: #d9d9d9; + --color-custom39: #000; + --color-custom40: #fff; + --color-custom41: #cebdf2; + --color-custom42: #32d583; + --color-custom43: #425379; + --color-custom44: #283450; + --color-custom45: #832ad5; + --color-custom46: #658dac; + --color-custom47: #182034; + --color-custom48: #fff; + --color-custom49: #0a0b14; + --color-custom50: #262373; + --color-custom51: #4f46e5; + --color-custom52: #eaeef2; + --color-custom53: #7c7d86; + --color-custom54: #afb8c1; + } +} diff --git a/apps/frontend/src/app/global.css b/apps/frontend/src/app/global.scss similarity index 83% rename from apps/frontend/src/app/global.css rename to apps/frontend/src/app/global.scss index 40b6a736..64dec72f 100644 --- a/apps/frontend/src/app/global.css +++ b/apps/frontend/src/app/global.scss @@ -1,11 +1,12 @@ @tailwind base; @tailwind components; @tailwind utilities; +@import "./colors.scss"; @import "./polonto.css"; body, html { - background-color: #000; + @apply bg-primary; } .box { position: relative; @@ -33,11 +34,11 @@ html { } .showbox { - color: black; + @apply text-primary; } .showbox:after { + @apply bg-textColor; opacity: 1; - background: white; transition: all 0.3s ease-in-out; } .table1 { @@ -46,10 +47,9 @@ html { } .table1 thead { - background-color: #0f1524; + @apply bg-customColor8 border-b border-b-fifth; height: 44px; font-size: 12px; - border-bottom: 1px solid #28344f; } .table1 thead th, .table1 tbody td { @@ -63,21 +63,24 @@ html { } .swal2-modal { - background-color: black !important; - border: 2px solid #0b101b; + @apply bg-primary #{!important}; + @apply border-b-[2px] border-b-sixth; } .swal2-modal * { - color: white !important; + @apply text-textColor #{!important}; } .swal2-icon { - color: white !important; - border-color: white !important; + @apply text-textColor bg-primary #{!important}; } +.swal2-cancel { + @apply text-white #{!important}; +} .swal2-confirm { - background-color: #262373 !important; + @apply bg-customColor50 #{!important}; + @apply text-white #{!important}; } .w-md-editor-text { @@ -85,12 +88,11 @@ html { } .react-tags { + @apply border border-fifth bg-input; position: relative; - border: 1px solid #28344f; padding-left: 16px; height: 44px; border-radius: 4px; - background: #131b2c; /* shared font styles */ font-size: 14px; line-height: 1.2; @@ -101,12 +103,12 @@ html { } .react-tags.is-active { - border-color: #4f46e5; + @apply border-customColor51; } .react-tags.is-disabled { opacity: 0.75; - background-color: #eaeef2; + @apply bg-customColor52; /* Prevent any clicking on the component */ pointer-events: none; cursor: not-allowed; @@ -142,15 +144,14 @@ html { padding: 0.15rem 0.5rem; border: 0; border-radius: 3px; - background: #7236f1; + @apply bg-seventh; /* match the font styles */ font-size: inherit; line-height: inherit; } .react-tags__tag:hover { - color: #ffffff; - background-color: #4f46e5; + @apply text-textColor bg-customColor51; } .react-tags__tag::after { @@ -174,11 +175,11 @@ html { ); margin-left: 0.5rem; font-size: 0.875rem; - background-color: #7c7d86; + @apply bg-customColor53; } .react-tags__tag:hover::after { - background-color: #ffffff; + @apply bg-primary; } .react-tags__combobox { @@ -203,7 +204,7 @@ html { } .react-tags__combobox-input::placeholder { - color: #7c7d86; + @apply text-customColor53; opacity: 1; } @@ -216,8 +217,7 @@ html { right: -2px; max-height: 12.5rem; overflow-y: auto; - background: #131b2c; - border: 1px solid #afb8c1; + @apply bg-input border border-customColor54; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -4px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; @@ -229,16 +229,15 @@ html { .react-tags__listbox-option:hover { cursor: pointer; - background: #080b13; + @apply bg-third; } .react-tags__listbox-option:not([aria-disabled='true']).is-active { - background: #4f46e5; - color: #ffffff; + @apply text-textColor bg-customColor51; } .react-tags__listbox-option[aria-disabled='true'] { - color: #7c7d86; + @apply text-customColor53; cursor: not-allowed; pointer-events: none; } @@ -249,7 +248,7 @@ html { } .react-tags__listbox-option[aria-selected='true']:not(.is-active)::after { - color: #4f46e5; + @apply text-customColor51; } .react-tags__listbox-option-highlight { @@ -260,7 +259,7 @@ html { /* display: none;*/ /*}*/ .w-md-editor { - background-color: #131b2c !important; + @apply bg-input #{!important}; border: 0 !important; box-shadow: none !important; border-radius: 8px !important; @@ -269,11 +268,10 @@ html { } .w-md-editor-toolbar { + @apply bg-input border-fifth #{!important}; height: 40px !important; min-height: 40px !important; - background-color: #131b2c !important; padding: 0 8px !important; - border-color: #28344f !important; } .wmde-markdown { @@ -286,7 +284,7 @@ html { } .editor * { - color: white; + @apply text-textColor; } .editor .polonto * { @@ -317,7 +315,7 @@ html { } .copilotKitWindow { - background-color: #0b0f1c !important; + @apply bg-customColor3 #{!important}; } .copilotKitButtonIconOpen svg { @@ -325,12 +323,12 @@ html { } .copilotKitButtonIconOpen:after { + @apply text-textColor; content: ''; display: block; position: relative; z-index: 1; object-fit: contain; - color: white; background: url('/magic.svg') no-repeat center center / contain; width: 30px; height: 30px; @@ -346,7 +344,8 @@ html { } .uppy-FileInput-container { - @apply cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] bg-[#0b0f1c] text-white border-[2px] border-[#506490]; + @apply cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] text-textColor border-[2px]; + @apply bg-customColor3 border-customColor21; } .uppy-ProgressBar { @@ -355,7 +354,7 @@ html { } .uppy-ProgressBar-inner { - background-color: #4f46e5; + @apply bg-customColor51; height: 25px; border-radius: 4px; } @@ -376,7 +375,7 @@ html { @apply animate-normalFadeOut; } -.fill-text-white { +.fill-text-textColor { -webkit-text-fill-color: white !important; } div div .set-font-family { diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx index 09161dcd..6a77d17e 100644 --- a/apps/frontend/src/app/layout.tsx +++ b/apps/frontend/src/app/layout.tsx @@ -1,7 +1,7 @@ import interClass from '@gitroom/react/helpers/inter.font'; export const dynamic = 'force-dynamic'; -import './global.css'; +import './global.scss'; import 'react-tooltip/dist/react-tooltip.css'; import '@copilotkit/react-ui/styles.css'; @@ -10,6 +10,7 @@ import { ReactNode } from 'react'; import { Chakra_Petch } from 'next/font/google'; import { isGeneral } from '@gitroom/react/helpers/is.general'; import PlausibleProvider from 'next-plausible'; +import clsx from 'clsx'; const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] }); @@ -23,7 +24,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) { sizes="any" /> - + {children} diff --git a/apps/frontend/src/components/analytics/analytics.component.tsx b/apps/frontend/src/components/analytics/analytics.component.tsx index 02ec4061..932bd4ac 100644 --- a/apps/frontend/src/components/analytics/analytics.component.tsx +++ b/apps/frontend/src/components/analytics/analytics.component.tsx @@ -49,12 +49,12 @@ export const AnalyticsComponent: FC = () => { {/* */} {/*
*/} {/*
*/} - {/*
Nevo David
*/} + {/*
Nevo David
*/} {/*
05/06/2024
*/} {/*
*/} {/*
O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad
*/} {/*
*/} - {/*
See Tweet
*/} + {/*
See Tweet
*/} {/*
*/} {/*
*/} {/*
*/} @@ -63,12 +63,12 @@ export const AnalyticsComponent: FC = () => { {/* */} {/*
*/} {/*
*/} - {/*
Nevo David
*/} + {/*
Nevo David
*/} {/*
05/06/2024
*/} {/*
*/} {/*
O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad
*/} {/*
*/} - {/*
See Tweet
*/} + {/*
See Tweet
*/} {/*
*/} {/*
*/} {/*
*/} @@ -77,12 +77,12 @@ export const AnalyticsComponent: FC = () => { {/* */} {/*
*/} {/*
*/} - {/*
Nevo David
*/} + {/*
Nevo David
*/} {/*
05/06/2024
*/} {/*
*/} {/*
O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad
*/} {/*
*/} - {/*
See Tweet
*/} + {/*
See Tweet
*/} {/*
*/} {/*
*/} {/*
*/} @@ -91,12 +91,12 @@ export const AnalyticsComponent: FC = () => { {/* */} {/*
*/} {/*
*/} - {/*
Nevo David
*/} + {/*
Nevo David
*/} {/*
05/06/2024
*/} {/*
*/} {/*
O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad
*/} {/*
*/} - {/*
See Tweet
*/} + {/*
See Tweet
*/} {/*
*/} {/*
*/} {/*
*/} @@ -105,12 +105,12 @@ export const AnalyticsComponent: FC = () => { {/* */} {/*
*/} {/*
*/} - {/*
Nevo David
*/} + {/*
Nevo David
*/} {/*
05/06/2024
*/} {/*
*/} {/*
O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad
*/} {/*
*/} - {/*
See Tweet
*/} + {/*
See Tweet
*/} {/*
*/} {/*
*/} {/*
*/} diff --git a/apps/frontend/src/components/analytics/stars.and.forks.tsx b/apps/frontend/src/components/analytics/stars.and.forks.tsx index 6e661408..71df9211 100644 --- a/apps/frontend/src/components/analytics/stars.and.forks.tsx +++ b/apps/frontend/src/components/analytics/stars.and.forks.tsx @@ -140,7 +140,7 @@ export const StarsAndForks: FC = (props) => {
-
+
= (props) => {
= (props) => { />
-
+
{ return (
-
+
-
+
Thank you for registering!
Please check your email to activate your account.
diff --git a/apps/frontend/src/components/auth/forgot-return.tsx b/apps/frontend/src/components/auth/forgot-return.tsx index 26b0586d..01bb81a0 100644 --- a/apps/frontend/src/components/auth/forgot-return.tsx +++ b/apps/frontend/src/components/auth/forgot-return.tsx @@ -63,7 +63,7 @@ export function ForgotReturn({ token }: { token: string }) {
{!state ? ( <> -
+
{!state ? ( <> -
+
-
OR
+
OR
-
+
{ return (
{ return (
-
OR
+
OR
)} -
+
{!isAfterProvider && ( <> = ( onClick={(e) => { e.stopPropagation(); }} - className={`mt-[16px] w-full text-wrap ${interClass} font-[400] text-[16px] text-[#D3D3D3] select-text`} + className={`mt-[16px] w-full text-wrap ${interClass} font-[400] text-[16px] text-customColor17 select-text`} dangerouslySetInnerHTML={{ __html: description }} />
diff --git a/apps/frontend/src/components/billing/lifetime.deal.tsx b/apps/frontend/src/components/billing/lifetime.deal.tsx index eb35ffbd..edac7d3d 100644 --- a/apps/frontend/src/components/billing/lifetime.deal.tsx +++ b/apps/frontend/src/components/billing/lifetime.deal.tsx @@ -113,12 +113,12 @@ export const LifetimeDeal = () => { return (
-
+
Current Package: {user?.totalChannels > 8 ? 'EXTRA' : user?.tier?.current}
-
+
{features.map((feature) => (
@@ -141,13 +141,13 @@ export const LifetimeDeal = () => {
-
+
Next Package:{' '} {user?.tier?.current === 'PRO' ? 'EXTRA' : !user?.tier?.current ? 'FREE' : user?.tier?.current === 'STANDARD' ? 'PRO' : 'STANDARD'}
-
+
{(user?.tier?.current === 'PRO' ? [`${(user?.totalChannels || 0) + 5} channels`] : nextFeature diff --git a/apps/frontend/src/components/billing/main.billing.component.tsx b/apps/frontend/src/components/billing/main.billing.component.tsx index 48ffd033..9c7b466a 100644 --- a/apps/frontend/src/components/billing/main.billing.component.tsx +++ b/apps/frontend/src/components/billing/main.billing.component.tsx @@ -125,7 +125,7 @@ export const Features: FC<{ }, [pack]); return ( -
+
{features.map((feature) => (
@@ -333,7 +333,7 @@ export const MainBillingComponent: FC<{ .map(([name, values]) => (
{name}
@@ -343,7 +343,7 @@ export const MainBillingComponent: FC<{ ? values.year_price : values.month_price}
-
+
{monthlyOrYearly === 'on' ? '/year' : '/month'}
diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx index a59a0281..f54a97c5 100644 --- a/apps/frontend/src/components/launches/add.edit.model.tsx +++ b/apps/frontend/src/components/launches/add.edit.model.tsx @@ -384,7 +384,7 @@ export const AddEditModal: FC<{ instructions="You are an assistant that help the user to schedule their social media posts, everytime somebody write something, try to use a function call, if not prompt the user that the request is invalid and you are here to assists with social media posts" /> )} -
+
-
+
-
+
1 ? 150 : 250} @@ -444,7 +444,7 @@ export const AddEditModal: FC<{ {showError && (!p.content || p.content.length < 6) && ( -
+
The post should be at least 6 characters long
)} @@ -458,7 +458,7 @@ export const AddEditModal: FC<{ onChange={changeImage(index)} />
-
+
{value.length > 1 && (
) : null}
-
+
); }; diff --git a/apps/frontend/src/components/launches/add.provider.component.tsx b/apps/frontend/src/components/launches/add.provider.component.tsx index 92821608..5ee5ae6d 100644 --- a/apps/frontend/src/components/launches/add.provider.component.tsx +++ b/apps/frontend/src/components/launches/add.provider.component.tsx @@ -23,7 +23,7 @@ export const useAddProvider = (update?: () => void) => { title: '', withCloseButton: false, classNames: { - modal: 'bg-transparent text-white', + modal: 'bg-transparent text-textColor', }, children: , size: 'auto', @@ -89,7 +89,7 @@ export const ApiModal: FC<{ }, []); return ( -
+