titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dark theme

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:51:08 +03:00
parent 8a17540d31
commit 1dd645f1a7
19 changed files with 213 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -26,7 +26,7 @@
-->
<title>React App</title>
</head>
<body>
<body theme-mode="light">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="h-full"></div>
<!--

BIN
src/assets/process_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

16
src/components/area.jsx
View File

@ -16,6 +16,7 @@ import {
AreaContext,
LayoutContext,
SelectContext,
SettingsContext,
TabContext,
UndoRedoContext,
} from "../pages/editor";
@ -25,6 +26,7 @@ export default function Area(props) {
const [saved, setSaved] = useState(false);
const [editField, setEditField] = useState({});
const { layout } = useContext(LayoutContext);
const { settings } = useContext(SettingsContext);
const { tab, setTab } = useContext(TabContext);
const { updateArea, deleteArea } = useContext(AreaContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
@ -70,7 +72,7 @@ export default function Area(props) {
style={{ backgroundColor: props.areaData.color }}
/>
</div>
<div className="text-gray-900 absolute top-2 left-3 select-none">
<div className="text-color absolute top-2 left-3 select-none">
{props.areaData.name}
</div>
{(hovered ||
@ -94,7 +96,7 @@ export default function Area(props) {
}}
stopPropagation
content={
<div>
<div className="popover-theme">
<div className="font-semibold mb-2 ms-1">
Edit subject area
</div>
@ -126,7 +128,7 @@ export default function Area(props) {
/>
<Popover
content={
<div>
<div className="popover-theme">
<div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div>
<Button
@ -306,7 +308,7 @@ export default function Area(props) {
cx={props.areaData.x}
cy={props.areaData.y}
r={6}
fill="white"
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={3}
cursor="nwse-resize"
@ -316,7 +318,7 @@ export default function Area(props) {
cx={props.areaData.x + props.areaData.width}
cy={props.areaData.y}
r={6}
fill="white"
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={3}
cursor="nesw-resize"
@ -326,7 +328,7 @@ export default function Area(props) {
cx={props.areaData.x}
cy={props.areaData.y + props.areaData.height}
r={6}
fill="white"
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={3}
cursor="nesw-resize"
@ -336,7 +338,7 @@ export default function Area(props) {
cx={props.areaData.x + props.areaData.width}
cy={props.areaData.y + props.areaData.height}
r={6}
fill="white"
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={3}
cursor="nwse-resize"

12
src/components/area_overview.jsx
View File

@ -58,7 +58,9 @@ export default function AreaOverview(props) {
showClear
prefix={<IconSearch />}
placeholder="Search..."
emptyContent={<div className="p-3">No areas found</div>}
emptyContent={
<div className="p-3 popover-theme">No areas found</div>
}
onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)}
onSelect={(v) => {
@ -77,13 +79,13 @@ export default function AreaOverview(props) {
</Col>
</Row>
{areas.length <= 0 ? (
<div className="select-none">
<div className="select-none mt-2">
<Empty
image={
<IllustrationNoContent style={{ width: 160, height: 160 }} />
<IllustrationNoContent style={{ width: 154, height: 154 }} />
}
darkModeImage={
<IllustrationNoContentDark style={{ width: 160, height: 160 }} />
<IllustrationNoContentDark style={{ width: 154, height: 154 }} />
}
title="No subject areas"
description="Add subject areas to compartmentalize tables!"
@ -127,7 +129,7 @@ export default function AreaOverview(props) {
<Col span={3}>
<Popover
content={
<div>
<div className="popover-theme">
<div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div>
<Button

4
src/components/canvas.jsx
View File

@ -369,9 +369,11 @@ export default function Canvas(props) {
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
className="w-full h-full bg-white"
className="w-full h-full"
style={{
cursor: cursor,
backgroundColor:
settings.mode === "light" ? "white" : "rgba(22, 22, 26, 1)",
}}
>
{settings.showGrid && (

4
src/components/chat.jsx
View File

@ -9,7 +9,7 @@ export default function Chat() {
const { messages } = useContext(MessageContext);
return (
<div className="mx-5 flex flex-col h-full">
<div className="mx-5 flex flex-col h-full sidesheet-theme">
<div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
{messages.map((m, i) =>
m.type === "note" ? (
@ -24,7 +24,7 @@ export default function Chat() {
size="small"
alt={m.name}
color={m.color}
className="border border-grey-900"
className="border border-color"
>
{m.name.split(" ").map((c) => c[0])}
</Avatar>

68
src/components/control_panel.jsx
View File

@ -9,6 +9,7 @@ import {
IconSaveStroked,
IconUndo,
IconRedo,
IconRowsStroked,
} from "@douyinfe/semi-icons";
import { Link } from "react-router-dom";
import icon from "../assets/icon_dark_64.png";
@ -844,7 +845,26 @@ export default function ControlPanel(props) {
shortcut: "Ctrl+Shift+G",
},
Theme: {
children: [{ Light: () => {} }, { Dark: () => {} }],
children: [
{
Light: () => {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "light");
}
setSettings((prev) => ({ ...prev, mode: "light" }));
},
},
{
Dark: () => {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "dark");
}
setSettings((prev) => ({ ...prev, mode: "dark" }));
},
},
],
function: () => {},
},
"Zoom in": {
@ -917,7 +937,7 @@ export default function ControlPanel(props) {
return (
<div>
{layout.header && header()}
<div className="py-1 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden">
<div className="py-1 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 md:mx-6 select-none overflow-x-hidden toolbar-theme">
<div className="flex justify-start items-center">
{layoutDropdown()}
<Divider layout="vertical" margin="8px" />
@ -963,7 +983,7 @@ export default function ControlPanel(props) {
}
trigger="click"
>
<div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center justify-center">
<div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
<div className="w-[40px]">{Math.floor(settings.zoom * 100)}%</div>
<div>
<IconCaretdown />
@ -971,7 +991,7 @@ export default function ControlPanel(props) {
</div>
</Dropdown>
<button
className="py-1 px-2 hover:bg-slate-200 rounded text-lg"
className="py-1 px-2 hover-2 rounded text-lg"
title="Zoom in"
onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
@ -980,7 +1000,7 @@ export default function ControlPanel(props) {
<i className="fa-solid fa-magnifying-glass-plus"></i>
</button>
<button
className="py-1 px-2 hover:bg-slate-200 rounded text-lg"
className="py-1 px-2 hover-2 rounded text-lg"
title="Zoom out"
onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
@ -990,7 +1010,7 @@ export default function ControlPanel(props) {
</button>
<Divider layout="vertical" margin="8px" />
<button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
className="py-1 px-2 hover-2 rounded flex items-center"
title="Undo"
onClick={undo}
>
@ -1000,7 +1020,7 @@ export default function ControlPanel(props) {
/>
</button>
<button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
className="py-1 px-2 hover-2 rounded flex items-center"
title="Redo"
onClick={redo}
>
@ -1011,37 +1031,34 @@ export default function ControlPanel(props) {
</button>
<Divider layout="vertical" margin="8px" />
<button
className="flex items-center py-1 px-2 hover:bg-slate-200 rounded"
className="flex items-center py-1 px-2 hover-2 rounded"
title="Add new table"
onClick={() => addTable()}
>
<IconAddTable />
<IconAddTable theme={settings.mode} />
</button>
<button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
className="py-1 px-2 hover-2 rounded flex items-center"
title="Add subject area"
onClick={() => addArea()}
>
<IconAddArea />
<IconAddArea theme={settings.mode} />
</button>
<button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
className="py-1 px-2 hover-2 rounded flex items-center"
title="Add new note"
onClick={() => addNote()}
>
<IconAddNote />
<IconAddNote theme={settings.mode} />
</button>
<Divider layout="vertical" margin="8px" />
<button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center"
className="py-1 px-2 hover-2 rounded flex items-center"
title="Save"
>
<IconSaveStroked size="extra-large" />
</button>
<button
className="py-1 px-2 hover:bg-slate-200 rounded text-xl"
title="Commit"
>
<button className="py-1 px-2 hover-2 rounded text-xl" title="Commit">
<i className="fa-solid fa-code-branch"></i>
</button>
</div>
@ -1211,13 +1228,14 @@ export default function ControlPanel(props) {
) : exportData.data !== "" || exportData.data ? (
<>
{visible === MODAL.IMG ? (
<Image src={exportData.data} alt="Diagram" height={220} />
<Image src={exportData.data} alt="Diagram" height={280} />
) : (
<Editor
height="360px"
value={exportData.data}
language={exportData.extension}
options={{ readOnly: true }}
theme={settings.mode === "light" ? "light" : "vs-dark"}
/>
)}
<div className="text-sm font-semibold mt-2">Filename:</div>
@ -1243,7 +1261,7 @@ export default function ControlPanel(props) {
function header() {
return (
<nav className="flex justify-between pt-1 items-center whitespace-nowrap">
<div className="flex justify-start items-center text-slate-800">
<div className="flex justify-start items-center">
<Link to="/">
<img
width={54}
@ -1327,9 +1345,7 @@ export default function ControlPanel(props) {
</Dropdown.Menu>
}
>
<div className="px-3 py-1 hover:bg-gray-100 rounded">
{category}
</div>
<div className="px-3 py-1 hover-2 rounded">{category}</div>
</Dropdown>
))}
</div>
@ -1453,10 +1469,8 @@ export default function ControlPanel(props) {
}
trigger="click"
>
<div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center justify-center">
<div>
<i className="fa-solid fa-table-list text-xl me-1"></i>
</div>
<div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
<IconRowsStroked size="extra-large" />
<div>
<IconCaretdown />
</div>

12
src/components/custom_icons.jsx
View File

@ -1,11 +1,11 @@
import React from "react";
export function IconAddTable() {
export function IconAddTable({ theme }) {
return (
<svg height="26" width="26">
<path
fill="none"
stroke="rgb(51 65 85)"
stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
strokeWidth="2"
d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21 M1 8 L22 8"
/>
@ -13,12 +13,12 @@ export function IconAddTable() {
);
}
export function IconAddArea() {
export function IconAddArea({ theme }) {
return (
<svg height="26" width="26">
<path
fill="none"
stroke="rgb(51 65 85)"
stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
strokeWidth="2"
d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21"
/>
@ -26,12 +26,12 @@ export function IconAddArea() {
);
}
export function IconAddNote() {
export function IconAddNote({ theme }) {
return (
<svg height="26" width="26">
<path
fill="none"
stroke="rgb(51 65 85)"
stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
strokeWidth="2"
d="M12 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 12 L12 2 M1 12 L9 12 A3 3 0 0 0 12 9 L12 1 M22 17 L22 25 M18 21 L26 21"
/>

10
src/components/editor_panel.jsx
View File

@ -28,7 +28,7 @@ const EditorPanel = (props) => {
return (
<div className="flex h-full">
<div
className="flex flex-col h-full relative border-r border-gray-200"
className="flex flex-col h-full relative border-r border-color"
style={{ width: `${props.width}px` }}
>
<div className="h-full flex-1 overflow-y-auto">
@ -45,18 +45,18 @@ const EditorPanel = (props) => {
</Tabs>
</div>
{layout.issues && (
<div className="mt-auto border-t-2 border-gray-200 shadow-inner shadow-neutral-200">
<div className="mt-auto border-t-2 border-color shadow-inner">
<Issues />
</div>
)}
</div>
<div
className={`flex justify-center items-center p-1 h-auto hover:bg-slate-400 cursor-col-resize ${
props.resize ? "bg-slate-300" : ""
className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${
props.resize ? "bg-semi-grey-2" : ""
}`}
onMouseDown={() => props.setResize(true)}
>
<div className="w-1 border-x border-white h-1/6" />
<div className="w-1 border-x border-color h-1/6" />
</div>
</div>
);

6
src/components/note.jsx
View File

@ -134,7 +134,7 @@ export default function Note(props) {
}}
stopPropagation
content={
<div>
<div className="popover-theme">
<div className="font-semibold mb-2 ms-1">Edit note</div>
<div className="w-[280px] flex items-center mb-2">
<Input
@ -164,8 +164,8 @@ export default function Note(props) {
/>
<Popover
content={
<div>
<div className="font-medium">Theme</div>
<div className="popover-theme">
<div className="font-medium mb-1">Theme</div>
<hr />
<div className="py-3">
{noteThemes.map((c) => (

14
src/components/notes_overview.jsx
View File

@ -55,7 +55,9 @@ export default function NotesOverview(props) {
showClear
prefix={<IconSearch />}
placeholder="Search..."
emptyContent={<div className="p-3">No notes found</div>}
emptyContent={
<div className="p-3 popover-theme">No notes found</div>
}
onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)}
onSelect={(v) => {
@ -75,13 +77,13 @@ export default function NotesOverview(props) {
</Col>
</Row>
{notes.length <= 0 ? (
<div className="select-none">
<div className="select-none mt-2">
<Empty
image={
<IllustrationNoContent style={{ width: 160, height: 160 }} />
<IllustrationNoContent style={{ width: 154, height: 154 }} />
}
darkModeImage={
<IllustrationNoContentDark style={{ width: 160, height: 160 }} />
<IllustrationNoContentDark style={{ width: 154, height: 154 }} />
}
title="No text notes"
description="Add notes cuz why not!"
@ -139,8 +141,8 @@ export default function NotesOverview(props) {
<div className="ms-2">
<Popover
content={
<div>
<div className="font-medium">Theme</div>
<div className="popover-theme">
<div className="font-medium mb-1">Theme</div>
<hr />
<div className="py-3">
{noteThemes.map((c) => (

12
src/components/reference_overview.jsx
View File

@ -63,7 +63,9 @@ export default function ReferenceOverview(props) {
showClear
prefix={<IconSearch />}
placeholder="Search..."
emptyContent={<div className="p-3">No relationships found</div>}
emptyContent={
<div className="p-3 popover-theme">No relationships found</div>
}
onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)}
onSelect={(v) => {
@ -81,14 +83,14 @@ export default function ReferenceOverview(props) {
accordion
>
{relationships.length <= 0 ? (
<div className="select-none">
<div className="select-none mt-2">
<Empty
image={
<IllustrationNoContent style={{ width: 160, height: 160 }} />
<IllustrationNoContent style={{ width: 154, height: 154 }} />
}
darkModeImage={
<IllustrationNoContentDark
style={{ width: 160, height: 160 }}
style={{ width: 154, height: 154 }}
/>
}
title="No relationships"
@ -111,7 +113,7 @@ export default function ReferenceOverview(props) {
<div className="ms-1">
<Popover
content={
<div className="p-2">
<div className="p-2 popover-theme">
<Table
columns={columns}
dataSource={[

4
src/components/relationship.jsx
View File

@ -87,9 +87,9 @@ export default function Relationship(props) {
<feDropShadow
dx="0"
dy="0"
stdDeviation="6"
stdDeviation="4"
floodColor="gray"
floodOpacity="0.5"
floodOpacity="0.3"
/>
</filter>
</defs>

33
src/components/sidebar.jsx
View File

@ -3,9 +3,14 @@ import chatIcon from "../assets/chat.png";
import botIcon from "../assets/bot.png";
import teamIcon from "../assets/group.png";
import timeLine from "../assets/process.png";
import timeLineDark from "../assets/process_dark.png";
import todo from "../assets/calendar.png";
import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
import { MessageContext, UndoRedoContext } from "../pages/editor";
import {
MessageContext,
SettingsContext,
UndoRedoContext,
} from "../pages/editor";
import Todo from "./todo";
import Chat from "./chat";
@ -20,8 +25,9 @@ export default function Sidebar() {
};
const { undoStack } = useContext(UndoRedoContext);
const { messages } = useContext(MessageContext);
const { settings } = useContext(SettingsContext);
const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
const [seen, setSeen] = useState(0)
const [seen, setSeen] = useState(0);
const [count, setCount] = useState(messages.length - seen);
const getTitle = (type) => {
@ -29,7 +35,11 @@ export default function Sidebar() {
case SidesheetType.TIMELINE:
return (
<div className="flex items-center">
<img src={timeLine} className="w-7" alt="chat icon" />
<img
src={settings.mode === "light" ? timeLine : timeLineDark}
className="w-7"
alt="chat icon"
/>
<div className="ms-3">Timeline</div>
</div>
);
@ -73,7 +83,7 @@ export default function Sidebar() {
return (
<>
<div className="ps-3 pe-4 py-4 shadow-lg h-full select-none">
<div className="ps-3 pe-4 py-4 shadow-lg h-full select-none border-l border-color">
<Tooltip content="Chat">
<Badge
count={count === 0 ? null : count}
@ -109,7 +119,11 @@ export default function Sidebar() {
className="block"
onClick={() => setSidesheet(SidesheetType.TIMELINE)}
>
<img src={timeLine} className="w-8 mb-5" alt="chat icon" />
<img
src={settings.mode === "light" ? timeLine : timeLineDark}
className="w-8 mb-5"
alt="chat icon"
/>
</button>
</Tooltip>
<Tooltip content="Botle">
@ -137,11 +151,11 @@ export default function Sidebar() {
function renderTimeline() {
if (undoStack.length > 0) {
return (
<List>
<List className="sidesheet-theme">
{[...undoStack].reverse().map((e) => (
<List.Item
style={{ padding: "4px 18px 4px 18px" }}
className="hover:bg-slate-100"
className="hover-1"
>
<div className="flex items-center py-1 w-full">
<i className="block fa-regular fa-circle fa-xs"></i>
@ -153,8 +167,9 @@ export default function Sidebar() {
);
} else {
return (
<div className="m-5">
You havent added anything to your diagram yet.
<div className="m-5 sidesheet-theme">
No activity was recorded. You have not added anything to your diagram
yet.
</div>
);
}

42
src/components/table.jsx
View File

@ -81,13 +81,21 @@ export default function Table(props) {
props.active && !props.moving && "border-blue-500 border-4"
} ${
props.moving && "border-blue-500 border-4 border-dashed"
} bg-gray-100 select-none rounded-lg w-full`}
} select-none rounded-lg w-full ${
settings.mode === "light"
? "bg-zinc-100 text-zinc-800"
: "bg-zinc-800 text-zinc-200"
}`}
>
<div
className={`h-[10px] w-full rounded-t-md`}
style={{ backgroundColor: props.tableData.color }}
/>
<div className="font-bold text-slate-800 h-[40px] flex justify-between items-center border-b border-gray-400 bg-gray-200">
<div
className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
}`}
>
<div className="px-3">
{isHovered
? props.tableData.name.length < 10
@ -133,7 +141,7 @@ export default function Table(props) {
></Button>
<Popover
content={
<div className="text-slate-600">
<div className="popover-theme">
<div className="mb-2">
<strong>Comment :</strong>{" "}
{props.tableData.comment === "" ? (
@ -142,7 +150,7 @@ export default function Table(props) {
<div>{props.tableData.comment}</div>
)}
</div>
<div className="text-slate-600">
<div>
<strong
className={`${
props.tableData.indices.length === 0 ? "" : "block"
@ -156,8 +164,12 @@ export default function Table(props) {
<div>
{props.tableData.indices.map((index, k) => (
<div
className="flex items-center my-1 px-2 py-1 rounded bg-gray-100"
key={k}
className={`flex items-center my-1 px-2 py-1 rounded ${
settings.mode === "light"
? "bg-gray-100"
: "bg-zinc-800"
}`}
>
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
<div>
@ -209,10 +221,10 @@ export default function Table(props) {
<Popover
key={i}
content={
<>
<div className="popover-theme">
<div className="flex justify-between items-center pb-2">
<p className="me-4 font-bold">{e.name}</p>
<p className="ms-4 text-slate-600">{e.type}</p>
<p className="ms-4">{e.type}</p>
</div>
<hr />
{e.primary && (
@ -235,11 +247,11 @@ export default function Table(props) {
Increment
</Tag>
)}
<p className="text-slate-600">
<p>
<strong>Default :</strong>{" "}
{e.default === "" ? "Not set" : e.default}
</p>
</>
</div>
}
position="right"
showArrow
@ -268,7 +280,7 @@ export default function Table(props) {
}
style={{ paddingBottom: "16px" }}
>
<div className="flex items-center">
<div className="flex items-center sidesheet-theme">
<div className="text-md font-semibold">Name: </div>
<Input
value={props.tableData.name}
@ -298,7 +310,7 @@ export default function Table(props) {
</div>
<div>
{props.tableData.fields.map((f, j) => (
<Row gutter={6} key={j} className="hover:bg-slate-100 mt-2">
<Row gutter={6} key={j} className="hover-2 mt-2">
<Col span={7}>
<Input
value={f.name}
@ -425,7 +437,7 @@ export default function Table(props) {
<Col span={3}>
<Popover
content={
<div className="px-1 w-[240px]">
<div className="px-1 w-[240px] popover-theme">
<div className="font-semibold">Default value</div>
<Input
className="my-2"
@ -782,7 +794,7 @@ export default function Table(props) {
/>
<Popover
content={
<div className="px-1">
<div className="px-1 popover-theme">
<div className="font-semibold mb-1">Index name: </div>
<Input
value={idx.name}
@ -1124,7 +1136,7 @@ export default function Table(props) {
setHoveredField(-1);
}}
>
<div className={`${hoveredField === index ? "text-slate-500" : ""}`}>
<div className={`${hoveredField === index ? "text-zinc-400" : ""}`}>
<button
className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
onMouseDown={(ev) => {
@ -1142,7 +1154,7 @@ export default function Table(props) {
></button>
{fieldData.name}
</div>
<div className="text-slate-400">
<div className="text-zinc-400">
{hoveredField === index ? (
<Popconfirm
title="Are you sure you want to delete this field?"

17
src/components/table_overview.jsx
View File

@ -77,6 +77,9 @@ export default function TableOverview(props) {
prefix={<IconSearch />}
placeholder="Search..."
onSearch={(v) => handleStringSearch(v)}
emptyContent={
<div className="p-3 popover-theme">No tables found</div>
}
onChange={(v) => setValue(v)}
onSelect={(v) => {
const { id } = tables.find((t) => t.name === v);
@ -112,14 +115,14 @@ export default function TableOverview(props) {
accordion
>
{tables.length <= 0 ? (
<div className="select-none">
<div className="select-none mt-2">
<Empty
image={
<IllustrationNoContent style={{ width: 160, height: 160 }} />
<IllustrationNoContent style={{ width: 154, height: 154 }} />
}
darkModeImage={
<IllustrationNoContentDark
style={{ width: 160, height: 160 }}
style={{ width: 154, height: 154 }}
/>
}
title="No tables"
@ -131,7 +134,7 @@ export default function TableOverview(props) {
<div id={`scroll_table_${t.id}`} key={t.id}>
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
{t.fields.map((f, j) => (
<Row gutter={6} key={j} className="hover:bg-slate-100 mb-2">
<Row gutter={6} key={j} className="hover-1 mb-2">
<Col span={7}>
<Input
value={f.name}
@ -256,7 +259,7 @@ export default function TableOverview(props) {
<Col span={3}>
<Popover
content={
<div className="px-1 w-[240px]">
<div className="px-1 w-[240px] popover-theme">
<div className="font-semibold">Default value</div>
<Input
className="my-2"
@ -625,7 +628,7 @@ export default function TableOverview(props) {
/>
<Popover
content={
<div className="px-1">
<div className="px-1 popover-theme">
<div className="font-semibold mb-1">
Index name:{" "}
</div>
@ -767,7 +770,7 @@ export default function TableOverview(props) {
<Col span={8}>
<Popover
content={
<div>
<div className="popover-theme">
<div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div>
<Button

12
src/components/todo.jsx
View File

@ -98,7 +98,7 @@ export default function Todo() {
return (
<>
<div className="flex justify-between items-center mx-5 mb-2">
<div className="flex justify-between items-center mx-5 mb-2 sidesheet-theme">
<Dropdown
render={
<Dropdown.Menu>
@ -145,14 +145,12 @@ export default function Todo() {
</Button>
</div>
{tasks.length > 0 ? (
<List>
<List className="sidesheet-theme">
{tasks.map((t, i) => (
<List.Item
key={i}
style={{ paddingLeft: "18px", paddingRight: "18px" }}
className={`${
t.complete ? "bg-emerald-50" : "hover:bg-slate-100"
}`}
className="hover-1"
onClick={() => setActiveTask(i)}
>
<div className="w-full">
@ -175,7 +173,7 @@ export default function Todo() {
<Col span={3}>
<Popover
content={
<div className="p-2">
<div className="p-2 popover-theme">
<div className="mb-2 font-semibold">
Set priority:{" "}
</div>
@ -256,7 +254,7 @@ export default function Todo() {
))}
</List>
) : (
<div className="m-5">
<div className="m-5 sidesheet-theme">
You have no tasks yet. Add your to-dos and keep track of your
progress.
</div>

53
src/index.css
View File

@ -22,18 +22,61 @@
}
::-webkit-scrollbar {
width: 10px;
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
opacity: 0;
}
::-webkit-scrollbar-thumb {
background: #c5c5c5;
border-radius: 10px;
background-color: rgba(var(--semi-grey-2), 1);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: #b9b9b9;
background-color: rgba(var(--semi-grey-3), 1);
}
.theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-0);
}
.sidesheet-theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-2);
}
.popover-theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-3);
}
.toolbar-theme {
background-color: rgba(var(--semi-grey-1), 1);
}
.hover-1:hover {
background-color: rgba(var(--semi-grey-1), 1);
}
.bg-semi-grey-2 {
background-color: rgba(var(--semi-grey-2), 1);
}
.hover-2:hover {
background-color: rgba(var(--semi-grey-2), 1);
}
.text-color {
color: var(--semi-color-text-1);
}
.border-color {
border-color: rgba(var(--semi-grey-9), 0.08);
}
.table-border {
border-color: rgba(var(--semi-grey-2), 1);
}

3
src/pages/editor.jsx
View File

@ -51,6 +51,7 @@ export default function Editor(props) {
zoom: 1,
pan: { x: 0, y: 0 },
showGrid: true,
mode: "light",
});
const [tasks, setTasks] = useState([]);
const [messages, setMessages] = useState([]);
@ -477,7 +478,7 @@ export default function Editor(props) {
<TaskContext.Provider
value={{ tasks, setTasks, updateTask }}
>
<div className="h-[100vh] overflow-hidden">
<div className="h-[100vh] overflow-hidden theme">
<ControlPanel />
<div
className={