Improved UI for color options panel in custom themes modal

frontend/ee

@@ -1 +1 @@
-Subproject commit 518f3334b12a83785fd37dd53b0245d72848211a
+Subproject commit f0b779a68ec8a5d40ba78c342df4b98eb507a858

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;

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} />;
   }

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"

frontend/src/components/ui/Input/Input.jsx

@@ -19,7 +19,7 @@ const Input = React.forwardRef(({ className, size, type, ...props }, ref) => {
         type={isPasswordField && isPasswordVisible ? 'text' : type}
         className={cn(
           inputVariants({ size }),
-          `tw-relative tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
+          `tw-peer tw-flex tw-text-[12px]/[18px] tw-w-full tw-rounded-[8px] tw-border-[1px] tw-border-solid tw-bg-background-surface-layer-01 tw-py-[7px] tw-text-text-default focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-border-accent-strong focus-visible:tw-ring-offset-border-accent-strong focus-visible:tw-border-transparent disabled:tw-cursor-not-allowed ${props.styles}`,
           className
         )}
         ref={ref}