gsadmin/stackrender
1
0
Fork 0
mirror of https://github.com/stackrender/stackrender.git synced 2026-09-10 03:05:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

update colors and improve dark theme

Browse Source
This commit is contained in:
KarimTamani
2025-05-31 18:03:55 +01:00
parent fdb168bfdd
commit a9a0f9e19d
11 changed files with 217 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+6 -9
View File
@@ -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 (
<HeroUIProvider>
<>
<ToastProvider placement="bottom-right"/>
<NextThemesProvider
defaultTheme='system'
attribute='class'
>
<SyncProvider>
<ReactFlowProvider>
<DatabaseProvider>
@@ -35,8 +32,8 @@ function App() {
</DatabaseProvider>
</ReactFlowProvider>
</SyncProvider>
</NextThemesProvider>
</HeroUIProvider>
</>
);
}
src/i18/index.ts
+1 -1
View File
@@ -28,7 +28,7 @@ i18n.use(LanguageDetector)
.use(initReactI18next)
.init({
resources ,
lng: 'ar',
lng: 'en',
interpolation: {
escapeValue: false,
src/index.css
+147 -2
View File
@@ -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;
}
}
/*
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"
},
}
}*/
src/lib/colors.ts
+15 -45
View File
@@ -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)];
};
src/main.tsx
+4 -2
View File
@@ -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(
<React.StrictMode>
<BrowserRouter>
<Provider>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>,
src/pages/database/database-page.tsx
+3 -3
View File
@@ -166,13 +166,13 @@ const DatabasePage: React.FC = () => {
<div className="flex max-w-full">
<DBController />
</div>
<div className="relative w-full h-full">
<div className="relative w-full h-full ">
<ReactFlow
colorMode={resolvedTheme as ColorMode}
nodes={nodes}
edges={edges}
fitView
className="w-full h-full cursor-default"
className="w-full h-full cursor-default "
onNodesChange={handleNodesChanges}
onEdgesChange={handleEdgeChanges}
onConnect={onConnect}
@@ -202,7 +202,7 @@ const DatabasePage: React.FC = () => {
/>
</Controls >
<Background className="dark:bg-background-100" />
<Background className=" dark:bg-background-100" />
</ReactFlow>
<div
className="absolute left-[24px] bottom-[24px] "
src/pages/database/db-controller/db-controller.tsx
+3 -2
View File
@@ -21,11 +21,12 @@ const DBController: React.FC<Props> = ({ }) => {
return (
<ResizableBox
width={width}
onResize={onResize} className="min-h-full "
onResize={onResize} className="min-h-full overflow-hidden "
minConstraints={[512]}
axis="x"
handle={
<div className="w-[6px] border-r-2 border-transparent h-full absolute right-0 top-0 cursor-ew-resize hover:border-primary-300 active:border-primary transition-colors duration-200">
<div className="w-[6px] border-r-2 border-transparent h-full absolute right-0 top-0 cursor-ew-resize hover:border-primary active:border-primary transition-colors duration-200">
</div>
}
>
src/pages/database/db-controller/tables-controller/table-accordion-item/index/index-item.tsx
+10 -7
View File
@@ -76,7 +76,7 @@ const IndexItem: React.FC<Props> = ({ index, fields }) => {
classNames={{
trigger: "border-divider group-hover:border-primary",
}}
onSelectionChange={onInexFieldChange}
onOpenChange={openChange}
selectedKeys={fieldIndices}
@@ -108,12 +108,12 @@ const IndexItem: React.FC<Props> = ({ index, fields }) => {
</PopoverTrigger>
<PopoverContent className="w-[210px]" >
<div className="w-full flex flex-col gap-2 p-2">
<h3 className="font-semibold text-sm text-gray">
<h3 className="font-semibold text-sm text-font/90">
{t("db_controller.index_setting")}
</h3>
<hr className="text-default-200" />
<hr className="border-divider dark:border-font/10" />
<label className="text-sm font-medium text-slate-500">
<label className="text-sm font-medium text-icon dark:text-font/90">
{t("db_controller.name")}
</label>
<Input
@@ -122,14 +122,17 @@ const IndexItem: React.FC<Props> = ({ index, fields }) => {
placeholder={t("db_controller.index_name")}
onBlur={editIndexName}
size="sm"
classNames={{
inputWrapper: "border-divider group-hover:border-primary dark:border-font/10",
}}
defaultValue={index.name}
/>
<hr className="text-default-200" />
<hr className="border-divider dark:border-font/10" />
<Button
className="bg-default"
className="bg-default dark:bg-danger dark:border-none dark:text-white"
radius="sm" variant="faded"
color="danger"
size="sm"
@@ -137,7 +140,7 @@ const IndexItem: React.FC<Props> = ({ index, fields }) => {
<span className="font-medium text-sm">
{t("db_controller.delete_index")}
</span>
<Trash2 className="mr-1 size-3.5 text-danger" />
<Trash2 className="mr-1 size-3.5 text-danger dark:text-white" />
</Button>
</div>
</PopoverContent>
src/provider.tsx
+10 -3
View File
@@ -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 (
<HeroUIProvider navigate={navigate} useHref={useHref}>
{children}
<NextThemesProvider
defaultTheme='system'
attribute='class'
>
{children}
</NextThemesProvider>
</HeroUIProvider>
);
}
src/styles/globals.css
+6
View File
@@ -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;
}
tailwind.config.js
+12 -12
View File
@@ -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',