Merge pull request #43 from Lemoncode/feature/#8-dark-mode

defined dark/light mode

src/App.css

@@ -1,10 +1,22 @@
 #root {
   margin: 0 auto;
   text-align: center;
-  --primary-background: #041729;
-  --primary-table: #04293a;
-  --primary-header: #ecb365;
-  --primary-text: #ffffff;
+}
+.light {
+  --primary-background: #f1f5f9;
+  --secondary-background: #fefdfe;
+  --accent-color: #e367f4;
+  --highlight-color: #e6eaf2;
+  --primary-toolbar: #fefdfe;
+  --text-color: #202020;
+}
+.dark {
+  --primary-background: #2e263e;
+  --secondary-background: #342c44;
+  --accent-color: #00e5ff;
+  --highlight-color: #4d425f;
+  --primary-toolbar: #342c44;
+  --text-color: #d1d6e1;
 }
 
 .logo {

src/App.tsx

@@ -1,11 +1,14 @@
-import './App.css';
-import { MainScene } from '@/scenes';
+
+import "./App.css";
+import { MainScene } from "@/scenes";
+import { useThemeContext } from "./core/providers";
 
 function App() {
+  const { theme } = useThemeContext()
   return (
-    <>
+    <div className={ theme.themeMode }>
       <MainScene />
-    </>
+    </div>
   );
 }
 

src/common/components/icons/canvas-setting-icon.component.tsx

@@ -0,0 +1,12 @@
+export const CanvasSetting = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M62 106.6V40a6 6 0 0 0-12 0v66.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-50.6a30 30 0 0 0 0-58.8M56 154a18 18 0 1 1 18-18a18 18 0 0 1-18 18m78-95.4V40a6 6 0 0 0-12 0v18.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-98.6a30 30 0 0 0 0-58.8m-6 47.4a18 18 0 1 1 18-18a18 18 0 0 1-18 18m102 62a30.05 30.05 0 0 0-24-29.4V40a6 6 0 0 0-12 0v98.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-18.6a30.05 30.05 0 0 0 24-29.4m-30 18a18 18 0 1 1 18-18a18 18 0 0 1-18 18" />
+    </svg>
+  );
+};

src/common/components/icons/dark-icon.component.tsx

@@ -0,0 +1,12 @@
+export const DarkIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M238 96a6 6 0 0 1-6 6h-18v18a6 6 0 0 1-12 0v-18h-18a6 6 0 0 1 0-12h18V72a6 6 0 0 1 12 0v18h18a6 6 0 0 1 6 6m-94-42h10v10a6 6 0 0 0 12 0V54h10a6 6 0 0 0 0-12h-10V32a6 6 0 0 0-12 0v10h-10a6 6 0 0 0 0 12m71.25 100.28a6 6 0 0 1 1.07 6A94 94 0 1 1 95.76 39.68a6 6 0 0 1 7.94 6.79A90.11 90.11 0 0 0 192 154a90.9 90.9 0 0 0 17.53-1.7a6 6 0 0 1 5.72 1.98m-14.37 11.34q-4.42.38-8.88.38A102.12 102.12 0 0 1 90 64q0-4.45.38-8.88a82 82 0 1 0 110.5 110.5" />
+    </svg>
+  );
+};

src/common/components/icons/edit-icon.component.tsx

@@ -0,0 +1,12 @@
+export const Edit = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M225.91 74.79L181.22 30.1a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h168a6 6 0 0 0 0-12H110.49L225.91 94.59a14 14 0 0 0 0-19.8M76.49 188L164 100.48L183.52 120L96 207.51ZM68 179.52L48.49 160L136 72.49L155.52 92ZM46 208v-33.52L81.52 210H48a2 2 0 0 1-2-2M217.42 86.1L192 111.52L144.49 64l25.41-25.41a2 2 0 0 1 2.83 0l44.69 44.68a2 2 0 0 1 0 2.83" />
+    </svg>
+  );
+};

src/common/components/icons/index.ts

