@greatapps/common 1.1.488 → 1.1.490

package/dist/components/widgets/notifications/NotificationCard.mjs

@@ -1,6 +1,8 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconClock } from "@tabler/icons-react";
 import { cn } from "../../../infra/utils/clsx";
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
 function NotificationCard({
   icon,
   iconBgColor,
@@ -13,6 +15,7 @@ function NotificationCard({
   className,
   gapPx = 16
 }) {
+  const isDefaultWl = useIsDefaultWhitelabel();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -43,7 +46,7 @@ function NotificationCard({
           ] }),
           actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions })
         ] }),
-        isUnread && /* @__PURE__ */ jsx("div", { className: "size-2 bg-cyan-400 rounded-full shrink-0 mt-1" })
+        isUnread && /* @__PURE__ */ jsx("div", { className: `size-2 rounded-full shrink-0 mt-1 ${isDefaultWl ? "bg-cyan-400" : "bg-zinc-400"}` })
       ]
     }
   );

package/dist/components/widgets/notifications/NotificationCard.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/widgets/notifications/NotificationCard.tsx"],"sourcesContent":["import { IconClock } from '@tabler/icons-react';\nimport { ReactNode } from 'react';\nimport { cn } from '../../../infra/utils/clsx';\n\ntype NotificationCardProps = {\n  icon: ReactNode;\n  iconBgColor?: string;\n  title: string;\n  description?: string;\n  time: string;\n  actions?: ReactNode;\n  isUnread?: boolean;\n  showBorder?: boolean;\n  className?: string;\n  gapPx: number;\n};\n\nexport default function NotificationCard({\n  icon,\n  iconBgColor,\n  title,\n  description,\n  time,\n  actions,\n  isUnread = false,\n  showBorder = true,\n  className,\n  gapPx = 16\n}: NotificationCardProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',\n        showBorder && 'border-b border-gray-200',\n        className\n      )}\n    >\n      <div\n        className={cn(\n          'flex items-center justify-center size-10 rounded-full shrink-0',\n          iconBgColor\n        )}\n      >\n        {icon}\n      </div>\n\n      <div className=\"flex flex-col flex-1\" style={{ gap: `${gapPx}px` }}>\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"paragraph-small-semibold text-gray-950\">{title}</span>\n          {description && (\n            <span className=\"paragraph-small-regular text-gray-600\">{description}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-1.5\">\n          <IconClock size={14} className=\"text-gray-400\" />\n          <span className=\"paragraph-xsmall-medium text-gray-600\">{time}</span>\n        </div>\n\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n      </div>\n\n      {isUnread && <div className=\"size-2 bg-cyan-400 rounded-full shrink-0 mt-1\" />}\n    </div>\n  );\n}\n\nexport type { NotificationCardProps };\n"],"mappings":"AAqCM,cAUE,YAVF;AArCN,SAAS,iBAAiB;AAE1B,SAAS,UAAU;AAeJ,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,QAAQ;AACV,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEA,qBAAC,SAAI,WAAU,wBAAuB,OAAO,EAAE,KAAK,GAAG,KAAK,KAAK,GAC/D;AAAA,+BAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,0CAA0C,iBAAM;AAAA,YAC/D,eACC,oBAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,aAEzE;AAAA,UAEA,qBAAC,SAAI,WAAU,6BACb;AAAA,gCAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,YAC/C,oBAAC,UAAK,WAAU,yCAAyC,gBAAK;AAAA,aAChE;AAAA,UAEC,WAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,WAChE;AAAA,QAEC,YAAY,oBAAC,SAAI,WAAU,iDAAgD;AAAA;AAAA;AAAA,EAC9E;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/widgets/notifications/NotificationCard.tsx"],"sourcesContent":["'use client';\n\nimport { IconClock } from '@tabler/icons-react';\nimport { ReactNode } from 'react';\nimport { cn } from '../../../infra/utils/clsx';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\n\ntype NotificationCardProps = {\n  icon: ReactNode;\n  iconBgColor?: string;\n  title: string;\n  description?: string;\n  time: string;\n  actions?: ReactNode;\n  isUnread?: boolean;\n  showBorder?: boolean;\n  className?: string;\n  gapPx: number;\n};\n\nexport default function NotificationCard({\n  icon,\n  iconBgColor,\n  title,\n  description,\n  time,\n  actions,\n  isUnread = false,\n  showBorder = true,\n  className,\n  gapPx = 16\n}: NotificationCardProps) {\n  const isDefaultWl = useIsDefaultWhitelabel();\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',\n        showBorder && 'border-b border-gray-200',\n        className\n      )}\n    >\n      <div\n        className={cn(\n          'flex items-center justify-center size-10 rounded-full shrink-0',\n          iconBgColor\n        )}\n      >\n        {icon}\n      </div>\n\n      <div className=\"flex flex-col flex-1\" style={{ gap: `${gapPx}px` }}>\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"paragraph-small-semibold text-gray-950\">{title}</span>\n          {description && (\n            <span className=\"paragraph-small-regular text-gray-600\">{description}</span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-1.5\">\n          <IconClock size={14} className=\"text-gray-400\" />\n          <span className=\"paragraph-xsmall-medium text-gray-600\">{time}</span>\n        </div>\n\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n      </div>\n\n      {isUnread && <div className={`size-2 rounded-full shrink-0 mt-1 ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`} />}\n    </div>\n  );\n}\n\nexport type { NotificationCardProps };\n"],"mappings":";AA0CM,cAUE,YAVF;AAxCN,SAAS,iBAAiB;AAE1B,SAAS,UAAU;AACnB,SAAS,8BAA8B;AAexB,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,QAAQ;AACV,GAA0B;AACxB,QAAM,cAAc,uBAAuB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEA,qBAAC,SAAI,WAAU,wBAAuB,OAAO,EAAE,KAAK,GAAG,KAAK,KAAK,GAC/D;AAAA,+BAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,0CAA0C,iBAAM;AAAA,YAC/D,eACC,oBAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,aAEzE;AAAA,UAEA,qBAAC,SAAI,WAAU,6BACb;AAAA,gCAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,YAC/C,oBAAC,UAAK,WAAU,yCAAyC,gBAAK;AAAA,aAChE;AAAA,UAEC,WAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,WAChE;AAAA,QAEC,YAAY,oBAAC,SAAI,WAAW,qCAAqC,cAAc,gBAAgB,aAAa,IAAI;AAAA;AAAA;AAAA,EACnH;AAEJ;","names":[]}

