Repository navigation
fix: logout, feat: styles, refactor: colors, fix: colors, refactor: colors and imports and fix: Dockerfile - #81
Conversation
- properly deleted the cookie when the logout button is pressed on the dashboard
- added new styles in the globals.css of the ui package - removed the main layout from the auth pages (login and sign up)
- replaced all occurrences of `*-moon` tailwind classes by `*-primary`
- used the predefined styles (in the globals.css) on the dashboard page and avoided at maximum magic colors
- removed too specific colors from the classNames and only used colors defined in the base style
- removed all the remaining specific colors from the dashboard components - updated all the imports relative to `getLanguageName` and `getLanguageColor`
- fixed the issues of the Dockerfile: make sure that all packages are properly built - moved the `.dockerignore` from apps/api to . - removed the error during compilation of the trpc package
WalkthroughThis update centralizes and refines styling and utility management across the project. It migrates language/color utilities from Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashboardApp
participant UIUtils
participant GlobalStyles
User->>DashboardApp: Navigates to dashboard or project page
DashboardApp->>UIUtils: Import getLanguageColor/getLanguageName from @repo/ui/utils
DashboardApp->>GlobalStyles: Apply global CSS and theme variables
DashboardApp-->>User: Renders components with updated theme and utility usage
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
apps/dashboard/src/hooks/auth/useTogglePassword.tsx (1)
8-14: Replace clickable<div>with an accessible<button>.Using a plain
divfor an interactive control blocks keyboard users and screen-reader announcements.-<div - className="absolute z-10 pr-2 hover:text-primary" - onClick={handleEyeIconClick} - title={`${isPasswordVisible ? "Hide" : "Show"} the password`} -> +<button + type="button" + className="absolute z-10 pr-2 hover:text-primary focus:outline-none" + onClick={handleEyeIconClick} + aria-label={isPasswordVisible ? "Hide password" : "Show password"} +>Benefits: proper semantics, tab focus, Enter/Space activation, and ARIA label.
No visual changes required; Tailwind applies the same styles to<button>.
♻️ Duplicate comments (1)
apps/dashboard/src/hooks/fetch/useSuspenseQueryPeriodLangChart.tsx (1)
2-2: Same alias-resolution check as aboveEnsure
@repo/ui/utils/getLanguageColorresolves correctly in every package that consumes this hook (storybook, tests, SSR build, etc.).
🧹 Nitpick comments (10)
apps/dashboard/src/components/dashboard-page/PeriodDropDown.tsx (1)
76-78: Potentially redundant utility classes
flex items-center justify-centermay already be the default layout of theButtoncomponent. If so, you can drop them and keep onlygap-2for brevity.apps/dashboard/src/hooks/useLanguagesDropDown.tsx (1)
3-4: Double-check both util re-exportsBoth
getLanguageColorandgetLanguageNamemoved to@repo/ui/utils. Make sure:
- They are re-exported with identical signatures.
- Dead copies were removed from
@repo/commonto avoid divergent behaviour.Consider adding a short unit test asserting both functions return the same value for a known slug to guard against regressions.
apps/dashboard/src/components/layout/Footer.tsx (1)
3-3: Possible dark-mode visual regressionRemoving
dark:border-neutral-800drops the darker top border. If the global border color falls back to a lighter shade, the footer may blend with the background in dark mode. Please eyeball the page underprefers-color-scheme: dark.apps/dashboard/src/components/CustomRangeDatesSelector.tsx (1)
31-48: Color token removal – accessibility pass
text-moonwas stripped, relying on the link variant’s default color. Confirm:
- Minimum 4.5:1 contrast ratio on both light & dark themes.
- Focus/hover states still obvious.
If contrast fails, re-introduce a semantic token instead of a hard-coded class.
apps/dashboard/src/components/dashboard-page/charts/PeriodLanguagesChart.tsx (1)
55-56: Genericborderclass may pick an unintended colourPreviously the component used
border-neutral-600/50, now it relies on Tailwind’s defaultborder(usuallyborder-border).
If the design relies on a subtle neutral border, confirm that the new token resolves to the desired colour in both themes.apps/dashboard/src/components/project-page/charts/ProjectLanguagesTimeOnPeriodChart.tsx (1)
46-47: Border simplification – minor visual regression checkDropping the explicit neutral tint for the generic
borderclass could change contrast. Validate in both light and dark modes to ensure the chart card still separates from the background.packages/ui/src/components/ui/CalendarPopover.tsx (1)
65-66: Duplicate class definitionSame concern for the range-mode branch—ensure
shadow-primaryis available or switch to an inline style (shadow-[0_0_0_2px_hsl(var(--primary))]) to guarantee the effect.packages/common/package.json (1)
19-21: Consider adding a clean & build lifecycleAdding a dedicated
buildscript is 👍.
For packages published fromdist/, stale artifacts can sneak in after file renames. A tiny enhancement:- "build": "tsc" + "clean": "rimraf dist", + "build": "npm run clean && tsc"or wire it into
npm run prepareso publishing never forgets to compile.apps/dashboard/src/components/not-found-page/NotFound.tsx (1)
5-11: Add descriptivealttext for the 404 illustration.The decorative SVG currently has no
alt, creating an empty announcement for screen-readers.-<img src="/broken_moon.svg" /> +<img src="/broken_moon.svg" alt="" role="presentation" />If the image is informative, replace
""with a meaningful description instead of marking it decorative.apps/dashboard/src/components/project-page/Project.tsx (1)
32-32: Consider using JSX children pattern instead of children prop.The static analysis tool correctly identifies that React components should use JSX children rather than passing children as a prop.
Apply this diff to follow React conventions:
- children={children} + > + {children} + </ErrorBoundary>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (48)
.dockerignore(1 hunks)apps/api/Dockerfile(2 hunks)apps/api/src/auth/auth.service.ts(1 hunks)apps/api/tsconfig.build.json(1 hunks)apps/dashboard/index.html(1 hunks)apps/dashboard/src/components/CustomChartToolTip.tsx(1 hunks)apps/dashboard/src/components/CustomRangeDatesSelector.tsx(2 hunks)apps/dashboard/src/components/dashboard-page/Dashboard.tsx(2 hunks)apps/dashboard/src/components/dashboard-page/DashboardTitle.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/PeriodDropDown.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/charts/GeneralStatsChart.tsx(5 hunks)apps/dashboard/src/components/dashboard-page/charts/PeriodLanguagesChart.tsx(2 hunks)apps/dashboard/src/components/dashboard-page/charts/PeriodProjects.tsx(2 hunks)apps/dashboard/src/components/dashboard-page/charts/PeriodTimeChart.tsx(2 hunks)apps/dashboard/src/components/dashboard-page/charts/dayLanguagesChart/DayLanguagesChart.tsx(2 hunks)apps/dashboard/src/components/layout/Footer.tsx(1 hunks)apps/dashboard/src/components/layout/Layout.tsx(1 hunks)apps/dashboard/src/components/layout/header/Header.tsx(1 hunks)apps/dashboard/src/components/layout/header/HorizontalNavbar.tsx(1 hunks)apps/dashboard/src/components/layout/header/SideBar.tsx(2 hunks)apps/dashboard/src/components/layout/header/ToggleThemeDropDown.tsx(1 hunks)apps/dashboard/src/components/login-page/LoginForm.tsx(3 hunks)apps/dashboard/src/components/not-found-page/NotFound.tsx(1 hunks)apps/dashboard/src/components/project-page/Project.tsx(1 hunks)apps/dashboard/src/components/project-page/charts/CircularPacking.tsx(1 hunks)apps/dashboard/src/components/project-page/charts/FilesCirclePackingChart.tsx(1 hunks)apps/dashboard/src/components/project-page/charts/ProjectLanguagesTimeOnPeriodChart.tsx(2 hunks)apps/dashboard/src/components/project-page/charts/ProjectTimeOnPeriodChart.tsx(3 hunks)apps/dashboard/src/components/project-page/files-list/Files.tsx(1 hunks)apps/dashboard/src/components/project-page/files-list/FilesList.tsx(1 hunks)apps/dashboard/src/components/project-page/files-list/LanguagesDropDown.tsx(1 hunks)apps/dashboard/src/components/register-page/RegisterForm.tsx(4 hunks)apps/dashboard/src/components/suspense/ErrorFallback.tsx(1 hunks)apps/dashboard/src/constants.ts(1 hunks)apps/dashboard/src/hooks/auth/useTogglePassword.tsx(1 hunks)apps/dashboard/src/hooks/fetch/useSuspenseQueryPeriodLangChart.tsx(1 hunks)apps/dashboard/src/hooks/projects/useSuspenseQueryProjectsLangChart.tsx(1 hunks)apps/dashboard/src/hooks/useLanguagesDropDown.tsx(1 hunks)apps/dashboard/src/index.css(1 hunks)apps/dashboard/src/main.tsx(1 hunks)packages/common/package.json(1 hunks)packages/trpc/package.json(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/ui/CalendarPopover.tsx(2 hunks)packages/ui/src/components/ui/Icon.tsx(1 hunks)packages/ui/src/components/ui/form.tsx(3 hunks)packages/ui/src/globals.css(2 hunks)packages/ui/tailwind.config.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
packages/ui/src/components/ui/CalendarPopover.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
apps/dashboard/src/main.tsx (1)
apps/dashboard/src/utils/authLoader.ts (1)
authRouteLoader(30-56)
packages/ui/src/components/ui/form.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
packages/ui/src/components/ui/Icon.tsx (2)
packages/ui/src/components/ui/button.tsx (1)
Button(27-27)packages/ui/src/lib/utils.ts (1)
cn(4-6)
🪛 Biome (2.1.2)
apps/dashboard/src/components/project-page/Project.tsx
[error] 32-32: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🔇 Additional comments (59)
apps/dashboard/src/components/dashboard-page/PeriodDropDown.tsx (1)
75-78: Confirmdefaultvariant keeps sufficient contrast & state stylesChanging the trigger from
variant="secondary"with explicitbg-neutral-200 dark:bg-accenttovariant="default"delegates all coloring to the design-system token.
Please verify in both light and dark themes that:
- Text & icon meet WCAG 2.1 AA contrast against the new background.
- Hover / focus / active states remain visually distinct.
If the UI kit guarantees this, no action needed; otherwise consider re-introducing an explicit semantic variant or extending the
Buttonvariants..dockerignore (1)
2-3: LGTM! Good formatting practice.Adding the trailing newline follows POSIX text file conventions and is a good practice.
packages/trpc/package.json (1)
10-11: LGTM! Standard TypeScript build configuration.The addition of the
buildscript usingtscis standard for TypeScript packages and will enable proper compilation during Docker builds. The trailing comma on thelintscript follows good JSON formatting practices.apps/api/src/auth/auth.service.ts (1)
139-143: Excellent security improvement for logout functionality.Adding the explicit cookie clearing options (
httpOnly: true, secure: true, sameSite: "none") ensures the authentication cookie is properly cleared during logout. This matches the security attributes used when setting the cookie and addresses potential issues where browsers might not clear cookies without these explicit options.apps/dashboard/src/components/project-page/files-list/Files.tsx (1)
3-4: LGTM! Consistent import path migration.The import path updates from
@repo/commonto@repo/ui/utilsalign with the broader refactoring to centralize UI-related utilities. This change maintains functionality while improving code organization.apps/dashboard/src/components/CustomChartToolTip.tsx (1)
2-2: LGTM! Consistent with utility migration pattern.The import path update from
@repo/common/getLanguageNameto@repo/ui/utils/getLanguageNameis consistent with the broader refactoring to centralize UI utilities and maintains functionality while improving code organization.apps/dashboard/src/hooks/projects/useSuspenseQueryProjectsLangChart.tsx (1)
3-3: Confirm@repo/uiexport & path mapping
getLanguageColoris now imported from@repo/ui/utils. Verify that:
packages/ui/package.jsonexports"./utils/getLanguageColor"(or the glob)- All tsconfig/webpack path aliases include the new
utils/*mappingWithout this, consumers of the hook will break at compile-time/runtime.
apps/dashboard/src/components/project-page/files-list/LanguagesDropDown.tsx (1)
27-30: Verify secondary-variant background now that explicit classes were removedDropping
bg-neutral-200 dark:bg-accentmeans the button’s background is now whatevervariant="secondary"defines.
Double-check that the secondary variant already adapts for both light & dark themes; otherwise the trigger may appear transparent or lose sufficient colour contrast.apps/dashboard/src/components/layout/header/ToggleThemeDropDown.tsx (1)
23-26: Semantic colour swap looks correctReplacing the hard-coded
border-moon/60with the theme tokenborder-primary/60keeps styling consistent with the new palette. Nothing else to flag.apps/dashboard/src/components/dashboard-page/charts/PeriodLanguagesChart.tsx (1)
24-25: Import path moved to@repo/ui/utils– ensure export map is in placeThe build will fail if
packages/uididn’t exposeutils/getLanguageColorvia itsexportsfield or TS path mapping. Confirm that was updated along with this change.apps/dashboard/src/components/dashboard-page/DashboardTitle.tsx (1)
16-17: Good move to semantictext-destructiveSwitching from a hard-coded red to a semantic token keeps error styling theme-aware. No further issues.
apps/dashboard/src/components/project-page/charts/ProjectLanguagesTimeOnPeriodChart.tsx (1)
17-18: Import path update mirrors other files – confirm consistencySame note as earlier: make sure
@repo/ui/utils/getLanguageColoris exported and aliased consistently, otherwise chart pages will break.apps/dashboard/src/components/dashboard-page/charts/dayLanguagesChart/DayLanguagesChart.tsx (2)
46-46: Styling tweak looks goodRemoving the explicit
border-neutral-600/50token keeps the component on your global border color scheme—good consolidation.
12-14: ✅ Default exports and package exports for utils are correctly configured
packages/ui/src/utils/getLanguageColor.tsandgetLanguageName.tsboth useexport default.packages/ui/package.json’sexportsfield includes
"./utils/*": "./src/utils/*.ts"No further changes are needed—imports from
@repo/ui/utils/...will resolve as expected.apps/dashboard/src/components/project-page/charts/FilesCirclePackingChart.tsx (1)
53-53: Border colour simplification approvedConsistent with the new global theme—nothing else to flag here.
apps/dashboard/src/constants.ts (1)
74-74: Beware SVGfillwith CSS variables
rechartsappliesfill/strokeas plain SVG attributes (<rect fill="hsl(var(--primary))">).
Browsers don’t resolve CSS vars in raw SVG attributes—only instyle="…". IfchartConfig.time.coloris ultimately used as an SVG attribute you’ll get no colour.Confirm where the value ends up; if it’s an attribute, resolve the var in CSS instead or inline it via
style.apps/dashboard/src/components/layout/Layout.tsx (1)
9-9: Confirm CSS-variable colour is resolved byClipLoader.
react-spinnersforwards thecolorprop straight to the generated<span style="border-color …">. Browsers resolvehsl(var(--primary))only if--primaryis defined as three space-separated HSL components (e.g.220 80% 50%).
If the variable is still using the old HEX string it will fail, turning the spinner black.Run the app in both light & dark themes and in Firefox/Chrome to make sure the spinner tint matches the rest of the UI.
apps/dashboard/src/components/project-page/charts/ProjectTimeOnPeriodChart.tsx (2)
52-52: Border colour now falls back to Tailwind default – intentional?Removing
border-neutral-600/50leaves the colour toborder’s default (hsl(var(--border))).
Double-check the contrast against the chart background; the old semi-transparent neutral might have been chosen for subtle separation.
103-104: Ensure CSS variables resolve inside SVGstrokeattributes.
hsl(var(--destructive))is valid CSS, but some older Chromium builds failed to resolve custom properties in SVG presentation attributes.
Test in your supported browser matrix; if issues appear, fallback tocurrentColorand style the enclosing element.Example fallback pattern:
stroke="currentColor" className="text-destructive"Also applies to: 116-117
apps/dashboard/src/components/dashboard-page/charts/PeriodTimeChart.tsx (2)
39-39: Good refactoring of border styling.Removing the specific
border-neutral-600/50class in favor of the genericborderclass aligns with the broader styling standardization effort across the dashboard components.
85-85: Excellent use of CSS variable for theme consistency.Replacing the hardcoded hex color
#dc2626withhsl(var(--destructive))improves theme maintainability and follows the semantic color naming convention being adopted across the project.apps/dashboard/src/components/project-page/files-list/FilesList.tsx (2)
22-22: Consistent border styling improvement.Removing the specific
border-neutral-600/50class maintains consistency with the styling standardization being applied across dashboard components.
28-28: Better semantic color usage.Replacing
text-red-600withtext-destructiveprovides better semantic meaning and aligns with the design system approach being implemented throughout the project.apps/dashboard/src/components/layout/header/Header.tsx (1)
6-6: Excellent theme system integration.The replacement of explicit background colors (
bg-neutral-100,dark:bg-neutral-950) and border color (border-neutral-800) with the semanticbg-backgroundclass demonstrates proper integration with the design system. This approach improves theme consistency and reduces maintenance overhead.apps/dashboard/index.html (2)
10-10: Good alignment with font system changes.Replacing the background color classes with
font-sansaligns well with the global CSS variable system mentioned in the AI summary. This approach centralizes font and background styling in the theme system.
6-6: Stylesheet path change is safe.Vite processes
<link href="./src/index.css">inapps/dashboard/index.htmlas a module import and rewrites it correctly in dev and build. No absolute‐path configuration was found invite.config.tsor elsewhere, and the CSS importer in Vite will resolve the file underapps/dashboard/src/index.csswithout issues. No further action needed.apps/dashboard/src/main.tsx (1)
46-59: Auth pages safe outside Layout wrapperVerification shows that neither
LoginFormnorRegisterFormimport anything from theLayoutor consume any Layout‐provided context:
- No
import … from ".../layout/…".- No usage of
useContextor.Contextin auth page components.Layout.tsxonly provides header, footer, and a navigation‐based spinner—no context providers.Removing the
<Layout />wrapper for auth routes will not break functionality.apps/dashboard/src/components/login-page/LoginForm.tsx (2)
89-89: LGTM: Improved visual hierarchyThe addition of
font-extraboldenhances the prominence of the login heading, improving the visual hierarchy of the form.
102-102: LGTM: Consistent with color theme refactoringThe replacement of
focus-visible:ring-moon/65withborder-borderaligns perfectly with the broader effort to remove the "moon" color from the codebase in favor of CSS variable-based theming. This ensures consistent styling across components.Also applies to: 121-121
packages/ui/tailwind.config.ts (1)
66-68: LGTM: Consistent CSS variable approach for themingThe addition of font family configuration using CSS variables (
var(--font-sans)) is excellent practice. This maintains consistency with the color theming approach and enables centralized font management across the application.apps/dashboard/src/index.css (1)
1-1: Global stylesheet import confirmed
- ✓
packages/ui/src/globals.cssexists and begins with@tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { /* CSS variables */ } }- Contains a comprehensive set of CSS variables under
:root.Please verify that any style rules originally declared in
apps/dashboard/src/index.css(e.g., local base or component-specific selectors) were migrated intoglobals.cssand are no longer needed locally.apps/api/Dockerfile (1)
16-18: LGTM: Proper multi-workspace build strategyThe addition of build steps for
@repo/commonand@repo/trpcworkspaces correctly handles the monorepo dependencies. This ensures all required packages are built before the main API application.apps/api/tsconfig.build.json (1)
3-3: Build configuration is complete in base tsconfig.jsonThe base
apps/api/tsconfig.jsonalready defines all essential build compilerOptions—outDir,declaration/declarationMap, andsourceMap—and enablescompositefor project references. TypeScript will inferrootDirwhen not explicitly set. No missing build settings were found, so relying on the base config is safe.packages/ui/src/components/ui/form.tsx (1)
96-96: LGTM! Consistent theme adoption for error states.The replacement of hardcoded red color classes (
text-red-600,ring-red-600) with semantic theme variables (text-destructive,ring-destructive) improves maintainability and ensures consistent theming across the application.Also applies to: 122-122, 162-162
apps/dashboard/src/components/suspense/ErrorFallback.tsx (1)
35-35: LGTM! Consistent error styling refactor.The removal of explicit border color (
border-neutral-600/50) and replacement of hardcoded red text (text-red-600) with semantic destructive color (text-destructive) aligns with the broader theme consistency effort across the dashboard.apps/dashboard/src/components/dashboard-page/Dashboard.tsx (2)
15-15: LGTM! Theme-aware text color inheritance.Removing explicit text color classes (
text-black dark:text-white) allows the component to inherit appropriate colors from the theme system, improving consistency and maintainability.
51-51: LGTM! Consistent error styling update.The replacement of hardcoded
text-red-600with semantictext-destructivemaintains the same visual treatment while adopting the theme system for better consistency across the application.apps/dashboard/src/components/project-page/charts/CircularPacking.tsx (1)
75-89: LGTM! Theme-aware SVG text styling.The replacement of hardcoded white fill colors with CSS variable-based colors (
hsl(var(--muted-foreground))) and the addition of appropriate font weight classes improves theme consistency and typography in the circular packing chart.apps/dashboard/src/components/layout/header/HorizontalNavbar.tsx (1)
8-14: LGTM! Simplified structure with consistent theming.The removal of the unnecessary Button wrapper and direct use of Link with semantic color classes (
text-muted-foreground/60 hover:text-primary) simplifies the component structure while maintaining theme consistency.apps/dashboard/src/components/project-page/Project.tsx (2)
30-30: LGTM! Good semantic color usage.The change from
text-red-600totext-destructivealigns well with the theme refactoring to use semantic color classes instead of hardcoded ones.
37-37: LGTM! Simplified styling by relying on inherited colors.Removing the explicit text color classes (
text-black dark:text-white) is consistent with the theme refactoring approach and lets the component inherit colors from the theme.apps/dashboard/src/components/register-page/RegisterForm.tsx (2)
91-93: LGTM! Enhanced branding and visual hierarchy.The updated title "Register to MoonCode" with
font-extraboldimproves branding and visual prominence. Good enhancement to the user experience.
104-104: LGTM! Consistent theme refactoring across input fields.The replacement of
focus-visible:ring-moon/65withborder-borderacross all input fields aligns perfectly with the broader color refactoring from moon-specific colors to semantic CSS classes.Also applies to: 121-121, 141-141
apps/dashboard/src/components/dashboard-page/charts/PeriodProjects.tsx (3)
31-31: LGTM! Simplified border styling.Removing the specific
border-neutral-600/50classes in favor of simplerborderclasses aligns with the theme simplification goals and reduces hardcoded color dependencies.Also applies to: 50-50
39-40: LGTM! Consistent color migration from moon to primary.The systematic replacement of
text-moon/85withtext-primary/85maintains visual consistency while aligning with the broader theme refactoring to remove moon color references.Also applies to: 64-64
54-54: LGTM! Icon styling updated consistently.The stroke color updates from
stroke-primary/85(assuming moon was replaced) maintain the same opacity and visual weight while using the new primary color theme.Also applies to: 59-59
apps/dashboard/src/components/layout/header/SideBar.tsx (3)
16-16: LGTM! Simplified navigation styling with semantic classes.The updated styling using
bg-backgroundandborder-rsimplifies the component while maintaining visual consistency through semantic CSS classes.
31-31: LGTM! Cleaned up empty className attribute.Removing the empty
classNameattribute improves code cleanliness.
33-39: LGTM! Simplified navigation structure with semantic styling.Removing the unnecessary
Buttonwrapper and using directLinkwith semantic text classes (text-muted-foreground/60 hover:text-primary) improves component structure and aligns with the theme refactoring goals.apps/dashboard/src/components/dashboard-page/charts/GeneralStatsChart.tsx (4)
3-4: LGTM! Import paths updated to reflect package reorganization.The migration of
getLanguageColorandgetLanguageNameimports from@repo/commonto@repo/ui/utilsaligns with the broader utility reorganization mentioned in the PR objectives.
10-10: LGTM! Simplified border styling.Removing the specific
border-neutral-600/50classes in favor of genericborderclasses simplifies the styling and reduces hardcoded color dependencies.Also applies to: 60-60
66-66: LGTM! Systematic color migration from moon to primary.The consistent replacement of
text-moon/85withtext-primary/85across all stat values maintains visual consistency while implementing the theme refactoring goals.Also applies to: 86-86, 98-98
75-75: LGTM! Semantic error color usage.Changing from
text-red-600totext-destructivefor negative percentage values uses semantic color classes, improving theme consistency and maintainability.packages/ui/src/components/ui/Icon.tsx (2)
16-19: LGTM! Improved styling consistency.The refactoring to use
Buttoncomponent'svariantandsizeprops instead of hardcoded classes aligns well with the broader styling standardization effort. The use of thecnutility for class merging is appropriate.
21-21: Verify Icon rendering without classesAfter the refactor the
<Icon />component no longer accepts aclassName. Make sure that using<Button variant="ghost" size="icon"> <Icon /> </Button>still applies the correct styling (e.g.
size-10 [&_svg]:size-auto) so the SVG renders at the intended dimensions.• Check
packages/ui/src/components/ui/button-variants.tsto confirm that theiconsize entry includes the expected Tailwind classes.
• Verify in the browser that the icon scales correctly inside the button.packages/ui/src/globals.css (4)
6-57: LGTM! Comprehensive theme standardization.The extensive CSS variable updates create a solid foundation for centralized theming. The HSL format provides precise color control and the addition of sidebar, font, and shadow variables supports the broader UI standardization effort.
38-40: Verify font standardization to Inter across all font families.All font families (sans, serif, mono) are set to "Inter, sans-serif". This standardization might be intentional, but typically serif and mono fonts serve different purposes.
Consider if this is the intended design choice, or if serif and mono should use different font families:
--font-sans: Inter, sans-serif; ---font-serif: Inter, sans-serif; ---font-mono: Inter, sans-serif; +--font-serif: "Times New Roman", serif; +--font-mono: "Fira Code", monospace;
112-115: LGTM! Modern viewport height and font implementation.The use of
100dvh(dynamic viewport height) is appropriate for modern browsers and provides better mobile experience than100vh. The "Inter Variable" font family aligns with the CSS variables defined above.
126-126: Excellent use of CSS variables for scrollbar styling.The change from hardcoded RGB values to
hsl(var(--border))ensures the scrollbar styling respects the theme and provides consistency across light/dark modes.
Commits
fix: logout
feat: styles
refactor: colors
*-moontailwind classes by*-primaryfeat: styles
fix: colors
refactor: colors and imports
getLanguageNameandgetLanguageColorfix: Dockerfile
.dockerignorefrom apps/api to .Summary by CodeRabbit
Style
New Features
Bug Fixes
Refactor
Chores