+
@@ -127,8 +149,15 @@ function App() {
{corners.map(({ pos, classes }) => (
handleMouseDown(pos, e)}
- className={`absolute size-10 select-none z-[9999999] ${classes}`}
+ onMouseDown={(e) => handleResizeRadius(pos, e)}
+ className={`absolute h-14 w-9 select-none z-[9999999] ${classes}`}
+ />
+ ))}
+ {centers.map(({ pos, classes }) => (
+ 
- Reset
+
handleResizeOutlineWidth(pos, e)}
+ className={`absolute h-7 w-[200px] select-none z-[9999999] ${classes}`}
/>
))}
@@ -147,10 +176,9 @@ function App() {
onClick={() => {
resetAppearance();
}}
- className="inline-flex text-sm bg-white mobile:hidden font-manrope-medium gap-2 justify-center items-center text-primary border-[#CDCEEE] hover:border-primary transition-all duration-300 border h-12 pl-2 pr-4"
+ className="inline-flex text-sm bg-white dark:bg-darkBg dark:border-darkBorder dark:text-white mobile:hidden font-manrope-medium gap-2 justify-center items-center text-primary border-[#CDCEEE] hover:border-primary transition-all duration-300 border h-12 pl-2 pr-4"
>
-
-
-
+
+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
diff --git a/src/components/CheckBoxItem/index.tsx b/src/components/CheckBoxItem/index.tsx
index 2f5c85c..e112c67 100644
--- a/src/components/CheckBoxItem/index.tsx
+++ b/src/components/CheckBoxItem/index.tsx
@@ -28,7 +28,7 @@ CheckBoxItemProps) => {
(
+
+);
+
+export const SunFilled = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const Moon = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+
+export const MoonFilled = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const Swap = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const Reset = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+
+export const Plus = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const Minus = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const RoundedCorner = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const BorderIcon = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+
+export const FontIcon = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const DragHandle = ({ fill = '#A2A4F6' }: { fill?: string }) => (
+
+);
+export const Copy = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
+export const Code = ({ fill = 'white' }: { fill?: string }) => (
+
+);
+export const Close = ({ fill = '#090B5D' }: { fill?: string }) => (
+
+);
+
+export const DropDown = ({ fill = '#CDCEEE' }: { fill?: string }) => (
+
+);
+export const WhiteCheck = ({ fill = 'white' }: { fill?: string }) => (
+
+);
+export const ExclamationCircle = ({ fill = '#0C1083' }: { fill?: string }) => (
+
+);
diff --git a/src/assets/Logo.tsx b/src/assets/Logo.tsx
index ee62076..55f4494 100644
--- a/src/assets/Logo.tsx
+++ b/src/assets/Logo.tsx
@@ -1,4 +1,4 @@
-const Logo = () => (
+const Logo = ({ fill = '#0D1292' }: { fill?: string }) => (
diff --git a/src/components/ColorBox/index.tsx b/src/components/ColorBox/index.tsx
index 62bd117..0e25c84 100644
--- a/src/components/ColorBox/index.tsx
+++ b/src/components/ColorBox/index.tsx
@@ -28,19 +28,21 @@ const ColorBox = ({
const colorOptions = COLORS[mode][name];
return (
-
-
{name}
+
+
@@ -69,7 +71,8 @@ const ColorBox = ({
>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 2a624e9..a3a76e6 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,5 +1,7 @@
import { useState } from 'react';
import Logo from '../../assets/Logo';
+import { useConfigContext } from '../../hooks/useConfigContext';
+import { Close, Code, Copy } from '../../assets/Icons';
type HeaderProps = {
onOpenCode: () => void;
@@ -15,6 +17,7 @@ const Header = ({
handleCloseCode,
}: HeaderProps) => {
const [copied, setCopied] = useState(false);
+ const { theme } = useConfigContext();
const handleCopyCode = () => {
navigator.clipboard
@@ -27,7 +30,7 @@ const Header = ({
};
return (
-
+ {name} +
+
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 51889e6..236f5e7 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -36,8 +36,10 @@ const Input: React.FC = ({
return (
+
-
{label}
-
+
+ {label}
+
+
{startIcon && (
= ({
type="number"
value={Number.isNaN(value) ? internalValue : value}
placeholder={defaultValue?.toString()}
- className="flex-1 mr-1 font-medium bg-transparent border-none outline-none w-[40%] placeholder:text-primary text-primary"
+ className="flex-1 mr-1 font-medium bg-transparent border-none outline-none w-[40%] dark:placeholder:text-white placeholder:text-primary text-primary dark:text-white"
onChange={handleChange}
/>
{startIcon}
)}
@@ -48,7 +50,7 @@ const Input: React.FCpx
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index fe9b1cb..169db43 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -1,4 +1,6 @@
import { ReactNode, useEffect, useRef, useState } from 'react';
+import { DropDown } from '../../assets/Icons';
+import { useConfigContext } from '../../hooks/useConfigContext';
type SelectProps = {
name: string;
@@ -30,6 +32,8 @@ const Select = ({
() => values.find((v) => v.value === defaultValue?.value) || values[0],
);
+ const { theme } = useConfigContext();
+
useEffect(() => {
if (defaultValue && defaultValue.value !== selected.value) {
const newSelected = values.find((v) => v.value === defaultValue.value);
@@ -61,11 +65,13 @@ const Select = ({
ref={ref}
className="flex items-center justify-between w-full select-none"
>
- {name}
++ {name} +
setIsSelectOpen((prev) => !prev)}
>
+
@@ -81,15 +87,10 @@ const Select = ({
-
+
+
{values.map((item, idx) => {
const isSelected = selected.value === item.value;
return (
@@ -149,12 +150,6 @@ export default Select;
updateAppearance('outlineWidth', item.value);
}}
startItem={
- 
}
/> */
}
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index 36d48a2..5fa45d5 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
// import settings from "/images/settings.svg";
type Tab = {
label: string;
- activeImg: string;
- inActiveImg: string;
+ activeImg: JSX.Element;
+ inActiveImg: JSX.Element;
content: React.ReactNode;
};
@@ -19,7 +19,7 @@ const Tabs = ({ tabs }: TabsProps) => {
return (
}
/> */
}
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index 36d48a2..5fa45d5 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
// import settings from "/images/settings.svg";
type Tab = {
label: string;
- activeImg: string;
- inActiveImg: string;
+ activeImg: JSX.Element;
+ inActiveImg: JSX.Element;
content: React.ReactNode;
};
@@ -19,7 +19,7 @@ const Tabs = ({ tabs }: TabsProps) => {
return (
-
+
-
{
onMouseLeave={() => setHoveredTab(null)}
>
- 
+
{tab.label}
@@ -70,15 +66,10 @@ const Tabs = ({ tabs }: TabsProps) => {
);
})}
+ {isActive || isHovered ? tab.activeImg : tab.inActiveImg}
+
- {/* */}
-
diff --git a/src/components/ToggleCollapse/index.tsx b/src/components/ToggleCollapse/index.tsx
index 5793a80..2ea869b 100644
--- a/src/components/ToggleCollapse/index.tsx
+++ b/src/components/ToggleCollapse/index.tsx
@@ -1,4 +1,6 @@
import { useState, useRef, useLayoutEffect } from 'react';
+import { Minus, Plus } from '../../assets/Icons';
+import { useConfigContext } from '../../hooks/useConfigContext';
type ToggleCollapseProps = {
title?: string;
@@ -14,6 +16,7 @@ const ToggleCollapse = ({
const [isOpen, setIsOpen] = useState(defaultOpen);
const contentRef = useRef(null);
const [height, setHeight] = useState(null);
+ const { theme } = useConfigContext();
const handleCollapse = () => {
setIsOpen((prev) => !prev);
@@ -33,21 +36,12 @@ const ToggleCollapse = ({
id="bluxcc-button"
>
+
{title}
-
- 
- 
+
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 055fa0c..f58ead1 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -5,23 +5,23 @@ export const COLORS = {
fieldBackground: ['#ffffff', '#E5E5EC', '#E4F0E6', '#FFE5E5'] as const,
textColor: ['#000000', '#011122', '#011907', '#260000'] as const,
borderColor: ['#F2F2F7', '#CDCEEE', '#D5DDD6', '#A9A9A9'] as const,
- outlineColor: ['#F2F2F7', '#CDCEEE', '#D5DDD6', '#A9A9A9'] as const,
- },
- random: {
- background: ['#ffffff', '#F2F2F7', '#E5FBFF', '#FFE5E5'] as const,
- accentColor: ['#007AFF', '#FFD60A', '#34C759', '#FF3B30'] as const,
- fieldBackground: ['#ffffff', '#E5E5EC', '#E4F0E6', '#FFE5E5'] as const,
- textColor: ['#000000', '#011122', '#011907', '#260000'] as const,
- borderColor: ['#F2F2F7', '#CDCEEE', '#D5DDD6', '#A9A9A9'] as const,
- outlineColor: ['#F2F2F7', '#CDCEEE', '#D5DDD6', '#A9A9A9'] as const,
+ outlineColor: ['#B0C8E8', '#D9C178', '#B8D5C6', '#E0B6B6'] as const,
},
dark: {
background: ['#000000', '#100930', '#441213', '#093018'] as const,
- accentColor: ['#FFD60A', '#0A84FF', '#FF375F', '#30D158'] as const,
- fieldBackground: ['#000000', '#050115', '#2C0707', '#02160A'] as const,
+ accentColor: ['#0A84FF', '#FFD60A', '#30D158', '#FF375F'] as const,
+ fieldBackground: ['#1a1a1a', '#050115', '#2C0707', '#02160A'] as const,
textColor: ['#FFFFFF', '#EFEBFF', '#FFEAEB', '#DEFFE6'] as const,
borderColor: ['#333333', '#2E1D74', '#572424', '#10552C'] as const,
- outlineColor: ['#333333', '#2E1D74', '#572424', '#10552C'] as const,
+ outlineColor: ['#3A4A66', '#4A3F6B', '#3C4B42', '#4A3C3C'] as const,
+ },
+ random: {
+ background: ['#FFFFFF', '#FFF9F2', '#E5FBFF', '#FFF2F2'] as const,
+ accentColor: ['#007AFF', '#FFD60A', '#34C759', '#FF3B30'] as const,
+ fieldBackground: ['#F7F7FA', '#FFF6D6', '#EAF9F0', '#FFEDEE'] as const,
+ textColor: ['#0B1220', '#3A2F00', '#042A1E', '#2A0A0A'] as const,
+ borderColor: ['#E6E9F2', '#FFE9A8', '#CFEFE0', '#FFD6D6'] as const,
+ outlineColor: ['#007AFF', '#FFB800', '#2FA94C', '#D32B20'] as const,
},
};
@@ -81,3 +81,26 @@ export const corners = [
borders: { bottom: true, right: true },
},
];
+
+export const centers = [
+ {
+ pos: 'top-center',
+ classes: '-top-0 left-1/2 -translate-x-1/2 cursor-n-resize',
+ borders: { top: true },
+ },
+ {
+ pos: 'bottom-center',
+ classes: '-bottom-0 left-1/2 -translate-x-1/2 cursor-n-resize',
+ borders: { bottom: true },
+ },
+ {
+ pos: 'left-center',
+ classes: '-left-[85px] top-1/2 -translate-y-1/2 cursor-e-resize rotate-90',
+ borders: { left: true },
+ },
+ {
+ pos: 'right-center',
+ classes: '-right-[85px] top-1/2 -translate-y-1/2 cursor-e-resize rotate-90',
+ borders: { right: true },
+ },
+];
diff --git a/src/containers/tabsContainer/Auth/SortableItem.tsx b/src/containers/tabsContainer/Auth/SortableItem.tsx
index 491166f..e9f3285 100644
--- a/src/containers/tabsContainer/Auth/SortableItem.tsx
+++ b/src/containers/tabsContainer/Auth/SortableItem.tsx
@@ -1,5 +1,7 @@
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
+import { DragHandle } from '../../../assets/Icons';
+import { useConfigContext } from '../../../hooks/useConfigContext';
type SortableItemProps = {
id: string;
@@ -8,6 +10,7 @@ type SortableItemProps = {
};
const SortableItem = ({ id, title, children }: SortableItemProps) => {
+ const { theme } = useConfigContext();
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id });
@@ -25,11 +28,10 @@ const SortableItem = ({ id, title, children }: SortableItemProps) => {
className="flex flex-col pointer-events-auto cursor-grab"
>
-
-
+
+ {isOpen ? (
+
+
+
+
{title && title}
{
return (
-
+
{
))}
{index !== sections.length - 1 && (
-
+
)}
))}
-
+
{
const [, setSelectedFeatures] = useState([
- "Send",
- "Swap",
- "Receive",
- "History",
- "Balances",
+ 'Send',
+ 'Swap',
+ 'Receive',
+ 'History',
+ 'Balances',
]);
const handleFeatureChange = (title: string, checked: boolean) => {
setSelectedFeatures((prev) =>
- checked ? [...prev, title] : prev.filter((item) => item !== title)
+ checked ? [...prev, title] : prev.filter((item) => item !== title),
);
};
return (
-
Login Methods
+
)}
+
+
-
Features
-
+
{
- Profile
-
+
+
{
- const { appearance, updateAppearance, theme, setTheme } = useConfigContext();
+ const { appearance, updateAppearance, theme, setTheme, setCustomLogo } =
+ useConfigContext();
const [logoInputValue, setLogoInputValue] = useState('');
const handleUpdateLogo = () => {
+ setCustomLogo(logoInputValue);
updateAppearance('logo', logoInputValue);
};
@@ -26,16 +33,32 @@ const Style = () => {
};
const themes = [
- { name: 'light', logo: sun, activeLogo: sunFilled },
- { name: 'dark', logo: moon, activeLogo: moonFilled },
+ {
+ name: 'light',
+ logo:
+
+
+
{
-
+
Style
-
- Theme
+Theme
{themes.map((m) => (
))}
+
+
-
+
-
+
-
+
)}
- Font family
++ Font family +
{[
{ name: 'Manrope', value: 'Manrope', class: 'font-manrope' },
@@ -144,7 +163,7 @@ const Style = () => {
- +
@@ -154,12 +173,7 @@ const Style = () => {
maxValue={3}
minValue={1}
startIcon={
-
+ 
+
+
+ +
@@ -195,12 +204,7 @@ const Style = () => {
value={parseInt(appearance.outlineWidth ?? '0')}
maxValue={6}
startIcon={
-
+
+
+ +
@@ -238,7 +237,7 @@ const Style = () => {
style={{
background: appearance.background,
}}
- className="flex border border-dashed border-lightPurple overflow-hidden p-2 max-h-[36px] max-w-[150px]"
+ className="flex border border-dashed border-lightPurple dark:border-darkBorder overflow-hidden p-2 max-h-[36px] max-w-[150px]"
>
{
+ 
}
/> */
}
diff --git a/src/containers/tabsContainer/index.tsx b/src/containers/tabsContainer/index.tsx
index 3048882..11ec56d 100644
--- a/src/containers/tabsContainer/index.tsx
+++ b/src/containers/tabsContainer/index.tsx
@@ -1,39 +1,44 @@
-import Tabs from "../../components/Tabs";
-
-// inActive assets
-import auth from "/images/tabs/inActive/auth.svg";
-import palette from "/images/tabs/inActive/palette.svg";
-// import puzzle from "/images/tabs/inActive/puzzle.svg";
-
-// active assets
-import activeAuth from "/images/tabs/active/auth.svg";
-// import activePuzzle from "/images/tabs/active/puzzle.svg";
-import activePalette from "/images/tabs/active/palette.svg";
+import Tabs from '../../components/Tabs';
// pages
-import Auth from "./Auth";
+import Auth from './Auth';
+import Style from './Style';
// import Features from "./Features";
-import Style from "./Style";
+import {
+ ActiveAuth,
+ ActivePalette,
+ InActiveAuth,
+ InActivePalette,
+} from '../../assets/TabsIcon';
+import { useConfigContext } from '../../hooks/useConfigContext';
const TabsContainer = () => {
+ const { theme } = useConfigContext();
+
const tabsContent = [
{
- label: "Auth",
- inActiveImg: auth,
- activeImg: activeAuth,
+ label: 'Auth',
+ inActiveImg: (
+ (defaultLightTheme);
const [loginMethods, setLoginMethods] = useState(['wallet']);
@@ -27,8 +29,18 @@ export const ConfigProvider = ({ children }: { children: ReactNode }) => {
logo: '/images/blux.svg',
});
setTheme('light');
+ setCustomLogo('');
};
+ useEffect(() => {
+ if (!customLogo) {
+ setAppearance((prev) => ({
+ ...prev,
+ logo: handleLogoColor(prev.background),
+ }));
+ }
+ }, [customLogo, appearance.background, setAppearance]);
+
const updateLoginMethods = (methods: LoginMethodType) => {
setLoginMethods(methods);
};
@@ -38,6 +50,8 @@ export const ConfigProvider = ({ children }: { children: ReactNode }) => {
value={{
height,
setHeight,
+ customLogo,
+ setCustomLogo,
theme,
setTheme,
appearance,
diff --git a/src/hooks/useCornerResize.tsx b/src/hooks/useCornerResize.tsx
index e31f158..557a4b1 100644
--- a/src/hooks/useCornerResize.tsx
+++ b/src/hooks/useCornerResize.tsx
@@ -47,11 +47,11 @@ export const useCornerResize = (
};
}, [resizingCorner, startPos, min, max]);
- const handleMouseDown = (corner: string, e: React.MouseEvent) => {
+ const handleResizeRadius = (corner: string, e: React.MouseEvent) => {
e.stopPropagation();
setResizingCorner(corner);
setStartPos({ x: e.clientX, y: e.clientY });
};
- return { radius, handleMouseDown };
+ return { radius, handleResizeRadius };
};
diff --git a/src/hooks/useOutlineResize.tsx b/src/hooks/useOutlineResize.tsx
new file mode 100644
index 0000000..562463d
--- /dev/null
+++ b/src/hooks/useOutlineResize.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+
+export const useOutlineResize = (
+ initialWidth: number = 1,
+ min: number = 0,
+ max: number = 6,
+) => {
+ const [width, setWidth] = useState(initialWidth);
+ const [activeHandle, setActiveHandle] = useState(null);
+ const [startPos, setStartPos] = useState<{ x: number; y: number } | null>(
+ null,
+ );
+
+ useEffect(() => {
+ if (!activeHandle || !startPos) return;
+
+ const handleMove = (e: MouseEvent) => {
+ const dx = e.clientX - startPos.x;
+ const dy = e.clientY - startPos.y;
+ let delta = 0;
+
+ if (activeHandle.includes('center')) {
+ switch (activeHandle) {
+ case 'top-center':
+ delta = -dy / 10;
+ break;
+ case 'bottom-center':
+ delta = dy / 10;
+ break;
+ case 'left-center':
+ delta = -dx / 10;
+ break;
+ case 'right-center':
+ delta = dx / 10;
+ break;
+ }
+ } else {
+ const dist = Math.sqrt(dx * dx + dy * dy);
+ const inward =
+ (activeHandle.includes('top') && dy > 0) ||
+ (activeHandle.includes('bottom') && dy < 0) ||
+ (activeHandle.includes('left') && dx > 0) ||
+ (activeHandle.includes('right') && dx < 0);
+
+ delta = inward ? dist / 8 : -dist / 8;
+ }
+
+ setWidth((prev) => Math.max(min, Math.min(max, prev + delta)));
+ setStartPos({ x: e.clientX, y: e.clientY });
+ };
+
+ const handleUp = () => {
+ setActiveHandle(null);
+ setStartPos(null);
+ };
+
+ window.addEventListener('mousemove', handleMove);
+ window.addEventListener('mouseup', handleUp);
+ return () => {
+ window.removeEventListener('mousemove', handleMove);
+ window.removeEventListener('mouseup', handleUp);
+ };
+ }, [activeHandle, startPos, min, max]);
+
+ const handleResizeOutlineWidth = (pos: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ setActiveHandle(pos);
+ setStartPos({ x: e.clientX, y: e.clientY });
+ };
+
+ return { width, handleResizeOutlineWidth };
+};
diff --git a/src/style/index.css b/src/style/index.css
index fe54df9..4ffe35b 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -2,6 +2,14 @@
@tailwind components;
@tailwind utilities;
+body {
+ @apply bg-white;
+}
+
+.dark body {
+ @apply bg-darkBg;
+}
+
/* Utility classes */
.center {
display: flex;
diff --git a/src/utils/handleLogoColor.tsx b/src/utils/handleLogoColor.tsx
new file mode 100644
index 0000000..64550d4
--- /dev/null
+++ b/src/utils/handleLogoColor.tsx
@@ -0,0 +1,7 @@
+import { isDarkBackground } from './randomTheme';
+
+export const handleLogoColor = (backgroundColor: string) => {
+ return isDarkBackground(backgroundColor)
+ ? '/images/whiteBluxLogo.svg'
+ : '/images/blux.svg';
+};
diff --git a/src/utils/randomTheme.tsx b/src/utils/randomTheme.tsx
index eea6cf7..50b51a2 100644
--- a/src/utils/randomTheme.tsx
+++ b/src/utils/randomTheme.tsx
@@ -6,10 +6,8 @@ const randomFrom = (arr: T[]) =>
const randomPx = (min: number, max: number) =>
`${Math.floor(Math.random() * (max - min + 1) + min)}px`;
-const randomFont = () => {
- const fonts = ['Manrope', 'JetbrainsMono', 'Playfair', 'ComicNeue'];
- return randomFrom(fonts);
-};
+const randomFont = () =>
+ randomFrom(['Manrope', 'JetbrainsMono', 'Playfair', 'ComicNeue']);
const randomHex = (min: number, max: number) => {
const r = Math.floor(Math.random() * (max - min) + min);
@@ -18,18 +16,23 @@ const randomHex = (min: number, max: number) => {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
};
-const getContrastColor = (hex: string) => {
- const c = hex.substring(1);
- const rgb = parseInt(c, 16);
- const r = (rgb >> 16) & 0xff;
- const g = (rgb >> 8) & 0xff;
- const b = rgb & 0xff;
- const brightness = (r * 299 + g * 587 + b * 114) / 1000;
- return brightness > 128 ? '#111111' : '#ffffff';
+export const isDarkBackground = (hex: string): boolean => {
+ const c = hex.replace('#', '');
+ const r = parseInt(c.substring(0, 2), 16);
+ const g = parseInt(c.substring(2, 4), 16);
+ const b = parseInt(c.substring(4, 6), 16);
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+ return luminance < 0.5;
};
-export const generateRandomTheme = (): IAppearance => {
- const isDark = Math.random() < 0.5;
+const getContrastColor = (hex: string) =>
+ isDarkBackground(hex) ? '#ffffff' : '#111111';
+
+export const generateRandomTheme = (
+ logo: string,
+ baseTheme: 'light' | 'dark' = 'light',
+): IAppearance => {
+ const isDark = baseTheme === 'dark';
const background = isDark ? randomHex(10, 60) : randomHex(220, 255);
const fieldBackground = isDark ? randomHex(20, 70) : randomHex(240, 255);
@@ -40,7 +43,7 @@ export const generateRandomTheme = (): IAppearance => {
const backdropColor = `${borderColor}33`;
return {
- logo: '',
+ logo: logo,
fontFamily: randomFont(),
textColor,
accentColor,
diff --git a/tailwind.config.js b/tailwind.config.js
index d79d765..cde7526 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
+ darkMode: 'class', // <--- add this line
content: ['./src/**/*.{js,jsx,ts,tsx,css}'],
theme: {
extend: {
@@ -11,10 +12,17 @@ export default {
jetbrainsMono: ['JetBrainsMono', 'monospace'],
},
colors: {
+ white: '#ffffff',
primary: '#0D1292',
primaryDark: '#04062F',
lightPurple: '#CDCEEE',
lightGray: '#F8F9FA',
+ // Add dark theme variants
+ darkBg: '#000',
+ darkGray: '#0F0F0F',
+ darkBorder: '#333333',
+ darkField: '#1A1A1A',
+ darkFieldGray: '#121212',
},
screens: {
short: { raw: '(min-width: 1024px) and (max-height: 820px)' },
setLogoInputValue(e.target.value)}
placeholder="Paste your logo link here"
- className="focus:outline-none placeholder:text-[#4D4D4D]"
+ className="focus:outline-none placeholder:text-[#4D4D4D] bg-transparent"
/>
-
- 
+
@@ -300,7 +294,6 @@ export default Style;
updateAppearance('fontFamily', item.value);
}}
startItem={
-
+
+
}
/> */
}
diff --git a/src/containers/tabsContainer/index.tsx b/src/containers/tabsContainer/index.tsx
index 3048882..11ec56d 100644
--- a/src/containers/tabsContainer/index.tsx
+++ b/src/containers/tabsContainer/index.tsx
@@ -1,39 +1,44 @@
-import Tabs from "../../components/Tabs";
-
-// inActive assets
-import auth from "/images/tabs/inActive/auth.svg";
-import palette from "/images/tabs/inActive/palette.svg";
-// import puzzle from "/images/tabs/inActive/puzzle.svg";
-
-// active assets
-import activeAuth from "/images/tabs/active/auth.svg";
-// import activePuzzle from "/images/tabs/active/puzzle.svg";
-import activePalette from "/images/tabs/active/palette.svg";
+import Tabs from '../../components/Tabs';
// pages
-import Auth from "./Auth";
+import Auth from './Auth';
+import Style from './Style';
// import Features from "./Features";
-import Style from "./Style";
+import {
+ ActiveAuth,
+ ActivePalette,
+ InActiveAuth,
+ InActivePalette,
+} from '../../assets/TabsIcon';
+import { useConfigContext } from '../../hooks/useConfigContext';
const TabsContainer = () => {
+ const { theme } = useConfigContext();
+
const tabsContent = [
{
- label: "Auth",
- inActiveImg: auth,
- activeImg: activeAuth,
+ label: 'Auth',
+ inActiveImg: (
+