Merge pull request #12806 from ToolJet/fix/custom-themes-ui

Fix: Custom Themes UI in Workspace Settings
2026-05-24 09:28:31 +00:00 · 2025-05-16 18:02:45 +05:30 · 2025-05-16 18:02:45 +05:30 · 0ae9f5f66f
commit 0ae9f5f66f
parent 77bf79f1c2 1581552a71
7 changed files with 101 additions and 21 deletions
--- a/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
+++ b/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
@ -191,7 +191,7 @@ export const RadioButtonV2 = ({
        data-cy={`label-${String(componentName).toLowerCase()} `}
        data-disabled={isDisabled}
        id={String(componentName)}
-        className={cx('radio-button,', 'd-flex', {
+        className={cx('radio-button', 'd-flex', {
          [alignment === 'top' &&
          ((labelWidth != 0 && label?.length != 0) ||
            (labelAutoWidth && labelWidth == 0 && label && label?.length != 0))
@ -279,7 +279,7 @@ export const RadioButtonV2 = ({
        </div>
      </div>
      <div
-        className={`${isValid ? '' : visibility ? 'd-flex' : 'none'}`}
+        className={`${isValid ? 'd-none' : visibility ? 'd-flex' : 'd-none'}`}
        style={{
          color: 'var(--status-error-strong)',
          justifyContent: direction === 'right' ? 'flex-start' : 'flex-end',
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@ -10715,6 +10715,10 @@ tbody {
  width: 660px;
 }

+.org-users-page-animation-fade {
+  height: 100%;
+}
+
 .org-users-page {
  .nav-tabs .nav-link.active {
    background-color: transparent !important;
@ -10881,6 +10885,25 @@ tbody {
  }
 }

+.default-group-wrap-small {
+  gap: 4px;
+  width: 121px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--indigo3);
+  border-radius: 6px;
+  padding: 5px 10px;
+  
+  p {
+    font-weight: 500 !important;
+    line-height: 18px !important;
+    color: var(--indigo9);
+    font-family: 'IBM Plex Sans', sans-serif;
+  }
+}
+
 .sso-icon-wrapper {
  display: flex;
  flex-direction: row;
--- a/frontend/src/_ui/Icon/solidIcons/Moon.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Moon.jsx
@ -0,0 +1,23 @@
+import React from 'react';
+
+const Moon = ({ fill = '#6A727C', width = '24', className = '', viewBox = '0 0 24 24' }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox={viewBox}
+      className={className}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.107 6.64283C15.6139 6.64283 15.2142 6.24309 15.2142 5.74998V5.21426H14.6785C14.1854 5.21426 13.7856 4.81452 13.7856 4.32141C13.7856 3.8283 14.1854 3.42856 14.6785 3.42856H15.2142V2.89285C15.2142 2.39974 15.6139 2 16.107 2C16.6002 2 16.9999 2.39974 16.9999 2.89285V3.42856H17.5356C18.0288 3.42856 18.4285 3.8283 18.4285 4.32141C18.4285 4.81452 18.0288 5.21426 17.5356 5.21426H16.9999V5.74998C16.9999 6.24309 16.6002 6.64283 16.107 6.64283ZM18.7856 11.4642C18.7856 11.9573 19.1853 12.3571 19.6785 12.3571C20.1716 12.3571 20.5713 11.9573 20.5713 11.4642V10.9285H21.107C21.6002 10.9285 21.9999 10.5288 21.9999 10.0357C21.9999 9.54255 21.6002 9.14281 21.107 9.14281H20.5713V8.6071C20.5713 8.11399 20.1716 7.71425 19.6785 7.71425C19.1853 7.71425 18.7856 8.11399 18.7856 8.6071V9.14281H18.2499C17.7568 9.14281 17.357 9.54255 17.357 10.0357C17.357 10.5288 17.7568 10.9285 18.2499 10.9285H18.7856V11.4642ZM6.07263 6.07373C7.96356 4.98201 10.1187 4.74735 12.1075 5.23996C12.7387 5.39633 12.9939 5.95217 12.9996 6.40209C13.0051 6.8352 12.7967 7.33059 12.3328 7.59845C10.4674 8.67541 9.82636 11.1468 10.9769 13.1396C12.1274 15.1324 14.5883 15.8129 16.4536 14.736C16.9176 14.4681 17.4508 14.5354 17.8232 14.7567C18.2099 14.9866 18.5637 15.4855 18.3835 16.1103C17.8158 18.0789 16.5349 19.828 14.644 20.9197C10.6598 23.2201 5.53735 21.7172 3.18302 17.6395C0.828705 13.5616 2.08841 8.37403 6.07263 6.07373Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default Moon;
--- a/frontend/src/_ui/Icon/solidIcons/index.js
+++ b/frontend/src/_ui/Icon/solidIcons/index.js
@ -234,6 +234,7 @@ import NewTabSmall from './NewTabSmall.jsx';
 import Code from './Code.jsx';
 import WorkflowV3 from './WorkflowV3.jsx';
 import WorkspaceV3 from './WorkspaceV3.jsx';
+import Moon from './Moon.jsx';

 const Icon = (props) => {
  switch (props.name) {
@ -707,6 +708,8 @@ const Icon = (props) => {
      return <AICrown {...props} />;
    case 'play01':
      return <Play01 {...props} />;
+    case 'moon':
+      return <Moon {...props} />;
    default:
      return <Apps {...props} />;
  }
--- a/frontend/src/components/ui/Input/EditableTitleInput/Index.jsx
+++ b/frontend/src/components/ui/Input/EditableTitleInput/Index.jsx
@ -4,7 +4,7 @@ import { Input } from '../Input';
 import { HelperMessage, ValidationMessage } from '../InputUtils/InputUtils';
 import Tooltip from '../../Tooltip/Tooltip';

-const EditableTitleInput = ({ size, disabled, helperText, onChange, ...restProps }) => {
+const EditableTitleInput = ({ size, disabled, helperText, onChange: change, readOnly, placeholder, ...restProps }) => {
  const inputRef = useRef(null);
  const [tooltipWidth, setTooltipWidth] = useState('auto');
  const [isValid, setIsValid] = useState(null);
@ -17,7 +17,7 @@ const EditableTitleInput = ({ size, disabled, helperText, onChange, ...restProps
      setIsValid(validateObj.valid);
      setMessage(validateObj.message);
    }
-    onChange(e, validateObj);
+    change(e, validateObj);
  };

  const inputStyle = `tw-border-transparent hover:tw-border-border-default tw-font-medium tw-pl-[12px] tw-pr-[12px] ${
@ -35,7 +35,14 @@ const EditableTitleInput = ({ size, disabled, helperText, onChange, ...restProps
  return (
    <div className="tw-relative">
      <div className="tw-peer tw-relative" ref={inputRef}>
-        <Input size={size} disabled={disabled} onChange={handleChange} {...restProps} className={inputStyle} />
+        <Input
+          size={size}
+          disabled={disabled}
+          placeholder={disabled && readOnly ? readOnly : placeholder}
+          onChange={handleChange}
+          {...restProps}
+          className={inputStyle}
+        />
        <SolidIcon
          name="editable"
          width="16px"
--- a/server/src/modules/organization-themes/constants/index.ts
+++ b/server/src/modules/organization-themes/constants/index.ts
@ -31,11 +31,11 @@ export const TJDefaultTheme: Definition = {
        light: '#1B1F24',
        dark: '#CFD3D8',
      },
-      secondary: {
+      placeholder: {
        light: '#6A727C',
        dark: '#858C94',
      },
-      tertiary: {
+      disabled: {
        light: '#ACB2B9',
        dark: '#545B64',
      },
@ -48,15 +48,15 @@ export const TJDefaultTheme: Definition = {
      large: 0,
    },
    colors: {
-      primary: {
+      default: {
        light: '#CCD1D5',
        dark: '#3C434B',
      },
-      secondary: {
+      weak: {
        light: '#E4E7EB',
        dark: '#EEF0F1',
      },
-      tertiary: {
+      disabled: {
        light: '#E4E7EB',
        dark: '#F6F8FA',
      },
@ -64,15 +64,15 @@ export const TJDefaultTheme: Definition = {
  },
  systemStatus: {
    colors: {
-      primary: {
+      success: {
        light: '#1E823B',
        dark: '#318344',
      },
-      secondary: {
+      error: {
        light: '#D72D39',
        dark: '#D03F43',
      },
-      tertiary: {
+      warning: {
        light: '#BF4F03',
        dark: '#BA5722',
      },
@ -84,6 +84,18 @@ export const TJDefaultTheme: Definition = {
        light: '#F6F6F6',
        dark: '#121518',
      },
+      surface1: {
+        light: '#FFFFFF',
+        dark: '#1E2226',
+      },
+      surface2: {
+        light: '#F6F8FA',
+        dark: '#2B3036',
+      },
+      surface3: {
+        light: '#E4E7EB',
+        dark: '#3C434B',
+      },
    },
  },
 };
--- a/server/src/modules/organization-themes/dto/index.ts
+++ b/server/src/modules/organization-themes/dto/index.ts
@ -33,12 +33,12 @@ class TextColors {
  @IsOptional()
  @ValidateNested()
  @Type(() => Color)
-  secondary?: Color;
+  placeholder?: Color;

  @IsOptional()
  @ValidateNested()
  @Type(() => Color)
-  tertiary?: Color;
+  disabled?: Color;
 }

 class Text {
@ -64,17 +64,17 @@ class BorderRadius {
 class BorderColors {
  @ValidateNested()
  @Type(() => Color)
-  primary: Color;
+  default: Color;

  @IsOptional()
  @ValidateNested()
  @Type(() => Color)
-  secondary?: Color;
+  weak?: Color;

  @IsOptional()
  @ValidateNested()
  @Type(() => Color)
-  tertiary?: Color;
+  disabled?: Color;
 }

 class Border {
@ -90,17 +90,17 @@ class Border {
 class SystemStatusColors {
  @ValidateNested()
  @Type(() => Color)
-  primary: Color;
+  success: Color;

  @IsOptional()
  @ValidateNested()
  @Type(() => Color)
-  secondary?: Color;
+  error?: Color;

  @IsOptional()
  @ValidateNested()
  @Type(() => Color)
-  tertiary?: Color;
+  warning?: Color;
 }

 class SystemStatus {
@ -121,6 +121,18 @@ class SurfaceColors {
  @ValidateNested()
  @Type(() => AppBackgroundColor)
  appBackground: AppBackgroundColor;
+
+  @ValidateNested()
+  @Type(() => Color)
+  surface1: Color;
+
+  @ValidateNested()
+  @Type(() => Color)
+  surface2: Color;
+
+  @ValidateNested()
+  @Type(() => Color)
+  surface3: Color;
 }

 class Surface {