@@ -0,0 +1,7 @@
+export * from './dark-icon.component';
+export * from './light-icon.component';
+export * from './edit-icon.component';
+export * from './canvas-setting-icon.component';
+export * from './relation-icon.component';
+export * from './zoom-in-icon.component';
+export * from './zoom-out-icon.component';

src/common/components/icons/light-icon.component.tsx

@@ -0,0 +1,12 @@
+export const LightIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M122 40V16a6 6 0 0 1 12 0v24a6 6 0 0 1-12 0m68 88a62 62 0 1 1-62-62a62.07 62.07 0 0 1 62 62m-12 0a50 50 0 1 0-50 50a50.06 50.06 0 0 0 50-50M59.76 68.24a6 6 0 1 0 8.48-8.48l-16-16a6 6 0 0 0-8.48 8.48Zm0 119.52l-16 16a6 6 0 1 0 8.48 8.48l16-16a6 6 0 1 0-8.48-8.48M192 70a6 6 0 0 0 4.24-1.76l16-16a6 6 0 0 0-8.48-8.48l-16 16A6 6 0 0 0 192 70m4.24 117.76a6 6 0 0 0-8.48 8.48l16 16a6 6 0 0 0 8.48-8.48ZM46 128a6 6 0 0 0-6-6H16a6 6 0 0 0 0 12h24a6 6 0 0 0 6-6m82 82a6 6 0 0 0-6 6v24a6 6 0 0 0 12 0v-24a6 6 0 0 0-6-6m112-88h-24a6 6 0 0 0 0 12h24a6 6 0 0 0 0-12" />
+    </svg>
+  );
+};

src/common/components/icons/relation-icon.component.tsx

@@ -0,0 +1,12 @@
+export const Relation = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M148.24 139.76a6 6 0 0 0-8.48 0L120 159.51L96.49 136l19.75-19.76a6 6 0 0 0-8.48-8.48L88 127.51l-19.76-19.75a6 6 0 0 0-8.48 8.48l7.75 7.76l-24.72 24.73a30 30 0 0 0 0 42.42l6.78 6.79l-29.81 29.82a6 6 0 1 0 8.48 8.48l29.82-29.81l6.79 6.78a30 30 0 0 0 42.42 0L132 188.49l7.76 7.75a6 6 0 0 0 8.48-8.48L128.49 168l19.75-19.76a6 6 0 0 0 0-8.48m-49.45 65a18 18 0 0 1-25.46 0l-22.06-22.09a18 18 0 0 1 0-25.46L76 132.49L123.51 180Zm137.45-185a6 6 0 0 0-8.48 0l-29.82 29.81l-6.79-6.78a30 30 0 0 0-42.42 0L124 67.51l-7.76-7.75a6 6 0 0 0-8.48 8.48l80 80a6 6 0 0 0 8.48-8.48l-7.75-7.76l24.72-24.73a30 30 0 0 0 0-42.42l-6.78-6.79l29.81-29.82a6 6 0 0 0 0-8.48m-31.51 79L180 123.51L132.49 76l24.72-24.73a18 18 0 0 1 25.46 0l22.06 22.06a18 18 0 0 1 0 25.46Z" />
+    </svg>
+  );
+};

src/common/components/icons/zoom-in-icon.component.tsx

@@ -0,0 +1,12 @@
+export const ZoomIn = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M150 112a6 6 0 0 1-6 6h-26v26a6 6 0 0 1-12 0v-26H80a6 6 0 0 1 0-12h26V80a6 6 0 0 1 12 0v26h26a6 6 0 0 1 6 6m78.24 116.24a6 6 0 0 1-8.48 0l-51.38-51.38a86.15 86.15 0 1 1 8.48-8.48l51.38 51.38a6 6 0 0 1 0 8.48M112 186a74 74 0 1 0-74-74a74.09 74.09 0 0 0 74 74" />
+    </svg>
+  );
+};

src/common/components/icons/zoom-out-icon.component.tsx