package/dist/providers/whitelabel.provider.mjs

@@ -24,6 +24,10 @@ function useWhitelabelStyles() {
     dashboard: whitelabel?.dashboard ?? null
   };
 }
+function useIsDefaultWhitelabel() {
+  const context = useContext(WhitelabelContext);
+  return !context?.whitelabel || context.whitelabel.id === 1;
+}
 function useWhitelabelUrls() {
   const { whitelabel } = useWhitelabel();
   return {
@@ -35,6 +39,7 @@ function useWhitelabelUrls() {
 }
 export {
   WhitelabelProvider,
+  useIsDefaultWhitelabel,
   useWhitelabel,
   useWhitelabelStyles,
   useWhitelabelUrls

package/dist/providers/whitelabel.provider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/providers/whitelabel.provider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, ReactNode, useContext } from \"react\";\nimport type { WhitelabelData, GeneralStyleJson, PageStyleJson, DashboardStyleJson } from \"../modules/whitelabel/schema\";\n\ninterface WhitelabelContextProps {\n  whitelabel: WhitelabelData | null;\n}\n\nconst WhitelabelContext = createContext<WhitelabelContextProps | undefined>(undefined);\n\ninterface WhitelabelProviderProps {\n  children: ReactNode;\n  whitelabel: WhitelabelData | null;\n}\n\nexport function WhitelabelProvider({\n  children,\n  whitelabel,\n}: WhitelabelProviderProps) {\n  return (\n    <WhitelabelContext.Provider value={{ whitelabel }}>\n      {children}\n    </WhitelabelContext.Provider>\n  );\n}\n\nexport function useWhitelabel(): WhitelabelContextProps {\n  const context = useContext(WhitelabelContext);\n  if (context === undefined) {\n    throw new Error(\"useWhitelabel deve ser usado dentro de um WhitelabelProvider\");\n  }\n  return context;\n}\n\nexport function useWhitelabelStyles() {\n  const { whitelabel } = useWhitelabel();\n  return {\n    general: whitelabel?.general ?? null,\n    signin_page: whitelabel?.signin_page ?? null,\n    signup_page: whitelabel?.signup_page ?? null,\n    dashboard: whitelabel?.dashboard ?? null,\n  };\n}\n\nexport function useWhitelabelUrls() {\n  const { whitelabel } = useWhitelabel();\n  return {\n    editorUrl: whitelabel?.editor_url ?? '',\n    pagesUrl: whitelabel?.pages_url ?? '',\n    accountsUrl: whitelabel?.accounts_url ?? '',\n    previewUrl: whitelabel?.pages_preview_url ?? '',\n  };\n}\n"],"mappings":";AAqBI;AAnBJ,SAAS,eAA0B,kBAAkB;AAOrD,MAAM,oBAAoB,cAAkD,MAAS;AAO9E,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,WAAW,GAC7C,UACH;AAEJ;AAEO,SAAS,gBAAwC;AACtD,QAAM,UAAU,WAAW,iBAAiB;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,8DAA8D;AAAA,EAChF;AACA,SAAO;AACT;AAEO,SAAS,sBAAsB;AACpC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,SAAO;AAAA,IACL,SAAS,YAAY,WAAW;AAAA,IAChC,aAAa,YAAY,eAAe;AAAA,IACxC,aAAa,YAAY,eAAe;AAAA,IACxC,WAAW,YAAY,aAAa;AAAA,EACtC;AACF;AAEO,SAAS,oBAAoB;AAClC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,SAAO;AAAA,IACL,WAAW,YAAY,cAAc;AAAA,IACrC,UAAU,YAAY,aAAa;AAAA,IACnC,aAAa,YAAY,gBAAgB;AAAA,IACzC,YAAY,YAAY,qBAAqB;AAAA,EAC/C;AACF;","names":[]}
+{"version":3,"sources":["../../src/providers/whitelabel.provider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, ReactNode, useContext } from \"react\";\nimport type { WhitelabelData, GeneralStyleJson, PageStyleJson, DashboardStyleJson } from \"../modules/whitelabel/schema\";\n\ninterface WhitelabelContextProps {\n  whitelabel: WhitelabelData | null;\n}\n\nconst WhitelabelContext = createContext<WhitelabelContextProps | undefined>(undefined);\n\ninterface WhitelabelProviderProps {\n  children: ReactNode;\n  whitelabel: WhitelabelData | null;\n}\n\nexport function WhitelabelProvider({\n  children,\n  whitelabel,\n}: WhitelabelProviderProps) {\n  return (\n    <WhitelabelContext.Provider value={{ whitelabel }}>\n      {children}\n    </WhitelabelContext.Provider>\n  );\n}\n\nexport function useWhitelabel(): WhitelabelContextProps {\n  const context = useContext(WhitelabelContext);\n  if (context === undefined) {\n    throw new Error(\"useWhitelabel deve ser usado dentro de um WhitelabelProvider\");\n  }\n  return context;\n}\n\nexport function useWhitelabelStyles() {\n  const { whitelabel } = useWhitelabel();\n  return {\n    general: whitelabel?.general ?? null,\n    signin_page: whitelabel?.signin_page ?? null,\n    signup_page: whitelabel?.signup_page ?? null,\n    dashboard: whitelabel?.dashboard ?? null,\n  };\n}\n\nexport function useIsDefaultWhitelabel(): boolean {\n  const context = useContext(WhitelabelContext);\n  return !context?.whitelabel || context.whitelabel.id === 1;\n}\n\nexport function useWhitelabelUrls() {\n  const { whitelabel } = useWhitelabel();\n  return {\n    editorUrl: whitelabel?.editor_url ?? '',\n    pagesUrl: whitelabel?.pages_url ?? '',\n    accountsUrl: whitelabel?.accounts_url ?? '',\n    previewUrl: whitelabel?.pages_preview_url ?? '',\n  };\n}\n"],"mappings":";AAqBI;AAnBJ,SAAS,eAA0B,kBAAkB;AAOrD,MAAM,oBAAoB,cAAkD,MAAS;AAO9E,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,WAAW,GAC7C,UACH;AAEJ;AAEO,SAAS,gBAAwC;AACtD,QAAM,UAAU,WAAW,iBAAiB;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,8DAA8D;AAAA,EAChF;AACA,SAAO;AACT;AAEO,SAAS,sBAAsB;AACpC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,SAAO;AAAA,IACL,SAAS,YAAY,WAAW;AAAA,IAChC,aAAa,YAAY,eAAe;AAAA,IACxC,aAAa,YAAY,eAAe;AAAA,IACxC,WAAW,YAAY,aAAa;AAAA,EACtC;AACF;AAEO,SAAS,yBAAkC;AAChD,QAAM,UAAU,WAAW,iBAAiB;AAC5C,SAAO,CAAC,SAAS,cAAc,QAAQ,WAAW,OAAO;AAC3D;AAEO,SAAS,oBAAoB;AAClC,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,SAAO;AAAA,IACL,WAAW,YAAY,cAAc;AAAA,IACrC,UAAU,YAAY,aAAa;AAAA,IACnC,aAAa,YAAY,gBAAgB;AAAA,IACzC,YAAY,YAAY,qBAAqB;AAAA,EAC/C;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.488",
+  "version": "1.1.490",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -27,7 +27,8 @@ export default function ConfigurationsMyAccountModal() {
   const { hasActiveSubscription } = config;
 
   const { user } = useAuth();
-  const isOwnerOrAdmin = user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;
+  const isOwner = user?.profile === UserProfile.owner;
+
   const isMobile = useIsMobile();
   const { activeSection, setActiveSection } = useConfigurationsModal({
     isOpen: open,
@@ -109,7 +110,7 @@ export default function ConfigurationsMyAccountModal() {
                 <span className="paragraph-small-medium">Preferências</span>
               </TabsTrigger>
 
-              {isOwnerOrAdmin && (
+              {isOwner && (
                 <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
                   <IconLock size={20} className="shrink-0" />
                   <span className="paragraph-small-medium">Segurança</span>
@@ -123,7 +124,7 @@ export default function ConfigurationsMyAccountModal() {
               <PreferencesSection onClose={close} />
             </TabsContent>
 
-            {isOwnerOrAdmin && (
+            {isOwner && (
               <>
                 <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
                   <SecuritySection

package/src/components/account/sections/ChangeEmailModal.tsx

@@ -9,6 +9,7 @@ import { FormField } from '../../ui/form/FormField';
 import { formatTimer } from '../../../utils/format/masks';
 import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
 import { useAuth } from '../../../providers/auth.provider';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
 import { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
 import useChangeEmailForm from '../hooks/useChangeEmailForm';
@@ -21,6 +22,7 @@ interface ChangeEmailModalProps {
 
 export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
   const { user } = useAuth();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const invalidateUser = useInvalidateUser();
 
   const {
@@ -117,7 +119,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
           </>
         )}
 
-        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />
+        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 ${isDefaultWl ? 'bg-cyan-300' : 'bg-zinc-300'}`} />
 
         {showVerification ? (
           <form

package/src/components/account/sections/ChangePhoneModal.tsx

@@ -9,6 +9,7 @@ import PhoneInput from '../../ui/form/PhoneInput';
 import { formatTimer, formatPhone } from '../../../utils/format/masks';
 import { OTP_CODE_LENGTH } from '../../../utils/validators/account';
 import { useAuth } from '../../../providers/auth.provider';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
 import { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
 import useChangePhoneForm from '../hooks/useChangePhoneForm';
@@ -21,6 +22,7 @@ interface ChangePhoneModalProps {
 
 export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
   const { user } = useAuth();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const invalidateUser = useInvalidateUser();
 
   const hasExistingPhone = !!user?.phone;
@@ -134,7 +136,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
           </>
         )}
 
-        <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />
+        <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 ${isDefaultWl ? 'bg-cyan-300' : 'bg-zinc-300'}`} />
 
         {showVerification ? (
           <form

package/src/components/layouts/AppMobileNavBar.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { IconMenu2, IconX } from "@tabler/icons-react";
 import { ProfilePopover } from "./ProfilePopover";
 import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
+import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import type { ProfileMenuItem } from "./ProfilePopover";
 
 export interface AppMobileNavBarProps {
@@ -26,6 +27,7 @@ export function AppMobileNavBar({
   showMenuToggle = true,
 }: AppMobileNavBarProps) {
   const { isOpen, toggle } = useMobileNavbarSheet();
+  const isDefaultWl = useIsDefaultWhitelabel();
 
   const isGpagesActive = activeApp === "gpages";
 
@@ -36,7 +38,9 @@ export function AppMobileNavBar({
           <div
             className={`size-10 rounded-lg flex items-center justify-center transition-colors ${
               isGpagesActive
-                ? "bg-cyan-100 border-2 border-white ring-2 ring-cyan-300"
+                ? isDefaultWl
+                  ? "bg-cyan-100 border-2 border-white ring-2 ring-cyan-300"
+                  : "border-2 border-white ring-2 ring-zinc-300 bg-zinc-100"
                 : onAppIconClick ? "cursor-pointer hover:bg-gray-100" : ""
             }`}
             onClick={onAppIconClick}

package/src/components/layouts/NavBar.tsx

@@ -6,7 +6,7 @@ import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { useDesktopSidebarStore, useDesktopSidebarHydration } from "../../store/useDesktopSidebarStore";
-import { useWhitelabel } from "../../providers/whitelabel.provider";
+import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { cn } from "../../infra/utils/clsx";
 
 type NavBarProps = {
@@ -32,7 +32,7 @@ function NavBar({
     useDesktopSidebarStore();
   useDesktopSidebarHydration();
   const { whitelabel } = useWhitelabel();
-  const isDefaultWl = !whitelabel || whitelabel.id === 1;
+  const isDefaultWl = useIsDefaultWhitelabel();
   const primaryColor = whitelabel?.general?.primary_color;
   const wlName = whitelabel?.name || 'Great';
 

package/src/components/layouts/NotificationsPopover.tsx

@@ -8,6 +8,7 @@ import { Button } from "../ui/buttons/Button";
 import NotificationCard from "../widgets/notifications/NotificationCard";
 import { cn } from "../../infra/utils/clsx";
 import { useMessages, useMarkAllMessagesAsRead } from "../../modules/users/hooks/messages.hook";
+import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { formatDistanceToNow } from "date-fns";
 import { ptBR } from "date-fns/locale";
 
@@ -24,8 +25,10 @@ function NotificationsPopover({
   side,
   align,
   contentClassName,
-  badgeClassName = "bg-cyan-300",
+  badgeClassName,
 }: NotificationsPopoverProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? "bg-cyan-300" : "bg-zinc-300");
   const [open, setOpen] = useState(false);
   const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });
   const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();
@@ -51,7 +54,7 @@ function NotificationsPopover({
             <span
               className={cn(
                 "absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
-                badgeClassName,
+                resolvedBadgeClassName,
               )}
             />
           )}

package/src/components/layouts/ProfilePopover.tsx

@@ -11,7 +11,7 @@ import { NavBarItem } from "./NavBarItem";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
 import { useAuth } from "../../providers/auth.provider";
-import { useWhitelabelUrls } from "../../providers/whitelabel.provider";
+import { useIsDefaultWhitelabel, useWhitelabelUrls } from "../../providers/whitelabel.provider";
 import { cn } from "../../infra/utils/clsx";
 import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
 import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
@@ -42,6 +42,7 @@ function ProfilePopover({
   const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
     useIaCredits();
   const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const { accountsUrl } = useWhitelabelUrls();
   const router = useRouter();
 
@@ -54,7 +55,7 @@ function ProfilePopover({
   const hasSubscription = !isSubscriptionLoading && subscription !== null;
 
   const isApiPlan = hasSubscription && subscription.id_plan === 411;
-  const shouldShowCredits = hasSubscription && subscription.id_wl === 1 && !isApiPlan;
+  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;
   const creditsPercentage =
     shouldShowCredits && summary.totalCredits > 0
       ? (summary.usedCredits / summary.totalCredits) * 100

package/src/components/modals/BuyCreditsModal.tsx

@@ -24,6 +24,7 @@ import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-ac
 import { useCalculateSubscription } from '../../modules/subscriptions/hooks/calculate-subscription.hook';
 import { useUpdateSubscriptionPlan } from '../../modules/subscriptions/hooks/update-subscription-plan.hook';
 import { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';
+import { useIsDefaultWhitelabel } from '../../providers/whitelabel.provider';
 import { IconInfoCircle, IconX, IconLoader2 } from '@tabler/icons-react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useForm } from 'react-hook-form';
@@ -43,6 +44,7 @@ type BuyCreditFormData = z.infer<typeof buyCreditSchema>;
 export default function BuyCreditsModal() {
   const { open, closeModal } = useBuyCreditsModal();
   const { openModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const { data: cardsData } = useCards();
   const { data: subscriptionData } = useActiveSubscription();
   const subscription = subscriptionData?.data?.[0] ?? null;
@@ -279,7 +281,7 @@ export default function BuyCreditsModal() {
               />
 
               {hasChanged && (
-                <div className="flex items-center gap-3 p-4 bg-cyan-50 rounded-lg">
+                <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>
                   <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
                   <span className="paragraph-small-regular text-zinc-950">
                     {isIncreasingCredits

package/src/components/modals/cards/AddCardModal.tsx

@@ -9,6 +9,7 @@ import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
 import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
 import { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';
 import type { CardFormData, StripeElementsStatus } from './CardFormFields';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import { IconLoader2, IconX } from '@tabler/icons-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -23,6 +24,7 @@ const INITIAL_STRIPE_STATUS: StripeElementsStatus = {
 
 export default function AddCardModal() {
   const { activeModal, modalData, closeModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
   const isOpen = activeModal === 'addCardModal';
   const [currentStep, setCurrentStep] = useState(1);
   const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);
@@ -209,7 +211,7 @@ export default function AddCardModal() {
         {/* Progress bar */}
         <div className="h-1 bg-zinc-100 w-full">
           <div
-            className="h-full bg-cyan-400 transition-all duration-300 ease-in-out"
+            className={`h-full transition-all duration-300 ease-in-out ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`}
             style={{ width: currentStep === 1 ? '50%' : '100%' }}
           />
         </div>

package/src/components/navigation/subcomponents/ProjectSelector.tsx

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, RefObject } from 'react';
 import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
 import { useAppNavigationContext } from '../AppNavigationContext';
 import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
+import { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useWhitelabel } from '../../../index';
 import { IconChevronDown } from '@tabler/icons-react';
 import type { NavigationProject } from '../types';
 
@@ -40,6 +40,7 @@ export function ProjectSelector({
   onAddProject,
   onManageProjects,
 }: ProjectSelectorProps) {
+  const { whitelabel } = useWhitelabel();
   const { breakpoint } = useAppNavigationContext();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [activeSection, setActiveSection] = useState<'projects' | null>(null);
@@ -56,7 +57,9 @@ export function ProjectSelector({
   // Desktop and md: title + popover (aligned with NavBar logo + separator)
   if (breakpoint === 'desktop' || breakpoint === 'md') {
     return (
-      <div className="mt-[6.5px] mb-[3px]">
+      <div className={cn(
+         whitelabel?.id != 1 ? "mt-[14.5px.5px] mb-[7px]" : "mt-[6.5px] mb-[3px]"
+        )}>
         <div className="flex items-center h-7">
           <ProjectSelectorPopover
             open={isPopoverOpen}

package/src/components/pages/NotFoundPage.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useWhitelabel } from "../../providers/whitelabel.provider";
+import { useWhitelabel, useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { Button } from "../ui/buttons/Button";
 
 function GreatAppsLogo() {
@@ -18,7 +18,7 @@ function GreatAppsLogo() {
 export function NotFoundPage() {
   const router = useRouter();
   const { whitelabel } = useWhitelabel();
-  const isGreatApps = !whitelabel || whitelabel.id === 1;
+  const isGreatApps = useIsDefaultWhitelabel();
   const whitelabelLogo = whitelabel?.logo
     ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}`
     : null;

package/src/components/ui/buttons/Button.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../../infra/utils/clsx"
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider"
 
 const buttonVariants = cva(
   "paragraph-small-semibold cursor-pointer flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -15,7 +16,7 @@ const buttonVariants = cva(
           "bg-white text-gray-950 border-gray-200 hover:border-gray-400 border",
         ghost:
           "text-gray-600 hover:bg-accent hover:text-gray-950 dark:hover:bg-accent/50",
-        brand: "bg-cyan-300 hover:bg-cyan-200 text-gray-950",
+        brand: "text-gray-950",
       },
       size: {
         default: "h-12 px-4 py-2 has-[>svg]:px-3",
@@ -43,12 +44,16 @@ function Button({
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
   }) {
+  const isDefaultWl = useIsDefaultWhitelabel();
   const Comp = asChild ? Slot : "button"
 
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(
+        buttonVariants({ variant, size, className }),
+        variant === "brand" && (isDefaultWl ? "bg-cyan-300 hover:bg-cyan-200" : "bg-zinc-300 hover:bg-zinc-200")
+      )}
       {...props}
     />
   )

package/src/components/ui/data-display/PaymentInfoCard.tsx

@@ -7,6 +7,7 @@ import useIsMobile from '../../../hooks/useIsMobile';
 import { useCards } from '../../../modules/cards/hooks/cards.hook';
 import { useCallback, useState } from 'react';
 import { useModalManager } from '../../../store/useModalManager';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 import type { Card } from '../../../modules/cards/types';
 
 type PaymentInfoCardProps = {
@@ -26,6 +27,7 @@ export function PaymentInfoCard({
 }: PaymentInfoCardProps) {
   const isMobile = useIsMobile();
   const { openModal } = useModalManager();
+  const isDefaultWl = useIsDefaultWhitelabel();
 
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -163,7 +165,11 @@ export function PaymentInfoCard({
             <button
               type="button"
               onClick={onManageCards}
-              className="flex items-center justify-center h-10 px-4 paragraph-small-semibold text-cyan-600 border border-cyan-200 rounded-lg hover:bg-cyan-50 transition-colors cursor-pointer mt-2"
+              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${
+                isDefaultWl
+                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'
+                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
+              }`}
             >
               Gerenciar cartões
             </button>

package/src/components/ui/feedback/DefaultCircularProgress.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 import {
   calculateRadius,
   calculateCircumference,
   calculatePercentage,
   calculateCircularProgressOffset,
 } from "../../../infra/utils/percentage";
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
 
 interface CircularProgressProps {
   current: number;
@@ -18,6 +21,7 @@ export default function DefaultCircularProgress({
   size = 62,
   strokeWidth = 3,
 }: CircularProgressProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
   const radius = calculateRadius(size, strokeWidth);
   const circumference = calculateCircumference(radius);
   const percentage = calculatePercentage(current, total);
@@ -46,7 +50,7 @@ export default function DefaultCircularProgress({
           cx={size / 2}
           cy={size / 2}
           r={radius}
-          stroke="var(--color-cyan-300)"
+          stroke={isDefaultWl ? "var(--color-cyan-300)" : "var(--color-zinc-300)"}
           strokeWidth={strokeWidth}
           fill="none"
           strokeDasharray={circumference}

package/src/components/ui/feedback/Toast.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-"use client"
-
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { IconCircleCheck, IconCircleX, IconAlertCircle, IconInfoCircle, IconCircle, IconX } from "@tabler/icons-react"
 import { toast } from "sonner"
 import { cn } from "../../../infra/utils/clsx"
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider"
 import { Button } from "../buttons/Button"
 
 const toastVariants = cva(
@@ -35,7 +34,7 @@ const toastIconContainerVariants = cva(
         success: "bg-green-50 text-green-500",
         error: "bg-red-50 text-red-500",
         warning: "bg-yellow-50 text-yellow-400",
-        info: "bg-cyan-50 text-pages-500",
+        info: "",
         default: "bg-gray-50 text-gray-950",
       },
     },
@@ -69,6 +68,7 @@ function Toast({
   className,
   toastId,
 }: ToastProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
   const Icon = variant ? TOAST_ICONS[variant] : null
 
   return (
@@ -77,7 +77,10 @@ function Toast({
         children
       ) : (
         <div className="flex items-center gap-3 flex-1 min-w-0">
-          <div className={cn(toastIconContainerVariants({ variant }))}>
+          <div className={cn(
+            toastIconContainerVariants({ variant }),
+            variant === "info" && (isDefaultWl ? "bg-cyan-50 text-pages-500" : "bg-zinc-50 text-zinc-500")
+          )}>
             {icon || (Icon && <Icon size={16} />)}
           </div>
 

package/src/components/widgets/notifications/NotificationCard.tsx

@@ -1,6 +1,9 @@
+'use client';
+
 import { IconClock } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 import { cn } from '../../../infra/utils/clsx';
+import { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';
 
 type NotificationCardProps = {
   icon: ReactNode;
@@ -27,6 +30,8 @@ export default function NotificationCard({
   className,
   gapPx = 16
 }: NotificationCardProps) {
+  const isDefaultWl = useIsDefaultWhitelabel();
+
   return (
     <div
       className={cn(
@@ -60,7 +65,7 @@ export default function NotificationCard({
         {actions && <div className="flex items-center gap-2">{actions}</div>}
       </div>
 
-      {isUnread && <div className="size-2 bg-cyan-400 rounded-full shrink-0 mt-1" />}
+      {isUnread && <div className={`size-2 rounded-full shrink-0 mt-1 ${isDefaultWl ? 'bg-cyan-400' : 'bg-zinc-400'}`} />}
     </div>
   );
 }

package/src/providers/whitelabel.provider.tsx

@@ -43,6 +43,11 @@ export function useWhitelabelStyles() {
   };
 }
 
+export function useIsDefaultWhitelabel(): boolean {
+  const context = useContext(WhitelabelContext);
+  return !context?.whitelabel || context.whitelabel.id === 1;
+}
+
 export function useWhitelabelUrls() {
   const { whitelabel } = useWhitelabel();
   return {