diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index de66ccd85..7336d89d1 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -10,9 +10,10 @@ permissions:
pages: write
id-token: write
-env:
+env:
STORYBOOK_RC_HOST: "https://demo.qa.rocket.chat"
-
+ RC_ROOM_ID: "66ccc4f1e050428c76256939"
+
jobs:
build-and-deploy:
runs-on: ubuntu-latest
diff --git a/README.md b/README.md
index 59b58af26..455b2fa89 100644
--- a/README.md
+++ b/README.md
@@ -14,9 +14,18 @@ _EmbeddedChat is a full-stack React component designed to integrate Rocket.Chat
+## Try It Out 🚀
+
+Explore our project in action! It's live for a sneak peek and testing at: https://rocketchat.github.io/EmbeddedChat/
+
+Test credentials:
+
+- **Username:** test_acc
+- **Password:** test_acc
+
## Installation and Usage
-Installation and usage documentation could be found here [EmbeddedChat installation and usage](packages/react/README.md)
+Installation and usage documentation could be found here [EmbeddedChat installation and usage](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup)
## Development
@@ -158,21 +167,25 @@ This environment offers a complete setup for developing and testing the `Embedde
## References
-- Embedded Chat Development: [EC Development](packages/docs/embeddedchat_dev.md) – Explore development techniques for Embedded Chat.
+- **Documentation Overview**: For a comprehensive overview of Embedded Chat, including installation, usage, and advanced topics, visit our [Documentation Page](https://rocketchat.github.io/EmbeddedChat/docs/).
+
+ Below are specific sections that cover various aspects of Embedded Chat:
+
+ - Embedded Chat Development: [EC Development](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/dev_launch) – Explore development techniques for Embedded Chat.
-- Embedded Chat Setup: [Setup Instructions](packages/docs/embeddedchat_setup.md) – Start setting up Embedded Chat in your app.
+ - Embedded Chat Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup) – Start setting up Embedded Chat in your app.
-- UI Elements: [Setup & Dev Guide](packages/docs/ui-elements.md) – Integration and customization of UI elements.
+ - UI Elements: [Setup & Dev Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/ui-elements) – Integration and customization of UI elements.
-- Layout Editor: [Using the Editor](packages/docs/layout_editor.md) – Customize the chat interface with the layout editor.
+ - Layout Editor: [Using the Editor](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/layout_editor) – Customize the chat interface with the layout editor.
-- EmbeddedChat RC Setup: [Setup Instructions](packages/docs/ec_rc_setup.md) – Guide for setting up Embedded Chat RC App.
+ - EmbeddedChat RC Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/ec_rc_setup) – Guide for setting up Embedded Chat RC App.
-- Authentication: [Guide](packages/docs/authentication.md) – Configure and manage authentication for Embedded Chat.
+ - Authentication: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/authentication) – Configure and manage authentication for Embedded Chat.
-- Theming Guide: [Guide](packages/docs/theming.md) – Guide to theming options and customization.
+ - Theming Guide: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming) – Guide to theming options and customization.
-- Theming Technical: [Technical Overview](packages/docs/theming_technical.md) – Technical aspects of theming.
+ - Theming Technical: [Technical Overview](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/theming_technical) – Technical aspects of theming.
### Contributors
diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
index b2d6de306..27a8a2e6a 100644
--- a/packages/docs/.gitignore
+++ b/packages/docs/.gitignore
@@ -18,3 +18,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+.yarn/*
diff --git a/packages/docs/.yarn/install-state.gz b/packages/docs/.yarn/install-state.gz
deleted file mode 100644
index 1f543b731..000000000
Binary files a/packages/docs/.yarn/install-state.gz and /dev/null differ
diff --git a/packages/docs/blog/EmbeddedChat-2024.md b/packages/docs/blog/EmbeddedChat-2024.md
index 60a244aaf..6827d5940 100644
--- a/packages/docs/blog/EmbeddedChat-2024.md
+++ b/packages/docs/blog/EmbeddedChat-2024.md
@@ -1,7 +1,7 @@
# Google Summer of Code 2024, RocketChat
-
+
## 📘 Introduction
@@ -31,7 +31,7 @@ Explore a demonstration of the latest features and improvements. See firsthand h
Here's a brief preview of EmbeddedChat integrated into a website, designed to demonstrate the functionality of RC apps without the need for local setup.
-
+
### Code Refactor: Separation of Concerns
@@ -45,20 +45,21 @@ Key updates to the EmbeddedChat repository include:
3. **Markup and UI-Kit Separation**: Markups and the UI Kit are organized into a separate library (monorepo).
-
+
CSS styles are now in `component.styles.js`
-
+
Separation into monorepo for `ui-elements`, `markups`, and `ui-kit`
The video below illustrates the development, usage, and setup of the ui-elements monorepo, and it also shows that EmbeddedChat functions as expected following this separation:
-[UI-Elements Storybook](https://github.com/RocketChat/EmbeddedChat/assets/78961432/a399defd-cae7-495a-9f88-11f4b518df00)
+VIDEO
+
### UI Theming Upgrade: Prebuilt Themes and Style Variants
@@ -66,18 +67,18 @@ The theming system has been enhanced with several prebuilt themes, ensuring a co
Once the Storybook is running, you can explore and experiment with various designs within the `Design Variants` folder, including `RCVariant`, `Bubble Variant`, and `Modern Variant`. These options enable you to either use the prebuilt themes or draw inspiration to create your own. Below are images and videos demonstrating the different variants; note that the videos also highlight fixes introduced with these PRs:
-[RC Variant](https://github.com/RocketChat/EmbeddedChat/assets/78961432/d9fea331-fa32-44df-8322-36c9fb2baa6c)
+VIDEO
-[Bubble Variant](https://github.com/RocketChat/EmbeddedChat/assets/78961432/06d61e66-8f17-423b-a339-1728323661b3)
+VIDEO
-
+
Automatically generated colors in usernames in dark mode + popup instead of sidebar
-
+
Automatically generated colors in usernames in light mode + popup instead of sidebar
@@ -86,7 +87,7 @@ The theming system follows a convention similar to the ShadCN theming system. Us
A demonstration video is available here:
-[Theme Converter](https://github.com/user-attachments/assets/9078260f-1933-4be6-b019-61e9ac54be7d)
+VIDEO
For further details on theming, you can visit the [documentation](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/theming.md) or check out the [technical guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/theming_technical.md) for insights on how theming is implemented in the repository.
@@ -96,7 +97,7 @@ EmbeddedChat authentication security has been enhanced through the use of HTTP-O
A video demonstration is available here:
-[Http-Only-Cookie Auth](https://github.com/RocketChat/EmbeddedChat/assets/78961432/24fdf4bf-34b5-4e66-b045-802d6fc428dd)
+VIDEO
For more information on authentication, refer to the [authentication guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/authentication.md).
@@ -113,15 +114,15 @@ Testing was conducted across three distinct RC apps, with video demonstrations p
1. **Reminder RC App**:
-[Reminder App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/eeb17fd6-68f2-4113-8ef1-dc0faf32ca05)
+VIDEO
2. **Notion RC App**:
-[Notion App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/71d9baa1-a54d-4077-9fbd-f7e005742f77)
+VIDEO
3. **News Aggregation App** (tested multi-select functionality):
-[News App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/d3f611b0-3205-483f-b00a-9800893b98fb)
+VIDEO
### EmbeddedChat Remote Configurability
@@ -129,9 +130,9 @@ I have added support for remote configuration of EmbeddedChat props, including t
The following videos demonstrate its usage:
-[Remotely Configure EC](https://github.com/RocketChat/EmbeddedChat/assets/78961432/8f2e5027-2a8d-4723-8c2b-33ae7cbf9336)
+VIDEO
-[CSS Validation Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/2eaa4e50-ad38-4ac8-8cc7-d8eebd875f26)
+VIDEO
To set up the EmbeddedChat RC App, follow this guide: [EmbeddedChat RC App Setup](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/ec_rc_setup.md).
@@ -141,7 +142,7 @@ I also worked on a new sub-project called `layout-editor` during GSoC to enhance
A video demonstration showcases the features:
-[Layout Editor Demo](https://github.com/user-attachments/assets/3f846616-bf33-49ca-95c7-3a6e98685476)
+VIDEO
To learn more about the layout editor, visit the guide: [Layout Editor Guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/layout_editor.md).
@@ -201,4 +202,4 @@ Interested in chatting about GSoC, Rocket.Chat, or open-source adventures? I'm a
## 📌 Closing Notes
-This repository contains the final report and serves as a guide for future contributors to the EmbeddedChat project, which was developed and improved during Google Summer of Code (GSoC) 2024. The final report details the solutions implemented during the project, while the guide provides insights and instructions for new contributors to effectively engage with and build upon the project's foundation.
\ No newline at end of file
+This repository contains the final report and serves as a guide for future contributors to the EmbeddedChat project, which was developed and improved during Google Summer of Code (GSoC) 2024. The final report details the solutions implemented during the project, while the guide provides insights and instructions for new contributors to effectively engage with and build upon the project's foundation.
diff --git a/packages/docs/docs/Development/theming_technical.md b/packages/docs/docs/Development/theming_technical.md
index a2d37a8d3..e444a372a 100644
--- a/packages/docs/docs/Development/theming_technical.md
+++ b/packages/docs/docs/Development/theming_technical.md
@@ -14,26 +14,30 @@ We use [Emotion](https://emotion.sh/) for styling. Each component has a `compone
We use theming with our `useTheme` hook, exported from `@embeddedchat/ui-elements`, according to our specific requirements. The implementation looks something like this:
```jsx
-import { useContext } from 'react';
-import { ThemeContext } from '../context/ThemeContextProvider';
-import DefaultTheme from '../theme/DefaultTheme';
+import { useContext } from "react";
+import { ThemeContext } from "../context/ThemeContextProvider";
+import DefaultTheme from "../theme/DefaultTheme";
-const invertMode = (mode) => (mode === 'light' ? 'dark' : 'light');
+const invertMode = (mode) => (mode === "light" ? "dark" : "light");
const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
- const defaultMode = 'light';
- const defaultTheme = DefaultTheme;
- const colors = defaultTheme.schemes?.[defaultMode];
- const invertedColors = defaultTheme.schemes?.[invertMode(defaultMode)];
+ const defaultMode = "light";
+ const theme = DefaultTheme;
+ const colors = theme.schemes?.[defaultMode];
+ const invertedColors = theme.schemes?.[invertMode(defaultMode)];
- return {
- theme: defaultTheme,
- mode: defaultMode,
+ const modifiedTheme = {
+ ...theme,
colors,
invertedColors,
+ };
+
+ return {
+ theme: modifiedTheme,
+ mode: defaultMode,
setMode: () => {},
setTheme: () => {},
};
@@ -45,25 +49,25 @@ const useTheme = () => {
export default useTheme;
```
-This hook grants access to the theme, mode, colors, and invertedColors, streamlining their usage across different parts of the application. It ensures that colors are dynamically provided according to the current theme mode (light or dark), eliminating the need for repetitive code.
+This hook provides access to the `theme` and `mode`, simplifying their use across the application. The theme object dynamically provides `colors` and `invertedColors` in `theme` object based on the mode (light or dark), reducing the need for repetitive code.
For example, in the CSS:
```jsx
-const { colors } = useTheme();
+const { theme } = useTheme();
const main = css`
margin: 0.2rem 2rem;
display: block;
max-height: 10rem;
overflow: scroll;
overflow-x: hidden;
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: 0.2rem;
- color: ${colors.secondaryForeground};
+ color: ${theme.colors.secondaryForeground};
`;
```
-Here, `colors` from `useTheme` sets `colors.border` and `colors.secondaryForeground`.
+In this example, `theme.colors` from `useTheme` is used to set the values for `theme.colors.border` and `theme.colors.secondaryForeground`.
## Technical Overview of `useComponentOverrides`
@@ -72,16 +76,16 @@ Components utilize the `useComponentOverrides` hook to facilitate various types
### Example: styleOverrides and classNames
```jsx
-import { useComponentOverrides } from '../../hooks/useComponentOverrides';
+import { useComponentOverrides } from "../../hooks/useComponentOverrides";
export const MessageBody = ({
children,
- className = '',
+ className = "",
style = {},
...props
}) => {
const { styleOverrides, classNames } = useComponentOverrides(
- 'MessageBody',
+ "MessageBody",
className,
style
);
@@ -89,7 +93,7 @@ export const MessageBody = ({
return (
@@ -105,67 +109,82 @@ In this example, it's evident that the className and style properties are dynami
```jsx
const { styleOverrides, classNames, configOverrides } = useComponentOverrides(
- 'MessageToolbox',
+ "MessageToolbox",
className,
style
);
// Extract surfaceItems and menuItems from configOverrides
-const surfaceItems = configOverrides.optionConfig?.surfaceItems || optionConfig.surfaceItems;
-const menuItems = configOverrides.optionConfig?.menuItems || optionConfig.menuItems;
+const surfaceItems =
+ configOverrides.optionConfig?.surfaceItems || optionConfig.surfaceItems;
+const menuItems =
+ configOverrides.optionConfig?.menuItems || optionConfig.menuItems;
// Process surfaceItems and menuItems based on the configuration
const menuOptions = menuItems
- ?.map((item) => options[item]?.visible ? {
- id: options[item].id,
- action: options[item].onClick,
- label: options[item].label,
- icon: options[item].iconName,
- } : null)
+ ?.map((item) =>
+ options[item]?.visible
+ ? {
+ id: options[item].id,
+ action: options[item].onClick,
+ label: options[item].label,
+ icon: options[item].iconName,
+ }
+ : null
+ )
.filter((option) => option !== null);
const surfaceOptions = surfaceItems
- ?.map((item) => options[item]?.visible ? {
- id: options[item].id,
- onClick: options[item].onClick,
- label: options[item].label,
- iconName: options[item].iconName,
- type: options[item].type,
- } : null)
+ ?.map((item) =>
+ options[item]?.visible
+ ? {
+ id: options[item].id,
+ onClick: options[item].onClick,
+ label: options[item].label,
+ iconName: options[item].iconName,
+ type: options[item].type,
+ }
+ : null
+ )
.filter((option) => option !== null);
// Render the options
-{surfaceOptions?.length > 0 && (
-
-)}
-{menuOptions?.length > 0 && (
-
-)}
+{
+ surfaceOptions?.length > 0 && (
+
+ );
+}
+{
+ menuOptions?.length > 0 && (
+
+ );
+}
```
In this snippet, `surfaceItems` and `menuItems` are retrieved from `configOverrides.optionConfig` or fall back to default values (`optionConfig.surfaceItems` and `optionConfig.menuItems`) when not provided in `configOverrides`. These items are then processed and rendered accordingly.
+
### Example: Variant Overrides
```jsx
const { styleOverrides, classNames, variantOverrides } =
- useComponentOverrides('MessageHeader');
+ useComponentOverrides("MessageHeader");
// Determine the display name variant or default to 'Normal'
-const displayNameVariant = variantOverrides || 'Normal';
+const displayNameVariant = variantOverrides || "Normal";
// Render a span element for the message header username
+## Try It Out 🚀
+
+Explore our project in action! It's live for a sneak peek and testing at: https://rocketchat.github.io/EmbeddedChat/
+
+Test credentials:
+
+- **Username:** test_acc
+- **Password:** test_acc
+
## Installation and usage
Set up and start using the product in no time. Dive into our installation and usage docs [here](Usage/embeddedchat_setup.md)
diff --git a/packages/e2e-react/src/App.tsx b/packages/e2e-react/src/App.tsx
index 5be050dd0..d0f16785a 100644
--- a/packages/e2e-react/src/App.tsx
+++ b/packages/e2e-react/src/App.tsx
@@ -4,9 +4,8 @@ import { EmbeddedChat } from "@embeddedchat/react";
function App() {
return (
);
}
diff --git a/packages/e2e-react/tests/example.spec.ts b/packages/e2e-react/tests/example.spec.ts
index e309eeb4e..1189f4442 100644
--- a/packages/e2e-react/tests/example.spec.ts
+++ b/packages/e2e-react/tests/example.spec.ts
@@ -1,18 +1,13 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
-test('EmbeddedChat should render', async ({ page }) => {
- await page.goto('/');
- await expect(page.locator('.ec-embedded-chat')).toBeVisible();
+test("EmbeddedChat should render", async ({ page }) => {
+ await page.goto("/");
+ await expect(page.locator(".ec-embedded-chat")).toBeVisible();
});
-test('EmbeddedChat has a title', async ({ page }) => {
- await page.goto('/');
- await expect(page.locator('.ec-chat-header--channelName')).toHaveText('Login to chat');
-});
-
-test('EmbeddedChat has messages', async ({ page }) => {
- await page.goto('/');
-
- await page.waitForSelector('.ec-message');
- expect(await page.locator('.ec-message').count()).toBeGreaterThan(0);
+test("EmbeddedChat has a title", async ({ page }) => {
+ await page.goto("/");
+ await expect(page.locator(".ec-chat-header--channelName")).toHaveText(
+ "Login to chat"
+ );
});
diff --git a/packages/layout_editor/README.md b/packages/layout_editor/README.md
index 690a7d8bf..571294786 100644
--- a/packages/layout_editor/README.md
+++ b/packages/layout_editor/README.md
@@ -17,6 +17,10 @@ We offer a layout editor that lets you customize the design and appearance of th
- **Resizable Sidebar**: Adjust the sidebar by dragging.
- **Theme Lab**: Customize layout and theme settings, including palette colors and typography.
+### Try It Out 🚀
+
+Explore the Layout Editor to style and customize EmbeddedChat to your needs. Generate a theme object and pass it to EmbeddedChat via props. Start customizing here: [Layout Editor](https://rocketchat.github.io/EmbeddedChat/layout_editor/)
+
### Theme Lab
In the Theme Lab, you can:
@@ -54,5 +58,5 @@ yarn preview # Preview build
### Additional Resources
-- For installation instructions of the EmbeddedChat RC App, visit [this guide](../rc-app/README.md).
-- For detailed prop usage, refer to [this guide](../react/README.md).
+- For installation instructions of the EmbeddedChat RC App, visit [this guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/ec_rc_setup).
+- For detailed prop usage, refer to [this guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup).
diff --git a/packages/layout_editor/src/components/SortableMenu/Menu.styles.js b/packages/layout_editor/src/components/SortableMenu/Menu.styles.js
index 6b16dd691..586ffe379 100644
--- a/packages/layout_editor/src/components/SortableMenu/Menu.styles.js
+++ b/packages/layout_editor/src/components/SortableMenu/Menu.styles.js
@@ -1,7 +1,7 @@
import { css } from '@emotion/react';
import { lighten, darken } from '@embeddedchat/ui-elements';
-export const getMenuStyles = ({ theme, colors }) => {
+export const getMenuStyles = ({ theme }) => {
const styles = {
wrapper: css`
position: relative;
@@ -18,15 +18,14 @@ export const getMenuStyles = ({ theme, colors }) => {
border-radius: 0.2em;
padding: 0.5rem 0;
box-shadow: ${theme.shadows[1]};
- background-color: ${colors.background};
+ background-color: ${theme.colors.background};
`,
};
return styles;
};
-export const getMenuItemStyles = (customTheme) => {
- const { mode, colors } = customTheme;
+export const getMenuItemStyles = ({ theme, mode }) => {
const styles = {
item: css`
@@ -38,11 +37,11 @@ export const getMenuItemStyles = (customTheme) => {
padding: 0.25em 0.75em;
white-space: nowrap;
gap: 0.2rem;
- color: ${colors.foreground};
+ color: ${theme.colors.foreground};
&:hover {
background-color: ${mode === 'light'
- ? darken(colors.background, 0.05)
- : lighten(colors.background, 2)};
+ ? darken(theme.colors.background, 0.05)
+ : lighten(theme.colors.background, 2)};
cursor: pointer;
}
`,
@@ -55,13 +54,13 @@ export const getMenuItemStyles = (customTheme) => {
disabled: css`
cursor: not-allowed !important;
- color: ${colors.mutedForeground};
+ color: ${theme.colors.mutedForeground};
`,
icon: css`
visibility: hidden;
&:hover {
- fill: ${colors.destructive};
+ fill: ${theme.colors.destructive};
}
`,
@@ -74,7 +73,7 @@ export const getMenuItemStyles = (customTheme) => {
dragOverlay: css`
padding: 0.5rem 0.75em;
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-right: none;
border-left: none;
`,
diff --git a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js
index 1d86eaf16..a62e50291 100644
--- a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js
+++ b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js
@@ -1,12 +1,12 @@
import { css } from '@emotion/react';
-export const getSurfaceItemStyles = ({ theme, colors }) => {
+export const getSurfaceItemStyles = ({ theme }) => {
const styles = {
overlayBox: css`
width: 24px;
height: 24px;
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
`,
itemContainer: css`
@@ -16,8 +16,8 @@ export const getSurfaceItemStyles = ({ theme, colors }) => {
width: 14px;
height: 14px;
border-radius: 50%;
- background: ${colors.secondary};
- border: 1px solid ${colors.border};
+ background: ${theme.colors.secondary};
+ border: 1px solid ${theme.colors.border};
}
`,
@@ -30,7 +30,7 @@ export const getSurfaceItemStyles = ({ theme, colors }) => {
icon: css`
&:hover {
- fill: ${colors.destructive};
+ fill: ${theme.colors.destructive};
}
`,
};
diff --git a/packages/layout_editor/src/hooks/useDisplayNameColor.js b/packages/layout_editor/src/hooks/useDisplayNameColor.js
index 043ca8a89..e5590898d 100644
--- a/packages/layout_editor/src/hooks/useDisplayNameColor.js
+++ b/packages/layout_editor/src/hooks/useDisplayNameColor.js
@@ -15,7 +15,7 @@ const useDisplayNameColor = () => {
const getDisplayNameColor = (username) => {
const hash = simpleHash(username);
- const { saturation, luminance } = theme.schemes.contrastParams[mode];
+ const { saturation, luminance } = theme.contrastParams[mode];
const hue = Math.abs(hash) % 360;
return `hsl(${hue}, ${saturation}%, ${luminance}%)`;
};
diff --git a/packages/layout_editor/src/theme/DefaultTheme.js b/packages/layout_editor/src/theme/DefaultTheme.js
index 8752e2e4a..88d102103 100644
--- a/packages/layout_editor/src/theme/DefaultTheme.js
+++ b/packages/layout_editor/src/theme/DefaultTheme.js
@@ -1,20 +1,10 @@
const DefaultTheme = {
+ radius: '0.2rem',
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
+ },
schemes: {
- radius: '0.2rem',
- contrastParams: {
- light: {
- saturation: 70,
- luminance: 19,
- },
- dark: {
- saturation: 88,
- luminance: 77,
- },
- },
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(0, 0%, 100%)',
foreground: 'hsl(240, 10%, 3.9%)',
@@ -71,6 +61,17 @@ const DefaultTheme = {
},
},
+ contrastParams: {
+ light: {
+ saturation: 70,
+ luminance: 19,
+ },
+ dark: {
+ saturation: 88,
+ luminance: 77,
+ },
+ },
+
typography: {
default: {
fontFamily: "'Times New Roman', serif",
diff --git a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js
index 570a7e989..372fc77c2 100644
--- a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js
+++ b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js
@@ -1,7 +1,7 @@
import { css } from '@emotion/react';
import { darken, lighten } from '@embeddedchat/ui-elements';
-export const getChatHeaderStyles = ({ theme, mode, colors }) => {
+export const getChatHeaderStyles = ({ theme, mode }) => {
const styles = {
clearSpacing: css`
margin: 0;
@@ -19,8 +19,8 @@ export const getChatHeaderStyles = ({ theme, mode, colors }) => {
chatHeaderParent: css`
background-color: ${mode === 'light'
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1)};
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1)};
width: 100%;
z-index: 1200;
display: flex;
@@ -47,8 +47,8 @@ export const getChatHeaderStyles = ({ theme, mode, colors }) => {
overlayBox: css`
width: 24px;
height: 24px;
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
`,
};
diff --git a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js
index 92855c1b0..dfa592877 100644
--- a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js
@@ -1,14 +1,14 @@
import { css } from '@emotion/react';
import { darken, lighten } from '@embeddedchat/ui-elements';
-export const getChatInputStyles = ({ theme, colors }) => {
+export const getChatInputStyles = ({ theme }) => {
const styles = {
inputWithFormattingBox: css`
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
margin: 0.5rem 2rem 1rem 2rem;
&.focused {
- border: ${`1.5px solid ${colors.ring}`};
+ border: ${`1.5px solid ${theme.colors.ring}`};
}
`,
@@ -48,27 +48,27 @@ export const getChatInputStyles = ({ theme, colors }) => {
return styles;
};
-export const getChatInputToolbarStyles = ({ theme, mode, colors }) => {
+export const getChatInputToolbarStyles = ({ theme, mode }) => {
const styles = {
chatFormat: css`
bottom: 0;
padding: 0.2rem;
align-items: center;
background-color: ${mode === 'light'
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1)};
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1)};
display: flex;
position: relative;
flex-direction: row;
gap: 0.375rem;
- border-radius: 0 0 ${theme.schemes.radius} ${theme.schemes.radius};
+ border-radius: 0 0 ${theme.radius} ${theme.radius};
`,
};
return styles;
};
-export const getFormatterStyles = ({ theme, colors }) => {
+export const getFormatterStyles = ({ theme }) => {
const styles = {
toolboxContainer: css`
display: flex;
@@ -80,11 +80,11 @@ export const getFormatterStyles = ({ theme, colors }) => {
toolbox: css`
display: flex;
- background-color: ${colors.background};
- box-shadow: 0 0 2px ${colors.foreground};
+ background-color: ${theme.colors.background};
+ box-shadow: 0 0 2px ${theme.colors.foreground};
gap: 0.25rem;
padding: 0.25rem;
- border-radius: ${theme.schemes.radius};
+ border-radius: ${theme.radius};
`,
};
diff --git a/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx b/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx
index 0f745e9da..8e071e23a 100644
--- a/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx
+++ b/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx
@@ -10,9 +10,8 @@ import members from '../../data/members.json';
import useLayoutStore from '../../store/layoutStore';
const ChatLayout = () => {
- const theme = useTheme();
+ const { theme } = useTheme();
const styles = getChatLayoutStyles(theme);
- const { colors } = theme;
const { setSidebarWidth } = useLayoutStore((state) => ({
setSidebarWidth: state.setSidebarWidth,
@@ -44,7 +43,7 @@ const ChatLayout = () => {
diff --git a/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js b/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js
index 6d5b481a1..d15c43ae4 100644
--- a/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js
+++ b/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js
@@ -1,6 +1,6 @@
import { css } from '@emotion/react';
-export const getChatLayoutStyles = ({ colors }) => {
+export const getChatLayoutStyles = () => {
const styles = {
layout: css`
height: 100%;
diff --git a/packages/layout_editor/src/views/GlobalStyles.jsx b/packages/layout_editor/src/views/GlobalStyles.jsx
index 2b6bd97e9..b6b0fda2b 100644
--- a/packages/layout_editor/src/views/GlobalStyles.jsx
+++ b/packages/layout_editor/src/views/GlobalStyles.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme, alpha } from '@embeddedchat/ui-elements';
-const useStyles = ({ colors, theme }) => css`
+const getGlobalStyles = ({ theme }) => css`
* {
box-sizing: border-box;
margin: 0;
@@ -16,7 +16,7 @@ const useStyles = ({ colors, theme }) => css`
}
a {
- color: ${colors.foreground};
+ color: ${theme.colors.foreground};
}
::-webkit-scrollbar {
@@ -25,12 +25,12 @@ const useStyles = ({ colors, theme }) => css`
}
::-webkit-scrollbar-thumb {
- background: ${alpha(colors.primary, 0.5)};
+ background: ${alpha(theme.colors.primary, 0.5)};
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
- background: ${colors.primary};
+ background: ${theme.colors.primary};
}
::-webkit-scrollbar-button {
@@ -39,7 +39,7 @@ const useStyles = ({ colors, theme }) => css`
`;
const GlobalStyles = () => {
- const styles = useStyles(useTheme());
+ const styles = getGlobalStyles(useTheme());
return ;
};
diff --git a/packages/layout_editor/src/views/LayoutEditor.jsx b/packages/layout_editor/src/views/LayoutEditor.jsx
index 106095f90..d8145cd72 100644
--- a/packages/layout_editor/src/views/LayoutEditor.jsx
+++ b/packages/layout_editor/src/views/LayoutEditor.jsx
@@ -9,7 +9,8 @@ import { getEditorStyles } from './LayoutEditor.style';
const LayoutEditor = () => {
const themeLabOpen = useLayoutStore((state) => state.themeLabOpen);
- const styles = getEditorStyles(useTheme());
+ const { theme } = useTheme();
+ const styles = getEditorStyles(theme);
return (
diff --git a/packages/layout_editor/src/views/LayoutEditor.style.js b/packages/layout_editor/src/views/LayoutEditor.style.js
index 61451c36b..c6afbd7e7 100644
--- a/packages/layout_editor/src/views/LayoutEditor.style.js
+++ b/packages/layout_editor/src/views/LayoutEditor.style.js
@@ -1,23 +1,23 @@
import { css } from '@emotion/react';
-export const getEditorStyles = ({ theme, colors }) => {
+export const getEditorStyles = (theme) => {
const styles = {
embeddedchat: css`
width: 75%;
position: relative;
- background: ${colors.background};
- color: ${colors.foreground};
+ background: ${theme.colors.background};
+ color: ${theme.colors.foreground};
display: flex;
flex: 1;
flex-direction: column;
- border: ${`1.5px solid ${theme.schemes.border}`};
- border-radius: ${theme.schemes.radius};
+ border: ${`1.5px solid ${theme.colors.border}`};
+ border-radius: ${theme.radius};
overflow: hidden;
`,
layoutEditor: css`
- background: ${colors.background};
- color: ${colors.foreground};
+ background: ${theme.colors.background};
+ color: ${theme.colors.foreground};
height: 100vh;
display: flex;
gap: 0.25rem;
diff --git a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js
index 0bc6c7ce0..ac7d387ac 100644
--- a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js
+++ b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js
@@ -1,7 +1,7 @@
import { css } from '@emotion/react';
import { alpha } from '@embeddedchat/ui-elements';
-export const bubbleStyles = ({ theme, colors }) => {
+export const bubbleStyles = ({ theme }) => {
const styles = {
name: 'bubble',
messageParent: css`
@@ -11,7 +11,7 @@ export const bubbleStyles = ({ theme, colors }) => {
align-items: flex-start;
padding: 0 2.25rem 0.25rem 2.25rem;
a {
- color: ${colors.primaryForeground};
+ color: ${theme.colors.primaryForeground};
}
`,
@@ -36,12 +36,11 @@ export const bubbleStyles = ({ theme, colors }) => {
width: fit-content;
max-width: 80%;
padding: 0.5rem 0.75rem;
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius}
- ${theme.schemes.radius} 0.2rem;
- background: ${colors.primary};
- color: ${colors.primaryForeground};
+ border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem;
+ background: ${theme.colors.primary};
+ color: ${theme.colors.primaryForeground};
&:hover {
- background: ${alpha(colors.primary, 0.8)};
+ background: ${alpha(theme.colors.primary, 0.8)};
}
`,
@@ -49,16 +48,14 @@ export const bubbleStyles = ({ theme, colors }) => {
position: relative;
width: fit-content;
max-width: 80%;
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius}
- ${theme.schemes.radius} 0.2rem;
+ border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem;
`,
sequential: css`
- border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius}
- 0.2rem;
+ border-radius: 0.2rem ${theme.radius} ${theme.radius} 0.2rem;
`,
lastSequential: css`
- border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius};
+ border-radius: 0.2rem ${theme.radius} ${theme.radius};
`,
metricsContainer: css`
@@ -67,8 +64,8 @@ export const bubbleStyles = ({ theme, colors }) => {
`,
threadReplyButton: css`
- background-color: ${colors.accent};
- color: ${colors.accentForeground};
+ background-color: ${theme.colors.accent};
+ color: ${theme.colors.accentForeground};
border-radius: 0.2rem;
`,
@@ -86,11 +83,11 @@ export const bubbleStyles = ({ theme, colors }) => {
`,
videoAttachmentContainer: css`
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: inherit;
`,
imageAttachmentContainer: css`
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: inherit;
overflow: hidden;
`,
@@ -99,12 +96,12 @@ export const bubbleStyles = ({ theme, colors }) => {
`,
quoteContainer: css`
- background-color: ${colors.background};
- color: ${colors.foreground};
+ background-color: ${theme.colors.background};
+ color: ${theme.colors.foreground};
flex: 1;
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
- border: 2px solid ${colors.border};
+ border: 2px solid ${theme.colors.border};
margin: 0.2rem -0.75rem -0.5rem;
`,
@@ -126,9 +123,7 @@ export const bubbleStyles = ({ theme, colors }) => {
return styles;
};
-export const bubbleStylesMe = (customTheme) => {
- const { theme, colors } = customTheme;
-
+export const bubbleStylesMe = ({ theme }) => {
const styles = {
messageParentMe: css`
flex-direction: row-reverse;
@@ -139,27 +134,23 @@ export const bubbleStylesMe = (customTheme) => {
`,
messageBodyMe: css`
- background: ${colors.secondary};
- color: ${colors.secondaryForeground};
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem
- ${theme.schemes.radius};
+ background: ${theme.colors.secondary};
+ color: ${theme.colors.secondaryForeground};
+ border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius};
&:hover {
- background: ${alpha(colors.secondary, 0.8)};
+ background: ${alpha(theme.colors.secondary, 0.8)};
}
`,
attachmentBodyMe: css`
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem
- ${theme.schemes.radius};
+ border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius};
`,
lastSequentialMe: css`
- border-radius: ${theme.schemes.radius} 0.2rem ${theme.schemes.radius}
- ${theme.schemes.radius};
+ border-radius: ${theme.radius} 0.2rem ${theme.radius} ${theme.radius};
`,
sequentialMe: css`
- border-radius: ${theme.schemes.radius} 0.2rem 0.2rem
- ${theme.schemes.radius};
+ border-radius: ${theme.radius} 0.2rem 0.2rem ${theme.radius};
`,
metricsContainerMe: css`
@@ -177,7 +168,7 @@ export const bubbleStylesMe = (customTheme) => {
pinnedContainerMe: css`
border-inline-start: none;
- border-inline-end: 3px solid ${colors.border};
+ border-inline-end: 3px solid ${theme.colors.border};
`,
textUserInfoMe: css`
diff --git a/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js b/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js
index fd966423e..cc8f301f3 100644
--- a/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js
+++ b/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js
@@ -3,7 +3,7 @@ import { format } from 'date-fns';
import { Button, Icon, useTheme } from '@embeddedchat/ui-elements';
const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => {
- const { colors } = useTheme();
+ const { theme } = useTheme();
return (
<>
@@ -11,7 +11,7 @@ const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => {
name="arc"
size="30"
fill="none"
- color={`${colors.accent}`}
+ color={`${theme.colors.accent}`}
css={styles.arcIcon}
/>
{
+export const getMessageStyles = ({ theme, mode }) => {
const styles = {
main: css`
display: flex;
@@ -11,18 +11,18 @@ export const getMessageStyles = ({ mode, colors }) => {
padding-bottom: 0.25rem;
padding-left: 2.25rem;
padding-right: 2.25rem;
- color: ${colors.foreground};
+ color: ${theme.colors.foreground};
&:hover {
- background-color: ${mode === "light"
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1)};
+ background-color: ${mode === 'light'
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1)};
}
`,
messageEditing: css`
- background-color: ${colors.secondary};
+ background-color: ${theme.colors.secondary};
&:hover {
- background-color: ${colors.secondary};
+ background-color: ${theme.colors.secondary};
}
`,
@@ -32,16 +32,16 @@ export const getMessageStyles = ({ mode, colors }) => {
`,
specialMessage: css`
- background-color: ${mode === "light"
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1)};
+ background-color: ${mode === 'light'
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1)};
`,
};
return styles;
};
-export const getMessageAvatarContainerStyles = ({ colors }) => {
+export const getMessageAvatarContainerStyles = ({ theme }) => {
const styles = {
container: css`
margin: 3px;
@@ -49,7 +49,7 @@ export const getMessageAvatarContainerStyles = ({ colors }) => {
max-height: 2.25em;
display: flex;
justify-content: flex-end;
- color: ${colors.primary};
+ color: ${theme.colors.primary};
`,
};
@@ -76,7 +76,7 @@ export const getMessageBodyStyles = () => {
return styles;
};
-export const getMessageDividerStyles = ({ theme, colors }) => {
+export const getMessageDividerStyles = ({ theme }) => {
const styles = {
divider: css`
letter-spacing: 0rem;
@@ -98,12 +98,12 @@ export const getMessageDividerStyles = ({ theme, colors }) => {
margin-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
- background-color: ${colors.secondary};
- color: ${colors.secondaryForeground};
+ background-color: ${theme.colors.secondary};
+ color: ${theme.colors.secondaryForeground};
position: absolute;
left: 50%;
transform: translateX(-50%);
- border-radius: ${theme.schemes.radius};
+ border-radius: ${theme.radius};
`,
bar: css`
@@ -112,14 +112,14 @@ export const getMessageDividerStyles = ({ theme, colors }) => {
align-items: center;
flex-grow: 1;
height: 1px;
- background-color: ${colors.secondary};
+ background-color: ${theme.colors.secondary};
`,
};
return styles;
};
-export const getMessageHeaderStyles = ({ theme, colors }) => {
+export const getMessageHeaderStyles = ({ theme }) => {
const styles = {
header: css`
display: flex;
@@ -145,7 +145,7 @@ export const getMessageHeaderStyles = ({ theme, colors }) => {
`,
userName: css`
- color: ${colors.accentForeground};
+ color: ${theme.colors.accentForeground};
font-weight: 700;
letter-spacing: 0rem;
font-size: 0.875rem;
@@ -161,17 +161,17 @@ export const getMessageHeaderStyles = ({ theme, colors }) => {
font-size: 0.75rem;
padding: 0 0.25rem;
margin: 0 0.1rem;
- border-radius: ${theme.schemes.radius};
+ border-radius: ${theme.radius};
font-weight: 700;
line-height: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- background-color: ${colors.secondary};
+ background-color: ${theme.colors.secondary};
`,
userActions: css`
- color: ${colors.accentForeground};
+ color: ${theme.colors.accentForeground};
letter-spacing: 0rem;
font-size: 0.875rem;
line-height: 1.25rem;
@@ -182,7 +182,7 @@ export const getMessageHeaderStyles = ({ theme, colors }) => {
`,
timestamp: css`
- color: ${colors.accentForeground};
+ color: ${theme.colors.accentForeground};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -214,7 +214,7 @@ export const getMessageMetricsStyles = {
display: flex;
justify-content: center;
align-items: center;
- margin-left: ${isFirstMessage ? "0.5rem" : "0.25rem"};
+ margin-left: ${isFirstMessage ? '0.5rem' : '0.25rem'};
`,
metricsItemLabel: css`
@@ -224,7 +224,7 @@ export const getMessageMetricsStyles = {
`,
};
-export const getMessageReactionsStyles = ({ colors }) => {
+export const getMessageReactionsStyles = ({ theme }) => {
const styles = {
container: css`
display: flex;
@@ -249,19 +249,19 @@ export const getMessageReactionsStyles = ({ colors }) => {
p {
margin: 0;
}
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: 0.2rem;
`,
reactionMine: css`
- background: ${colors.secondary};
+ background: ${theme.colors.secondary};
`,
};
return styles;
};
-export const getMessageToolboxStyles = ({ theme, colors }) => {
+export const getMessageToolboxStyles = ({ theme }) => {
const styles = {
toolboxContainer: css`
display: flex;
@@ -276,11 +276,11 @@ export const getMessageToolboxStyles = ({ theme, colors }) => {
margin-left: -0.25rem;
margin-right: -0.25rem;
margin-top: 0.125rem;
- background-color: ${colors.background};
- box-shadow: 0 0 2px ${colors.foreground};
+ background-color: ${theme.colors.background};
+ box-shadow: 0 0 2px ${theme.colors.foreground};
gap: 0.25rem;
padding: 0.25rem;
- border-radius: ${theme.schemes.radius};
+ border-radius: ${theme.radius};
`,
emojiPickerStyles: css`
diff --git a/packages/layout_editor/src/views/Message/MessageHeader.jsx b/packages/layout_editor/src/views/Message/MessageHeader.jsx
index 5fdbad0ec..ade2ceffd 100644
--- a/packages/layout_editor/src/views/Message/MessageHeader.jsx
+++ b/packages/layout_editor/src/views/Message/MessageHeader.jsx
@@ -15,7 +15,7 @@ const MessageHeader = ({ message, variantOverrides = 'normal' }) => {
const displayName = useLayoutStore((state) => state.displayName);
const displayNameVariant = displayName || variantOverrides;
const styles = getMessageHeaderStyles(useTheme());
- const { colors } = useTheme();
+ const { theme } = useTheme();
const getDisplayNameColor = useDisplayNameColor();
return (
@@ -48,7 +48,7 @@ const MessageHeader = ({ message, variantOverrides = 'normal' }) => {
style={{ marginInlineEnd: '0.4rem', opacity: 0.5 }}
name="edit"
size="1em"
- color={colors.primary}
+ color={theme.colors.primary}
/>
)}
diff --git a/packages/layout_editor/src/views/ThemeLab/ThemeLab.styles.js b/packages/layout_editor/src/views/ThemeLab/ThemeLab.styles.js
index adb4986a7..0d7d401a9 100644
--- a/packages/layout_editor/src/views/ThemeLab/ThemeLab.styles.js
+++ b/packages/layout_editor/src/views/ThemeLab/ThemeLab.styles.js
@@ -1,6 +1,6 @@
import { css } from '@emotion/react';
-export const getThemeLabStyles = ({ colors }) => {
+export const getThemeLabStyles = ({ theme }) => {
const styles = {
sectionContainer: css`
display: flex;
@@ -12,12 +12,12 @@ export const getThemeLabStyles = ({ colors }) => {
cursor: pointer;
`,
sectionActive: css`
- border-bottom: 1px solid ${colors.primary};
+ border-bottom: 1px solid ${theme.colors.primary};
`,
btn: css`
border-radius: 0.25rem;
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
margin: 0 0.75rem 0.75rem;
`,
@@ -39,7 +39,7 @@ export const getThemeLabStyles = ({ colors }) => {
return styles;
};
-export const getPaletteSettings = ({ colors }) => {
+export const getPaletteSettings = ({ theme }) => {
const styles = {
main: css`
display: flex;
@@ -50,12 +50,12 @@ export const getPaletteSettings = ({ colors }) => {
colorSection: css`
padding: 0.5rem;
border-radius: 0.25rem;
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
`,
typographySection: css`
padding: 0.5rem;
border-radius: 0.25rem;
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
`,
commonSelect: css`
@@ -76,7 +76,7 @@ export const getPaletteSettings = ({ colors }) => {
return styles;
};
-export const getLayoutSettings = ({ colors }) => {
+export const getLayoutSettings = ({ theme }) => {
const styles = {
main: css`
display: flex;
@@ -86,13 +86,13 @@ export const getLayoutSettings = ({ colors }) => {
`,
variantSection: css`
padding: 0.5rem;
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: 0.25rem;
`,
toolSection: css`
padding: 0.5rem;
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: 0.25rem;
`,
diff --git a/packages/markups/src/elements/elements.styles.js b/packages/markups/src/elements/elements.styles.js
index 2412b0f9d..aa44d77dd 100644
--- a/packages/markups/src/elements/elements.styles.js
+++ b/packages/markups/src/elements/elements.styles.js
@@ -59,25 +59,27 @@ export const EmojiStyles = {
};
const useMentionStyles = (contents, username) => {
- const { colors } = useTheme();
- const mention = css`
- background-color: ${contents.value === 'all' || contents.value === 'here'
- ? colors.warning
- : contents.value === username
- ? colors.destructive
- : colors.muted};
- color: ${contents.value === 'all' || contents.value === 'here'
- ? colors.warningForeground
- : contents.value === username
- ? colors.destructiveForeground
- : colors.mutedForeground};
- font-weight: bold;
- cursor: pointer;
- padding: 1.5px;
- border-radius: 3px;
- `;
+ const { theme } = useTheme();
+ const styles = {
+ mention: css`
+ background-color: ${contents.value === 'all' || contents.value === 'here'
+ ? theme.colors.warning
+ : contents.value === username
+ ? theme.colors.destructive
+ : theme.colors.muted};
+ color: ${contents.value === 'all' || contents.value === 'here'
+ ? theme.colors.warningForeground
+ : contents.value === username
+ ? theme.colors.destructiveForeground
+ : theme.colors.mutedForeground};
+ font-weight: bold;
+ cursor: pointer;
+ padding: 1.5px;
+ border-radius: 3px;
+ `,
+ };
- return { mention };
+ return styles;
};
export default useMentionStyles;
diff --git a/packages/rc-app/app.json b/packages/rc-app/app.json
index d3f514699..16a4f0a69 100644
--- a/packages/rc-app/app.json
+++ b/packages/rc-app/app.json
@@ -4,14 +4,14 @@
"requiredApiVersion": "^1.36.0",
"iconFile": "icon.png",
"author": {
- "name": "abhinavkrin",
- "homepage": "https://github.com/abhinavkrin",
+ "name": "ec innovators",
+ "homepage": "https://github.com/RocketChat/EmbeddedChat/graphs/contributors",
"support": "https://github.com/RocketChat/EmbeddedChat"
},
"name": "EmbeddedChat",
"nameSlug": "embeddedchat",
"classFile": "EmbeddedChatApp.ts",
- "description": "Configure RocketChat for EmbeddedChat",
+ "description": "Easily manage EmbeddedChat configs and OAuth with Rocket.Chat.",
"implements": [],
"permissions": [
{
diff --git a/packages/react/README.md b/packages/react/README.md
index 5478d4bf3..ce870a425 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -132,7 +132,7 @@ This section of the guide aims to provide a detailed explanation of these props.
/>
```
- However, the `theme` object must follow a specific format. For detailed information on theming EmbeddedChat, refer to [theming.md](../docs/theming.md).
+ However, the `theme` object must follow a specific format. For detailed information on theming EmbeddedChat, refer to [theming.md](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming).
In Storybook, demonstrations of different themes and variants are provided in the 'Design Variants' section.
@@ -151,11 +151,11 @@ This section of the guide aims to provide a detailed explanation of these props.
1. **Local Storage**: Store the `ec-token` in the browser's local storage.
2. **HTTP-Only Cookie**: Store the `ec-token` as an HTTP-only cookie. [This method requires the installation of the EmbeddedChat RC App on the Rocket.Chat server]
- For a detailed guide on using each of these authentication methods with the `auth` and `secure` props, refer to the [authentication.md](../docs/authentication.md) file.
+ For a detailed guide on using each of these authentication methods with the `auth` and `secure` props, refer to the [authentication guide](../docs/authentication.md) file.
## Development
-Follow this [EmbeddedChat Readme](https://github.com/RocketChat/EmbeddedChat) to setup EmbeddedChat for development.
+Follow this [development guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/dev_launch) to setup EmbeddedChat for development.
## Conclusion
diff --git a/packages/react/src/hooks/useDisplayNameColor.js b/packages/react/src/hooks/useDisplayNameColor.js
index 5e9c32c07..89880c434 100644
--- a/packages/react/src/hooks/useDisplayNameColor.js
+++ b/packages/react/src/hooks/useDisplayNameColor.js
@@ -16,7 +16,7 @@ const useDisplayNameColor = () => {
const getDisplayNameColor = (username) => {
const hash = simpleHash(username);
- const { saturation, luminance } = theme.schemes.contrastParams[mode];
+ const { saturation, luminance } = theme.contrastParams[mode];
const hue = Math.abs(hash) % 360;
return `hsl(${hue}, ${saturation}%, ${luminance}%)`;
};
diff --git a/packages/react/src/stories/CurveVariantStories/Colorful.stories.js b/packages/react/src/stories/CurveVariantStories/Colorful.stories.js
index 44c1bb315..1a0e9e09d 100644
--- a/packages/react/src/stories/CurveVariantStories/Colorful.stories.js
+++ b/packages/react/src/stories/CurveVariantStories/Colorful.stories.js
@@ -10,7 +10,7 @@ export default {
export const Aqua_Breeze = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/CurveVariantStories/Simplistic.stories.js b/packages/react/src/stories/CurveVariantStories/Simplistic.stories.js
index 01b47a55b..41c3c9630 100644
--- a/packages/react/src/stories/CurveVariantStories/Simplistic.stories.js
+++ b/packages/react/src/stories/CurveVariantStories/Simplistic.stories.js
@@ -12,7 +12,7 @@ export default {
export const Pine_Whisper = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/EmbeddedChat.stories.js b/packages/react/src/stories/EmbeddedChat.stories.js
index a06ada31e..9983a5da9 100644
--- a/packages/react/src/stories/EmbeddedChat.stories.js
+++ b/packages/react/src/stories/EmbeddedChat.stories.js
@@ -10,9 +10,9 @@ export default {
export const Simple = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
- anonymousMode: true,
+ anonymousMode: false,
headerColor: 'white',
toastBarPosition: 'bottom right',
showRoles: true,
diff --git a/packages/react/src/stories/EmbeddedChatAuthToken.stories.js b/packages/react/src/stories/EmbeddedChatAuthToken.stories.js
index d30cf45c4..5c2ad9ce2 100644
--- a/packages/react/src/stories/EmbeddedChatAuthToken.stories.js
+++ b/packages/react/src/stories/EmbeddedChatAuthToken.stories.js
@@ -10,7 +10,7 @@ export default {
export const WithAuthToken = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/EmbeddedChatSecureAuth.stories.js b/packages/react/src/stories/EmbeddedChatSecureAuth.stories.js
index e06554d67..7bf422688 100644
--- a/packages/react/src/stories/EmbeddedChatSecureAuth.stories.js
+++ b/packages/react/src/stories/EmbeddedChatSecureAuth.stories.js
@@ -10,7 +10,7 @@ export default {
export const Secure_Auth = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/EmbeddedChatWithOAuth.stories.js b/packages/react/src/stories/EmbeddedChatWithOAuth.stories.js
index ed7e716c0..9cfd1c4fc 100644
--- a/packages/react/src/stories/EmbeddedChatWithOAuth.stories.js
+++ b/packages/react/src/stories/EmbeddedChatWithOAuth.stories.js
@@ -10,7 +10,7 @@ export default {
export const WithOAuth = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/EmbeddedChatWithRemote.stories.js b/packages/react/src/stories/EmbeddedChatWithRemote.stories.js
index 67542def5..564ccad06 100644
--- a/packages/react/src/stories/EmbeddedChatWithRemote.stories.js
+++ b/packages/react/src/stories/EmbeddedChatWithRemote.stories.js
@@ -11,7 +11,7 @@ export default {
export const With_Remote_Opt = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/ModernVariantStories/Simplistic.stories.js b/packages/react/src/stories/ModernVariantStories/Simplistic.stories.js
index 56c6ebb2e..ae62cf985 100644
--- a/packages/react/src/stories/ModernVariantStories/Simplistic.stories.js
+++ b/packages/react/src/stories/ModernVariantStories/Simplistic.stories.js
@@ -11,7 +11,7 @@ export default {
export const Stormy_Seas = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/RCVariantStories/Colorful.stories.js b/packages/react/src/stories/RCVariantStories/Colorful.stories.js
index 651ea64eb..f8cab1499 100644
--- a/packages/react/src/stories/RCVariantStories/Colorful.stories.js
+++ b/packages/react/src/stories/RCVariantStories/Colorful.stories.js
@@ -11,7 +11,7 @@ export const Mint_Meadow = {
title: 'Colorful/MintMeadow',
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/stories/RCVariantStories/Simplistic.stories.js b/packages/react/src/stories/RCVariantStories/Simplistic.stories.js
index f691faf70..338e9e79b 100644
--- a/packages/react/src/stories/RCVariantStories/Simplistic.stories.js
+++ b/packages/react/src/stories/RCVariantStories/Simplistic.stories.js
@@ -13,7 +13,7 @@ export default {
export const Default = {
args: {
host: process.env.STORYBOOK_RC_HOST || 'http://localhost:3000',
- roomId: 'GENERAL',
+ roomId: process.env.RC_ROOM_ID || 'GENERAL',
channelName: 'general',
anonymousMode: true,
headerColor: 'white',
diff --git a/packages/react/src/theme/AzureSky.js b/packages/react/src/theme/AzureSky.js
index f0bee5f73..d60cbc7bd 100644
--- a/packages/react/src/theme/AzureSky.js
+++ b/packages/react/src/theme/AzureSky.js
@@ -1,10 +1,10 @@
const AzureSky = {
+ radius: '0.2rem',
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
+ },
schemes: {
- radius: '0.2rem',
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(0, 0%, 100%)',
foreground: 'hsl(222.2, 84%, 4.9%)',
@@ -60,14 +60,6 @@ const AzureSky = {
infoForeground: 'hsl(214.4, 75.8%, 19.4%)',
},
},
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
- },
- components: {},
typography: {
default: {
diff --git a/packages/react/src/theme/CurveVariant/AquaBreeze.js b/packages/react/src/theme/CurveVariant/AquaBreeze.js
index 63f6c4cf5..96b8007ef 100644
--- a/packages/react/src/theme/CurveVariant/AquaBreeze.js
+++ b/packages/react/src/theme/CurveVariant/AquaBreeze.js
@@ -1,4 +1,9 @@
const AquaBreeze = {
+ radius: '1.5rem',
+ commonColors: {
+ black: 'hsl(0, 0%, 0%)',
+ white: 'hsl(0, 0%, 100%)',
+ },
schemes: {
light: {
background: 'hsl(192, 52%, 96%)',
@@ -54,34 +59,8 @@ const AquaBreeze = {
info: 'hsl(214.3, 77.8%, 92.9%)',
infoForeground: 'hsl(214.4, 75.8%, 19.4%)',
},
- common: {
- black: 'hsl(0, 0%, 0%)',
- white: 'hsl(0, 0%, 100%)',
- },
- radius: '1.5rem',
},
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
- },
- variants: {
- Message: 'bubble',
- },
-
- components: {
- MessageToolbox: {
- configOverrides: {
- optionConfig: {
- surfaceItems: ['reaction', 'reply', 'quote', 'star'],
- menuItems: ['pin', 'edit', 'delete', 'report'],
- },
- },
- },
- },
typography: {
default: {
fontFamily: "'Times New Roman', serif",
@@ -116,10 +95,26 @@ const AquaBreeze = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
],
+
+ variants: {
+ Message: 'bubble',
+ },
+
+ components: {
+ MessageToolbox: {
+ configOverrides: {
+ optionConfig: {
+ surfaceItems: ['reaction', 'reply', 'quote', 'star'],
+ menuItems: ['pin', 'edit', 'delete', 'report'],
+ },
+ },
+ },
+ },
};
export default AquaBreeze;
diff --git a/packages/react/src/theme/CurveVariant/AzureSky.js b/packages/react/src/theme/CurveVariant/AzureSky.js
index 618e8a353..5e6fe1626 100644
--- a/packages/react/src/theme/CurveVariant/AzureSky.js
+++ b/packages/react/src/theme/CurveVariant/AzureSky.js
@@ -1,10 +1,12 @@
const AzureSky = {
+ radius: '1.5rem',
+
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
+ },
+
schemes: {
- radius: '1.5rem',
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(0, 0%, 100%)',
foreground: 'hsl(222.2, 84%, 4.9%)',
@@ -60,27 +62,6 @@ const AzureSky = {
infoForeground: 'hsl(214.4, 75.8%, 19.4%)',
},
},
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
- },
- variants: {
- Message: 'bubble',
- },
-
- components: {
- MessageToolbox: {
- configOverrides: {
- optionConfig: {
- surfaceItems: ['reaction', 'reply', 'quote', 'star'],
- menuItems: ['pin', 'edit', 'delete', 'report'],
- },
- },
- },
- },
typography: {
default: {
@@ -116,10 +97,26 @@ const AzureSky = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
],
+
+ variants: {
+ Message: 'bubble',
+ },
+
+ components: {
+ MessageToolbox: {
+ configOverrides: {
+ optionConfig: {
+ surfaceItems: ['reaction', 'reply', 'quote', 'star'],
+ menuItems: ['pin', 'edit', 'delete', 'report'],
+ },
+ },
+ },
+ },
};
export default AzureSky;
diff --git a/packages/react/src/theme/CurveVariant/BlushCandy.js b/packages/react/src/theme/CurveVariant/BlushCandy.js
index a10e03762..61c1eaeb9 100644
--- a/packages/react/src/theme/CurveVariant/BlushCandy.js
+++ b/packages/react/src/theme/CurveVariant/BlushCandy.js
@@ -1,4 +1,9 @@
const BlushCandy = {
+ radius: '1.5rem',
+ commonColors: {
+ black: 'hsl(0, 0%, 0%)',
+ white: 'hsl(0, 0%, 100%)',
+ },
schemes: {
light: {
background: 'hsl(313, 52%, 96%)',
@@ -54,32 +59,6 @@ const BlushCandy = {
info: 'hsl(214.3, 77.8%, 92.9%)',
infoForeground: 'hsl(214.4, 75.8%, 19.4%)',
},
- common: {
- black: 'hsl(0, 0%, 0%)',
- white: 'hsl(0, 0%, 100%)',
- },
- radius: '1.5rem',
- },
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
- },
- variants: {
- Message: 'bubble',
- },
-
- components: {
- MessageToolbox: {
- configOverrides: {
- optionConfig: {
- surfaceItems: ['reaction', 'reply', 'quote', 'star'],
- menuItems: ['pin', 'edit', 'delete', 'report'],
- },
- },
- },
},
typography: {
@@ -116,10 +95,26 @@ const BlushCandy = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
],
+
+ variants: {
+ Message: 'bubble',
+ },
+
+ components: {
+ MessageToolbox: {
+ configOverrides: {
+ optionConfig: {
+ surfaceItems: ['reaction', 'reply', 'quote', 'star'],
+ menuItems: ['pin', 'edit', 'delete', 'report'],
+ },
+ },
+ },
+ },
};
export default BlushCandy;
diff --git a/packages/react/src/theme/CurveVariant/PineWhisper.js b/packages/react/src/theme/CurveVariant/PineWhisper.js
index 5a6fc0a4b..885f9a647 100644
--- a/packages/react/src/theme/CurveVariant/PineWhisper.js
+++ b/packages/react/src/theme/CurveVariant/PineWhisper.js
@@ -1,4 +1,9 @@
const PineWhisper = {
+ radius: '1.5rem',
+ commonColors: {
+ black: 'hsl(0, 0%, 0%)',
+ white: 'hsl(0, 0%, 100%)',
+ },
schemes: {
light: {
background: 'hsl(0, 0%, 100%)',
@@ -54,33 +59,6 @@ const PineWhisper = {
info: 'hsl(214.3, 77.8%, 92.9%)',
infoForeground: 'hsl(214.4, 75.8%, 19.4%)',
},
- common: {
- black: 'hsl(0, 0%, 0%)',
- white: 'hsl(0, 0%, 100%)',
- },
- radius: '1.5rem',
- },
-
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
- },
- variants: {
- Message: 'bubble',
- },
-
- components: {
- MessageToolbox: {
- configOverrides: {
- optionConfig: {
- surfaceItems: ['reaction', 'reply', 'quote', 'star'],
- menuItems: ['pin', 'edit', 'delete', 'report'],
- },
- },
- },
},
typography: {
@@ -117,10 +95,26 @@ const PineWhisper = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
],
+
+ variants: {
+ Message: 'bubble',
+ },
+
+ components: {
+ MessageToolbox: {
+ configOverrides: {
+ optionConfig: {
+ surfaceItems: ['reaction', 'reply', 'quote', 'star'],
+ menuItems: ['pin', 'edit', 'delete', 'report'],
+ },
+ },
+ },
+ },
};
export default PineWhisper;
diff --git a/packages/react/src/theme/DefaultTheme.js b/packages/react/src/theme/DefaultTheme.js
index 6c3eeca9e..0a2fe776c 100644
--- a/packages/react/src/theme/DefaultTheme.js
+++ b/packages/react/src/theme/DefaultTheme.js
@@ -1,10 +1,10 @@
const DefaultTheme = {
+ radius: '0.2rem',
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
+ },
schemes: {
- radius: '0.2rem',
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(0, 0%, 100%)',
foreground: 'hsl(240, 10%, 3.9%)',
@@ -61,15 +61,6 @@ const DefaultTheme = {
},
},
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
- },
- components: {},
-
typography: {
default: {
fontFamily: "'Times New Roman', serif",
@@ -101,6 +92,7 @@ const DefaultTheme = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
diff --git a/packages/react/src/theme/MintMeadow.js b/packages/react/src/theme/MintMeadow.js
index 4146c9c09..d0b97983e 100644
--- a/packages/react/src/theme/MintMeadow.js
+++ b/packages/react/src/theme/MintMeadow.js
@@ -1,19 +1,12 @@
const MintMeadow = {
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
+ radius: '0.2rem',
+
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
},
- components: {},
schemes: {
- radius: '0.2rem',
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(98, 28%, 95%)',
foreground: 'hsl(98, 5%, 8%)',
@@ -104,6 +97,7 @@ const MintMeadow = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
diff --git a/packages/react/src/theme/ModernVariant/StormySeas.js b/packages/react/src/theme/ModernVariant/StormySeas.js
index 67e1d864c..d59456cc6 100644
--- a/packages/react/src/theme/ModernVariant/StormySeas.js
+++ b/packages/react/src/theme/ModernVariant/StormySeas.js
@@ -1,20 +1,12 @@
const StormySeas = {
+ radius: '0.2rem',
+
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
+ },
+
schemes: {
- radius: '0.2rem',
- contrastParams: {
- light: {
- saturation: 70,
- luminance: 19,
- },
- dark: {
- saturation: 88,
- luminance: 77,
- },
- },
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(0, 0%, 100%)',
foreground: 'hsl(222.2, 84%, 4.9%)',
@@ -71,51 +63,14 @@ const StormySeas = {
},
},
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
- },
-
- variants: {
- MessageHeader: 'colorize',
- PinnedMessages: {
- viewType: 'Popup',
- },
- ThreadedMessages: {
- viewType: 'Popup',
- },
-
- MentionedMessages: {
- viewType: 'Popup',
- },
- StarredMessages: {
- viewType: 'Popup',
- },
-
- FileGallery: {
- viewType: 'Popup',
+ contrastParams: {
+ light: {
+ saturation: 70,
+ luminance: 19,
},
- },
-
- components: {
- ChatHeader: {
- configOverrides: {
- optionConfig: {
- surfaceItems: [
- 'minmax',
- 'close',
- 'thread',
- 'mentions',
- 'starred',
- 'pinned',
- 'files',
- ],
- menuItems: ['members', 'search', 'rInfo', 'logout'],
- },
- },
+ dark: {
+ saturation: 88,
+ luminance: 77,
},
},
@@ -153,10 +108,51 @@ const StormySeas = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
],
+
+ variants: {
+ MessageHeader: 'colorize',
+ PinnedMessages: {
+ viewType: 'Popup',
+ },
+ ThreadedMessages: {
+ viewType: 'Popup',
+ },
+
+ MentionedMessages: {
+ viewType: 'Popup',
+ },
+ StarredMessages: {
+ viewType: 'Popup',
+ },
+
+ FileGallery: {
+ viewType: 'Popup',
+ },
+ },
+
+ components: {
+ ChatHeader: {
+ configOverrides: {
+ optionConfig: {
+ surfaceItems: [
+ 'minmax',
+ 'close',
+ 'thread',
+ 'mentions',
+ 'starred',
+ 'pinned',
+ 'files',
+ ],
+ menuItems: ['members', 'search', 'rInfo', 'logout'],
+ },
+ },
+ },
+ },
};
export default StormySeas;
diff --git a/packages/react/src/theme/RoseEmber.js b/packages/react/src/theme/RoseEmber.js
index 69ced5bc4..197682c17 100644
--- a/packages/react/src/theme/RoseEmber.js
+++ b/packages/react/src/theme/RoseEmber.js
@@ -1,19 +1,12 @@
const RoseEmber = {
- breakpoints: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1536,
+ radius: '0.2rem',
+
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
},
- components: {},
schemes: {
- radius: '0.2rem',
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(343.4, 63%, 95%)',
foreground: 'hsl(343.4, 5%, 10%)',
@@ -104,6 +97,7 @@ const RoseEmber = {
fontWeight: 500,
},
},
+
shadows: [
'none',
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index 7d9708ee8..ac631dfa0 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -17,7 +17,7 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
attachmentText = attachmentText.split(')')[1] || '';
}
- const { colors } = useTheme();
+ const { theme } = useTheme();
return (
{
font-size: 0.875rem;
font-weight: 400;
word-break: break-word;
- border-inline-start: 3px solid ${colors.border};
+ border-inline-start: 3px solid ${theme.colors.border};
margin-top: 0.75rem;
padding: 0.5rem;
`,
(type ? variantStyles.pinnedContainer : variantStyles.quoteContainer) ||
css`
- ${!type ? `border: 3px solid ${colors.border};` : ''}
+ ${!type ? `border: 3px solid ${theme.colors.border};` : ''}
`,
]}
>
diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
index 97fa10bce..236c3ec1b 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
@@ -5,11 +5,11 @@ import useAttachmentWindowStore from '../../store/attachmentwindow';
import CheckPreviewType from './CheckPreviewType';
import RCContext from '../../context/RCInstance';
import { useMessageStore } from '../../store';
-import useAttachmentPreviewStyles from './AttachmentPreview.styles';
+import getAttachmentPreviewStyles from './AttachmentPreview.styles';
const AttachmentPreview = () => {
const { RCInstance, ECOptions } = useContext(RCContext);
- const styles = useAttachmentPreviewStyles();
+ const styles = getAttachmentPreviewStyles();
const toggle = useAttachmentWindowStore((state) => state.toggle);
const data = useAttachmentWindowStore((state) => state.data);
diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
index c19eb7790..44729be84 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
@@ -1,25 +1,27 @@
import { css } from '@emotion/react';
-const useAttachmentPreviewStyles = () => {
- const inputContainer = css`
- display: flex;
- flex-direction: column;
- justify-content: start;
- align-items: start;
- margin: 20px 0 0 0 !important;
- `;
+const getAttachmentPreviewStyles = () => {
+ const styles = {
+ inputContainer: css`
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: start;
+ margin: 20px 0 0 0 !important;
+ `,
- const input = css`
- width: 95.5%;
- `;
+ input: css`
+ width: 95.5%;
+ `,
- const modalContent = css`
- overflow-y: auto;
- overflow-x: hidden;
- max-height: 350px;
- `;
+ modalContent: css`
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 350px;
+ `,
+ };
- return { inputContainer, input, modalContent };
+ return styles;
};
-export default useAttachmentPreviewStyles;
+export default getAttachmentPreviewStyles;
diff --git a/packages/react/src/views/AttachmentPreview/PreviewType/image.js b/packages/react/src/views/AttachmentPreview/PreviewType/image.js
index 7f27dc0e4..5c2d3b4d8 100644
--- a/packages/react/src/views/AttachmentPreview/PreviewType/image.js
+++ b/packages/react/src/views/AttachmentPreview/PreviewType/image.js
@@ -11,7 +11,7 @@ function PreviewImage({ previewURL }) {
style={{
maxWidth: '90%',
objectFit: 'contain',
- borderRadius: theme.schemes.radius,
+ borderRadius: theme.radius,
}}
/>
diff --git a/packages/react/src/views/ChannelState/ChannelState.js b/packages/react/src/views/ChannelState/ChannelState.js
index 75176848f..f5262d3ed 100644
--- a/packages/react/src/views/ChannelState/ChannelState.js
+++ b/packages/react/src/views/ChannelState/ChannelState.js
@@ -1,5 +1,10 @@
import React from 'react';
-import { Box, Icon, useComponentOverrides } from '@embeddedchat/ui-elements';
+import {
+ Box,
+ Icon,
+ useComponentOverrides,
+ useTheme,
+} from '@embeddedchat/ui-elements';
import useChannelStateStyles from './ChannelState.styles';
const ChannelState = ({
@@ -10,7 +15,8 @@ const ChannelState = ({
instructions,
}) => {
const { classNames, styleOverrides } = useComponentOverrides('ChannelState');
- const styles = useChannelStateStyles();
+ const { theme } = useTheme();
+ const styles = useChannelStateStyles(theme);
return (
{
- const { theme, colors } = useTheme();
- const channelStateContainer = css`
- font-size: 0.75rem;
- padding: 0.2rem 2rem;
- z-index: 1200;
- display: flex;
- justify-content: space-between;
- `;
+const getChannelStateStyles = (theme) => {
+ const styles = {
+ channelStateContainer: css`
+ font-size: 0.75rem;
+ padding: 0.2rem 2rem;
+ z-index: 1200;
+ display: flex;
+ justify-content: space-between;
+ `,
- const channelStateMessage = css`
- background-color: ${colors.secondary};
- display: flex;
- gap: 0.1rem;
- padding: 1.5px 5px;
- justify-content: center;
- align-items: center;
- border-radius: ${theme.schemes.radius};
- color: ${colors.secondaryForeground};
- `;
+ channelStateMessage: css`
+ background-color: ${theme.secondary};
+ display: flex;
+ gap: 0.1rem;
+ padding: 1.5px 5px;
+ justify-content: center;
+ align-items: center;
+ border-radius: ${theme.radius};
+ color: ${theme.secondaryForeground};
+ `,
+ };
- return { channelStateContainer, channelStateMessage };
+ return styles;
};
-export default useChannelStateStyles;
+export default getChannelStateStyles;
diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
index 4b9685c35..e5a6bd1a3 100644
--- a/packages/react/src/views/ChatBody/ChatBody.js
+++ b/packages/react/src/views/ChatBody/ChatBody.js
@@ -21,7 +21,7 @@ import LoginForm from '../LoginForm/LoginForm';
import ThreadMessageList from '../Thread/ThreadMessageList';
import RecentMessageButton from './RecentMessageButton';
import useFetchChatData from '../../hooks/useFetchChatData';
-import { useChatbodyStyles } from './ChatBody.styles';
+import { getChatbodyStyles } from './ChatBody.styles';
import UiKitModal from '../ModalBlock/uiKit/UiKitModal';
import useUiKitStore from '../../store/uiKitStore';
import useUiKitActionManager from '../../hooks/uiKit/useUiKitActionManager';
@@ -34,7 +34,7 @@ const ChatBody = ({
}) => {
const { classNames, styleOverrides } = useComponentOverrides('ChatBody');
- const styles = useChatbodyStyles();
+ const styles = getChatbodyStyles();
const [scrollPosition, setScrollPosition] = useState(0);
const [popupVisible, setPopupVisible] = useState(false);
const [, setIsUserScrolledUp] = useState(false);
diff --git a/packages/react/src/views/ChatBody/ChatBody.styles.js b/packages/react/src/views/ChatBody/ChatBody.styles.js
index cc8510da4..36fc549b5 100644
--- a/packages/react/src/views/ChatBody/ChatBody.styles.js
+++ b/packages/react/src/views/ChatBody/ChatBody.styles.js
@@ -1,72 +1,75 @@
import { css } from '@emotion/react';
-import { useTheme } from '@embeddedchat/ui-elements';
-export const useChatbodyStyles = () => {
- const chatbodyContainer = css`
- flex: 1;
- word-break: break-all;
- overflow: auto;
- overflow-x: hidden;
- display: flex;
- flex-direction: column-reverse;
- max-height: 600px;
- position: relative;
- padding-top: 70px;
- margin-top: 0.25rem;
- `;
+export const getChatbodyStyles = () => {
+ const styles = {
+ chatbodyContainer: css`
+ flex: 1;
+ word-break: break-all;
+ overflow: auto;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column-reverse;
+ max-height: 600px;
+ position: relative;
+ padding-top: 70px;
+ margin-top: 0.25rem;
+ `,
+ };
- return { chatbodyContainer };
+ return styles;
};
-export const useRecentMessageStyles = () => {
- const button = css`
- position: relative;
- z-index: 1100;
- left: 50%;
- transform: translateX(-50%);
- user-select: none;
- opacity: 0;
- overflow: visible;
- animation: fadeInAndMoveUp 1s ease-in-out forwards;
- cursor: pointer;
+export const getRecentMessageStyles = () => {
+ const styles = {
+ button: css`
+ position: relative;
+ z-index: 1100;
+ left: 50%;
+ transform: translateX(-50%);
+ user-select: none;
+ opacity: 0;
+ overflow: visible;
+ animation: fadeInAndMoveUp 1s ease-in-out forwards;
+ cursor: pointer;
- &.not {
- visibility: hidden;
- }
-
- &.clicked {
- animation: fadeOutAndMoveUp 1s ease-in-out forwards;
- }
-
- @keyframes fadeInAndMoveUp {
- from {
- opacity: 0;
- transform: translateY(20px) translateX(-50%);
+ &.not {
+ visibility: hidden;
}
- to {
- opacity: 1;
- transform: translateY(0) translateX(-50%);
+
+ &.clicked {
+ animation: fadeOutAndMoveUp 1s ease-in-out forwards;
}
- }
- @keyframes fadeOutAndMoveUp {
- 50% {
- opacity: 1;
+ @keyframes fadeInAndMoveUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px) translateX(-50%);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) translateX(-50%);
+ }
}
- 100% {
- opacity: 0;
- transform: translateY(-20px) translateX(-50%);
- visibility: hidden;
+
+ @keyframes fadeOutAndMoveUp {
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(-20px) translateX(-50%);
+ visibility: hidden;
+ }
}
- }
- `;
+ `,
- const textIconContainer = css`
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 200;
- `;
+ textIconContainer: css`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 200;
+ `,
+ };
- return { button, textIconContainer };
+ return styles;
};
diff --git a/packages/react/src/views/ChatBody/RecentMessageButton.js b/packages/react/src/views/ChatBody/RecentMessageButton.js
index c50901dbe..131dfec90 100644
--- a/packages/react/src/views/ChatBody/RecentMessageButton.js
+++ b/packages/react/src/views/ChatBody/RecentMessageButton.js
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
import { Box, Button, Icon } from '@embeddedchat/ui-elements';
-import { useRecentMessageStyles } from './ChatBody.styles';
+import { getRecentMessageStyles } from './ChatBody.styles';
const RecentMessageButton = ({ visible, onClick, text }) => {
const [clicked, setClicked] = useState(false);
- const styles = useRecentMessageStyles();
+ const styles = getRecentMessageStyles();
return (
state.channelInfo);
const setChannelInfo = useChannelStore((state) => state.setChannelInfo);
diff --git a/packages/react/src/views/ChatHeader/ChatHeader.styles.js b/packages/react/src/views/ChatHeader/ChatHeader.styles.js
index 90a0fd2e3..676d67709 100644
--- a/packages/react/src/views/ChatHeader/ChatHeader.styles.js
+++ b/packages/react/src/views/ChatHeader/ChatHeader.styles.js
@@ -1,6 +1,5 @@
import { css } from '@emotion/react';
-
-import { useTheme, darken, lighten } from '@embeddedchat/ui-elements';
+import { darken, lighten } from '@embeddedchat/ui-elements';
const rowCentreAlign = css`
display: flex;
@@ -8,50 +7,44 @@ const rowCentreAlign = css`
align-items: center;
`;
-const useChatHeaderStyles = () => {
- const { theme, mode, colors } = useTheme();
- const clearSpacing = css`
- margin: 0;
- padding: 0;
- `;
-
- const chatHeaderChild = css`
- ${rowCentreAlign}
- padding: 0 0.75rem;
- justify-content: space-between;
- width: 100%;
- `;
-
- const chatHeaderParent = css`
- background-color: ${mode === 'light'
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1)};
- width: 100%;
- z-index: 1200;
- display: flex;
- flex-direction: column;
- padding: 0.75rem;
- box-shadow: ${theme.shadows[1]};
- `;
-
- const channelDescription = css`
- ${rowCentreAlign}
- gap: 0.5rem;
- `;
-
- const chatHeaderIconRow = css`
- ${rowCentreAlign}
- position:relative;
- gap: 0.5rem;
- `;
-
- return {
- clearSpacing,
- chatHeaderChild,
- chatHeaderParent,
- channelDescription,
- chatHeaderIconRow,
+const getChatHeaderStyles = ({ theme, mode }) => {
+ const styles = {
+ clearSpacing: css`
+ margin: 0;
+ padding: 0;
+ `,
+
+ chatHeaderChild: css`
+ ${rowCentreAlign}
+ padding: 0 0.75rem;
+ justify-content: space-between;
+ width: 100%;
+ `,
+
+ chatHeaderParent: css`
+ background-color: ${mode === 'light'
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1)};
+ width: 100%;
+ z-index: 1200;
+ display: flex;
+ flex-direction: column;
+ padding: 0.75rem;
+ box-shadow: ${theme.shadows[1]};
+ `,
+
+ channelDescription: css`
+ ${rowCentreAlign}
+ gap: 0.5rem;
+ `,
+
+ chatHeaderIconRow: css`
+ ${rowCentreAlign}
+ position:relative;
+ gap: 0.5rem;
+ `,
};
+ return styles;
};
-export default useChatHeaderStyles;
+export default getChatHeaderStyles;
diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
index 22ce72afa..caef86e70 100644
--- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js
+++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
@@ -5,15 +5,16 @@ import React, {
useContext,
useRef,
} from 'react';
-import { Box, Icon, ActionButton } from '@embeddedchat/ui-elements';
+import { Box, Icon, ActionButton, useTheme } from '@embeddedchat/ui-elements';
import { useMediaRecorder } from '../../hooks/useMediaRecorder';
import RCContext from '../../context/RCInstance';
import useMessageStore from '../../store/messageStore';
-import { useCommonRecorderStyles } from './ChatInput.styles';
+import { getCommonRecorderStyles } from './ChatInput.styles';
const AudioMessageRecorder = () => {
const videoRef = useRef(null);
- const styles = useCommonRecorderStyles();
+ const { theme } = useTheme();
+ const styles = getCommonRecorderStyles(theme);
const toogleRecordingMessage = useMessageStore(
(state) => state.toogleRecordingMessage
);
diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index 01646eb24..99c1c8b4f 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -10,6 +10,7 @@ import {
Throbber,
useToastBarDispatch,
useComponentOverrides,
+ useTheme,
} from '@embeddedchat/ui-elements';
import { useRCContext } from '../../context/RCInstance';
import {
@@ -29,7 +30,7 @@ import { CommandsList } from '../CommandList';
import useSettingsStore from '../../store/settingsStore';
import ChannelState from '../ChannelState/ChannelState';
import QuoteMessage from '../QuoteMessage/QuoteMessage';
-import { useChatInputStyles } from './ChatInput.styles';
+import { getChatInputStyles } from './ChatInput.styles';
import useShowCommands from '../../hooks/useShowCommands';
import useSearchMentionUser from '../../hooks/useSearchMentionUser';
import formatSelection from '../../lib/formatSelection';
@@ -37,7 +38,8 @@ import formatSelection from '../../lib/formatSelection';
const ChatInput = ({ scrollToBottom }) => {
const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
const { RCInstance, ECOptions } = useRCContext();
- const styles = useChatInputStyles();
+ const { theme } = useTheme();
+ const styles = getChatInputStyles(theme);
const inputRef = useRef(null);
const typingRef = useRef();
diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index cd20819cf..73e91eb97 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -1,111 +1,105 @@
import { css } from '@emotion/react';
-import { darken, lighten, useTheme } from '@embeddedchat/ui-elements';
-
-export const useChatInputStyles = () => {
- const { theme, colors } = useTheme();
- const inputWithFormattingBox = css`
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
- margin: 0.5rem 2rem 1rem 2rem;
- &.focused {
- border: ${`1.5px solid ${colors.ring}`};
- }
- `;
-
- const editMessage = css`
- border: 2px solid ${colors.border};
- `;
-
- const inputBox = css`
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: row;
- padding: 0.5rem;
- `;
-
- const iconCursor = css`
- cursor: pointer;
- `;
-
- const textInput = css`
- flex: 1;
- word-wrap: break-word;
- white-space: pre-wrap;
- overflow: auto;
- overflow-x: hidden;
- resize: none;
- border: none;
- outline: none;
- font-size: 14px;
-
- &:focus {
+import { darken, lighten } from '@embeddedchat/ui-elements';
+
+export const getChatInputStyles = (theme) => {
+ const styles = {
+ inputWithFormattingBox: css`
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
+ margin: 0.5rem 2rem 1rem 2rem;
+ &.focused {
+ border: ${`1.5px solid ${theme.colors.ring}`};
+ }
+ `,
+
+ editMessage: css`
+ border: 2px solid ${theme.colors.border};
+ `,
+
+ inputBox: css`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: row;
+ padding: 0.5rem;
+ `,
+
+ iconCursor: css`
+ cursor: pointer;
+ `,
+
+ textInput: css`
+ flex: 1;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ overflow: auto;
+ overflow-x: hidden;
+ resize: none;
border: none;
outline: none;
- }
+ font-size: 14px;
- &:disabled {
- cursor: not-allowed;
- }
+ &:focus {
+ border: none;
+ outline: none;
+ }
- &::placeholder {
- padding-left: 5px;
- }
- `;
+ &:disabled {
+ cursor: not-allowed;
+ }
- return {
- inputWithFormattingBox,
- editMessage,
- inputBox,
- iconCursor,
- textInput,
+ &::placeholder {
+ padding-left: 5px;
+ }
+ `,
};
-};
-export const useChatInputFormattingToolbarStyles = () => {
- const { theme, mode, colors } = useTheme();
-
- const chatFormat = css`
- bottom: 0;
- padding: 0.2rem;
- align-items: center;
- background-color: ${mode === 'light'
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1)};
- display: flex;
- position: relative;
- flex-direction: row;
- gap: 0.375rem;
- border-radius: 0 0 ${theme.schemes.radius} ${theme.schemes.radius};
- `;
-
- return { chatFormat };
+ return styles;
};
-export const useCommonRecorderStyles = () => {
- const { colors } = useTheme();
- const dot = css`
- width: 0.5rem;
- height: 0.5rem;
- border-radius: 50%;
- background-color: ${colors.destructive};
- margin: auto;
- margin-right: 8px;
- `;
-
- const controller = css`
- display: flex;
- gap: 0.15rem;
- `;
-
- const timer = css`
- margin: auto;
- `;
+export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => {
+ const styles = {
+ chatFormat: css`
+ bottom: 0;
+ padding: 0.2rem;
+ align-items: center;
+ background-color: ${mode === 'light'
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1)};
+ display: flex;
+ position: relative;
+ flex-direction: row;
+ gap: 0.375rem;
+ border-radius: 0 0 ${theme.radius} ${theme.radius};
+ `,
+ };
+ return styles;
+};
- const record = css`
- display: flex;
- margin: auto;
- `;
+export const getCommonRecorderStyles = (theme) => {
+ const styles = {
+ dot: css`
+ width: 0.5rem;
+ height: 0.5rem;
+ border-radius: 50%;
+ background-color: ${theme.colors.destructive};
+ margin: auto;
+ margin-right: 8px;
+ `,
+
+ controller: css`
+ display: flex;
+ gap: 0.15rem;
+ `,
+
+ timer: css`
+ margin: auto;
+ `,
+ record: css`
+ display: flex;
+ margin: auto;
+ `,
+ };
- return { dot, controller, timer, record };
+ return styles;
};
diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
index e6dbe3f2e..634b2255a 100644
--- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -6,13 +6,14 @@ import {
ActionButton,
Tooltip,
useComponentOverrides,
+ useTheme,
} from '@embeddedchat/ui-elements';
import { EmojiPicker } from '../EmojiPicker/index';
import { useMessageStore } from '../../store';
import { formatter } from '../../lib/textFormat';
import AudioMessageRecorder from './AudioMessageRecorder';
import VideoMessageRecorder from './VideoMessageRecoder';
-import { useChatInputFormattingToolbarStyles } from './ChatInput.styles';
+import { getChatInputFormattingToolbarStyles } from './ChatInput.styles';
import formatSelection from '../../lib/formatSelection';
const ChatInputFormattingToolbar = ({
@@ -26,8 +27,8 @@ const ChatInputFormattingToolbar = ({
const { classNames, styleOverrides, configOverrides } = useComponentOverrides(
'ChatInputFormattingToolbar'
);
-
- const styles = useChatInputFormattingToolbarStyles();
+ const theme = useTheme();
+ const styles = getChatInputFormattingToolbarStyles(theme);
const surfaceItems =
configOverrides.optionConfig?.surfaceItems || optionConfig.surfaceItems;
const formatters =
diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
index a29e31566..4d5b00810 100644
--- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js
+++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -6,15 +6,22 @@ import React, {
useRef,
} from 'react';
import { css } from '@emotion/react';
-import { Box, Icon, ActionButton, Modal } from '@embeddedchat/ui-elements';
+import {
+ Box,
+ Icon,
+ ActionButton,
+ Modal,
+ useTheme,
+} from '@embeddedchat/ui-elements';
import { useMediaRecorder } from '../../hooks/useMediaRecorder';
import RCContext from '../../context/RCInstance';
import useMessageStore from '../../store/messageStore';
-import { useCommonRecorderStyles } from './ChatInput.styles';
+import { getCommonRecorderStyles } from './ChatInput.styles';
const VideoMessageRecorder = () => {
const videoRef = useRef(null);
- const styles = useCommonRecorderStyles();
+ const { theme } = useTheme();
+ const styles = getCommonRecorderStyles(theme);
const toogleRecordingMessage = useMessageStore(
(state) => state.toogleRecordingMessage
diff --git a/packages/react/src/views/CommandList/CommandList.style.js b/packages/react/src/views/CommandList/CommandList.style.js
index d2162eb5a..0eb8a78fe 100644
--- a/packages/react/src/views/CommandList/CommandList.style.js
+++ b/packages/react/src/views/CommandList/CommandList.style.js
@@ -1,37 +1,37 @@
import { css } from '@emotion/react';
-import { useTheme } from '@embeddedchat/ui-elements';
-const useCommandListStyles = () => {
- const { colors } = useTheme();
- const main = css`
- margin: 0.2rem 2rem;
- display: block;
- max-height: 10rem;
- overflow: scroll;
- overflow-x: hidden;
- max-height: 145px;
- border: 1px solid ${colors.border};
- border-radius: 0.2rem;
- color: ${colors.secondaryForeground};
- `;
+const getCommandListStyles = (theme) => {
+ const styles = {
+ main: css`
+ margin: 0.2rem 2rem;
+ display: block;
+ max-height: 10rem;
+ overflow: scroll;
+ overflow-x: hidden;
+ max-height: 145px;
+ border: 1px solid ${theme.colors.border};
+ border-radius: 0.2rem;
+ color: ${theme.colors.secondaryForeground};
+ `,
- const listItem = css`
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.1rem 0.25rem;
+ listItem: css`
+ cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.1rem 0.25rem;
- &:hover {
- background-color: ${colors.secondary};
- }
- `;
+ &:hover {
+ background-color: ${theme.colors.secondary};
+ }
+ `,
- const listText = css`
- font-weight: 600;
- `;
+ listText: css`
+ font-weight: 600;
+ `,
+ };
- return { main, listItem, listText };
+ return styles;
};
-export default useCommandListStyles;
+export default getCommandListStyles;
diff --git a/packages/react/src/views/CommandList/CommandsList.js b/packages/react/src/views/CommandList/CommandsList.js
index 2d4c4048a..ad4d9f1d4 100644
--- a/packages/react/src/views/CommandList/CommandsList.js
+++ b/packages/react/src/views/CommandList/CommandsList.js
@@ -6,7 +6,7 @@ import {
useComponentOverrides,
useTheme,
} from '@embeddedchat/ui-elements';
-import useCommandListStyles from './CommandList.style';
+import getCommandListStyles from './CommandList.style';
function CommandsList({
className = '',
@@ -21,8 +21,8 @@ function CommandsList({
...props
}) {
const { classNames, styleOverrides } = useComponentOverrides('CommandsList');
- const styles = useCommandListStyles();
- const { colors } = useTheme();
+ const { theme } = useTheme();
+ const styles = getCommandListStyles(theme);
const itemRefs = useRef([]);
const setItemRef = (el, index) => {
itemRefs.current[index] = el;
@@ -104,8 +104,8 @@ function CommandsList({
ref={(el) => setItemRef(el, index)}
onClick={() => handleCommandClick(command)}
style={{
- backgroundColor: index === commandIndex && colors.primary,
- color: index === commandIndex && colors.primaryForeground,
+ backgroundColor: index === commandIndex && theme.colors.primary,
+ color: index === commandIndex && theme.colors.primaryForeground,
}}
>
{
- const container = css`
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- z-index: 1200;
- padding-block-start: 10px;
- `;
+ const styles = {
+ container: css`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ z-index: 1200;
+ padding-block-start: 10px;
+ `,
- const clearSpacing = css`
- margin: 0;
- padding: 0;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- `;
- return { container, clearSpacing };
+ clearSpacing: css`
+ margin: 0;
+ padding: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ `,
+ };
+
+ return styles;
};
export default useDynamicHeaderStyles;
diff --git a/packages/react/src/views/EmbeddedChat.js b/packages/react/src/views/EmbeddedChat.js
index 4faa8cec4..2dc837987 100644
--- a/packages/react/src/views/EmbeddedChat.js
+++ b/packages/react/src/views/EmbeddedChat.js
@@ -17,7 +17,6 @@ import {
} from '@embeddedchat/ui-elements';
import { ChatLayout } from './ChatLayout';
import { ChatHeader } from './ChatHeader';
-import { Home } from './Home';
import { RCInstanceProvider } from '../context/RCInstance';
import { useUserStore, useLoginStore } from '../store';
import DefaultTheme from '../theme/DefaultTheme';
@@ -251,11 +250,7 @@ const EmbeddedChat = (props) => {
/>
)}
- {isUserAuthenticated || anonymousMode ? (
-
- ) : (
-
- )}
+
diff --git a/packages/react/src/views/EmbeddedChat.styles.js b/packages/react/src/views/EmbeddedChat.styles.js
index 4297ef33e..88343d416 100644
--- a/packages/react/src/views/EmbeddedChat.styles.js
+++ b/packages/react/src/views/EmbeddedChat.styles.js
@@ -7,7 +7,7 @@ export const styles = {
display: flex;
flex-direction: column;
border: ${`1.5px solid ${theme.schemes[dark ? 'dark' : 'light'].border}`};
- border-radius: ${theme.schemes.radius};
+ border-radius: ${theme.radius};
overflow: hidden;
`,
fullscreen: css`
diff --git a/packages/react/src/views/EmojiPicker/EmojiPicker.js b/packages/react/src/views/EmojiPicker/EmojiPicker.js
index 645983dd6..e8e292667 100644
--- a/packages/react/src/views/EmojiPicker/EmojiPicker.js
+++ b/packages/react/src/views/EmojiPicker/EmojiPicker.js
@@ -2,8 +2,8 @@ import React from 'react';
import EmojiPicker from 'emoji-picker-react';
import { css } from '@emotion/react';
import PropTypes from 'prop-types';
-import { Box, Popup } from '@embeddedchat/ui-elements';
-import useEmojiPickerStyles from './EmojiPicker.styles';
+import { Box, Popup, useTheme } from '@embeddedchat/ui-elements';
+import getEmojiPickerStyles from './EmojiPicker.styles';
const CustomEmojiPicker = ({
handleEmojiClick,
@@ -15,7 +15,8 @@ const CustomEmojiPicker = ({
wrapperId = 'emoji-popup',
onClose = () => {},
}) => {
- const styles = useEmojiPickerStyles();
+ const theme = useTheme();
+ const styles = getEmojiPickerStyles(theme);
const previewConfig = {
defaultEmoji: '1f60d',
diff --git a/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js b/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js
index e65bf7876..457c3984c 100644
--- a/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js
+++ b/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js
@@ -1,66 +1,67 @@
import { css } from '@emotion/react';
-import { alpha, lighten, darken, useTheme } from '@embeddedchat/ui-elements';
+import { alpha, lighten, darken } from '@embeddedchat/ui-elements';
-const useEmojiPickerStyles = () => {
- const { theme, mode, colors } = useTheme();
+const getEmojiPickerStyles = ({ theme, mode }) => {
const calculatedColors =
mode === 'light'
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1);
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1);
+ const styles = {
+ emojiPicker: css`
+ .EmojiPickerReact {
+ --epr-bg-color: ${theme.colors.background};
+ --epr-text-color: ${theme.colors.foreground};
+ --epr-picker-border-color: ${theme.colors.border};
+ --epr-category-label-bg-color: ${theme.colors.background};
+ --epr-category-icon-active-color: ${theme.colors.secondary};
+ --epr-emoji-size: 20px;
+ --epr-category-navigation-button-size: 20px;
+ --epr-emoji-gap: 10px;
- const emojiPicker = css`
- .EmojiPickerReact {
- --epr-bg-color: ${colors.background};
- --epr-text-color: ${colors.foreground};
- --epr-picker-border-color: ${colors.border};
- --epr-category-label-bg-color: ${colors.background};
- --epr-category-icon-active-color: ${colors.secondary};
- --epr-emoji-size: 20px;
- --epr-category-navigation-button-size: 20px;
- --epr-emoji-gap: 10px;
+ --epr-hover-bg-color: ${calculatedColors};
+ --epr-highlight-color: ${calculatedColors};
+ --epr-focus-bg-color: ${calculatedColors};
+ --epr-horizontal-padding: 10px;
+ --epr-picker-border-radius: ${theme.radius};
+ --epr-search-border-color: var(--epr-highlight-color);
+ --epr-header-padding: 15px var(--epr-horizontal-padding);
+ --epr-active-skin-tone-indicator-border-color: var(
+ --epr-highlight-color
+ );
+ --epr-active-skin-hover-color: var(--epr-hover-bg-color);
+ --epr-search-input-bg-color-active: var(--epr-search-input-bg-color);
+ --epr-search-input-padding: 0 30px;
+ --epr-search-input-border-radius: ${theme.radius};
+ --epr-search-input-height: 40px;
+ --epr-search-input-text-color: var(--epr-text-color);
+ --epr-search-input-placeholder-color: var(--epr-text-color);
+ --epr-search-bar-inner-padding: var(--epr-horizontal-padding);
+ --epr-emoji-variation-picker-height: 45px;
+ --epr-emoji-variation-picker-bg-color: var(--epr-bg-color);
+ --epr-preview-height: 70px;
+ --epr-preview-text-size: 14px;
+ --epr-preview-text-padding: 0 var(--epr-horizontal-padding);
+ --epr-preview-border-color: var(--epr-picker-border-color);
+ --epr-preview-text-color: var(--epr-text-color);
+ --epr-category-padding: 0 var(--epr-horizontal-padding);
+ --epr-category-label-text-color: var(--epr-text-color);
+ --epr-category-label-padding: 0 var(--epr-horizontal-padding);
+ --epr-category-label-height: 40px;
- --epr-hover-bg-color: ${calculatedColors};
- --epr-highlight-color: ${calculatedColors};
- --epr-focus-bg-color: ${calculatedColors};
- --epr-horizontal-padding: 10px;
- --epr-picker-border-radius: ${theme.schemes.radius};
- --epr-search-border-color: var(--epr-highlight-color);
- --epr-header-padding: 15px var(--epr-horizontal-padding);
- --epr-active-skin-tone-indicator-border-color: var(--epr-highlight-color);
- --epr-active-skin-hover-color: var(--epr-hover-bg-color);
- --epr-search-input-bg-color-active: var(--epr-search-input-bg-color);
- --epr-search-input-padding: 0 30px;
- --epr-search-input-border-radius: ${theme.schemes.radius};
- --epr-search-input-height: 40px;
- --epr-search-input-text-color: var(--epr-text-color);
- --epr-search-input-placeholder-color: var(--epr-text-color);
- --epr-search-bar-inner-padding: var(--epr-horizontal-padding);
- --epr-emoji-variation-picker-height: 45px;
- --epr-emoji-variation-picker-bg-color: var(--epr-bg-color);
- --epr-preview-height: 70px;
- --epr-preview-text-size: 14px;
- --epr-preview-text-padding: 0 var(--epr-horizontal-padding);
- --epr-preview-border-color: var(--epr-picker-border-color);
- --epr-preview-text-color: var(--epr-text-color);
- --epr-category-padding: 0 var(--epr-horizontal-padding);
- --epr-category-label-text-color: var(--epr-text-color);
- --epr-category-label-padding: 0 var(--epr-horizontal-padding);
- --epr-category-label-height: 40px;
+ --epr-emoji-padding: 5px;
+ --epr-emoji-fullsize: calc(
+ var(--epr-emoji-size) + var(--epr-emoji-padding) * 2
+ );
+ --epr-emoji-hover-color: var(--epr-hover-bg-color);
+ --epr-emoji-variation-indicator-color: var(--epr-picker-border-color);
+ --epr-emoji-variation-indicator-color-hover: var(--epr-text-color);
+ --epr-header-overlay-z-index: 3;
+ --epr-emoji-variations-indictator-z-index: 1;
+ --epr-category-label-z-index: 2;
+ --epr-skin-variation-picker-z-index: 5;
+ --epr-preview-z-index: 6;
- --epr-emoji-padding: 5px;
- --epr-emoji-fullsize: calc(
- var(--epr-emoji-size) + var(--epr-emoji-padding) * 2
- );
- --epr-emoji-hover-color: var(--epr-hover-bg-color);
- --epr-emoji-variation-indicator-color: var(--epr-picker-border-color);
- --epr-emoji-variation-indicator-color-hover: var(--epr-text-color);
- --epr-header-overlay-z-index: 3;
- --epr-emoji-variations-indictator-z-index: 1;
- --epr-category-label-z-index: 2;
- --epr-skin-variation-picker-z-index: 5;
- --epr-preview-z-index: 6;
-
- /* Use these properties of color if needed ->
+ /* Use these properties of color if needed ->
--epr-shadow: 'theme-color';
--epr-search-input-bg-color: 'theme-color';
@@ -80,36 +81,37 @@ const useEmojiPickerStyles = () => {
--epr-dark-category-icon-active-color:'theme-color';
--epr-dark-skin-tone-picker-menu-color: 'theme-color';
*/
- }
+ }
- .EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-label {
- font-size: 12px;
- }
+ .EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-label {
+ font-size: 12px;
+ }
- .EmojiPickerReact.epr-dark-theme {
- /* We are not using dark mode option provided by emoji picker,
+ .EmojiPickerReact.epr-dark-theme {
+ /* We are not using dark mode option provided by emoji picker,
all the colors for both light and dark mode is defined above*/
- }
+ }
- .EmojiPickerReact .epr-body::-webkit-scrollbar,
- .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar {
- width: 4px;
- height: 7.7px;
- }
+ .EmojiPickerReact .epr-body::-webkit-scrollbar,
+ .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar {
+ width: 4px;
+ height: 7.7px;
+ }
- .EmojiPickerReact .epr-body::-webkit-scrollbar-thumb,
- .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar-thumb {
- background: ${alpha(colors.primary, 0.5)};
- border-radius: 4px;
- }
+ .EmojiPickerReact .epr-body::-webkit-scrollbar-thumb,
+ .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar-thumb {
+ background: ${alpha(theme.colors.primary, 0.5)};
+ border-radius: 4px;
+ }
- .EmojiPickerReact .epr-body::-webkit-scrollbar-thumb:hover,
- .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar-thumb:hover {
- background: ${colors.primary};
- }
- `;
+ .EmojiPickerReact .epr-body::-webkit-scrollbar-thumb:hover,
+ .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar-thumb:hover {
+ background: ${theme.colors.primary};
+ }
+ `,
+ };
- return { emojiPicker };
+ return styles;
};
-export default useEmojiPickerStyles;
+export default getEmojiPickerStyles;
diff --git a/packages/react/src/views/GlobalStyles.js b/packages/react/src/views/GlobalStyles.js
index d17c40143..b26977e63 100644
--- a/packages/react/src/views/GlobalStyles.js
+++ b/packages/react/src/views/GlobalStyles.js
@@ -2,7 +2,7 @@ import React from 'react';
import { css, Global } from '@emotion/react';
import { useTheme, alpha } from '@embeddedchat/ui-elements';
-const useStyles = (colors, theme) => css`
+const getGlobalStyles = (theme) => css`
.ec-embedded-chat * {
box-sizing: border-box;
margin: 0;
@@ -16,7 +16,7 @@ const useStyles = (colors, theme) => css`
}
.ec-embedded-chat a {
- color: ${colors.foreground};
+ color: ${theme.colors.foreground};
}
.ec-embedded-chat ::-webkit-scrollbar {
@@ -25,12 +25,12 @@ const useStyles = (colors, theme) => css`
}
.ec-embedded-chat ::-webkit-scrollbar-thumb {
- background: ${alpha(colors.primary, 0.5)};
+ background: ${alpha(theme.colors.primary, 0.5)};
border-radius: 4px;
}
.ec-embedded-chat ::-webkit-scrollbar-thumb:hover {
- background: ${colors.primary};
+ background: ${theme.colors.primary};
}
.ec-embedded-chat ::-webkit-scrollbar-button {
@@ -39,8 +39,8 @@ const useStyles = (colors, theme) => css`
`;
const GlobalStyles = () => {
- const { theme, colors } = useTheme();
- const styles = useStyles(colors, theme);
+ const { theme } = useTheme();
+ const styles = getGlobalStyles(theme);
return ;
};
diff --git a/packages/react/src/views/Home/Home.js b/packages/react/src/views/Home/Home.js
deleted file mode 100644
index 2b37aca61..000000000
--- a/packages/react/src/views/Home/Home.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { css } from '@emotion/react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Box, Heading } from '@embeddedchat/ui-elements';
-import styles from './Home.styles';
-
-const Home = ({ height }) => (
-
-
- EmbeddedChat | Home
-
-
- For more documentation visit:{' '}
-
- README
-
-
-
- To enable anonymous mode pass in{' '}
- anonymousMode prop as true and, then
-
-
- Enable Anonymous read by going to ->{' '}
- Admin -> Accounts -> Allow Anonymous Read
. This will
- allow users to see the chat without logging in.
-
-
-);
-
-export default Home;
-
-Home.propTypes = {
- height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
diff --git a/packages/react/src/views/Home/Home.styles.js b/packages/react/src/views/Home/Home.styles.js
deleted file mode 100644
index 15fc2d58c..000000000
--- a/packages/react/src/views/Home/Home.styles.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { css } from '@emotion/react';
-
-const styles = {
- paraText: css`
- margin-top: 1rem;
- font-size: 1rem;
- `,
-
- paraTextMediaQuery: css`
- @media (max-width: 768px) {
- margin-top: 0.5rem;
- font-size: 0.775rem;
- line-height: 1rem;
- }
- `,
-};
-
-export default styles;
diff --git a/packages/react/src/views/Home/index.js b/packages/react/src/views/Home/index.js
deleted file mode 100644
index c2d92a574..000000000
--- a/packages/react/src/views/Home/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Home } from './Home';
diff --git a/packages/react/src/views/ImageGallery/ImageGallery.js b/packages/react/src/views/ImageGallery/ImageGallery.js
index 6408e0f6d..3a10b2e55 100644
--- a/packages/react/src/views/ImageGallery/ImageGallery.js
+++ b/packages/react/src/views/ImageGallery/ImageGallery.js
@@ -10,16 +10,16 @@ import {
} from '@embeddedchat/ui-elements';
import { useRCContext } from '../../context/RCInstance';
import { Swiper, SwiperSlide } from './Swiper';
-import useImageGalleryStyles from './ImageGallery.styles';
+import getImageGalleryStyles from './ImageGallery.styles';
const ImageGallery = ({ currentFileId, setShowGallery }) => {
- const styles = useImageGalleryStyles();
+ const { theme } = useTheme();
+ const styles = getImageGalleryStyles(theme);
const { RCInstance } = useRCContext();
const [files, setFiles] = useState([]);
const [currentFileIndex, setCurrentFileIndex] = useState(-1);
const [loading, setLoading] = useState(true);
const [imgFetchErr, setImgFetchErr] = useState(false);
- const { colors } = useTheme();
useEffect(() => {
const fetchAllImages = async () => {
@@ -69,14 +69,14 @@ const ImageGallery = ({ currentFileId, setShowGallery }) => {
Something went wrong
diff --git a/packages/react/src/views/ImageGallery/ImageGallery.styles.js b/packages/react/src/views/ImageGallery/ImageGallery.styles.js
index d2cd56485..8230b77d6 100644
--- a/packages/react/src/views/ImageGallery/ImageGallery.styles.js
+++ b/packages/react/src/views/ImageGallery/ImageGallery.styles.js
@@ -1,83 +1,74 @@
import { css } from '@emotion/react';
-import { useTheme, alpha } from '@embeddedchat/ui-elements';
+import { alpha } from '@embeddedchat/ui-elements';
-const useImageGalleryStyles = () => {
- const { theme, colors } = useTheme();
+const getImageGalleryStyles = (theme) => {
+ const styles = {
+ overlay: css`
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1500;
+ background-color: ${alpha(theme.commonColors.black, 0.5)};
+ `,
- const overlay = css`
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1500;
- background-color: ${alpha(theme.schemes.common.black, 0.5)};
- `;
+ exit: css`
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ background: ${theme.colors.primary};
+ color: ${theme.colors.primaryForeground};
+ border: none;
+ border-radius: ${theme.radius};
+ padding: 8px 16px;
+ cursor: pointer;
+ z-index: 1501;
+ `,
- const exit = css`
- position: absolute;
- top: 16px;
- right: 16px;
- background: ${colors.primary};
- color: ${colors.primaryForeground};
- border: none;
- border-radius: ${theme.schemes.radius};
- padding: 8px 16px;
- cursor: pointer;
- z-index: 1501;
- `;
+ imageContainer: css`
+ display: flex;
+ height: 100vh;
+ justify-content: center;
+ align-items: center;
+ `,
- const imageContainer = css`
- display: flex;
- height: 100vh;
- justify-content: center;
- align-items: center;
- `;
+ image: css`
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ `,
- const image = css`
- max-width: 100%;
- max-height: 100%;
- object-fit: contain;
- `;
+ throbberContainer: css`
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ `,
- const throbberContainer = css`
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- `;
+ fetchErrorContainer: css`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ `,
- const fetchErrorContainer = css`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- `;
+ swiperContainer: css`
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ `,
- const swiperContainer = css`
- width: 100%;
- height: 100%;
- overflow: hidden;
- `;
-
- const swiperInject = `
+ swiperInject: `
.swiper-button-next,
.swiper-button-prev {
- color: ${colors.primary};
+ color: ${theme.colors.primary};
}
- `;
-
- return {
- overlay,
- exit,
- imageContainer,
- image,
- throbberContainer,
- fetchErrorContainer,
- swiperContainer,
- swiperInject,
+ `,
};
+
+ return styles;
};
-export default useImageGalleryStyles;
+export default getImageGalleryStyles;
diff --git a/packages/react/src/views/LinkPreview/LinkPreview.js b/packages/react/src/views/LinkPreview/LinkPreview.js
index 6e9ce667b..7290714ed 100644
--- a/packages/react/src/views/LinkPreview/LinkPreview.js
+++ b/packages/react/src/views/LinkPreview/LinkPreview.js
@@ -8,7 +8,7 @@ import {
useComponentOverrides,
useTheme,
} from '@embeddedchat/ui-elements';
-import useLinkPreviewStyles from './LinkPreview.styles';
+import getLinkPreviewStyles from './LinkPreview.styles';
const LinkPreview = ({
className = '',
@@ -19,8 +19,8 @@ const LinkPreview = ({
...props
}) => {
const { classNames, styleOverrides } = useComponentOverrides('LinkPreview');
- const styles = useLinkPreviewStyles();
- const { colors } = useTheme();
+ const { theme } = useTheme();
+ const styles = getLinkPreviewStyles(theme);
const [isPreviewOpen, setIsPreviewOpen] = useState(true);
@@ -89,7 +89,7 @@ const LinkPreview = ({
{
- const { theme, colors } = useTheme();
- const arrowDropDown = css`
- cursor: pointer;
- display: flex;
- align-items: center;
- `;
+const getLinkPreviewStyles = (theme) => {
+ const styles = {
+ arrowDropDown: css`
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ `,
- const linkPreviewContainer = css`
- max-width: 16rem;
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
- margin-bottom: 0.75rem;
- overflow: hidden;
- `;
+ linkPreviewContainer: css`
+ max-width: 16rem;
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
+ margin-bottom: 0.75rem;
+ overflow: hidden;
+ `,
- const textStyle = css`
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- margin-block-start: 0rem;
- margin-block-end: 0rem;
- `;
+ textStyle: css`
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-block-start: 0rem;
+ margin-block-end: 0rem;
+ `,
+ };
- return { arrowDropDown, linkPreviewContainer, textStyle };
+ return styles;
};
-export default useLinkPreviewStyles;
+export default getLinkPreviewStyles;
diff --git a/packages/react/src/views/LoginForm/LoginForm.js b/packages/react/src/views/LoginForm/LoginForm.js
index 63231eea6..1285e5e1e 100644
--- a/packages/react/src/views/LoginForm/LoginForm.js
+++ b/packages/react/src/views/LoginForm/LoginForm.js
@@ -24,7 +24,7 @@ export default function LoginForm() {
);
const { handleLogin } = useRCAuth();
- const { colors } = useTheme();
+ const { theme } = useTheme();
useEffect(() => {
if (userOrEmail !== null && userOrEmail.trim() === '') {
@@ -101,7 +101,7 @@ export default function LoginForm() {
onKeyPress={handleKeyPress}
style={{
...(field.error && {
- borderColor: colors.destructive,
+ borderColor: theme.colors.destructive,
outline: 'none',
}),
}}
@@ -120,7 +120,7 @@ export default function LoginForm() {
diff --git a/packages/react/src/views/Mentions/MembersList.js b/packages/react/src/views/Mentions/MembersList.js
index 0a16863c7..f0cbc49d3 100644
--- a/packages/react/src/views/Mentions/MembersList.js
+++ b/packages/react/src/views/Mentions/MembersList.js
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { Box, useTheme } from '@embeddedchat/ui-elements';
-import useMemberListStyles from './MembersList.styles';
+import getMemberListStyles from './MembersList.styles';
function MembersList({
mentionIndex,
@@ -13,8 +13,8 @@ function MembersList({
setShowMembersList,
}) {
const itemRefs = useRef([]);
- const styles = useMemberListStyles();
- const { colors } = useTheme();
+ const { theme } = useTheme();
+ const styles = getMemberListStyles(theme);
const handleMemberClick = useCallback(
(selectedItem) => {
@@ -122,8 +122,8 @@ function MembersList({
}
}}
style={{
- backgroundColor: index === mentionIndex && colors.primary,
- color: index === mentionIndex && colors.primaryForeground,
+ backgroundColor: index === mentionIndex && theme.colors.primary,
+ color: index === mentionIndex && theme.colors.primaryForeground,
}}
>
@@ -148,10 +148,10 @@ function MembersList({
}}
style={{
backgroundColor:
- mentionIndex === filteredMembers.length && colors.primary,
+ mentionIndex === filteredMembers.length && theme.colors.primary,
color:
mentionIndex === filteredMembers.length &&
- colors.primaryForeground,
+ theme.colors.primaryForeground,
}}
>
@@ -171,10 +171,11 @@ function MembersList({
}}
style={{
backgroundColor:
- mentionIndex === filteredMembers.length + 1 && colors.primary,
+ mentionIndex === filteredMembers.length + 1 &&
+ theme.colors.primary,
color:
mentionIndex === filteredMembers.length + 1 &&
- colors.primaryForeground,
+ theme.colors.primaryForeground,
}}
>
diff --git a/packages/react/src/views/Mentions/MembersList.styles.js b/packages/react/src/views/Mentions/MembersList.styles.js
index 06d7ec919..e288cae04 100644
--- a/packages/react/src/views/Mentions/MembersList.styles.js
+++ b/packages/react/src/views/Mentions/MembersList.styles.js
@@ -1,36 +1,36 @@
import { css } from '@emotion/react';
-import { useTheme } from '@embeddedchat/ui-elements';
-const useMemberListStyles = () => {
- const { colors } = useTheme();
- const main = css`
- margin: 0.2rem 2rem;
- display: block;
- overflow: auto;
- max-height: 10rem;
- overflow-x: hidden;
- border: 1px solid ${colors.border};
- border-radius: 0.2rem;
- color: ${colors.secondaryForeground};
- `;
+const getMemberListStyles = (theme) => {
+ const styles = {
+ main: css`
+ margin: 0.2rem 2rem;
+ display: block;
+ overflow: auto;
+ max-height: 10rem;
+ overflow-x: hidden;
+ border: 1px solid ${theme.colors.border};
+ border-radius: 0.2rem;
+ color: ${theme.colors.secondaryForeground};
+ `,
- const listItem = css`
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.1rem 0.25rem;
+ listItem: css`
+ cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.1rem 0.25rem;
- &:hover {
- background-color: ${colors.secondary};
- }
- `;
+ &:hover {
+ background-color: ${theme.colors.secondary};
+ }
+ `,
- const listText = css`
- font-weight: 600;
- `;
+ listText: css`
+ font-weight: 600;
+ `,
+ };
- return { main, listItem, listText };
+ return styles;
};
-export default useMemberListStyles;
+export default getMemberListStyles;
diff --git a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
index dcf49f821..42f978f9e 100644
--- a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
+++ b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
@@ -1,9 +1,7 @@
import { css } from '@emotion/react';
import { alpha } from '@embeddedchat/ui-elements';
-export const bubbleStyles = (customTheme) => {
- const { theme, colors } = customTheme;
-
+export const getBubbleStyles = (theme) => {
const styles = {
name: 'bubble',
messageParent: css`
@@ -13,7 +11,7 @@ export const bubbleStyles = (customTheme) => {
align-items: flex-start;
padding: 0 2.25rem 0.25rem 2.25rem;
a {
- color: ${colors.primaryForeground};
+ color: ${theme.colors.primaryForeground};
}
`,
@@ -38,12 +36,11 @@ export const bubbleStyles = (customTheme) => {
width: fit-content;
max-width: 80%;
padding: 0.5rem 0.75rem;
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius}
- ${theme.schemes.radius} 0.2rem;
- background: ${colors.primary};
- color: ${colors.primaryForeground};
+ border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem;
+ background: ${theme.colors.primary};
+ color: ${theme.colors.primaryForeground};
&:hover {
- background: ${alpha(colors.primary, 0.8)};
+ background: ${alpha(theme.colors.primary, 0.8)};
}
`,
@@ -51,16 +48,14 @@ export const bubbleStyles = (customTheme) => {
position: relative;
width: fit-content;
max-width: 80%;
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius}
- ${theme.schemes.radius} 0.2rem;
+ border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem;
`,
sequential: css`
- border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius}
- 0.2rem;
+ border-radius: 0.2rem ${theme.radius} ${theme.radius} 0.2rem;
`,
lastSequential: css`
- border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius};
+ border-radius: 0.2rem ${theme.radius} ${theme.radius};
`,
metricsContainer: css`
@@ -69,8 +64,8 @@ export const bubbleStyles = (customTheme) => {
`,
threadReplyButton: css`
- background-color: ${colors.accent};
- color: ${colors.accentForeground};
+ background-color: ${theme.colors.accent};
+ color: ${theme.colors.accentForeground};
border-radius: 0.2rem;
`,
@@ -90,11 +85,11 @@ export const bubbleStyles = (customTheme) => {
`,
videoAttachmentContainer: css`
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: inherit;
`,
imageAttachmentContainer: css`
- border: 1px solid ${colors.border};
+ border: 1px solid ${theme.colors.border};
border-radius: inherit;
overflow: hidden;
`,
@@ -103,12 +98,12 @@ export const bubbleStyles = (customTheme) => {
`,
quoteContainer: css`
- background-color: ${colors.background};
- color: ${colors.foreground};
+ background-color: ${theme.colors.background};
+ color: ${theme.colors.foreground};
flex: 1;
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
- border: 2px solid ${colors.border};
+ border: 2px solid ${theme.colors.border};
margin: 0.2rem -0.75rem -0.5rem;
`,
@@ -130,9 +125,7 @@ export const bubbleStyles = (customTheme) => {
return styles;
};
-export const bubbleStylesMe = (customTheme) => {
- const { theme, colors } = customTheme;
-
+export const getBubbleStylesMe = (theme) => {
const styles = {
messageParentMe: css`
flex-direction: row-reverse;
@@ -143,27 +136,23 @@ export const bubbleStylesMe = (customTheme) => {
`,
messageBodyMe: css`
- background: ${colors.secondary};
- color: ${colors.secondaryForeground};
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem
- ${theme.schemes.radius};
+ background: ${theme.colors.secondary};
+ color: ${theme.colors.secondaryForeground};
+ border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius};
&:hover {
- background: ${alpha(colors.secondary, 0.8)};
+ background: ${alpha(theme.colors.secondary, 0.8)};
}
`,
attachmentBodyMe: css`
- border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem
- ${theme.schemes.radius};
+ border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius};
`,
lastSequentialMe: css`
- border-radius: ${theme.schemes.radius} 0.2rem ${theme.schemes.radius}
- ${theme.schemes.radius};
+ border-radius: ${theme.radius} 0.2rem ${theme.radius} ${theme.radius};
`,
sequentialMe: css`
- border-radius: ${theme.schemes.radius} 0.2rem 0.2rem
- ${theme.schemes.radius};
+ border-radius: ${theme.radius} 0.2rem 0.2rem ${theme.radius};
`,
metricsContainerMe: css`
@@ -183,7 +172,7 @@ export const bubbleStylesMe = (customTheme) => {
pinnedContainerMe: css`
border-inline-start: none;
- border-inline-end: 3px solid ${colors.border};
+ border-inline-end: 3px solid ${theme.colors.border};
`,
textUserInfoMe: css`
diff --git a/packages/react/src/views/Message/BubbleVariant/BubbleThreadBtn.js b/packages/react/src/views/Message/BubbleVariant/BubbleThreadBtn.js
index fd966423e..cc8f301f3 100644
--- a/packages/react/src/views/Message/BubbleVariant/BubbleThreadBtn.js
+++ b/packages/react/src/views/Message/BubbleVariant/BubbleThreadBtn.js
@@ -3,7 +3,7 @@ import { format } from 'date-fns';
import { Button, Icon, useTheme } from '@embeddedchat/ui-elements';
const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => {
- const { colors } = useTheme();
+ const { theme } = useTheme();
return (
<>
@@ -11,7 +11,7 @@ const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => {
name="arc"
size="30"
fill="none"
- color={`${colors.accent}`}
+ color={`${theme.colors.accent}`}
css={styles.arcIcon}
/>
{
- const customTheme = useTheme();
- const styles = bubbleStyles(customTheme);
- const meStyles = bubbleStylesMe(customTheme);
+ const { theme } = useTheme();
+ const styles = getBubbleStyles(theme);
+ const meStyles = getBubbleStylesMe(theme);
const mergedStyles = {};
diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index d3f9303c7..8ce3d8bf5 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -6,6 +6,7 @@ import {
useToastBarDispatch,
useComponentOverrides,
appendClassNames,
+ useTheme,
} from '@embeddedchat/ui-elements';
import { Attachments } from '../AttachmentHandler';
import { Markdown } from '../Markdown';
@@ -20,7 +21,7 @@ import { MessageDivider } from './MessageDivider';
import MessageAvatarContainer from './MessageAvatarContainer';
import MessageBodyContainer from './MessageBodyContainer';
import { LinkPreview } from '../LinkPreview';
-import { useMessageStyles } from './Message.styles';
+import { getMessageStyles } from './Message.styles';
import useBubbleStyles from './BubbleVariant/useBubbleStyles';
import UiKitMessageBlock from './uiKit/UiKitMessageBlock';
@@ -63,7 +64,8 @@ const Message = ({
}));
const isMe = message.u._id === authenticatedUserId;
- const styles = useMessageStyles();
+ const theme = useTheme();
+ const styles = getMessageStyles(theme);
const bubbleStyles = useBubbleStyles(isMe);
const variantStyles =
diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 80a7f1553..b6b978fb4 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -1,53 +1,53 @@
import { css } from '@emotion/react';
-import { lighten, darken, useTheme } from '@embeddedchat/ui-elements';
+import { lighten, darken } from '@embeddedchat/ui-elements';
-export const useMessageStyles = () => {
- const { mode, colors } = useTheme();
-
- const main = css`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- padding-top: 0.5rem;
- padding-bottom: 0.25rem;
- padding-left: 2.25rem;
- padding-right: 2.25rem;
- color: ${colors.foreground};
-
- &:hover {
- background-color: ${mode === 'light'
- ? darken(colors.background, 0.03)
- : lighten(colors.background, 1)};
- }
- `;
- const messageEditing = css`
- background-color: ${colors.secondary};
- &:hover {
- background-color: ${colors.secondary};
- }
- `;
-
- const pendingMessageBody = css`
- opacity: 0.4 !important;
- white-space: pre-line;
- `;
+export const getMessageStyles = ({ theme, mode }) => {
+ const styles = {
+ main: css`
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding-top: 0.5rem;
+ padding-bottom: 0.25rem;
+ padding-left: 2.25rem;
+ padding-right: 2.25rem;
+ color: ${theme.colors.foreground};
+
+ &:hover {
+ background-color: ${mode === 'light'
+ ? darken(theme.colors.background, 0.03)
+ : lighten(theme.colors.background, 1)};
+ }
+ `,
+ messageEditing: css`
+ background-color: ${theme.colors.secondary};
+ &:hover {
+ background-color: ${theme.colors.secondary};
+ }
+ `,
+
+ pendingMessageBody: css`
+ opacity: 0.4 !important;
+ white-space: pre-line;
+ `,
+ };
- return { main, messageEditing, pendingMessageBody };
+ return styles;
};
-export const useMessageAvatarContainerStyles = () => {
- const { colors } = useTheme();
-
- const container = css`
- margin: 3px;
- width: 2.25em;
- max-height: 2.25em;
- display: flex;
- justify-content: flex-end;
- color: ${colors.primary};
- `;
+export const getMessageAvatarContainerStyles = (theme) => {
+ const styles = {
+ container: css`
+ margin: 3px;
+ width: 2.25em;
+ max-height: 2.25em;
+ display: flex;
+ justify-content: flex-end;
+ color: ${theme.colors.primary};
+ `,
+ };
- return { container };
+ return styles;
};
export const MessageBodyStyles = {
@@ -66,126 +66,126 @@ export const MessageBodyStyles = {
`,
};
-export const useMessageDividerStyles = () => {
- const { theme, colors } = useTheme();
-
- const divider = css`
- letter-spacing: 0rem;
- font-size: 0.75rem;
- font-weight: 700;
- line-height: 1rem;
- position: relative;
- display: flex;
- z-index: 1000;
- align-items: center;
- margin-top: 0.5rem;
- margin-bottom: 0.75rem;
- padding-left: 1.25rem;
- padding-right: 1.25rem;
- `;
-
- const dividerContent = css`
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- background-color: ${colors.secondary};
- color: ${colors.secondaryForeground};
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- border-radius: ${theme.schemes.radius};
- `;
+export const getMessageDividerStyles = (theme) => {
+ const styles = {
+ divider: css`
+ letter-spacing: 0rem;
+ font-size: 0.75rem;
+ font-weight: 700;
+ line-height: 1rem;
+ position: relative;
+ display: flex;
+ z-index: 1000;
+ align-items: center;
+ margin-top: 0.5rem;
+ margin-bottom: 0.75rem;
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ `,
+
+ dividerContent: css`
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ background-color: ${theme.colors.secondary};
+ color: ${theme.colors.secondaryForeground};
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: ${theme.radius};
+ `,
- const bar = css`
- display: flex;
- justify-content: flex-end;
- align-items: center;
- flex-grow: 1;
- height: 1px;
- background-color: ${colors.secondary};
- `;
+ bar: css`
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ flex-grow: 1;
+ height: 1px;
+ background-color: ${theme.colors.secondary};
+ `,
+ };
- return { divider, bar, dividerContent };
+ return styles;
};
-export const useMessageHeaderStyles = () => {
- const { theme, colors } = useTheme();
-
- const header = css`
- display: flex;
- flex-direction: row;
- flex-grow: 0;
- flex-shrink: 1;
- min-width: 1px;
- margin-top: 0.125rem;
- margin-bottom: 0.125rem;
- gap: 0.125rem;
- align-items: center;
- `;
-
- const name = css`
- letter-spacing: 0rem;
- font-size: 0.875rem;
- font-weight: 700;
- line-height: 1.25rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex-shrink: 1;
- `;
-
- const userName = css`
- color: ${colors.accentForeground};
- font-weight: 700;
- letter-spacing: 0rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex-shrink: 1;
- `;
-
- const userRole = css`
- letter-spacing: 0rem;
- font-size: 0.75rem;
- padding: 0 0.25rem;
- margin: 0 0.1rem;
- border-radius: ${theme.schemes.radius};
- font-weight: 700;
- line-height: 1rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- background-color: ${colors.secondary};
- `;
-
- const userActions = css`
- color: ${colors.accentForeground};
- letter-spacing: 0rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex-shrink: 1;
- `;
-
- const timestamp = css`
- color: ${colors.accentForeground};
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- letter-spacing: 0rem;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1rem;
- flex-shrink: 0;
- margin-left: 0.25rem;
- `;
+export const getMessageHeaderStyles = (theme) => {
+ const styles = {
+ header: css`
+ display: flex;
+ flex-direction: row;
+ flex-grow: 0;
+ flex-shrink: 1;
+ min-width: 1px;
+ margin-top: 0.125rem;
+ margin-bottom: 0.125rem;
+ gap: 0.125rem;
+ align-items: center;
+ `,
+
+ name: css`
+ letter-spacing: 0rem;
+ font-size: 0.875rem;
+ font-weight: 700;
+ line-height: 1.25rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex-shrink: 1;
+ `,
+
+ userName: css`
+ color: ${theme.colors.accentForeground};
+ font-weight: 700;
+ letter-spacing: 0rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex-shrink: 1;
+ `,
+
+ userRole: css`
+ letter-spacing: 0rem;
+ font-size: 0.75rem;
+ padding: 0 0.25rem;
+ margin: 0 0.1rem;
+ border-radius: ${theme.radius};
+ font-weight: 700;
+ line-height: 1rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: ${theme.colors.secondary};
+ `,
+
+ userActions: css`
+ color: ${theme.colors.accentForeground};
+ letter-spacing: 0rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex-shrink: 1;
+ `,
+
+ timestamp: css`
+ color: ${theme.colors.accentForeground};
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ letter-spacing: 0rem;
+ font-size: 0.75rem;
+ font-weight: 400;
+ line-height: 1rem;
+ flex-shrink: 0;
+ margin-left: 0.25rem;
+ `,
+ };
- return { header, name, userRole, userName, timestamp, userActions };
+ return styles;
};
export const MessageMetricsStyles = {
@@ -214,87 +214,86 @@ export const MessageMetricsStyles = {
`,
};
-export const useMessageReactionsStyles = () => {
- const { colors } = useTheme();
- const container = css`
- display: flex;
- flex-flow: row wrap;
- justify-content: flex-start;
- `;
-
- const reaction = css`
- letter-spacing: 0rem;
- font-size: 0.6rem;
- display: inline-flex;
- gap: 0.125rem;
- align-items: center;
- justify-content: center;
- padding: 0.1rem;
- margin: 0.125rem;
- cursor: pointer;
- img.joypixels {
- height: 0.75em;
- width: 0.75em;
- }
- p {
- margin: 0;
- }
- border: 1px solid ${colors.border};
- border-radius: 0.2rem;
- `;
-
- const reactionMine = css`
- background: ${colors.secondary};
- `;
+export const getMessageReactionsStyles = (theme) => {
+ const styles = {
+ container: css`
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ `,
+
+ reaction: css`
+ letter-spacing: 0rem;
+ font-size: 0.6rem;
+ display: inline-flex;
+ gap: 0.125rem;
+ align-items: center;
+ justify-content: center;
+ padding: 0.1rem;
+ margin: 0.125rem;
+ cursor: pointer;
+ img.joypixels {
+ height: 0.75em;
+ width: 0.75em;
+ }
+ p {
+ margin: 0;
+ }
+ border: 1px solid ${theme.colors.border};
+ border-radius: 0.2rem;
+ `,
+
+ reactionMine: css`
+ background: ${theme.colors.secondary};
+ `,
+ };
- return { container, reaction, reactionMine };
+ return styles;
};
-export const useMessageToolboxStyles = () => {
- const { theme, colors } = useTheme();
-
- const toolboxContainer = css`
- display: none;
- .ec-message:hover & {
+export const getMessageToolboxStyles = (theme) => {
+ const styles = {
+ toolboxContainer: css`
+ display: none;
+ .ec-message:hover & {
+ display: flex;
+ position: absolute;
+ bottom: 100%;
+ z-index: 1101;
+ right: 2rem;
+ }
+ `,
+
+ toolbox: css`
display: flex;
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+ margin-top: 0.125rem;
+ background-color: ${theme.colors.background};
+ box-shadow: 0 0 2px ${theme.colors.foreground};
+ gap: 0.25rem;
+ padding: 0.25rem;
+ border-radius: ${theme.radius};
+ `,
+
+ emojiPickerStyles: css`
position: absolute;
bottom: 100%;
- z-index: 1101;
- right: 2rem;
- }
- `;
-
- const toolbox = css`
- display: flex;
- margin-left: -0.25rem;
- margin-right: -0.25rem;
- margin-top: 0.125rem;
- background-color: ${colors.background};
- box-shadow: 0 0 2px ${colors.foreground};
- gap: 0.25rem;
- padding: 0.25rem;
- border-radius: ${theme.schemes.radius};
- `;
-
- const emojiPickerStyles = css`
- position: absolute;
- bottom: 100%;
- right: 1.5rem;
- `;
-
- return {
- toolboxContainer,
- toolbox,
- emojiPickerStyles,
+ right: 1.5rem;
+ `,
};
+
+ return styles;
};
-export const useMessageBodyContainerStyles = () => {
- const bodyContainer = css`
- margin-left: 5px;
- position: relative;
- width: 100%;
- `;
+export const getMessageBodyContainerStyles = () => {
+ const styles = {
+ bodyContainer: css`
+ margin-left: 5px;
+ position: relative;
+ width: 100%;
+ `,
+ };
- return { bodyContainer };
+ return styles;
};
diff --git a/packages/react/src/views/Message/MessageAvatarContainer.js b/packages/react/src/views/Message/MessageAvatarContainer.js
index 87a153eeb..7e7a8116a 100644
--- a/packages/react/src/views/Message/MessageAvatarContainer.js
+++ b/packages/react/src/views/Message/MessageAvatarContainer.js
@@ -1,7 +1,13 @@
import React, { useContext } from 'react';
-import { Box, Avatar, Icon, Tooltip } from '@embeddedchat/ui-elements';
+import {
+ Box,
+ Avatar,
+ Icon,
+ Tooltip,
+ useTheme,
+} from '@embeddedchat/ui-elements';
import RCContext from '../../context/RCInstance';
-import { useMessageAvatarContainerStyles } from './Message.styles';
+import { getMessageAvatarContainerStyles } from './Message.styles';
import useSetExclusiveState from '../../hooks/useSetExclusiveState';
import { useUserStore } from '../../store';
@@ -12,7 +18,8 @@ const MessageAvatarContainer = ({
isPinned,
}) => {
const { RCInstance } = useContext(RCContext);
- const styles = useMessageAvatarContainerStyles();
+ const { theme } = useTheme();
+ const styles = getMessageAvatarContainerStyles(theme);
const getUserAvatarUrl = (username) => {
const host = RCInstance.getHost();
const URL = `${host}/avatar/${username}`;
diff --git a/packages/react/src/views/Message/MessageBodyContainer.js b/packages/react/src/views/Message/MessageBodyContainer.js
index 947a26713..7c124135f 100644
--- a/packages/react/src/views/Message/MessageBodyContainer.js
+++ b/packages/react/src/views/Message/MessageBodyContainer.js
@@ -3,9 +3,10 @@ import {
Box,
useComponentOverrides,
appendClassNames,
+ useTheme,
} from '@embeddedchat/ui-elements';
-import { useMessageBodyContainerStyles } from './Message.styles';
+import { getMessageBodyContainerStyles } from './Message.styles';
const MessageBodyContainer = ({
children,
@@ -18,8 +19,8 @@ const MessageBodyContainer = ({
className,
style
);
-
- const styles = useMessageBodyContainerStyles();
+ const { theme } = useTheme();
+ const styles = getMessageBodyContainerStyles(theme);
return (
state.userId);
@@ -159,7 +159,7 @@ const MessageHeader = ({
style={{ marginInlineEnd: '0.4rem', opacity: 0.5 }}
name="edit"
size="1em"
- color={colors.primary}
+ color={theme.colors.primary}
/>
)}
{isStarred ? (
@@ -168,7 +168,7 @@ const MessageHeader = ({
style={{ marginInlineEnd: '0.4rem', opacity: 0.5 }}
name="star-filled"
size="1em"
- color={colors.primary}
+ color={theme.colors.primary}
/>
) : null}
@@ -178,7 +178,7 @@ const MessageHeader = ({
style={{ marginInlineEnd: '0.4rem', opacity: 0.5 }}
name="pin"
size="1em"
- color={colors.primary}
+ color={theme.colors.primary}
/>
) : null}
diff --git a/packages/react/src/views/Message/MessageReactions.js b/packages/react/src/views/Message/MessageReactions.js
index ade5fa7f3..5f05a684d 100644
--- a/packages/react/src/views/Message/MessageReactions.js
+++ b/packages/react/src/views/Message/MessageReactions.js
@@ -3,10 +3,11 @@ import {
Box,
useComponentOverrides,
appendClassNames,
+ useTheme,
} from '@embeddedchat/ui-elements';
import { Markdown } from '../Markdown';
import { isSameUser, serializeReactions } from '../../lib/reaction';
-import { useMessageReactionsStyles } from './Message.styles';
+import { getMessageReactionsStyles } from './Message.styles';
export const MessageReactions = ({
message,
@@ -21,7 +22,8 @@ export const MessageReactions = ({
className,
style
);
- const styles = useMessageReactionsStyles();
+ const { theme } = useTheme();
+ const styles = getMessageReactionsStyles(theme);
return (
{
- const styles = useMessageAggregatorStyles();
+ const { theme } = useTheme();
+ const styles = getMessageAggregatorStyles(theme);
const setExclusiveState = useSetExclusiveState();
const messages = useMessageStore((state) => state.messages);
const [messageRendered, setMessageRendered] = useState(false);
diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
index f197d7df2..1f18222e3 100644
--- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
+++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
@@ -1,6 +1,6 @@
import { css } from '@emotion/react';
-const useMessageAggregatorStyles = () => {
+const getMessageAggregatorStyles = () => {
const styles = {
listContainerStyles: css`
flex: 1;
@@ -26,4 +26,4 @@ const useMessageAggregatorStyles = () => {
return styles;
};
-export default useMessageAggregatorStyles;
+export default getMessageAggregatorStyles;
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.js b/packages/react/src/views/QuoteMessage/QuoteMessage.js
index 2daca1c41..fab425eba 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.js
@@ -6,10 +6,11 @@ import {
ActionButton,
Icon,
useComponentOverrides,
+ useTheme,
} from '@embeddedchat/ui-elements';
import RCContext from '../../context/RCInstance';
import { useMessageStore } from '../../store';
-import useQuoteMessageStyles from './QuoteMessage.styles';
+import getQuoteMessageStyles from './QuoteMessage.styles';
const QuoteMessage = ({ className = '', style = {}, message }) => {
const { RCInstance } = useContext(RCContext);
@@ -18,7 +19,8 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
const URL = `${host}/avatar/${username}`;
return URL;
};
- const styles = useQuoteMessageStyles();
+ const { theme } = useTheme();
+ const styles = getQuoteMessageStyles(theme);
const setQuoteMessage = useMessageStore((state) => state.setQuoteMessage);
const { classNames, styleOverrides } = useComponentOverrides('QuoteMessage');
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
index 16a0bfc2e..5ffe32dd2 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
@@ -1,37 +1,37 @@
import { css } from '@emotion/react';
-import { useTheme } from '@embeddedchat/ui-elements';
-const useQuoteMessageStyles = () => {
- const { theme, colors } = useTheme();
- const messageContainer = css`
- margin: 0.2rem 2rem;
- position: relative;
- font-size: 0.85rem;
- background-color: ${colors.background};
- color: ${colors.foreground};
- padding: 0.5rem;
- z-index: 1200;
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
- `;
+const getQuoteMessageStyles = (theme) => {
+ const styles = {
+ messageContainer: css`
+ margin: 0.2rem 2rem;
+ position: relative;
+ font-size: 0.85rem;
+ background-color: ${theme.colors.background};
+ color: ${theme.colors.foreground};
+ padding: 0.5rem;
+ z-index: 1200;
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
+ `,
- const avatarContainer = css`
- padding: 0.25rem;
- display: flex;
- gap: 0.5rem;
- `;
+ avatarContainer: css`
+ padding: 0.25rem;
+ display: flex;
+ gap: 0.5rem;
+ `,
- const message = css`
- padding: 0.25rem;
- `;
+ message: css`
+ padding: 0.25rem;
+ `,
- const actionBtn = css`
- position: absolute;
- top: 0.75rem;
- right: 0.75rem;
- `;
+ actionBtn: css`
+ position: absolute;
+ top: 0.75rem;
+ right: 0.75rem;
+ `,
+ };
- return { messageContainer, avatarContainer, message, actionBtn };
+ return styles;
};
-export default useQuoteMessageStyles;
+export default getQuoteMessageStyles;
diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js
index 387ecfec3..c52f48c9d 100644
--- a/packages/react/src/views/RoomMembers/RoomMember.js
+++ b/packages/react/src/views/RoomMembers/RoomMember.js
@@ -7,12 +7,13 @@ import {
Sidebar,
Popup,
useComponentOverrides,
+ useTheme,
} from '@embeddedchat/ui-elements';
import RoomMemberItem from './RoomMemberItem';
import RCContext, { useRCContext } from '../../context/RCInstance';
import useInviteStore from '../../store/inviteStore';
import InviteMembers from './InviteMembers';
-import { useRoomMemberStyles } from './RoomMembers.styles';
+import { getRoomMemberStyles } from './RoomMembers.styles';
import LoadingIndicator from '../MessageAggregators/common/LoadingIndicator';
import useSetExclusiveState from '../../hooks/useSetExclusiveState';
@@ -20,7 +21,8 @@ const RoomMembers = ({ members }) => {
const { RCInstance } = useContext(RCContext);
const { ECOptions } = useRCContext();
const { host } = ECOptions;
- const styles = useRoomMemberStyles();
+ const { theme } = useTheme();
+ const styles = getRoomMemberStyles(theme);
const toggleInviteView = useInviteStore((state) => state.toggleInviteView);
const showInvite = useInviteStore((state) => state.showInvite);
diff --git a/packages/react/src/views/RoomMembers/RoomMembers.styles.js b/packages/react/src/views/RoomMembers/RoomMembers.styles.js
index 8e5e692e4..68d3307f5 100644
--- a/packages/react/src/views/RoomMembers/RoomMembers.styles.js
+++ b/packages/react/src/views/RoomMembers/RoomMembers.styles.js
@@ -1,16 +1,18 @@
import { css } from '@emotion/react';
-export const useRoomMemberStyles = () => {
- const container = css`
- display: flex;
- flex-direction: column;
- overflow: auto;
- width: 100%;
- justify-content: center;
- padding: 0 1rem 1rem;
- `;
+export const getRoomMemberStyles = () => {
+ const styles = {
+ container: css`
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ width: 100%;
+ justify-content: center;
+ padding: 0 1rem 1rem;
+ `,
+ };
- return { container };
+ return styles;
};
export const RoomMemberItemStyles = {
diff --git a/packages/react/src/views/UserInformation/UserInformation.js b/packages/react/src/views/UserInformation/UserInformation.js
index 0eaccaa85..d745ee9b7 100644
--- a/packages/react/src/views/UserInformation/UserInformation.js
+++ b/packages/react/src/views/UserInformation/UserInformation.js
@@ -9,12 +9,13 @@ import {
Popup,
useComponentOverrides,
appendClassNames,
+ useTheme,
} from '@embeddedchat/ui-elements';
import RCContext from '../../context/RCInstance';
import { useUserStore } from '../../store';
import formatTimestamp from '../../lib/formatTimestamp';
import UserInfoField from './UserInfoField';
-import useUserInformationStyles from './UserInformation.styles';
+import getUserInformationStyles from './UserInformation.styles';
import useSetExclusiveState from '../../hooks/useSetExclusiveState';
const UserInformation = () => {
@@ -22,7 +23,8 @@ const UserInformation = () => {
const viewType = variantOverrides.viewType || 'Sidebar';
const setExclusiveState = useSetExclusiveState();
const { RCInstance } = useContext(RCContext);
- const styles = useUserInformationStyles();
+ const { theme } = useTheme();
+ const styles = getUserInformationStyles(theme);
const [currentUserInfo, setCurrentUserInfo] = useState({});
const [isUserInfoFetched, setIsUserInfoFetched] = useState(false);
const currentUser = useUserStore((state) => state.currentUser);
diff --git a/packages/react/src/views/UserInformation/UserInformation.styles.js b/packages/react/src/views/UserInformation/UserInformation.styles.js
index 58e57699c..8ab2eb0d3 100644
--- a/packages/react/src/views/UserInformation/UserInformation.styles.js
+++ b/packages/react/src/views/UserInformation/UserInformation.styles.js
@@ -1,55 +1,49 @@
import { css } from '@emotion/react';
-import { useTheme } from '@embeddedchat/ui-elements';
-const useUserInformationStyles = () => {
- const { theme, colors } = useTheme();
- const userSidebar = css`
- padding: 0 1rem 1rem;
- margin: 0 auto;
- overflow: auto;
- `;
+const getUserInformationStyles = (theme) => {
+ const styles = {
+ userSidebar: css`
+ padding: 0 1rem 1rem;
+ margin: 0 auto;
+ overflow: auto;
+ `,
- const roleContainer = css`
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
- width: 100%;
- `;
+ roleContainer: css`
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ width: 100%;
+ `,
- const userRole = css`
- letter-spacing: 0rem;
- font-size: 0.75rem;
- padding: 0 0.25rem;
- margin: 0 0.1rem;
- border-radius: ${theme.schemes.radius};
- font-weight: 700;
- line-height: 1rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- background-color: ${colors.secondary};
- `;
+ userRole: css`
+ letter-spacing: 0rem;
+ font-size: 0.75rem;
+ padding: 0 0.25rem;
+ margin: 0 0.1rem;
+ border-radius: ${theme.radius};
+ font-weight: 700;
+ line-height: 1rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: ${theme.colors.secondary};
+ `,
- const emailContainer = css`
- display: flex;
- align-items: center;
- gap: 0.5rem;
- margin-block: 5px;
- `;
+ emailContainer: css`
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-block: 5px;
+ `,
- const centeredColumnStyles = css`
- display: flex;
- flex-direction: column;
- align-items: center;
- `;
-
- return {
- userSidebar,
- roleContainer,
- userRole,
- emailContainer,
- centeredColumnStyles,
+ centeredColumnStyles: css`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ `,
};
+
+ return styles;
};
-export default useUserInformationStyles;
+export default getUserInformationStyles;
diff --git a/packages/react/tools/theme-generator.js b/packages/react/tools/theme-generator.js
index 428ae0f31..c862991eb 100644
--- a/packages/react/tools/theme-generator.js
+++ b/packages/react/tools/theme-generator.js
@@ -98,7 +98,8 @@ const cssString = `
// Add hardcoded colors and other properties
const otherProps = {
- common: {
+ radius: '0.2rem',
+ commonColors: {
black: 'hsl(0, 0%, 0%)',
white: 'hsl(0, 0%, 100%)',
},
@@ -118,7 +119,6 @@ const otherProps = {
info: 'hsl(214.3, 77.8%, 92.9%)',
infoForeground: 'hsl(214.4, 75.8%, 19.4%)',
},
- radius: '0.2rem',
typography: {
default: {
fontFamily: "'Times New Roman', serif",
@@ -158,19 +158,10 @@ const otherProps = {
'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px',
'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
],
- zIndex: {
- divider: 1000,
- body: 1100,
- general: 1200,
- menu: 1300,
- tooltip: 1400,
- modal: 1500,
- toastbar: 1600,
- },
};
const themeObject = parseCSS(cssString);
-themeObject.schemes.common = otherProps.common;
+themeObject.commonColors = otherProps.commonColors;
themeObject.schemes.light = {
...themeObject.schemes.light,
...otherProps.light,
@@ -179,7 +170,7 @@ themeObject.schemes.dark = {
...themeObject.schemes.dark,
...otherProps.dark,
};
-themeObject.schemes.radius = otherProps.radius;
+themeObject.radius = otherProps.radius;
themeObject.typography = otherProps.typography;
themeObject.shadows = otherProps.shadows;
themeObject.zIndex = otherProps.zIndex;
diff --git a/packages/ui-elements/README.md b/packages/ui-elements/README.md
index 5a17e4a48..bee7a2227 100644
--- a/packages/ui-elements/README.md
+++ b/packages/ui-elements/README.md
@@ -10,12 +10,16 @@ This component is part of a monorepo, specifically within the `packages/react` p
![image](https://github.com/user-attachments/assets/2fd76929-ce43-4bb3-8ea8-3a7318468923)
+### Try It Out 🚀
+
+Check out our Storybook showcasing all the components in action! Preview and test them here: https://rocketchat.github.io/EmbeddedChat/ui-elements/
+
### Development
To develop and view the components:
1. Clone the repository.
-2. Navigate to `packages/layout_editor`.
+2. Navigate to `packages/ui-elements`.
3. Run the following commands:
```bash
@@ -92,4 +96,4 @@ background-color: ${mode === 'light'
: lighten(colors.background, 1)};
```
-This hook allows you to dynamically switch modes or themes as needed. The `theme` object must adhere to a specific format, as outlined in the EmbeddedChat `react` project [Readme.md](../docs/theming.md).
+This hook allows you to dynamically switch modes or themes as needed. The `theme` object must adhere to a specific format, as outlined in the [theming guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming).
diff --git a/packages/ui-elements/src/components/Avatar/Avatar.js b/packages/ui-elements/src/components/Avatar/Avatar.js
index 5b94359a2..72a99db2e 100644
--- a/packages/ui-elements/src/components/Avatar/Avatar.js
+++ b/packages/ui-elements/src/components/Avatar/Avatar.js
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
import useComponentOverrides from '../../hooks/useComponentOverrides';
+import { useTheme } from '../../hooks';
import { AvatarContainer } from './AvatarContainer';
import { Icon } from '../Icon';
import { Box } from '../Box';
-import { useAvatarStyles } from './Avatar.styles';
+import { getAvatarStyles } from './Avatar.styles';
export const Avatar = ({
size = '2.25rem',
@@ -15,7 +16,8 @@ export const Avatar = ({
...props
}) => {
const [imgError, setImgError] = useState(false);
- const styles = useAvatarStyles();
+ const { theme } = useTheme();
+ const styles = getAvatarStyles(theme);
const { classNames, styleOverrides } = useComponentOverrides(
'Avatar',
className,
diff --git a/packages/ui-elements/src/components/Avatar/Avatar.styles.js b/packages/ui-elements/src/components/Avatar/Avatar.styles.js
index 3a9983282..38af03c59 100644
--- a/packages/ui-elements/src/components/Avatar/Avatar.styles.js
+++ b/packages/ui-elements/src/components/Avatar/Avatar.styles.js
@@ -1,26 +1,26 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
-export const useAvatarStyles = () => {
- const { theme, colors } = useTheme();
- const imageAvatar = (size) => css`
- border-radius: ${theme.schemes.radius};
- height: ${size};
- width: ${size};
- `;
+export const getAvatarStyles = (theme) => {
+ const styles = {
+ imageAvatar: (size) => css`
+ border-radius: ${theme.radius};
+ height: ${size};
+ width: ${size};
+ `,
- const fallbackContainer = (size) => css`
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: ${colors.primary};
- color: ${colors.primaryForeground};
- border-radius: ${theme.schemes.radius};
- height: ${size};
- width: ${size};
- `;
+ fallbackContainer: (size) => css`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: ${theme.colors.primary};
+ color: ${theme.colors.primaryForeground};
+ border-radius: ${theme.radius};
+ height: ${size};
+ width: ${size};
+ `,
+ };
- return { imageAvatar, fallbackContainer };
+ return styles;
};
export const avatarContainerStyles = {
diff --git a/packages/ui-elements/src/components/Button/Button.js b/packages/ui-elements/src/components/Button/Button.js
index 909a5298a..3d2f4ca04 100644
--- a/packages/ui-elements/src/components/Button/Button.js
+++ b/packages/ui-elements/src/components/Button/Button.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import useButtonStyles from './Button.styles';
+import { useTheme } from '../../hooks';
const Button = ({
children,
@@ -15,11 +16,12 @@ const Button = ({
...props
}) => {
const { classNames, styleOverrides } = useComponentOverrides('Button');
- const styles = useButtonStyles(type, size);
+ const { theme } = useTheme();
+ const styles = useButtonStyles(theme);
return (
{
if (size === 'small') {
@@ -11,97 +10,97 @@ const getSquareSize = (size) => {
return '2rem';
};
-const useButtonStyles = (type, size) => {
- const { theme, colors } = useTheme();
-
- const main = css`
- cursor: pointer;
- display: inline-block;
- background-color: ${colors[type] || 'currentColor'};
- color: ${colors[`${type}Foreground`] || 'currentColor'};
- border: none;
- font-size: 0.875rem;
- font-weight: 500;
- letter-spacing: 0;
- line-height: 1.25rem;
- min-width: 80px;
- outline: none;
- overflow: hidden;
- padding-block: calc(18px - 0.625rem);
- padding: calc(18px - 0.625rem) 14px;
- padding-inline: 14px;
- text-align: center;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- align-self: flex-start;
- border-radius: ${theme.schemes.radius};
- &.ec-button--small {
- font-size: 0.75rem;
- font-weight: 700;
- letter-spacing: 0;
- line-height: 1rem;
- min-width: 56px;
- padding-block: calc(12px - 0.5rem);
- padding: calc(12px - 0.5rem) 6px;
- padding-inline: 6px;
- }
- &.ec-button--large {
- font-size: 1rem;
- font-weight: 400;
+const getButtonStyles = (theme) => {
+ const styles = {
+ main: (type, size) => css`
+ cursor: pointer;
+ display: inline-block;
+ background-color: ${theme.colors[type] || 'currentColor'};
+ color: ${theme.colors[`${type}Foreground`] || 'currentColor'};
+ border: none;
+ font-size: 0.875rem;
+ font-weight: 500;
letter-spacing: 0;
- line-height: 1.5rem;
- min-width: 96px;
- padding-block: calc(22px - 0.75rem);
- padding: calc(22px - 0.75rem) 22px;
- padding-inline: 22px;
- }
+ line-height: 1.25rem;
+ min-width: 80px;
+ outline: none;
+ overflow: hidden;
+ padding-block: calc(18px - 0.625rem);
+ padding: calc(18px - 0.625rem) 14px;
+ padding-inline: 14px;
+ text-align: center;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ align-self: flex-start;
+ border-radius: ${theme.radius};
+ &.ec-button--small {
+ font-size: 0.75rem;
+ font-weight: 700;
+ letter-spacing: 0;
+ line-height: 1rem;
+ min-width: 56px;
+ padding-block: calc(12px - 0.5rem);
+ padding: calc(12px - 0.5rem) 6px;
+ padding-inline: 6px;
+ }
+ &.ec-button--large {
+ font-size: 1rem;
+ font-weight: 400;
+ letter-spacing: 0;
+ line-height: 1.5rem;
+ min-width: 96px;
+ padding-block: calc(22px - 0.75rem);
+ padding: calc(22px - 0.75rem) 22px;
+ padding-inline: 22px;
+ }
- &.ec-button-square {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: ${getSquareSize(size)};
- min-width: ${getSquareSize(size)};
- height: ${getSquareSize(size)};
- padding: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-shrink: 0;
- }
+ &.ec-button-square {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: ${getSquareSize(size)};
+ min-width: ${getSquareSize(size)};
+ height: ${getSquareSize(size)};
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ }
- &:hover {
- filter: brightness(90%);
- }
+ &:hover {
+ filter: brightness(90%);
+ }
- &.disabled:not(.ghost):hover {
- filter: none;
- }
+ &.disabled:not(.ghost):hover {
+ filter: none;
+ }
- &.disabled:not(.ghost) {
- background-color: ${colors.muted};
- color: ${colors.mutedForeground};
- border: none;
- cursor: not-allowed;
- }
- &.ghost {
- background: none;
- color: ${colors[`${type}`] || colors.accentForeground};
- border: none;
- }
- &.disabled.ghost {
- color: ${colors.mutedForeground};
- border: none;
- background: none;
- cursor: not-allowed;
- }
- &.ghost:not(.disabled):hover {
- background: ${colors.accent};
- }
- `;
+ &.disabled:not(.ghost) {
+ background-color: ${theme.colors.muted};
+ color: ${theme.colors.mutedForeground};
+ border: none;
+ cursor: not-allowed;
+ }
+ &.ghost {
+ background: none;
+ color: ${theme.colors[`${type}`] || theme.colors.accentForeground};
+ border: none;
+ }
+ &.disabled.ghost {
+ color: ${theme.colors.mutedForeground};
+ border: none;
+ background: none;
+ cursor: not-allowed;
+ }
+ &.ghost:not(.disabled):hover {
+ background: ${theme.colors.accent};
+ }
+ `,
+ };
- return { main };
+ return styles;
};
-export default useButtonStyles;
+export default getButtonStyles;
diff --git a/packages/ui-elements/src/components/CheckBox/CheckBox.js b/packages/ui-elements/src/components/CheckBox/CheckBox.js
index 9d5c7c93b..4568ebef9 100644
--- a/packages/ui-elements/src/components/CheckBox/CheckBox.js
+++ b/packages/ui-elements/src/components/CheckBox/CheckBox.js
@@ -2,17 +2,19 @@ import React from 'react';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import { Icon } from '../Icon';
import { Box } from '../Box';
+import { useTheme } from '../../hooks';
import { appendClassNames } from '../../lib/appendClassNames';
-import useCheckBoxStyles from './CheckBox.styles';
+import getCheckBoxStyles from './CheckBox.styles';
const CheckBox = ({ checked, ...props }) => {
- const styles = useCheckBoxStyles(checked);
+ const { theme } = useTheme();
+ const styles = getCheckBoxStyles(theme);
const { classNames, styleOverrides } = useComponentOverrides('CheckBox');
return (
// eslint-disable-next-line jsx-a11y/label-has-associated-control
diff --git a/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js b/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js
index e197a2839..b6968b690 100644
--- a/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js
+++ b/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js
@@ -1,26 +1,25 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
-const useCheckBoxStyles = (checked) => {
- const { theme, colors } = useTheme();
+const getCheckBoxStyles = (theme) => {
+ const styles = {
+ main: (checked) => css`
+ display: inline-block;
+ color: ${theme.colors.primaryForeground};
+ background-color: ${checked ? theme.colors.primary : 'none'};
+ height: 1rem;
+ width: 1rem;
+ box-sizing: border-box;
+ border: ${!checked ? `2px solid ${theme.colors.border}` : `none`};
+ border-radius: ${theme.radius};
+ cursor: pointer;
+ outline: none;
+ &:active {
+ outline: 0.3px solid ${theme.colors.ring};
+ }
+ `,
+ };
- const main = css`
- display: inline-block;
- color: ${colors.primaryForeground};
- background-color: ${checked ? colors.primary : 'none'};
- height: 1rem;
- width: 1rem;
- box-sizing: border-box;
- border: ${!checked ? `2px solid ${colors.border}` : `none`};
- border-radius: ${theme.schemes.radius};
- cursor: pointer;
- outline: none;
- &:active {
- outline: 0.3px solid ${colors.ring};
- }
- `;
-
- return { main };
+ return styles;
};
-export default useCheckBoxStyles;
+export default getCheckBoxStyles;
diff --git a/packages/ui-elements/src/components/Divider/Divider.js b/packages/ui-elements/src/components/Divider/Divider.js
index 8d2a4c862..a7b54e6a3 100644
--- a/packages/ui-elements/src/components/Divider/Divider.js
+++ b/packages/ui-elements/src/components/Divider/Divider.js
@@ -2,10 +2,12 @@ import React from 'react';
import PropTypes from 'prop-types';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import useDividerStyles from './Divider.styles';
+import { useTheme } from '../../hooks';
const Divider = ({ className = '', style = {}, ...props }) => {
const { classNames, styleOverrides } = useComponentOverrides('Divider');
- const styles = useDividerStyles();
+ const { theme } = useTheme();
+ const styles = useDividerStyles(theme);
return (
{
- const { theme, colors } = useTheme();
- const divider = css`
- height: 2px;
- margin: 0 8px 8px;
- border: 0;
- border-radius: ${theme.schemes.radius};
- background-color: ${colors.secondary};
- `;
+const getDividerStyles = (theme) => {
+ const styles = {
+ divider: css`
+ height: 2px;
+ margin: 0 8px 8px;
+ border: 0;
+ border-radius: ${theme.radius};
+ background-color: ${theme.colors.secondary};
+ `,
+ };
- return { divider };
+ return styles;
};
-export default useDividerStyles;
+export default getDividerStyles;
diff --git a/packages/ui-elements/src/components/Input/Input.js b/packages/ui-elements/src/components/Input/Input.js
index d75108947..df26c1bba 100644
--- a/packages/ui-elements/src/components/Input/Input.js
+++ b/packages/ui-elements/src/components/Input/Input.js
@@ -1,12 +1,14 @@
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import useComponentOverrides from '../../hooks/useComponentOverrides';
-import useInputStyles from './Input.styles';
+import getInputStyles from './Input.styles';
+import { useTheme } from '../../hooks';
const Input = forwardRef(
({ className = '', style = {}, textArea = false, ...props }, ref) => {
const { classNames, styleOverrides } = useComponentOverrides('Input');
- const styles = useInputStyles();
+ const { theme } = useTheme();
+ const styles = getInputStyles(theme);
const InputElement = textArea ? 'textarea' : 'input';
return (
{
- const { theme, colors } = useTheme();
+const getInputStyles = (theme) => {
+ const styles = {
+ main: css`
+ position: relative;
+ display: inline-flex;
+ flex: 1 0 auto;
+ min-width: 8rem;
+ padding: 0.5rem 0.9375rem;
+ -webkit-user-select: initial;
+ -moz-user-select: initial;
+ user-select: initial;
+ vertical-align: baseline;
+ white-space: nowrap;
+ word-break: break-all;
+ background-color: ${theme.colors.background};
+ color: ${theme.colors.foreground};
+ letter-spacing: 0rem;
+ font-size: 0.875rem;
+ font-weight: 400;
+ line-height: 1.25rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-radius: ${theme.radius};
+ box-shadow: none;
+ border: 1px solid ${theme.colors.border};
+ outline: none;
- const main = css`
- position: relative;
- display: inline-flex;
- flex: 1 0 auto;
- min-width: 8rem;
- padding: 0.5rem 0.9375rem;
- -webkit-user-select: initial;
- -moz-user-select: initial;
- user-select: initial;
- vertical-align: baseline;
- white-space: nowrap;
- word-break: break-all;
- background-color: ${colors.background};
- color: ${colors.foreground};
- letter-spacing: 0rem;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.25rem;
- overflow: hidden;
- text-overflow: ellipsis;
- border-radius: ${theme.schemes.radius};
- box-shadow: none;
- border: 1px solid ${colors.border};
- outline: none;
+ &:focus {
+ outline: ${theme.colors.ring} solid 1px;
+ }
- &:focus {
- outline: ${colors.ring} solid 1px;
- }
+ &::placeholder {
+ color: ${alpha(theme.colors.foreground, 0.8)};
+ }
+ `,
+ };
- &::placeholder {
- color: ${alpha(colors.foreground, 0.8)};
- }
- `;
-
- return { main };
+ return styles;
};
-export default useInputStyles;
+export default getInputStyles;
diff --git a/packages/ui-elements/src/components/ListBox/ListBox.js b/packages/ui-elements/src/components/ListBox/ListBox.js
index 18acc7e64..f1a08abbd 100644
--- a/packages/ui-elements/src/components/ListBox/ListBox.js
+++ b/packages/ui-elements/src/components/ListBox/ListBox.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { Box } from '../Box';
import { CheckBox } from '../CheckBox';
import useComponentOverrides from '../../hooks/useComponentOverrides';
-import useListBoxStyles from './ListBox.styles';
+import getListBoxStyles from './ListBox.styles';
import useTheme from '../../hooks/useTheme';
const findIndex = (options, value, multi) => {
@@ -26,8 +26,8 @@ const ListBox = ({
...props
}) => {
const { classNames, styleOverrides } = useComponentOverrides('ListBox');
- const styles = useListBoxStyles();
- const { colors } = useTheme();
+ const { theme } = useTheme();
+ const styles = getListBoxStyles(theme);
const itemRefs = useRef([]);
const [optionIndex, setOptionIndex] = useState(() =>
findIndex(options, value, multi)
@@ -105,8 +105,8 @@ const ListBox = ({
ref={(el) => setItemRef(el, index)}
onClick={() => handleOptionClick(option)}
style={{
- backgroundColor: index === optionIndex && colors.primary,
- color: index === optionIndex && colors.primaryForeground,
+ backgroundColor: index === optionIndex && theme.colors.primary,
+ color: index === optionIndex && theme.colors.primaryForeground,
}}
>
{multi ? (
diff --git a/packages/ui-elements/src/components/ListBox/ListBox.styles.js b/packages/ui-elements/src/components/ListBox/ListBox.styles.js
index b936c8f58..7ac267636 100644
--- a/packages/ui-elements/src/components/ListBox/ListBox.styles.js
+++ b/packages/ui-elements/src/components/ListBox/ListBox.styles.js
@@ -1,45 +1,45 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
-
-const useListBoxStyles = () => {
- const { colors } = useTheme();
- const main = css`
- overflow: auto;
- overflow-x: hidden;
- max-height: 145px;
- border: 1px solid ${colors.border};
- border-radius: 0.2rem;
- color: ${colors.secondaryForeground};
- `;
-
- const listItem = css`
+
+const getListBoxStyles = (theme) => {
+ const styles = {
+ main: css`
+ overflow: auto;
+ overflow-x: hidden;
+ max-height: 145px;
+ border: 1px solid ${theme.colors.border};
+ border-radius: 0.2rem;
+ color: ${theme.colors.secondaryForeground};
+ `,
+
+ listItem: css`
cursor: pointer;
- display: flex;
+ display: flex;theme.
justify-content: space-between;
align-items: center;
padding: 0.2rem;
&:hover {
- background-color: ${colors.secondary};
+ background-color: ${theme.colors.secondary};
}
- `;
+ `,
- const listText = css`
- font-weight: 600;
- `;
+ listText: css`
+ font-weight: 600;
+ `,
- const checkContainer = css`
- padding: 0.3rem;
- display: flex;
- align-items: center;
- justify-content: center;
- `;
+ checkContainer: css`
+ padding: 0.3rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `,
- const checkbox = css`
- cursor: pointer;
- `;
+ checkbox: css`
+ cursor: pointer;
+ `,
+ };
- return { main, listItem, listText, checkContainer, checkbox };
+ return styles;
};
-export default useListBoxStyles;
+export default getListBoxStyles;
diff --git a/packages/ui-elements/src/components/Menu/Menu.js b/packages/ui-elements/src/components/Menu/Menu.js
index 54a150c02..5ad82f5c2 100644
--- a/packages/ui-elements/src/components/Menu/Menu.js
+++ b/packages/ui-elements/src/components/Menu/Menu.js
@@ -7,7 +7,7 @@ import MenuItem from './MenuItem';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import { appendClassNames } from '../../lib/appendClassNames';
import { Tooltip } from '../Tooltip';
-import { useMenuStyles } from './Menu.styles';
+import { getMenuStyles } from './Menu.styles';
const Menu = ({
options = [],
@@ -19,7 +19,7 @@ const Menu = ({
useWrapper = true,
}) => {
const { theme } = useTheme();
- const styles = useMenuStyles();
+ const styles = getMenuStyles(theme);
const { classNames, styleOverrides } = useComponentOverrides(
'Menu',
className,
diff --git a/packages/ui-elements/src/components/Menu/Menu.styles.js b/packages/ui-elements/src/components/Menu/Menu.styles.js
index 131b24e88..2537aaaef 100644
--- a/packages/ui-elements/src/components/Menu/Menu.styles.js
+++ b/packages/ui-elements/src/components/Menu/Menu.styles.js
@@ -1,57 +1,56 @@
import { css } from '@emotion/react';
import { lighten, darken } from '../../lib/color';
-import useTheme from '../../hooks/useTheme';
-export const useMenuStyles = () => {
- const { theme, colors } = useTheme();
-
- const wrapper = css`
- position: relative;
- `;
-
- const container = css`
- position: absolute;
- top: 100%;
- right: 0;
- display: flex;
- flex-direction: column;
- width: fit-content;
- height: fit-content;
- z-index: ${theme.zIndex?.menu || 1300};
- border-radius: 0.2em;
- padding: 0.5rem 0;
- box-shadow: ${theme.shadows[1]};
- background-color: ${colors.background};
- `;
-
- return { wrapper, container };
+export const getMenuStyles = (theme) => {
+ const styles = {
+ wrapper: css`
+ position: relative;
+ `,
+
+ container: css`
+ position: absolute;
+ top: 100%;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ width: fit-content;
+ height: fit-content;
+ z-index: ${theme.zIndex?.menu || 1300};
+ border-radius: 0.2em;
+ padding: 0.5rem 0;
+ box-shadow: ${theme.shadows[1]};
+ background-color: ${theme.colors.background};
+ `,
+ };
+
+ return styles;
};
-export const useMenuItemStyles = () => {
- const { mode, colors } = useTheme();
-
- const item = css`
- font-size: 14px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: 0.25em 0.75em;
- white-space: nowrap;
- gap: 0.2rem;
- color: ${colors.foreground};
- &:hover {
- background-color: ${mode === 'light'
- ? darken(colors.background, 0.05)
- : lighten(colors.background, 2)};
- cursor: pointer;
- }
- `;
-
- const disabled = css`
- cursor: not-allowed !important;
- color: ${colors.mutedForeground};
- `;
-
- return { item, disabled };
+export const getMenuItemStyles = ({ theme, mode }) => {
+ const styles = {
+ item: css`
+ font-size: 14px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 0.25em 0.75em;
+ white-space: nowrap;
+ gap: 0.2rem;
+ color: ${theme.colors.foreground};
+ &:hover {
+ background-color: ${mode === 'light'
+ ? darken(theme.colors.background, 0.05)
+ : lighten(theme.colors.background, 2)};
+ cursor: pointer;
+ }
+ `,
+
+ disabled: css`
+ cursor: not-allowed !important;
+ color: ${theme.colors.mutedForeground};
+ `,
+ };
+
+ return styles;
};
diff --git a/packages/ui-elements/src/components/Menu/MenuItem.js b/packages/ui-elements/src/components/Menu/MenuItem.js
index a462333f3..f0c69b4e5 100644
--- a/packages/ui-elements/src/components/Menu/MenuItem.js
+++ b/packages/ui-elements/src/components/Menu/MenuItem.js
@@ -4,14 +4,16 @@ import { Icon } from '../Icon';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import { appendClassNames } from '../../lib/appendClassNames';
-import { useMenuItemStyles } from './Menu.styles';
+import { getMenuItemStyles } from './Menu.styles';
+import { useTheme } from '../../hooks';
const MenuItem = ({ icon, label, action, disabled }) => {
const { classNames, styleOverrides } = useComponentOverrides(
'MenuItem',
disabled && 'disabled'
);
- const styles = useMenuItemStyles();
+ const theme = useTheme();
+ const styles = getMenuItemStyles(theme);
return (
{
const { classNames, styleOverrides } = useComponentOverrides(
'MessageGenericPreview'
);
- const styles = useMessageGenericPreviewStyles();
+ const { theme } = useTheme();
+ const styles = getMessageGenericPreviewStyles(theme);
return (
{
- const { theme, colors } = useTheme();
+export const getMessageGenericPreviewStyles = (theme) => {
+ const styles = {
+ container: css`
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ padding: 0.75rem;
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
+ background-color: ${theme.colors.background};
+ `,
+ };
- const container = css`
- display: flex;
- overflow: hidden;
- flex-direction: column;
- padding: 0.75rem;
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
- background-color: ${colors.background};
- `;
-
- return { container };
+ return styles;
};
diff --git a/packages/ui-elements/src/components/Modal/Modal.js b/packages/ui-elements/src/components/Modal/Modal.js
index e9d86b029..99ee42843 100644
--- a/packages/ui-elements/src/components/Modal/Modal.js
+++ b/packages/ui-elements/src/components/Modal/Modal.js
@@ -2,8 +2,9 @@ import React, { forwardRef, useRef, useCallback, useEffect } from 'react';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import { Box } from '../Box';
import { ModalBackdrop } from './ModalBackdrop';
-import { useModalstyles } from './Modal.styles';
+import { getModalstyles } from './Modal.styles';
import ReactPortal from '../../lib/reactPortal';
+import { useTheme } from '../../hooks';
export const Modal = forwardRef(
(
@@ -19,7 +20,8 @@ export const Modal = forwardRef(
) => {
const { classNames, styleOverrides } = useComponentOverrides('Modal');
const backDropRef = useRef(null);
- const styles = useModalstyles();
+ const { theme } = useTheme();
+ const styles = getModalstyles(theme);
const handleClick = useCallback(
(e) => {
diff --git a/packages/ui-elements/src/components/Modal/Modal.styles.js b/packages/ui-elements/src/components/Modal/Modal.styles.js
index 8ef5b11c1..6ee34dad8 100644
--- a/packages/ui-elements/src/components/Modal/Modal.styles.js
+++ b/packages/ui-elements/src/components/Modal/Modal.styles.js
@@ -1,28 +1,29 @@
import { css } from '@emotion/react';
import { alpha } from '../../lib/color';
-import useTheme from '../../hooks/useTheme';
-export const useModalstyles = () => {
- const { theme, colors } = useTheme();
- const main = css`
- position: absolute;
- display: flex;
- display: -ms-flexbox;
- flex-direction: column;
- align-content: stretch;
- justify-content: strech;
- max-height: 90%;
- width: 100%;
- max-width: 600px;
- padding: 0.5rem;
- color: ${colors.foreground};
- background: ${colors.background};
- border-radius: ${theme.schemes.radius};
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- `;
- return { main };
+export const getModalstyles = (theme) => {
+ const styles = {
+ main: css`
+ position: absolute;
+ display: flex;
+ display: -ms-flexbox;
+ flex-direction: column;
+ align-content: stretch;
+ justify-content: strech;
+ max-height: 90%;
+ width: 100%;
+ max-width: 600px;
+ padding: 0.5rem;
+ color: ${theme.colors.foreground};
+ background: ${theme.colors.background};
+ border-radius: ${theme.radius};
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `,
+ };
+
+ return styles;
};
export const ModalContentStyles = {
@@ -33,23 +34,24 @@ export const ModalContentStyles = {
`,
};
-export const useModalBackdropStyles = () => {
- const { theme } = useTheme();
+export const getModalBackdropStyles = (theme) => {
+ const styles = {
+ modalBackdrop: css`
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: ${theme.zIndex?.modal || 1500};
+ background: ${alpha(theme.commonColors.black, 0.5)};
+ width: 100%;
+ height: 100%;
+ `,
+ };
- const modalBackdrop = css`
- position: absolute;
- top: 0;
- right: 0;
- z-index: ${theme.zIndex?.modal || 1500};
- background: ${alpha(theme.schemes.common.black, 0.5)};
- width: 100%;
- height: 100%;
- `;
- return { modalBackdrop };
+ return styles;
};
export const ModalFooterStyles = {
- modalFooter: () => css`
+ modalFooter: css`
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
-webkit-justify-content: end !important;
diff --git a/packages/ui-elements/src/components/Modal/ModalBackdrop.js b/packages/ui-elements/src/components/Modal/ModalBackdrop.js
index f0ff5b817..070d18f68 100644
--- a/packages/ui-elements/src/components/Modal/ModalBackdrop.js
+++ b/packages/ui-elements/src/components/Modal/ModalBackdrop.js
@@ -1,9 +1,11 @@
import React, { forwardRef } from 'react';
import { Box } from '../Box';
-import { useModalBackdropStyles } from './Modal.styles';
+import { getModalBackdropStyles } from './Modal.styles';
+import { useTheme } from '../../hooks';
const ModalBackdrop = forwardRef(({ children, onClick = () => {} }, ref) => {
- const styles = useModalBackdropStyles();
+ const { theme } = useTheme();
+ const styles = getModalBackdropStyles(theme);
return (
diff --git a/packages/ui-elements/src/components/MultiSelect/MultiSelect.js b/packages/ui-elements/src/components/MultiSelect/MultiSelect.js
index 7c0e9dc24..1795db5a4 100644
--- a/packages/ui-elements/src/components/MultiSelect/MultiSelect.js
+++ b/packages/ui-elements/src/components/MultiSelect/MultiSelect.js
@@ -4,7 +4,8 @@ import useComponentOverrides from '../../hooks/useComponentOverrides';
import { Box } from '../Box';
import { Icon } from '../Icon';
import ListBox from '../ListBox/ListBox';
-import useMultiSelectStyles from './MultiSelect.styles';
+import getMultiSelectStyles from './MultiSelect.styles';
+import { useTheme } from '../../hooks';
const MultiSelect = ({
className = '',
@@ -17,7 +18,8 @@ const MultiSelect = ({
...props
}) => {
const { classNames, styleOverrides } = useComponentOverrides('MultiSelect');
- const styles = useMultiSelectStyles();
+ const { theme } = useTheme();
+ const styles = getMultiSelectStyles(theme);
const [internalValue, setInternalValue] = useState([]);
const [isOpen, setIsOpen] = useState(false);
diff --git a/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js b/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js
index bc72d9704..be8ecfa06 100644
--- a/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js
+++ b/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js
@@ -1,9 +1,6 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
-
-const useMultiSelectStyles = () => {
- const { theme, colors } = useTheme();
+const getMultiSelectStyles = (theme) => {
const styles = {
main: css`
display: inline-flex;
@@ -24,21 +21,21 @@ const useMultiSelectStyles = () => {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
- color: ${colors.foreground};
+ color: ${theme.colors.foreground};
border-width: 1px;
- border-color: ${colors.border};
+ border-color: ${theme.colors.border};
border-style: solid;
- border-radius: ${theme.schemes.radius};
- background-color: ${colors.background};
+ border-radius: ${theme.radius};
+ background-color: ${theme.colors.background};
`,
clickStyle: css`
- border-color: ${colors.ring};
+ border-color: ${theme.colors.ring};
`,
disabled: css`
cursor: not-allowed !important;
- color: ${colors.mutedForeground};
+ color: ${theme.colors.mutedForeground};
`,
selectedItemsContainer: css`
@@ -48,7 +45,7 @@ const useMultiSelectStyles = () => {
`,
selectedItems: css`
- background: ${colors.muted};
+ background: ${theme.colors.muted};
padding: 0.2rem;
display: flex;
justify-self: flex-start;
@@ -59,4 +56,4 @@ const useMultiSelectStyles = () => {
return styles;
};
-export default useMultiSelectStyles;
+export default getMultiSelectStyles;
diff --git a/packages/ui-elements/src/components/Popup/Popup.js b/packages/ui-elements/src/components/Popup/Popup.js
index 2d7f18305..f2eaee27f 100644
--- a/packages/ui-elements/src/components/Popup/Popup.js
+++ b/packages/ui-elements/src/components/Popup/Popup.js
@@ -3,9 +3,10 @@ import { css } from '@emotion/react';
import PropTypes from 'prop-types';
import { Box } from '../Box';
import ReactPortal from '../../lib/reactPortal';
-import { usePopupStyles } from './Popup.styles';
+import { getPopupStyles } from './Popup.styles';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import { PopupHeader } from './PopupHeader';
+import { useTheme } from '../../hooks';
const Popup = ({
positionStyles = css`
@@ -25,7 +26,8 @@ const Popup = ({
height = '350px',
}) => {
const { classNames, styleOverrides } = useComponentOverrides('Popup');
- const styles = usePopupStyles();
+ const { theme } = useTheme();
+ const styles = getPopupStyles(theme);
const popupRef = useRef(null);
diff --git a/packages/ui-elements/src/components/Popup/Popup.styles.js b/packages/ui-elements/src/components/Popup/Popup.styles.js
index 0f3eaf840..3f9537318 100644
--- a/packages/ui-elements/src/components/Popup/Popup.styles.js
+++ b/packages/ui-elements/src/components/Popup/Popup.styles.js
@@ -1,19 +1,16 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
import { darken } from '../../lib/color';
-export const usePopupStyles = () => {
- const { theme, colors } = useTheme();
-
+export const getPopupStyles = (theme) => {
const styles = {
popup: (width, height) => css`
display: flex;
flex-direction: column;
z-index: ${theme.zIndex?.modal || 1500};
box-shadow: ${theme.shadows[2]};
- border-radius: ${theme.schemes.radius};
- background: ${colors.background};
- border: 1px solid ${colors.border};
+ border-radius: ${theme.radius};
+ background: ${theme.colors.background};
+ border: 1px solid ${theme.colors.border};
width: ${width};
height: ${height};
`,
@@ -26,13 +23,12 @@ export const usePopupStyles = () => {
return styles;
};
-export const usePopupHeaderStyles = () => {
- const { theme, mode, colors } = useTheme();
+export const getPopupHeaderStyles = ({ theme, mode }) => {
const styles = {
popupHeader: css`
background-color: ${mode === 'light'
- ? darken(colors.background, 0.03)
- : colors.secondary};
+ ? darken(theme.colors.background, 0.03)
+ : theme.colors.secondary};
display: flex;
justify-content: space-between;
@@ -55,12 +51,12 @@ export const usePopupHeaderStyles = () => {
display: flex;
align-items: center;
justify-content: space-around;
- border: 1px solid ${colors.border};
- border-radius: ${theme.schemes.radius};
+ border: 1px solid ${theme.colors.border};
+ border-radius: ${theme.radius};
position: relative;
margin: 0 1rem;
&.focused {
- outline: 1px solid ${colors.ring};
+ outline: 1px solid ${theme.colors.ring};
}
`,
@@ -75,7 +71,7 @@ export const usePopupHeaderStyles = () => {
`,
noInfoIcon: css`
- background: ${colors.background};
+ background: ${theme.colors.background};
padding: 0.125em;
cursor: pointer;
`,
diff --git a/packages/ui-elements/src/components/Popup/PopupHeader.js b/packages/ui-elements/src/components/Popup/PopupHeader.js
index 6bbbe708b..da4498bfe 100644
--- a/packages/ui-elements/src/components/Popup/PopupHeader.js
+++ b/packages/ui-elements/src/components/Popup/PopupHeader.js
@@ -1,11 +1,12 @@
import React, { useRef } from 'react';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import { Box } from '../Box';
-import { usePopupHeaderStyles } from './Popup.styles';
+import { getPopupHeaderStyles } from './Popup.styles';
import Heading from '../Heading/Heading';
import { Icon } from '../Icon';
import { ActionButton } from '../ActionButton';
import { Input } from '../Input';
+import { useTheme } from '../../hooks';
export const PopupHeader = ({
className = '',
@@ -17,7 +18,8 @@ export const PopupHeader = ({
...props
}) => {
const { classNames, styleOverrides } = useComponentOverrides('PopupHeader');
- const styles = usePopupHeaderStyles();
+ const theme = useTheme();
+ const styles = getPopupHeaderStyles(theme);
const {
isSearch = false,
handleInputChange,
diff --git a/packages/ui-elements/src/components/Sidebar/MinimalSidebar.js b/packages/ui-elements/src/components/Sidebar/MinimalSidebar.js
index 6f63a43cb..a229f2a93 100644
--- a/packages/ui-elements/src/components/Sidebar/MinimalSidebar.js
+++ b/packages/ui-elements/src/components/Sidebar/MinimalSidebar.js
@@ -1,9 +1,11 @@
import React from 'react';
import { Box } from '../Box';
-import useSidebarStyles from './Sidebar.styles';
+import { getSidebarStyles } from './Sidebar.styles';
+import { useTheme } from '../../hooks';
const MinimalSidebar = ({ children }) => {
- const styles = useSidebarStyles();
+ const { theme } = useTheme();
+ const styles = getSidebarStyles(theme);
return (
diff --git a/packages/ui-elements/src/components/Sidebar/Sidebar.js b/packages/ui-elements/src/components/Sidebar/Sidebar.js
index 695d640b6..8c8ec7092 100644
--- a/packages/ui-elements/src/components/Sidebar/Sidebar.js
+++ b/packages/ui-elements/src/components/Sidebar/Sidebar.js
@@ -1,7 +1,7 @@
import React from 'react';
import { Box } from '../Box';
-import { useComponentOverrides } from '../../hooks';
-import useSidebarStyles from './Sidebar.styles';
+import { useComponentOverrides, useTheme } from '../../hooks';
+import { getSidebarStyles } from './Sidebar.styles';
import SidebarHeader from './SidebarHeader';
import SidebarContent from './SidebarContent';
import SidebarFooter from './SidebarFooter';
@@ -15,7 +15,8 @@ const Sidebar = ({
footer,
style = {},
}) => {
- const styles = useSidebarStyles();
+ const { theme } = useTheme();
+ const styles = getSidebarStyles(theme);
const { classNames, styleOverrides } = useComponentOverrides('Sidebar');
return (
diff --git a/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js b/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js
index 84617a076..bf7d07ef7 100644
--- a/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js
+++ b/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js
@@ -1,93 +1,81 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
-const useSidebarStyles = () => {
- const { theme, colors } = useTheme();
+export const getSidebarStyles = (theme) => {
+ const styles = {
+ sidebarContainer: css`
+ min-width: 350px;
+ height: 100%;
+ box-shadow: ${theme.shadows[2]};
+ z-index: ${theme.zIndex?.sidebar || 1200};
+ display: flex;
+ flex-direction: column;
+ `,
+ };
- const sidebarContainer = css`
- min-width: 350px;
- height: 100%;
- box-shadow: ${theme.shadows[2]};
- z-index: ${theme.zIndex?.sidebar || 1200};
- display: flex;
- flex-direction: column;
- `;
+ return styles;
+};
- const content = css`
- position: relative;
- display: flex;
- flex-direction: column;
- flex: 1;
- overflow: auto;
- overflow-x: hidden;
- `;
+export const getSidebarContentStyles = (theme) => {
+ const styles = {
+ content: css`
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: auto;
+ overflow-x: hidden;
+ `,
+
+ searchContainer: css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border: 1px solid ${theme.colors.border};
+ padding: 0 0.5rem;
+ border-radius: ${theme.radius};
+ position: relative;
+ margin: 0 1rem 1rem;
+ &.focused {
+ outline: 1px solid ${theme.colors.ring};
+ }
+ `,
+
+ textInput: css`
+ border: none;
+ flex: 1;
+ padding: none;
+ &:focus {
+ outline: none;
+ }
+ `,
- const header = css`
+ noInfoIcon: css`
+ padding: 0.125em;
+ cursor: pointer;
+ `,
+ };
+
+ return styles;
+};
+
+export const SidebarHeaderStyles = {
+ header: css`
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
padding: 1rem;
margin-bottom: 0.5rem;
- `;
+ `,
- const title = css`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 80%;
- `;
-
- const icon = css`
- font-size: 1.25rem;
- `;
-
- const searchContainer = css`
- display: flex;
- align-items: center;
- justify-content: space-between;
- border: 1px solid ${colors.border};
- padding: 0 0.5rem;
- border-radius: ${theme.schemes.radius};
- position: relative;
- margin: 0 1rem 1rem;
- &.focused {
- outline: 1px solid ${colors.ring};
- }
- `;
-
- const textInput = css`
- border: none;
- flex: 1;
- padding: none;
- &:focus {
- outline: none;
- }
- `;
-
- const noInfoIcon = css`
- padding: 0.125em;
- cursor: pointer;
- `;
-
- const titleContainer = css`
+ titleContainer: css`
display: flex;
align-items: center;
flex: 1;
gap: 0.5rem;
- `;
+ `,
- return {
- sidebarContainer,
- content,
- header,
- title,
- icon,
- searchContainer,
- textInput,
- noInfoIcon,
- titleContainer,
- };
+ icon: css`
+ font-size: 1.25rem;
+ `,
};
-
-export default useSidebarStyles;
diff --git a/packages/ui-elements/src/components/Sidebar/SidebarContent.js b/packages/ui-elements/src/components/Sidebar/SidebarContent.js
index 00efa77fa..7e8756f87 100644
--- a/packages/ui-elements/src/components/Sidebar/SidebarContent.js
+++ b/packages/ui-elements/src/components/Sidebar/SidebarContent.js
@@ -2,7 +2,8 @@ import React, { useRef } from 'react';
import { Box } from '../Box';
import { Icon } from '../Icon';
import { Input } from '../Input';
-import useSidebarStyles from './Sidebar.styles';
+import { getSidebarContentStyles } from './Sidebar.styles';
+import { useTheme } from '../../hooks';
const SidebarContent = ({ children, searchProps = {}, style }) => {
const {
@@ -10,8 +11,9 @@ const SidebarContent = ({ children, searchProps = {}, style }) => {
handleInputChange,
placeholder,
} = searchProps || {};
- const styles = useSidebarStyles();
const searchContainerRef = useRef(null);
+ const { theme } = useTheme();
+ const styles = getSidebarContentStyles(theme);
const handleFocus = () => {
if (searchContainerRef.current) {
diff --git a/packages/ui-elements/src/components/Sidebar/SidebarHeader.js b/packages/ui-elements/src/components/Sidebar/SidebarHeader.js
index b383fb20b..6e33f46d4 100644
--- a/packages/ui-elements/src/components/Sidebar/SidebarHeader.js
+++ b/packages/ui-elements/src/components/Sidebar/SidebarHeader.js
@@ -3,26 +3,22 @@ import { Box } from '../Box';
import { Icon } from '../Icon';
import { ActionButton } from '../ActionButton';
import Heading from '../Heading/Heading';
-import useSidebarStyles from './Sidebar.styles';
+import { SidebarHeaderStyles as styles } from './Sidebar.styles';
import { Avatar } from '../Avatar';
-const SidebarHeader = ({ title, iconName, avatarUrl, onClose = () => {} }) => {
- const styles = useSidebarStyles();
-
- return (
-
-
- {iconName && }
- {avatarUrl && }
-
- {title}
-
-
-
-
-
+const SidebarHeader = ({ title, iconName, avatarUrl, onClose = () => {} }) => (
+
+
+ {iconName && }
+ {avatarUrl && }
+
+ {title}
+
- );
-};
+
+
+
+
+);
export default SidebarHeader;
diff --git a/packages/ui-elements/src/components/Skeleton/Skeleton.js b/packages/ui-elements/src/components/Skeleton/Skeleton.js
index 50e686efc..98bb991e3 100644
--- a/packages/ui-elements/src/components/Skeleton/Skeleton.js
+++ b/packages/ui-elements/src/components/Skeleton/Skeleton.js
@@ -1,9 +1,11 @@
import React from 'react';
import { Box } from '../Box';
-import useSkeletonStyles from './Skeleton.styles';
+import getSkeletonStyles from './Skeleton.styles';
+import { useTheme } from '../../hooks';
const Skeleton = ({ variant = 'text', height, width, ...props }) => {
- const styles = useSkeletonStyles();
+ const { theme } = useTheme();
+ const styles = getSkeletonStyles(theme);
return (
{
- const { theme } = useTheme();
- const skeleton = css`
- height: 1.2em;
- animation: ${animation} 1s linear 0s infinite running;
- border-radius: 0.25rem;
- background: ${lighten(theme.schemes.common.black, 2)};
+const getSkeletonStyles = (theme) => {
+ const styles = {
+ skeleton: css`
+ height: 1.2em;
+ animation: ${animation} 1s linear 0s infinite running;
+ border-radius: 0.25rem;
+ background: ${lighten(theme.commonColors.black, 2)};
- &.text {
- height: auto;
- margin-block: none;
- transform: scale(1, 0.6);
- transform-origin: 0 60%;
- }
- &.circle {
- border-radius: 50%;
- }
- `;
+ &.text {
+ height: auto;
+ margin-block: none;
+ transform: scale(1, 0.6);
+ transform-origin: 0 60%;
+ }
+ &.circle {
+ border-radius: 50%;
+ }
+ `,
+ };
- return { skeleton };
+ return styles;
};
-export default useSkeletonStyles;
+export default getSkeletonStyles;
diff --git a/packages/ui-elements/src/components/StaticSelect/StaticSelect.js b/packages/ui-elements/src/components/StaticSelect/StaticSelect.js
index 9ef5d23fd..d3123dfba 100644
--- a/packages/ui-elements/src/components/StaticSelect/StaticSelect.js
+++ b/packages/ui-elements/src/components/StaticSelect/StaticSelect.js
@@ -2,9 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import useComponentOverrides from '../../hooks/useComponentOverrides';
import { Box } from '../Box';
-import useStaticSelectStyles from './StaticSelect.styles';
+import getStaticSelectStyles from './StaticSelect.styles';
import ListBox from '../ListBox/ListBox';
import Icon from '../Icon/Icon';
+import { useTheme } from '../../hooks';
const StaticSelect = ({
className = '',
@@ -17,7 +18,8 @@ const StaticSelect = ({
...props
}) => {
const { classNames, styleOverrides } = useComponentOverrides('StaticSelect');
- const styles = useStaticSelectStyles();
+ const { theme } = useTheme();
+ const styles = getStaticSelectStyles(theme);
const [isOpen, setIsOpen] = useState(false);
const [internalValue, setInternalValue] = useState('');
diff --git a/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js b/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js
index f0767930c..3374417f6 100644
--- a/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js
+++ b/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js
@@ -1,15 +1,13 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
-const useStaticSelectStyles = () => {
- const { theme, colors } = useTheme();
+const getStaticSelectStyles = (theme) => {
const styles = {
main: css`
display: inline-flex;
flex: 1 0 auto;
flex-direction: column;
gap: 0.25rem;
- background-color: ${colors.background};
+ background-color: ${theme.colors.background};
min-width: 8rem;
`,
@@ -24,25 +22,25 @@ const useStaticSelectStyles = () => {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
- color: ${colors.foreground};
+ color: ${theme.colors.foreground};
border-width: 1px;
- border-color: ${colors.border};
+ border-color: ${theme.colors.border};
border-style: solid;
- border-radius: ${theme.schemes.radius};
- background-color: ${colors.background};
+ border-radius: ${theme.radius};
+ background-color: ${theme.colors.background};
`,
clickStyle: css`
- border-color: ${colors.ring};
+ border-color: ${theme.colors.ring};
`,
disabled: css`
cursor: not-allowed !important;
- color: ${colors.mutedForeground};
+ color: ${theme.colors.mutedForeground};
`,
};
return styles;
};
-export default useStaticSelectStyles;
+export default getStaticSelectStyles;
diff --git a/packages/ui-elements/src/components/Throbber/Throbber.js b/packages/ui-elements/src/components/Throbber/Throbber.js
index 9b6116f66..885ef36e5 100644
--- a/packages/ui-elements/src/components/Throbber/Throbber.js
+++ b/packages/ui-elements/src/components/Throbber/Throbber.js
@@ -1,6 +1,7 @@
import React, { forwardRef } from 'react';
-import useThrobberStyles from './Throbber.styles';
+import getThrobberStyles from './Throbber.styles';
import { Box } from '../Box';
+import { useTheme } from '../../hooks';
function Circle({
disabled,
@@ -10,7 +11,8 @@ function Circle({
size,
...props
}) {
- const styles = useThrobberStyles();
+ const { theme } = useTheme();
+ const styles = getThrobberStyles(theme);
return (
{
- const styles = useThrobberStyles();
+ const { theme } = useTheme();
+ const styles = getThrobberStyles(theme);
return (
{Array.from({ length: circleCount || 3 }, (_, iteration) => (
diff --git a/packages/ui-elements/src/components/Throbber/Throbber.styles.js b/packages/ui-elements/src/components/Throbber/Throbber.styles.js
index 1e94a5b0c..28a22583d 100644
--- a/packages/ui-elements/src/components/Throbber/Throbber.styles.js
+++ b/packages/ui-elements/src/components/Throbber/Throbber.styles.js
@@ -1,5 +1,4 @@
import { keyframes, css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
const BounceFrames = keyframes`
0%,
@@ -13,31 +12,32 @@ const BounceFrames = keyframes`
}
`;
-const useThrobberStyles = () => {
- const { colors } = useTheme();
- const circle = (size, circleCount, iteration) => css`
- height: ${size};
- width: ${size};
- margin-inline: 0.125rem;
- animation: ${BounceFrames} 1.4s infinite ease-in-out both;
- border-radius: 100%;
- background-color: ${colors.primary};
- animation-duration: ${circleCount * 0.466}s;
- animation-delay: ${iteration * 0.16}s;
- &.disabled {
- background-color: ${colors.muted};
- }
- &.inherit-color {
- background-color: currentColor;
- }
- `;
+const getThrobberStyles = (theme) => {
+ const styles = {
+ circle: (size, circleCount, iteration) => css`
+ height: ${size};
+ width: ${size};
+ margin-inline: 0.125rem;
+ animation: ${BounceFrames} 1.4s infinite ease-in-out both;
+ border-radius: 100%;
+ background-color: ${theme.colors.primary};
+ animation-duration: ${circleCount * 0.466}s;
+ animation-delay: ${iteration * 0.16}s;
+ &.disabled {
+ background-color: ${theme.colors.muted};
+ }
+ &.inherit-color {
+ background-color: currentColor;
+ }
+ `,
- const throbber = css`display: flex;
+ throbber: css`display: flex;
width: fit-content
margin-block: -0.125rem;
- `;
+ `,
+ };
- return { circle, throbber };
+ return styles;
};
-export default useThrobberStyles;
+export default getThrobberStyles;
diff --git a/packages/ui-elements/src/components/ToastBar/ToastBar.js b/packages/ui-elements/src/components/ToastBar/ToastBar.js
index 190838df4..71ea53a9d 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastBar.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastBar.js
@@ -5,21 +5,23 @@ import useComponentOverrides from '../../hooks/useComponentOverrides';
import { Box } from '../Box';
import { Icon } from '../Icon';
import { ActionButton } from '../ActionButton';
-import { toastbarStyles as styles } from './ToastBar.styles';
+import { getToastbarStyles } from './ToastBar.styles';
import useTheme from '../../hooks/useTheme';
const ToastBar = ({ toast, onClose }) => {
const { type, message, time = 2000 } = toast;
const toastRef = useRef();
- const { theme, colors } = useTheme();
+ const { theme } = useTheme();
const { classNames, styleOverrides } = useComponentOverrides('ToastBar');
+ const styles = getToastbarStyles(theme);
const { iconName, bgColor, color } = useMemo(() => {
const color =
type === 'error'
- ? colors.destructiveForeground
- : colors[`${type}Foreground`];
- const bgColor = type === 'error' ? colors.destructive : colors[type];
+ ? theme.colors.destructiveForeground
+ : theme.colors[`${type}Foreground`];
+ const bgColor =
+ type === 'error' ? theme.colors.destructive : theme.colors[type];
let iconName = 'success';
switch (type) {
@@ -37,7 +39,7 @@ const ToastBar = ({ toast, onClose }) => {
iconName = 'check';
}
return { iconName, color, bgColor };
- }, [colors, type]);
+ }, [theme.colors, type]);
useEffect(() => {
setTimeout(onClose, time);
@@ -46,7 +48,7 @@ const ToastBar = ({ toast, onClose }) => {
return (
diff --git a/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js b/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js
index 731ea006b..cff7dba27 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js
@@ -15,29 +15,36 @@ const animation = keyframes`
}
`;
-export const toastbarStyles = {
- toastbar: (theme, color, bgColor, time) => css`
- display: flex;
- flex-direction: row;
- gap: 1em;
- align-items: center;
- justify-content: space-between;
- width: fit-content;
- max-width: 20rem;
- color: ${color};
- background-color: ${bgColor};
- border-radius: ${theme.schemes.radius};
- padding: 0.75em 1em;
- z-index: ${theme.zIndex?.toastbar || 1600};
- animation: ${animation} ${time}ms ease-in-out forwards;
- `,
+export const getToastbarStyles = (theme) => {
+ const styles = {
+ toastbar: (color, bgColor, time) => css`
+ display: flex;
+ flex-direction: row;
+ gap: 1em;
+ align-items: center;
+ justify-content: space-between;
+ width: fit-content;
+ max-width: 20rem;
+ color: ${color};
+ background-color: ${bgColor};
+ border-radius: ${theme.radius};
+ padding: 0.75em 1em;
+ z-index: ${theme.zIndex?.toastbar || 1600};
+ animation: ${animation} ${time}ms ease-in-out forwards;
+ `,
+ };
+
+ return styles;
};
-export const toastBarContainerStyles = {
- container: (theme) => css`
- position: absolute;
- z-index: ${theme.zIndex?.toastbar || 1600};
- border-radius: ${theme.schemes.radius};
- animation: ${animation} ${2000}ms ease-in-out forwards;
- `,
+export const getToastBarContainerStyles = (theme) => {
+ const styles = {
+ container: css`
+ position: absolute;
+ z-index: ${theme.zIndex?.toastbar || 1600};
+ border-radius: ${theme.radius};
+ animation: ${animation} ${2000}ms ease-in-out forwards;
+ `,
+ };
+ return styles;
};
diff --git a/packages/ui-elements/src/components/ToastBar/ToastContainer.js b/packages/ui-elements/src/components/ToastBar/ToastContainer.js
index 0b5d4681a..d417b6d67 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastContainer.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastContainer.js
@@ -3,11 +3,11 @@ import useTheme from '../../hooks/useTheme';
import ToastContext from '../../context/ToastContext';
import { Box } from '../Box';
import ToastBar from './ToastBar';
-import { toastBarContainerStyles as styles } from './ToastBar.styles';
+import { getToastBarContainerStyles } from './ToastBar.styles';
const ToastContainer = () => {
const { theme } = useTheme();
-
+ const styles = getToastBarContainerStyles(theme);
const { position, toasts, setToasts } = useContext(ToastContext);
const positionStyle = useMemo(() => {
const positions = position.split(/\s+/);
@@ -30,7 +30,7 @@ const ToastContainer = () => {
}
return (
-
+
);
diff --git a/packages/ui-elements/src/components/Tooltip/Tooltip.js b/packages/ui-elements/src/components/Tooltip/Tooltip.js
index 121b36a1d..b4f51bd1b 100644
--- a/packages/ui-elements/src/components/Tooltip/Tooltip.js
+++ b/packages/ui-elements/src/components/Tooltip/Tooltip.js
@@ -1,11 +1,13 @@
import React, { useState } from 'react';
import { css } from '@emotion/react';
import { Box } from '../Box';
-import useToolTipStyles from './Tooltip.styles';
+import getToolTipStyles from './Tooltip.styles';
+import { useTheme } from '../../hooks';
const Tooltip = ({ children, text, position }) => {
const [isTooltipVisible, setTooltipVisible] = useState(false);
- const styles = useToolTipStyles(position);
+ const { theme } = useTheme();
+ const styles = getToolTipStyles(theme, position);
const handleMouseEnter = () => {
setTooltipVisible(true);
diff --git a/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js b/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js
index 8ca69fbf0..824eec5d4 100644
--- a/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js
+++ b/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js
@@ -1,41 +1,41 @@
import { css } from '@emotion/react';
-import useTheme from '../../hooks/useTheme';
-const useTooltipStyles = (position) => {
- const { theme, invertedColors } = useTheme();
- const tooltip = css`
- position: absolute;
- left: 64%;
- transform: translateX(-50%);
- background-color: ${invertedColors.secondary};
- color: ${invertedColors.secondaryForeground};
- padding: 8.5px;
- border-radius: ${theme.schemes.radius};
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
- z-index: ${theme.zIndex?.tooltip || 1400};
- font-size: 12.5px;
- font-weight: 500;
- white-space: nowrap;
- font-family: sans-serif;
- top: ${position === 'top' ? 'calc(-100% - 20px)' : 'calc(100% + 10px)'};
- `;
- const tooltipArrow = css`
- content: '';
- position: absolute;
- left: 50%;
- margin-left: -4px;
- border-width: 6px;
- border-style: solid;
- border-color: ${invertedColors.secondary} transparent transparent
- transparent;
- top: ${position === 'top' ? '100%' : 'auto'};
- bottom: ${position === 'bottom' ? '100%' : 'auto'};
- transform: ${position === 'bottom'
- ? 'translateX(-50%) rotate(180deg)'
- : 'translateX(-50%)'};
- `;
+const getTooltipStyles = (theme, position) => {
+ const styles = {
+ tooltip: css`
+ position: absolute;
+ left: 64%;
+ transform: translateX(-50%);
+ background-color: ${theme.invertedColors.secondary};
+ color: ${theme.invertedColors.secondaryForeground};
+ padding: 8.5px;
+ border-radius: ${theme.radius};
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ z-index: ${theme.zIndex?.tooltip || 1400};
+ font-size: 12.5px;
+ font-weight: 500;
+ white-space: nowrap;
+ font-family: sans-serif;
+ top: ${position === 'top' ? 'calc(-100% - 20px)' : 'calc(100% + 10px)'};
+ `,
+ tooltipArrow: css`
+ content: '';
+ position: absolute;
+ left: 50%;
+ margin-left: -4px;
+ border-width: 6px;
+ border-style: solid;
+ border-color: ${theme.invertedColors.secondary} transparent transparent
+ transparent;
+ top: ${position === 'top' ? '100%' : 'auto'};
+ bottom: ${position === 'bottom' ? '100%' : 'auto'};
+ transform: ${position === 'bottom'
+ ? 'translateX(-50%) rotate(180deg)'
+ : 'translateX(-50%)'};
+ `,
+ };
- return { tooltip, tooltipArrow };
+ return styles;
};
-export default useTooltipStyles;
+export default getTooltipStyles;
diff --git a/packages/ui-elements/src/context/ThemeContextProvider.js b/packages/ui-elements/src/context/ThemeContextProvider.js
index 084a1a9e4..a0bde25a1 100644
--- a/packages/ui-elements/src/context/ThemeContextProvider.js
+++ b/packages/ui-elements/src/context/ThemeContextProvider.js
@@ -13,10 +13,18 @@ export const ThemeProvider = ({
const defaultTheme = initialTheme || DefaultTheme;
const [mode, setMode] = useState(initialMode || 'light');
const [theme, setTheme] = useState(defaultTheme);
-
const colors = theme.schemes?.[mode];
const invertedColors = theme.schemes?.[invertMode(mode)];
+ const modifiedTheme = useMemo(
+ () => ({
+ ...theme,
+ colors,
+ invertedColors,
+ }),
+ [theme, colors, invertedColors]
+ );
+
useEffect(() => {
if (initialTheme) {
setTheme(initialTheme);
@@ -31,14 +39,12 @@ export const ThemeProvider = ({
const value = useMemo(
() => ({
- theme,
+ theme: modifiedTheme,
mode,
- colors,
- invertedColors,
setMode,
setTheme,
}),
- [theme, mode, colors, invertedColors]
+ [modifiedTheme, mode]
);
return (
diff --git a/packages/ui-elements/src/hooks/useTheme.js b/packages/ui-elements/src/hooks/useTheme.js
index 79233dd30..cb7581826 100644
--- a/packages/ui-elements/src/hooks/useTheme.js
+++ b/packages/ui-elements/src/hooks/useTheme.js
@@ -9,15 +9,19 @@ const useTheme = () => {
if (!context) {
const defaultMode = 'light';
- const defaultTheme = DefaultTheme;
- const colors = defaultTheme.schemes?.[defaultMode];
- const invertedColors = defaultTheme.schemes?.[invertMode(defaultMode)];
+ const theme = DefaultTheme;
+ const colors = theme.schemes?.[defaultMode];
+ const invertedColors = theme.schemes?.[invertMode(defaultMode)];
- return {
- theme: defaultTheme,
- mode: defaultMode,
+ const modifiedTheme = {
+ ...theme,
colors,
invertedColors,
+ };
+
+ return {
+ theme: modifiedTheme,
+ mode: defaultMode,
setMode: () => {},
setTheme: () => {},
};
diff --git a/packages/ui-elements/src/theme/DefaultTheme.js b/packages/ui-elements/src/theme/DefaultTheme.js
index 5fa9eb270..2859cd048 100644
--- a/packages/ui-elements/src/theme/DefaultTheme.js
+++ b/packages/ui-elements/src/theme/DefaultTheme.js
@@ -1,10 +1,12 @@
const DefaultTheme = {
+ radius: '0.2rem',
+
+ commonColors: {
+ black: 'hsl(0, 100%, 0%)',
+ white: 'hsl(0, 100%, 100%)',
+ },
+
schemes: {
- radius: '0.2rem',
- common: {
- black: 'hsl(0, 100%, 0%)',
- white: 'hsl(0, 100%, 100%)',
- },
light: {
background: 'hsl(0, 0%, 100%)',
foreground: 'hsl(240, 10%, 3.9%)',