@@ -0,0 +1,12 @@
+export const ZoomOut = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M150 112a6 6 0 0 1-6 6H80a6 6 0 0 1 0-12h64a6 6 0 0 1 6 6m78.24 116.24a6 6 0 0 1-8.48 0l-51.38-51.38a86.15 86.15 0 1 1 8.48-8.48l51.38 51.38a6 6 0 0 1 0 8.48M112 186a74 74 0 1 0-74-74a74.09 74.09 0 0 0 74 74" />
+    </svg>
+  );
+};

src/core/providers/index.ts

@@ -1,2 +1,3 @@
 export * from './canvas-view-settings';
 export * from './modal-dialog-provider';
+export * from './theme-provider';

src/core/providers/theme-provider/index.ts

@@ -0,0 +1,2 @@
+export * from './theme-context';
+export * from './theme-provider';

src/core/providers/theme-provider/theme-context.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { ThemeModel } from './theme.model';
+
+
+export const ThemeContext = createContext<{theme: ThemeModel; toggleTheme: () => void} | null>(null);
+

src/core/providers/theme-provider/theme-provider.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ThemeContext } from './theme-context';
+import { ThemeModel, createInitialTheme } from './theme.model';
+
+interface Props {
+  children: React.ReactNode;
+}
+export const ThemeProvider: React.FC<Props> = (props) => {
+  const { children } = props;
+  const [theme, setTheme] = React.useState<ThemeModel>(createInitialTheme());
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => ({
+      ...prevTheme,
+      themeMode: prevTheme.themeMode === 'light' ? 'dark' : 'light',
+    }));
+  };
+
+  return (
+    <ThemeContext.Provider value={{theme, toggleTheme}}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useThemeContext = () => {
+  const context = React.useContext(ThemeContext);
+  if (context === null) {
+    throw new Error('useThemeContext: Ensure you have wrapped your app with ThemeProvider');
+  }
+
+  return context;
+};

src/core/providers/theme-provider/theme.model.ts

@@ -0,0 +1,7 @@
+export interface ThemeModel {
+  themeMode: 'dark' | 'light';
+}
+
+export const createInitialTheme = (): ThemeModel => ({
+  themeMode: 'light',
+})

src/index.css

@@ -47,9 +47,10 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
+/* button:hover {
   border-color: #646cff;
 }
+ */
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;

src/main.tsx

@@ -1,10 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import { ThemeProvider } from './core/providers/theme-provider/theme-provider.tsx'
+import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
 );
+

src/pods/canvas/canvas.pod.module.css

@@ -2,5 +2,9 @@
   width: 100%;
   height: 100%;
   overflow: scroll;
+}
+
+.container {
   background-color: var(--primary-background);
 }
+

src/pods/canvas/components/relation/database-relation.component.tsx

