diff --git a/src/App.tsx b/src/App.tsx index bd6d1eb..ca28157 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,8 +7,8 @@ import useAppRoutes from "./routes/app-route"; import { SyncProvider } from "./providers/sync-provider/sync-provider"; import DatabaseProvider from "./providers/database-provider/database-provider"; import DiagramProvider from "./providers/diagram-provider/diagram-provider"; -import { ThemeProvider as NextThemesProvider } from "next-themes"; -import { HeroUIProvider, ToastProvider } from "@heroui/react"; + +import { ToastProvider } from "@heroui/react"; @@ -16,12 +16,9 @@ function App() { const appRoutes = useAppRoutes(); return ( - + <> - + @@ -35,8 +32,8 @@ function App() { - - + + ); } diff --git a/src/i18/index.ts b/src/i18/index.ts index aa8253f..12a3e09 100644 --- a/src/i18/index.ts +++ b/src/i18/index.ts @@ -28,7 +28,7 @@ i18n.use(LanguageDetector) .use(initReactI18next) .init({ resources , - lng: 'ar', + lng: 'en', interpolation: { escapeValue: false, diff --git a/src/index.css b/src/index.css index 591c03a..665d066 100644 --- a/src/index.css +++ b/src/index.css @@ -104,7 +104,7 @@ --color-bg-tree-page: transparent; --color-white: #fff; --check-box-border-color: #373d46; - --color-error: #F92814; + --color-error: #F92814; --color-purple: #7958F0; --color-purple-opacity: rgba(121, 88, 240, 0.1); --color-purple-opacity-half: rgba(121, 88, 240, 0.7); @@ -120,7 +120,152 @@ --modal-content-bg: #1c2026; --modal-mask-bg: rgba(10, 10, 10, 0.7); --color-bg-tooltip: #363a44; + } + .graphite { + --color-primary-opacity: rgba(131, 93, 255, 0.1); + --color-bg-gray: #2b3138; + --color-font-light-hover: rgba(131, 93, 255, 0.7); + --color-bg-light-hover: rgba(131, 93, 255, 0.1); + --color-dashed: #33373f; + --color-bg-page: #20252c; + --color-bg-right: #1c2026; + --color-bg-folder: #282d34; + --header-bg-color: #282d34; + --search-bg-color: #191c21; + --table-header-bg-color: #21262d; + --search-big-bg-color: #171b1f; + --search-big-select-color: #252a32; + --color-bg-folder-hover: #282e37; + --color-deep-gray: #373b45; + --select-hover-color: rgba(131, 93, 255, 0.1); + --form-hover-color: #21252d; + --highlight-change-color: #373c44; + --divider-color: #171b1f; + --color-border: #272c35; + --color-header-border: #272c35; + --color-border-light: #2c2c2c; + --icon-color: #4b515a; + --font-title-color: #ededed; + --font-content-color: #cecfd2; + --font-light-color: rgba(198, 201, 210, 0.45); + --font-pale-color: rgba(198, 201, 210, 0.7); + --box-shadow-modal-color: rgba(0, 0, 0, 0.1); + --line-height: 1.4; + --border-radius: 4px; + --color-primary: #835DFF; + --icon-primary-color: #835DFF; + --selected-border-color: rgba(131, 93, 255, 0.5); + --white-color: #fff; + --popover-select-bg-color: #2d3138; + --popover-select-bg-hover-color: #353940; + --color-bg-tree-page: transparent; + --color-white: #fff; + --check-box-border-color: #373d46; + --color-error: #F92814; + --color-purple: #7958F0; + --color-purple-opacity: rgba(121, 88, 240, 0.1); + --color-purple-opacity-half: rgba(121, 88, 240, 0.7); + --color-success: #26cea4; + --color-warning: #ffb400; + --color-info: #097bed; + --color-error-bg: rgba(249, 40, 20, 0.1); + --color-success-bg: rgba(12, 187, 82, 0.1); + --color-warning-bg: rgba(255, 180, 0, 0.1); + --color-info-bg: rgba(9, 123, 237, 0.1); + --font-size-12: 12px; + --font-size-14: 14px; + --font-size-16: 16px; + --font-size-18: 18px; + --font-size-20: 20px; + --font-size-24: 24px; + --padding8: 8px; + --padding10: 10px; + --padding12: 12px; + --padding14: 14px; + --padding16: 16px; + --padding18: 18px; + --padding20: 20px; + --margin8: 8px; + --margin10: 10px; + --margin12: 12px; + --margin14: 14px; + --margin16: 16px; + --margin18: 18px; + --margin20: 20px; + --scrollbar-thumb-bg-color: #242a31; + --scrollbar-thumb-hover-bg-color: #2f3740; + --modal-content-bg: #1c2026; + --modal-mask-bg: rgba(10, 10, 10, 0.7); + --color-bg-tooltip: #363a44; } } - \ No newline at end of file + + +/* + + + + dark: { + + colors: { + background: { + DEFAULT: "#282a37", + 50: "#222430", + 100: "#1e1f28" + }, + + danger: { + DEFAULT: "#F92814" + }, + font: { + DEFAULT: "#cccdd7" + }, + content1: { + DEFAULT: "#282a37" + }, + default: { + 50: '#f2f3f5', + 100: '#d6d7db', + 200: '#b9bbc1', + 300: '#9d9fa7', + 400: '#80838d', + 500: '#191c21', // base + 600: '#15171b', + 700: '#111316', + 800: '#0d0f11', + 900: '#090b0c', + DEFAULT: '#191c21', + }, + primary: { + DEFAULT: "#835dff", + 50: '#F3F0FF', + 100: '#E3DCFF', + 200: '#C6B8FF', + 300: '#A994FF', + 400: '#8D70FF', + 500: '#835DFF', // Default + 600: '#6C4BD9', + 700: '#563BB3', + 800: '#402C8D', + 900: '#2A1D66' + }, + divider: { + DEFAULT: "#272c35" + }, + icon: { + DEFAULT: "#4b515a" + }, + + success: { + DEFAULT: "#26cea4" + }, + scrollbar: { + DEFAULT: "#242a31", + hover: "#2f3740" + }, + } + }*/ + + + diff --git a/src/lib/colors.ts b/src/lib/colors.ts index ca4d017..4f83ed9 100644 --- a/src/lib/colors.ts +++ b/src/lib/colors.ts @@ -1,52 +1,22 @@ -/* + + export const colorOptions = [ - "#fd7f6f", // Warm coral red - "#7eb0d5", // Soft sky blue - "#b2e061", // Fresh lime green - "#ffb55a", // Vibrant orange - "#ffee65", // Warm yellow - "#beb9db", // Light purple grey - "#fdcce5", // Light blush pink - "#8bd3c7", // Minty teal - "#f4a1a1", // Soft peachy red - "#9bd78c", // Fresh pastel green - "#d1a9e0" // Light lilac purple - - + "#ff6363", // Red + "#FF7A6A", // Red-Orange + "#ff9f74", // Orange + "#FFC84D", // Yellow + "#B6E672", // Lime Green + "#6cdcc4", // Green/Cyan + "#7AD1DD", // Cyan + "#5ba7f3", // Blue + "#8F7FC9", // Softened Indigo + "#BFA0D5", // Softened Violet + "#F7A9CB" // Softened Pink + ]; - - - -export const colorOptions = [ - - "#835dffAA", - "#fa8c16AA", - "#5fe9a0AA", // this one appears as #5f80e9 but you may have meant #5fcba0 or similar - "#61cba0AA", - "#e2578dAA", - "#ec3e3eAA", - "#5bbfd4AA", - "#b49461AA", - "#4971a6AA", - "#9b6065AA" - -] - */ - -export const colorOptions = [ - "#835CFFAA", // Light Hot Magenta - "#26cea4AA", // Light Selective Yellow - "#ffb400AA", // Light Neon Violet - "#097bedAA", // Light Deep Sky Blue - "#F92814AA", // Light Black (Gray) - "#7958F0AA", - "#FF47A5AA" -]; - - export const randomColor = () => { - return colorOptions[Math.floor(Math.random() * colorOptions.length)]; + return colorOptions[Math.floor(Math.random() * colorOptions.length)]; }; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 00a5d52..2be0c1c 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,16 +4,18 @@ import { BrowserRouter } from "react-router-dom"; import App from "./App.tsx"; import { Provider } from "./provider.tsx"; -import "./styles/globals.css" ; +import "./styles/globals.css"; import "./index.css"; -import "./i18/index.ts" ; +import "./i18/index.ts"; ReactDOM.createRoot(document.getElementById("root")!).render( + + , diff --git a/src/pages/database/database-page.tsx b/src/pages/database/database-page.tsx index 1203fa3..ffd6dd4 100644 --- a/src/pages/database/database-page.tsx +++ b/src/pages/database/database-page.tsx @@ -166,13 +166,13 @@ const DatabasePage: React.FC = () => {
-
+
{ /> - +
= ({ }) => { return ( +
} > diff --git a/src/pages/database/db-controller/tables-controller/table-accordion-item/index/index-item.tsx b/src/pages/database/db-controller/tables-controller/table-accordion-item/index/index-item.tsx index 2f90944..1d017cf 100644 --- a/src/pages/database/db-controller/tables-controller/table-accordion-item/index/index-item.tsx +++ b/src/pages/database/db-controller/tables-controller/table-accordion-item/index/index-item.tsx @@ -76,7 +76,7 @@ const IndexItem: React.FC = ({ index, fields }) => { classNames={{ trigger: "border-divider group-hover:border-primary", }} - + onSelectionChange={onInexFieldChange} onOpenChange={openChange} selectedKeys={fieldIndices} @@ -108,12 +108,12 @@ const IndexItem: React.FC = ({ index, fields }) => {
-

+

{t("db_controller.index_setting")}

-
+
-
diff --git a/src/provider.tsx b/src/provider.tsx index 1ce89ab..1599e65 100644 --- a/src/provider.tsx +++ b/src/provider.tsx @@ -2,7 +2,8 @@ import type { NavigateOptions } from "react-router-dom"; import { HeroUIProvider } from "@heroui/system"; import { useHref, useNavigate } from "react-router-dom"; - +import { ThemeProvider as NextThemesProvider } from "next-themes"; + declare module "@react-types/shared" { interface RouterConfig { routerOptions: NavigateOptions; @@ -14,8 +15,14 @@ export function Provider({ children }: { children: React.ReactNode }) { return ( - - {children} + + + {children} + + ); } diff --git a/src/styles/globals.css b/src/styles/globals.css index 299918d..0a60d5b 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -123,4 +123,10 @@ div[data-slot="content"] hr[role="separator"] { svg.text-icon:hover { color : #333639 +} + + + +.dark .bg-background-50 { + background-color: red !important; } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index b3eff86..c1f68b5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -22,25 +22,25 @@ export default { }, themes: { - + dark: { colors: { background: { - DEFAULT: "#282a37", - 50: "#222430", - 100: "#1e1f28" + DEFAULT: "#282d34", + 50: "#20252c", + 100: "#1c2026" }, danger: { DEFAULT: "#F92814" }, font: { - DEFAULT: "#cccdd7" + DEFAULT: "#cecfd2" + }, + content1: { + DEFAULT: "#282d34" }, - content1 : { - DEFAULT : "#282a37" - } , default: { 50: '#f2f3f5', 100: '#d6d7db', @@ -78,8 +78,8 @@ export default { DEFAULT: "#26cea4" }, scrollbar: { - DEFAULT: "#242a31" , - hover : "#2f3740" + DEFAULT: "#242a31", + hover: "#2f3740" }, } }, @@ -102,8 +102,8 @@ export default { DEFAULT: "#26cea4" }, scrollbar: { - DEFAULT: "#eceff2" , - hover : "#dcdfe2" + DEFAULT: "#eceff2", + hover: "#dcdfe2" }, default: { 50: '#f9fafb',