diff --git a/flake.nix b/flake.nix
index 9d4e880..33f9d2c 100644
--- a/flake.nix
+++ b/flake.nix
@@ -45,6 +45,7 @@
pkgs.udev
pkgs.wasm-pack
typeshare.packages."x86_64-linux".default
+ pkgs.nodePackages_latest.typescript-language-server
];
LIBCLANG_PATH="${pkgs.llvmPackages.libclang.lib}/lib";
ENV = "dev";
diff --git a/gm-dash/ui/src/App.css b/gm-dash/ui/src/App.css
index 74b5e05..fa47678 100644
--- a/gm-dash/ui/src/App.css
+++ b/gm-dash/ui/src/App.css
@@ -1,38 +1,80 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
+.layout {
display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
+ justify-content: space-between;
+ width: 100%;
}
-.App-link {
- color: #61dafb;
+.palette {
+ display: flex;
}
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.palette div {
+ width: 50px;
+ height: 50px;
+ border: 1px solid black;
+ border-radius: 5px;
+ margin: 1em;
+ padding: 0;
}
+
+.item-1 {
+ background-color: var(--purple-1);
+}
+
+.item-2 {
+ background-color: var(--purple-2);
+}
+
+.item-3 {
+ background-color: var(--purple-3);
+}
+
+.item-4 {
+ background-color: var(--purple-4);
+}
+
+.item-5 {
+ background-color: var(--purple-5);
+}
+
+.item-6 {
+ background-color: var(--blue-1);
+}
+
+.item-7 {
+ background-color: var(--blue-2);
+}
+
+.item-8 {
+ background-color: var(--blue-3);
+}
+
+.item-9 {
+ background-color: var(--blue-4);
+}
+
+.item-10 {
+ background-color: var(--blue-5);
+}
+
+.item-11 {
+ background-color: var(--grey-1);
+}
+
+.item-12 {
+ background-color: var(--grey-2);
+}
+
+.item-13 {
+ background-color: var(--grey-3);
+}
+
+.item-14 {
+ background-color: var(--grey-4);
+}
+
+.item-15 {
+ background-color: var(--grey-5);
+}
+
+
diff --git a/gm-dash/ui/src/App.tsx b/gm-dash/ui/src/App.tsx
index a53698a..cec4132 100644
--- a/gm-dash/ui/src/App.tsx
+++ b/gm-dash/ui/src/App.tsx
@@ -1,26 +1,88 @@
-import React from 'react';
-import logo from './logo.svg';
import './App.css';
+import Card from './components/Card/Card';
+import Activator from './components/Activator/Activator';
-function App() {
- return (
-
- );
+const LightThemes = () =>
+
+
+
+
+
+
+const LightSetup = () =>
+
+interface LightProps {
+ name: string,
+}
+
+const Light = ({ name }: LightProps) =>
+
+const Tracks = () =>
+
+
+
+
+
+
+interface TrackProps {
+ name: string,
+}
+const Track = ({ name }: TrackProps) =>
+
+const Presets = () =>
+
+
+
+
+
+
+interface PresetProps {
+ name: string
+}
+
+const Scene = ({ name }: PresetProps) =>
+
+const SceneEditor = () =>
+
+const Palette = () =>
+
+const Palette2 = () =>
+
+const Palette3 = () =>
+
+const App = () => {
+ return (
+
+ );
}
export default App;
diff --git a/gm-dash/ui/src/components/Activator/Activator.css b/gm-dash/ui/src/components/Activator/Activator.css
new file mode 100644
index 0000000..df0fe5c
--- /dev/null
+++ b/gm-dash/ui/src/components/Activator/Activator.css
@@ -0,0 +1,11 @@
+.activator {
+ border: 1px solid black;
+ border-radius: 5px;
+ margin: var(--spacer-m);
+ padding: var(--spacer-s);
+ box-shadow: 2px 2px 8px 0px var(--shadow-1);
+}
+
+.activator_enabled {
+ box-shadow: 0px 0px 8px 4px var(--activator-ring);
+}
diff --git a/gm-dash/ui/src/components/Activator/Activator.tsx b/gm-dash/ui/src/components/Activator/Activator.tsx
new file mode 100644
index 0000000..f3e4b8c
--- /dev/null
+++ b/gm-dash/ui/src/components/Activator/Activator.tsx
@@ -0,0 +1,18 @@
+import './Activator.css';
+import { PropsWithChildren } from 'react';
+
+interface ActivatorProps {
+ title: string,
+ icon?: string,
+ activated: boolean,
+}
+
+const Activator = ({ title, icon, activated, children }: PropsWithChildren) => {
+ const classnames = activated ? "activator activator_enabled" : "activator";
+ return (
+ )
+}
+
+export default Activator;
diff --git a/gm-dash/ui/src/components/Card/Card.css b/gm-dash/ui/src/components/Card/Card.css
new file mode 100644
index 0000000..bbdf4dd
--- /dev/null
+++ b/gm-dash/ui/src/components/Card/Card.css
@@ -0,0 +1,16 @@
+.card {
+ border: 1px solid black;
+ border-radius: 5px;
+ margin: var(--spacer-l);
+ box-shadow: 4px 4px 4px 0px var(--shadow-1),
+ 8px 8px 8px 0px var(--shadow-2);
+}
+
+.card__title {
+ color: var(--title-color);
+}
+
+.card__body {
+ display: flex;
+}
+
diff --git a/gm-dash/ui/src/components/Card/Card.tsx b/gm-dash/ui/src/components/Card/Card.tsx
new file mode 100644
index 0000000..cfee557
--- /dev/null
+++ b/gm-dash/ui/src/components/Card/Card.tsx
@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import './Card.css';
+
+interface CardProps {
+ name: string,
+}
+
+const Card = ({ name, children }: PropsWithChildren) => (
+
+
{name}
+
+ {children}
+
+
+)
+
+export default Card;
diff --git a/gm-dash/ui/src/index.css b/gm-dash/ui/src/index.css
index ec2585e..5d6927f 100644
--- a/gm-dash/ui/src/index.css
+++ b/gm-dash/ui/src/index.css
@@ -1,3 +1,34 @@
+:root {
+ --purple-1: hsl(265, 50%, 25%);
+ --purple-2: hsl(265, 60%, 35%);
+ --purple-3: hsl(265, 70%, 45%);
+ --purple-4: hsl(265, 80%, 55%);
+ --purple-5: hsl(265, 90%, 60%);
+
+ --blue-1: hsl(210, 50%, 25%);
+ --blue-2: hsl(210, 60%, 35%);
+ --blue-3: hsl(210, 70%, 45%);
+ --blue-4: hsl(210, 80%, 55%);
+ --blue-5: hsl(210, 90%, 65%);
+
+ --grey-1: hsl(210, 0%, 25%);
+ --grey-2: hsl(210, 0%, 40%);
+ --grey-3: hsl(210, 0%, 55%);
+ --grey-4: hsl(210, 0%, 70%);
+ --grey-5: hsl(210, 0%, 85%);
+
+ --title-color: var(--grey-1);
+ --shadow-1: var(--purple-1);
+ --shadow-2: var(--purple-2);
+
+ --activator-ring: var(--blue-4);
+
+ --spacer-xs: 2px;
+ --spacer-s: 4px;
+ --spacer-m: 8px;
+ --spacer-l: 12px;
+}
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,6 +36,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: var(--grey-5);
}
code {