@@ -28,21 +28,21 @@ const DatabaseRelationshipComponent: React.FC<DatabaseRelationshipProps> = ({
           y1={forkCoords.y}
           x2={forkCoords.x + FORK_WIDTH * direction}
           y2={forkCoords.y}
-          stroke="white"
+          stroke="#ffae42"
         />
         <line
           x1={forkCoords.x}
           y1={forkCoords.y}
           x2={forkCoords.x + FORK_WIDTH * direction}
           y2={forkCoords.y - FORK_LINE_SPACING}
-          stroke="white"
+          stroke="#ffae42"
         />
         <line
           x1={forkCoords.x}
           y1={forkCoords.y}
           x2={forkCoords.x + FORK_WIDTH * direction}
           y2={forkCoords.y + FORK_LINE_SPACING}
-          stroke="white"
+          stroke="#ffae42"
         />
       </g>
     );
@@ -70,7 +70,7 @@ const DatabaseRelationshipComponent: React.FC<DatabaseRelationshipProps> = ({
         x2={destinationXMinusFork}
         y2={endCoords.y}
         strokeWidth={2}
-        stroke="white"
+        stroke="#ffae42"
       />
 
       {/* Draw the fork */}

src/pods/canvas/components/table/database-table.module.css

@@ -1,24 +1,23 @@
-.tableContainer {
-  filter: drop-shadow(5px 4px 4px rgba(0, 0, 0, 0.5));
-}
 .tableText {
   font-family: 'Arial', sans-serif;
   font-size: 14px;
   cursor: pointer;
+  fill: var(--text-color);
 }
 
 .tableHeader {
-  fill: var(--primary-header);
+  fill: var(--highlight-color);
 }
 
 .table {
   fill: none;
+  stroke: var(--highlight-color);
 }
 
 .table__background {
-  fill: var(--primary-table);
+  fill: var(--secondary-background);
 }
 
 .tableTextRow {
-  fill: var(--primary-text);
+  fill: var(--text-color);
 }

src/pods/toolbar/components/canvas-setting-button/canvas-setting-button.component.tsx

@@ -0,0 +1,36 @@
+import { useModalDialogContext } from '@/core/providers';
+import { useCanvasViewSettingsContext } from '@/core/providers/canvas-view-settings';
+import { CanvasSettingsComponent } from '@/pods/canvas-settings';
+import { Size } from '@/core/model';
+import { ToolbarButton } from '../toolbar-button';
+import { CanvasSetting } from '@/common/components/icons';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+
+export const CanvasSettingButton = () => {
+  const { openModal, closeModal } = useModalDialogContext();
+
+  const { canvasViewSettings, setCanvasSize } = useCanvasViewSettingsContext();
+
+  const handleChangeSettings = (size: Size) => {
+    setCanvasSize(size);
+    closeModal();
+  };
+
+  const handleCanvasSettings = () => {
+    openModal(
+      <CanvasSettingsComponent
+        size={canvasViewSettings.canvasSize}
+        onChangeSize={handleChangeSettings}
+      />
+    );
+  };
+
+  return (
+    <ToolbarButton
+      icon={<CanvasSetting />}
+      label="Settings"
+      onClick={handleCanvasSettings}
+      className={classes.button}
+    />
+  );
+};

src/pods/toolbar/components/canvas-setting-button/index.ts

@@ -0,0 +1 @@
+export * from './canvas-setting-button.component';

src/pods/toolbar/components/edit-button/edit-button.component.tsx

@@ -0,0 +1,38 @@
+import { useModalDialogContext } from '@/core/providers/modal-dialog-provider';
+import { EditTablePod } from '@/pods/edit-table';
+import { ToolbarButton } from '../toolbar-button/toolbarButton.component';
+import { Edit } from '@/common/components/icons';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import {
+  TableVm,
+  useCanvasSchemaContext,
+} from '@/core/providers/canvas-schema';
+
+export const EditButton = () => {
+  const { openModal, closeModal } = useModalDialogContext();
+  const { canvasSchema, addTable } = useCanvasSchemaContext();
+  const handleAddTable = (newTable: TableVm) => {
+    // TODO: Calculate X,Y position based on canvas current view port, maybe we have
+    // to keep this info in the settings or new context, then update newTable object X,Y position
+    // #62
+    // https://github.com/Lemoncode/mongo-modeler/issues/62
+    addTable(newTable);
+    closeModal();
+  };
+  const handleEditTableClick = () => {
+    openModal(
+      <EditTablePod
+        relations={canvasSchema.relations}
+        onSave={handleAddTable}
+      />
+    );
+  };
+  return (
+    <ToolbarButton
+      icon={<Edit />}
+      label="Edit"
+      onClick={handleEditTableClick}
+      className={classes.button}
+    />
+  );
+};

src/pods/toolbar/components/edit-button/index.ts

@@ -0,0 +1 @@
+export * from './edit-button.component';

src/pods/toolbar/components/index.ts

@@ -0,0 +1,6 @@
+export * from './toolbar-button';
+export * from './theme-toggle-button';
+export * from './edit-button';
+export * from './zoom-button';
+export * from './relation-button';
+export * from './canvas-setting-button';