Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: codeBlock styles in light mode #32499

Merged
merged 7 commits into from
Jun 3, 2024
Merged

fix: codeBlock styles in light mode #32499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7f478b3
fix: bump fuselage
juliajforesti May 24, 2024
b519a12
fix: add codeBlock PaletteStyleTag when in dark mode
juliajforesti May 24, 2024
ca6ed8d
chore: changeset
juliajforesti May 24, 2024
56c1ef5
Merge branch 'develop' into fix/codeBlock-styles
juliajforesti May 27, 2024
5846976
Merge branch 'develop' into fix/codeBlock-styles
juliajforesti May 29, 2024
af08990
test: MainLayout style tags
juliajforesti May 29, 2024
63d585e
Merge branch 'develop' into fix/codeBlock-styles
juliajforesti Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/five-shoes-fly.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': patch
---

Fixed codeBlock styles in light mode
8 changes: 3 additions & 5 deletions apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { Box, PaletteStyleTag } from '@rocket.chat/fuselage';
import { Box } from '@rocket.chat/fuselage';
import { useLayout, useSetting, useCurrentModal, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
import { useThemeMode } from '@rocket.chat/ui-theming/src/hooks/useThemeMode';
import type { ReactElement, ReactNode } from 'react';
import React, { useEffect, useRef } from 'react';

import Sidebar from '../../../sidebar';
import AccessibilityShortcut from './AccessibilityShortcut';
import { MainLayoutStyleTags } from './MainLayoutStyleTags';

const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement => {
const { isEmbedded: embeddedLayout } = useLayout();
const [, , theme] = useThemeMode();

const modal = useCurrentModal();
const currentRoutePath = useCurrentRoutePath();
Expand Down Expand Up @@ -48,8 +47,7 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement
aria-hidden={Boolean(modal)}
>
<AccessibilityShortcut />
<PaletteStyleTag theme={theme} selector='.rcx-content--main, .rcx-tile' />
<PaletteStyleTag theme='dark' selector='.rcx-sidebar--main' tagId='sidebar-palette' />
<MainLayoutStyleTags />
{!removeSidenav && <Sidebar />}
<main
id='main-content'
Expand Down
31 changes: 31 additions & 0 deletions apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { mockAppRoot } from '@rocket.chat/mock-providers';
import { render, queryByAttribute } from '@testing-library/react';
import React from 'react';

import { MainLayoutStyleTags } from './MainLayoutStyleTags';

describe('MainLayout style tags', () => {
it('should create the Light theme style tag', () => {
render(<MainLayoutStyleTags />, {
wrapper: mockAppRoot().withUserPreference('themeAppearence', 'light').build(),
});
const tagLight = queryByAttribute('id', document.head, 'main-palette-light');
expect(tagLight).not.toBeNull();
});

it('should create the Dark theme style tag', () => {
render(<MainLayoutStyleTags />, {
wrapper: mockAppRoot().withUserPreference('themeAppearence', 'dark').build(),
});
const tagDark = queryByAttribute('id', document.head, 'main-palette-dark');
expect(tagDark).not.toBeNull();
});

it('should create the codeBlock style tag when in dark mode', () => {
render(<MainLayoutStyleTags />, {
wrapper: mockAppRoot().withUserPreference('themeAppearence', 'dark').build(),
});
const style = queryByAttribute('id', document.head, 'codeBlock-palette');
expect(style).not.toBeNull();
});
});
17 changes: 17 additions & 0 deletions apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { PaletteStyleTag } from '@rocket.chat/fuselage';
import { useThemeMode } from '@rocket.chat/ui-theming/src/hooks/useThemeMode';
import React from 'react';

import { codeBlock } from '../lib/codeBlockStyles';

export const MainLayoutStyleTags = () => {
const [, , theme] = useThemeMode();

return (
<>
<PaletteStyleTag theme={theme} selector='.rcx-content--main, .rcx-tile' tagId={`main-palette-${theme}`} />
<PaletteStyleTag theme='dark' selector='.rcx-sidebar--main' tagId='sidebar-palette' />
{theme === 'dark' && <PaletteStyleTag selector='.rcx-content--main' palette={codeBlock} tagId='codeBlock-palette' />}
</>
);
};
74 changes: 74 additions & 0 deletions apps/meteor/client/views/root/lib/codeBlockStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
export const codeBlock = `pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px;
}
.hljs {
background: #1d1f21;
color: #c5c8c6;
}
.hljs span::selection,
.hljs::selection {
background: #373b41;
}
.hljs span::-moz-selection,
.hljs::-moz-selection {
background: #373b41;
}
.hljs-name,
.hljs-title {
color: #f0c674;
}
.hljs-comment,
.hljs-meta,
.hljs-meta .hljs-keyword {
color: #707880;
}
.hljs-deletion,
.hljs-link,
.hljs-literal,
.hljs-number,
.hljs-symbol {
color: #c66;
}
.hljs-addition,
.hljs-doctag,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-string {
color: #b5bd68;
}
.hljs-attribute,
.hljs-code,
.hljs-selector-id {
color: #b294bb;
}
.hljs-bullet,
.hljs-keyword,
.hljs-selector-tag,
.hljs-tag {
color: #81a2be;
}
.hljs-subst,
.hljs-template-tag,
.hljs-template-variable,
.hljs-variable {
color: #8abeb7;
}
.hljs-built_in,
.hljs-quote,
.hljs-section,
.hljs-selector-class,
.hljs-type {
color: #de935f;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}`;
2 changes: 1 addition & 1 deletion apps/meteor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@
"@rocket.chat/favicon": "workspace:^",
"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.2",
"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.3",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/fuselage-hooks": "^0.33.1",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/fuselage-toastbar": "^0.31.26",
Expand Down
2 changes: 1 addition & 1 deletion ee/packages/ui-theming/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"devDependencies": {
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/fuselage-hooks": "^0.33.1",
"@rocket.chat/icons": "^0.36.0",
"@rocket.chat/ui-contexts": "workspace:~",
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage-ui-kit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"@rocket.chat/apps-engine": "^1.42.2",
"@rocket.chat/core-typings": "workspace:^",
"@rocket.chat/eslint-config": "workspace:^",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/fuselage-hooks": "^0.33.1",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/icons": "^0.36.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/gazzodown/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@rocket.chat/core-typings": "workspace:^",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/fuselage-tokens": "^0.33.1",
"@rocket.chat/message-parser": "workspace:^",
"@rocket.chat/styled": "~0.31.25",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-avatar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"devDependencies": {
"@babel/core": "~7.22.20",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/ui-contexts": "workspace:^",
"@types/babel__core": "~7.20.3",
"@types/react": "~17.0.69",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@react-aria/toolbar": "^3.0.0-beta.1",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/fuselage-hooks": "^0.33.1",
"@rocket.chat/icons": "^0.36.0",
"@rocket.chat/mock-providers": "workspace:^",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-composer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@react-aria/toolbar": "^3.0.0-beta.1",
"@rocket.chat/eslint-config": "workspace:^",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/icons": "^0.36.0",
"@storybook/addon-actions": "~6.5.16",
"@storybook/addon-docs": "~6.5.16",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-video-conf/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/eslint-config": "workspace:^",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/fuselage-hooks": "^0.33.1",
"@rocket.chat/icons": "^0.36.0",
"@rocket.chat/styled": "~0.31.25",
Expand Down
2 changes: 1 addition & 1 deletion packages/uikit-playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@codemirror/tooltip": "^0.19.16",
"@lezer/highlight": "^1.1.6",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/fuselage": "^0.54.1",
"@rocket.chat/fuselage": "^0.54.2",
"@rocket.chat/fuselage-hooks": "^0.33.1",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/fuselage-toastbar": "^0.31.26",
Expand Down
Loading
Loading