add app readme

lots of styling improvements fix dark/bright mode
2023-06-21 13:10:01 +02:00 · 2023-06-21 13:10:01 +02:00 · 5791b61a48
commit 5791b61a48
parent e8b6fcdbba
22 changed files with 210 additions and 212 deletions
--- a/app/README.md
+++ b/app/README.md
@ -1,7 +1,11 @@
-# Tauri + React + Typescript
+# tempblade Creator

-This template should help get you started developing with Tauri, React and Typescript in Vite.
+This is the directory containing the application. It uses tauri with react/vite.

-## Recommended IDE Setup
+## Commands

- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+Start the dev server:
+```yarn tauri dev```
+
+Create a production build:
+```yarn tauri build```
--- a/app/package.json
+++ b/app/package.json
@ -15,6 +15,7 @@
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-menubar": "^1.0.2",
    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-scroll-area": "^1.0.4",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-slider": "^1.1.1",
    "@radix-ui/react-toggle-group": "^1.0.4",
--- a/app/src-tauri/Cargo.toml
+++ b/app/src-tauri/Cargo.toml
@ -17,7 +17,7 @@ tauri-build = { version = "1.3", features = [] }

 uuid = { version = "1.3.3", features = ["v4", "fast-rng", "macro-diagnostics"] }
 tauri = { version = "1.3", features = ["dialog-open", "dialog-save", "shell-open"] }
-serde = { version = "1.0", features = ["derive"] }
+serde = { version = "1.0", features = ["derive", "rc"] }
 serde_json = "1.0"
 tint = "1.0.0"
 simple-easing = "1.0.1"
--- a/app/src-tauri/src/animation/primitives/keyframe.rs
+++ b/app/src-tauri/src/animation/primitives/keyframe.rs
@ -1,4 +1,4 @@
-use std::cmp::Ordering;
+use std::{cmp::Ordering, sync::Arc};

 use serde::{Deserialize, Serialize};

@ -12,10 +12,26 @@ use super::{
 pub struct Keyframe {
    pub value: f32,
    pub offset: f32,
-    pub id: String,
+    pub id: Arc<str>,
    pub interpolation: Option<InterpolationType>,
 }

+impl Keyframe {
+    pub fn new(
+        value: f32,
+        offset: f32,
+        id: Arc<str>,
+        interpolation: Option<InterpolationType>,
+    ) -> Self {
+        Keyframe {
+            value,
+            offset,
+            id,
+            interpolation,
+        }
+    }
+}
+
 #[derive(Debug, Clone)]
 pub struct RenderedKeyframe {
    pub absolute_frame: i32,
--- a/app/src-tauri/src/animation/primitives/tests.rs
+++ b/app/src-tauri/src/animation/primitives/tests.rs
@ -25,19 +25,19 @@ fn interpolates_the_input() {
    let keyframes1 = Keyframes {
        values: vec![
            Keyframe {
-                id: "1".to_string(),
+                id: "1".into(),
                value: 0.0,
                offset: 0.0,
                interpolation: None,
            },
            Keyframe {
-                id: "2".to_string(),
+                id: "2".into(),
                value: 100.0,
                offset: 1.0,
                interpolation: None,
            },
            Keyframe {
-                id: "3".to_string(),
+                id: "3".into(),
                value: 300.0,
                offset: 3.0,
                interpolation: None,
@ -48,13 +48,13 @@ fn interpolates_the_input() {
    let keyframes2 = Keyframes {
        values: vec![
            Keyframe {
-                id: "4".to_string(),
+                id: "4".into(),
                value: -100.0,
                offset: 0.0,
                interpolation: None,
            },
            Keyframe {
-                id: "5".to_string(),
+                id: "5".into(),
                value: 0.0,
                offset: 1.0,
                interpolation: None,
@ -150,19 +150,19 @@ fn gets_value_at_frame() {
    let keyframes = Keyframes {
        values: vec![
            Keyframe {
-                id: "1".to_string(),
+                id: "1".into(),
                value: 0.0,
                offset: 0.0,
                interpolation: None,
            },
            Keyframe {
-                id: "2".to_string(),
+                id: "2".into(),
                value: 100.0,
                offset: 1.0,
                interpolation: None,
            },
            Keyframe {
-                id: "3".to_string(),
+                id: "3".into(),
                value: 300.0,
                offset: 3.0,
                interpolation: None,
--- a/app/src-tauri/src/animation/primitives/values.rs
+++ b/app/src-tauri/src/animation/primitives/values.rs
@ -29,7 +29,7 @@ impl AnimatedFloat {
        AnimatedFloat {
            keyframes: Keyframes {
                values: vec![Keyframe {
-                    id: Uuid::new_v4().to_string(),
+                    id: Uuid::new_v4().to_string().into(),
                    value: val,
                    offset: 0.0,
                    interpolation: None,
--- a/app/src-tauri/src/animation/timeline.rs
+++ b/app/src-tauri/src/animation/timeline.rs
@ -70,7 +70,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
                    keyframes: Keyframes {
                        values: vec![
                            Keyframe {
-                                id: "1".to_string(),
+                                id: "1".into(),
                                value: (size.0 * -1) as f32,
                                offset: 0.0,
                                interpolation: Some(InterpolationType::EasingFunction(
@ -78,7 +78,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
                                )),
                            },
                            Keyframe {
-                                id: "2".to_string(),
+                                id: "2".into(),
                                value: 0.0,
                                offset: 5.0,
                                interpolation: None,
@ -89,7 +89,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
                AnimatedFloat {
                    keyframes: Keyframes {
                        values: vec![Keyframe {
-                            id: "3".to_string(),
+                            id: "3".into(),
                            value: 0.0,
                            offset: 0.0,
                            interpolation: None,
@ -103,7 +103,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
                AnimatedFloat {
                    keyframes: Keyframes {
                        values: vec![Keyframe {
-                            id: "4".to_string(),
+                            id: "4".into(),
                            interpolation: None,
                            value: size.0 as f32,
                            offset: 0.0,
@ -113,7 +113,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
                AnimatedFloat {
                    keyframes: Keyframes {
                        values: vec![Keyframe {
-                            id: "5".to_string(),
+                            id: "5".into(),
                            value: size.1 as f32,
                            offset: 0.0,
                            interpolation: None,
@ -159,7 +159,7 @@ pub fn test_timeline_entities_at_frame(
            color: Color::new(0, 0, 0, 1.0),
            width: 10.0,
        }),
-        font_name: "Arial".to_string(),
+        font_name: "Arial".into(),
        align: TextAlign::Center,
        size: 20.0,
    };
@ -168,7 +168,7 @@ pub fn test_timeline_entities_at_frame(
        style: PaintStyle::Fill(FillStyle {
            color: Color::new(0, 0, 0, 1.0),
        }),
-        font_name: "Arial".to_string(),
+        font_name: "Arial".into(),
        align: TextAlign::Center,
        size: 10.0,
    };
@ -198,7 +198,7 @@ pub fn test_timeline_entities_at_frame(
                            keyframes: Keyframes {
                                values: vec![
                                    Keyframe {
-                                        id: "1".to_string(),
+                                        id: "1".into(),
                                        value: 0.0,
                                        offset: 0.0,
                                        interpolation: Some(InterpolationType::Spring(
@ -210,7 +210,7 @@ pub fn test_timeline_entities_at_frame(
                                        )),
                                    },
                                    Keyframe {
-                                        id: "2".to_string(),
+                                        id: "2".into(),
                                        value: (size.0 / 2) as f32,
                                        offset: 2.0,
                                        interpolation: None,
@ -221,7 +221,7 @@ pub fn test_timeline_entities_at_frame(
                        AnimatedFloat {
                            keyframes: Keyframes {
                                values: vec![Keyframe {
-                                    id: "3".to_string(),
+                                    id: "3".into(),
                                    value: (size.1 / 2) as f32,
                                    offset: 0.0,
                                    interpolation: None,
@ -248,7 +248,7 @@ pub fn test_timeline_entities_at_frame(
                            keyframes: Keyframes {
                                values: vec![
                                    Keyframe {
-                                        id: "5".to_string(),
+                                        id: "5".into(),
                                        value: 0.0,
                                        offset: 0.0,
                                        interpolation: Some(InterpolationType::Spring(
@ -260,7 +260,7 @@ pub fn test_timeline_entities_at_frame(
                                        )),
                                    },
                                    Keyframe {
-                                        id: "6".to_string(),
+                                        id: "6".into(),

                                        value: (size.0 / 2) as f32,
                                        offset: 2.0,
@ -272,7 +272,7 @@ pub fn test_timeline_entities_at_frame(
                        AnimatedFloat {
                            keyframes: Keyframes {
                                values: vec![Keyframe {
-                                    id: "7".to_string(),
+                                    id: "7".into(),
                                    value: ((size.1 / 2) as f32) + 80.0,
                                    offset: 0.0,
                                    interpolation: None,
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@ -2,10 +2,11 @@ import "./App.css";
 import Timeline from "./components/Timeline";
 import Canvas from "./components/Canvas";
 import Properties, { PropertiesContainer } from "components/Properties";
-import MenuBar from "components/MenuBar";
 import ToolBar from "components/ToolBar";
 import useKeyControls from "hooks/useKeyControls";
 import { useFontsStore } from "stores/fonts.store";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import ScrollBar from "components/ScrollArea";

 export default function App() {
  const fontsStoreDidInit = useFontsStore((store) => store.didInit);
@ -13,13 +14,15 @@ export default function App() {
  useKeyControls();

  return (
-    <div className="bg-gray-950 h-full w-full flex flex-col overflow-hidden">
-      <MenuBar />
+    <div className="bg-neutral h-full w-full flex flex-col overflow-hidden">
+      {/* <MenuBar /> */}
      <div className="flex flex-row flex-[1] overflow-hidden">
        <ToolBar />
        {fontsStoreDidInit && (
-          <div className="flex flex-col pl-4 gap-4 pr-4 overflow-x-hidden overflow-y-auto">
-            <div className="flex w-full gap-4 flex-col lg:flex-row justify-center items-center">
+          <ScrollArea.Root className="w-full">
+            <ScrollArea.Viewport className="w-full h-full">
+              <div className="flex w-full flex-col pl-4 gap-4 pr-4 overflow-x-hidden overflow-y-auto">
+                <div className="flex w-full gap-4 flex-col lg:flex-row justify-center items-center mt-4">
                  <Canvas />
                  <PropertiesContainer>
                    <Properties />
@ -27,12 +30,11 @@ export default function App() {
                </div>
                <Timeline />
              </div>
+            </ScrollArea.Viewport>
+            <ScrollBar />
+          </ScrollArea.Root>
        )}
      </div>
    </div>
  );
 }
-
-{
-  /*  */
-}
--- a/app/src/components/Inputs/Select.tsx
+++ b/app/src/components/Inputs/Select.tsx
@ -17,7 +17,8 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm",
+      "placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
      className
    )}
    {...props}
@ -38,7 +39,7 @@ const SelectContent = React.forwardRef<
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-slate-900 text-popover-foreground shadow-md animate-in fade-in-80",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-neutral-accent text-popover-foreground shadow-md animate-in fade-in-80",
        className
      )}
      {...props}
@ -70,7 +71,8 @@ const SelectItem = React.forwardRef<
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-indigo-800 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-primary focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
--- a/app/src/components/Panel.tsx
+++ b/app/src/components/Panel.tsx
@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react";
+
+const Panel: FC<{ title: string; children: ReactNode }> = ({
+  title,
+  children,
+}) => {
+  return (
+    <div>
+      <h3>{title}</h3>
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export default Panel;
--- a/app/src/components/Properties/Primitives.tsx
+++ b/app/src/components/Properties/Primitives.tsx
@ -36,12 +36,8 @@ export const PaintProperties: FC<PaintPropertiesProps> = ({
 }) => {
  return (
    <div>
-      <fieldset>
-        <label htmlFor="staggered-text-letter-font">Font</label>
-      </fieldset>
      <fieldset>
        <label htmlFor="paint-style-type">PaintStyle</label>
-
        <Select
          defaultValue={entity.style.type}
          onValueChange={(value) => {
--- a/app/src/components/ScrollArea.tsx
+++ b/app/src/components/ScrollArea.tsx
@ -0,0 +1,17 @@
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { FC } from "react";
+
+const ScrollBar: FC<{ orientation?: "horizontal" | "vertical" }> = ({
+  orientation = "vertical",
+}) => {
+  return (
+    <ScrollArea.Scrollbar
+      className="flex select-none touch-none p-0.5 bg-neutral-accent transition-colors duration-[160ms] ease-out data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
+      orientation={orientation}
+    >
+      <ScrollArea.Thumb className="flex-1 bg-main rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+    </ScrollArea.Scrollbar>
+  );
+};
+
+export default ScrollBar;
--- a/app/src/components/Timeline/KeyframeIndicator.tsx
+++ b/app/src/components/Timeline/KeyframeIndicator.tsx
@ -79,6 +79,14 @@ const KeyframeIndicator: FC<{
            }}
            whileTap={{
              scale: 1.6,
+              transition: {
+                scale: {
+                  type: "spring",
+                  stiffness: 200,
+                  damping: 10,
+                  mass: 1,
+                },
+              },
            }}
            animate={{
              x: (animationData.offset + keyframe.offset) * TIMELINE_SCALE + 2,
@ -97,8 +105,8 @@ const KeyframeIndicator: FC<{
          >
            <motion.span
              data-selected={selected}
-              className="bg-gray-200 
-        data-[selected=true]:bg-indigo-600 
+              className="bg-secondary 
+        data-[selected=true]:bg-secondary
        h-full transition-colors"
              style={{
                width: 10,
@ -108,7 +116,7 @@ const KeyframeIndicator: FC<{
            />
          </motion.div>
        </PopoverTrigger>
-        <PopoverContent className="w-80 backdrop-blur-md bg-slate-700/50">
+        <PopoverContent className="w-80 backdrop-blur-md bg-neutral/50">
          <KeyframePopover
            onClose={() => deselectKeyframe()}
            onUpdate={handleValueUpdate}
--- a/app/src/components/Timeline/Timepicker.tsx
+++ b/app/src/components/Timeline/Timepicker.tsx
@ -21,11 +21,11 @@ const TimePicker: FC<TimePickerProps> = () => {
      step={1}
      aria-label="Current Frame"
    >
-      <Slider.Track className="bg-blackA10 relative grow rounded-full h-[3px]">
-        <Slider.Range className="absolute bg-white rounded-full h-full" />
+      <Slider.Track className="bg-neutral-accent relative grow rounded-full h-[3px]">
+        <Slider.Range className="absolute bg-main rounded-full h-full" />
      </Slider.Track>
      <Slider.Thumb
-        className="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
+        className="transition-colors block w-4 h-4 bg-main shadow-[0_2px_10px] shadow-main/20 rounded-[10px] hover:bg-secondary focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-main"
        aria-label="Volume"
      />
    </Slider.Root>
--- a/app/src/components/Timeline/Track.tsx
+++ b/app/src/components/Timeline/Track.tsx
@ -45,7 +45,7 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
      dragListener={false}
      dragControls={controls}
      onMouseDown={(e) => e.preventDefault()}
-      className="min-h-8 relative flex flex-1 flex-col gap-1 select-none"
+      className="h-6 relative flex flex-1 flex-col gap-1 select-none"
    >
      <motion.div
        layout
@ -56,7 +56,7 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
          onMouseDown={(e) => e.preventDefault()}
          onPointerDown={(e) => controls.start(e)}
          className={`h-full transition-all rounded-sm min-w-[200px] p-1 px-2 flex flex-col ${
-            selectedEntity === index ? "bg-gray-800" : "bg-gray-900"
+            selectedEntity === index ? "bg-highlight" : "bg-neutral-accent"
          }`}
        >
          <div className="flex flex-row">
@ -77,17 +77,18 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
                  ? deselectEntity()
                  : selectEntity(index)
              }
-              className="text-white-800 select-none cursor-pointer"
+              className="text-white-800 h-2 text-base leading-loose font-semibold select-none cursor-pointer"
            >
              {name}
            </h3>
          </div>
        </div>

+        <div className="flex h-full w-full flex-row relative rounded-sm bg-neutral-accent/50 select-none shrink-0">
          <div
+            className="absolute top-0 h-full bg-neutral-accent"
            style={{ width: TIMELINE_SCALE * 10 }}
-          className="flex h-full flex-row relative bg-gray-900 select-none shrink-0"
-        >
+          />
          {!isExpanded &&
            flattenedKeyframes.map((keyframe, index) => (
              <KeyframeIndicator
@ -132,10 +133,10 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
                },
              });
            }}
-            className="z-10 w-4 bg-slate-500 h-8 top-1 absolute rounded-md select-none cursor-w-resize"
+            className="z-10 w-4 bg-primary/80 h-full top-0 absolute rounded-md select-none cursor-w-resize"
          />
          <motion.div
-            className="z-10 w-4 bg-slate-500 h-8 top-1 absolute rounded-md select-none cursor-e-resize"
+            className="z-10 w-4 bg-primary/80 h-full top-0 absolute rounded-md select-none cursor-e-resize"
            onMouseDown={(e) => e.preventDefault()}
            drag="x"
            animate={{
@ -194,7 +195,7 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
                },
              });
            }}
-            className="z-5 h-8 top-1 absolute rounded-md transition-colors bg-gray-700 hover:bg-gray-600 select-none cursor-grab"
+            className="z-5 h-full top-0 absolute rounded-md transition-colors bg-primary/30 hover:bg-primary/50 select-none cursor-grab"
          ></motion.div>
        </div>
      </motion.div>
--- a/app/src/components/Timeline/TrackPropertiesEditor.tsx
+++ b/app/src/components/Timeline/TrackPropertiesEditor.tsx
@ -78,10 +78,10 @@ const TrackAnimatedProperty: FC<{
    <motion.div
      transition={ease.quint(0.8).out}
      variants={{ enter: { y: 0, opacity: 1 }, from: { y: -10, opacity: 0 } }}
-      className="flex flex-row bg-slate-900 ml-2 align-center"
+      className="flex flex-row bg-neutral-accent ml-2 align-center"
    >
      <div className="min-w-[195px] flex flex-row justify-between px-2">
-        <h4>{animatedProperty.label}</h4>
+        <h4 className="text-main/70">{animatedProperty.label}</h4>
        <ToggleGroup>
          <ToggleGroupItem
            onClick={() =>
--- a/app/src/components/Timeline/index.tsx
+++ b/app/src/components/Timeline/index.tsx
@ -6,6 +6,8 @@ import Timestamp from "./Timestamp";
 import { PauseIcon, PlayIcon } from "@radix-ui/react-icons";
 import { useRenderStateStore } from "stores/render-state.store";
 import Track from "./Track";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import ScrollBar from "components/ScrollArea";

 export type AnimationEntity = {
  offset: number;
@ -37,8 +39,10 @@ const Timeline: FC<TimelineProps> = () => {
        </div>
        <Timestamp />
      </div>
-      <div className="gap-1 w-full flex flex-col overflow-x-auto overflow-y-visible">
-        <div className="z-20 flex flex-row gap-2">
+      <ScrollArea.Root>
+        <ScrollArea.Viewport className="w-full h-full">
+          <div className="gap-1 w-full flex flex-col">
+            <div className="z-20 flex flex-row gap-1">
              <div className="flex-shrink-0 min-w-[200px]" />
              <TimePicker />
            </div>
@ -58,6 +62,11 @@ const Timeline: FC<TimelineProps> = () => {
              ))}
            </Reorder.Group>
          </div>
+        </ScrollArea.Viewport>
+        <div className="h-4 sticky bottom-0">
+          <ScrollBar orientation="horizontal" />
+        </div>
+      </ScrollArea.Root>
    </div>
  );
 };
--- a/app/src/components/ToggleGroup.tsx
+++ b/app/src/components/ToggleGroup.tsx
@ -12,9 +12,9 @@ const ToggleGroupItem: FC<{
      data-selected={selected}
      asChild
      onClick={onClick}
-      className="hover:bg-indigo-600 text-white data-[selected=true]:bg-indigo-700 
+      className="hover:bg-primary/30 text-main data-[selected=true]:bg-primary/60 
      data-[selected=true]:text-indigo-200 flex h-6 w-6
-      items-center justify-center bg-slate-800 text-sm leading-4 
+      items-center justify-center bg-neutral text-sm leading-4 
      first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black 
      focus:outline-none transition-colors"
      value="left"
@ -29,7 +29,7 @@ const ToggleGroupItem: FC<{

 const ToggleGroup: FC<{ children: ReactNode }> = ({ children }) => (
  <ToggleGroupComponents.Root
-    className="inline-flex my-auto bg-slate-800 h-fit rounded shadow-[0_2px_10px] shadow-black space-x-px"
+    className="inline-flex my-auto bg-neutral-accent h-fit rounded shadow-[0_2px_10px] shadow-black space-x-px"
    type="single"
    defaultValue="center"
    aria-label="Text alignment"
--- a/app/src/components/ToolBar/index.tsx
+++ b/app/src/components/ToolBar/index.tsx
@ -25,9 +25,9 @@ const ToolBarButton: FC<{ children: ReactNode; onClick?: () => void }> = ({
      onClick={onClick}
      onMouseOver={() => !didHover && setDidHover(true)}
      asChild
-      className="text-white p-[10px] bg-gray-900 flex-shrink-0 flex-grow-0 
+      className="text-main p-[10px] bg-neutral flex-shrink-0 flex-grow-0 
  basis-auto w-[40px] h-[40px] rounded inline-flex text-[13px] leading-none 
-  items-center justify-center outline-none hover:bg-indigo-900 
+  items-center justify-center outline-none hover:bg-primary/50
  transition-colors
  focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo"
    >
@ -52,7 +52,7 @@ const ToolBar = () => {
  return (
    <Toolbar.Root
      asChild
-      className="bg-gray-800 flex flex-col gap-1 p-1 h-full"
+      className="bg-neutral-accent flex flex-col gap-1 p-1 h-full"
      orientation="vertical"
    >
      <motion.div
--- a/app/src/styles.css
+++ b/app/src/styles.css
@ -17,32 +17,21 @@
    @apply text-white;
  }

-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  a,
-  label {
-    @apply dark:text-white;
-  }
-
  a {
    @apply text-blue-600 underline;
  }

  select,
  input {
-    @apply box-border bg-gray-900 shadow-indigo-100 hover:shadow-indigo-400 
-    focus:shadow-indigo-600 selection:bg-indigo-400 selection:text-black 
+    @apply box-border bg-transparent shadow-main/10 hover:shadow-primary/50
+    focus:ring-primary focus:ring-2 focus:ring-offset-2
+    focus:shadow-primary selection:bg-secondary selection:text-black 
    outline-none px-3 py-2 rounded-md shadow-[0_0_0_1px];
  }

  input {
    @apply appearance-none items-center justify-center 
-     w-full  text-base leading-none
-   text-white transition-all;
+     w-full  text-base leading-none transition-all;
  }

  select {
@ -50,78 +39,39 @@
  }

  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+    --color-main: 0 0% 0%;

-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --color-secondary: 0 0% 10%;

-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+    --color-neutral: 0 0% 100%;
+    --color-neutral-accent: 0 0% 90%;

-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+    --color-highlight: 0 0% 0%;

-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
+    --color-primary: 222.2 47.4% 11.2%;
  }

-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-main: 0 0% 100%;

-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+      --color-primary: 260 80% 50%;
+      --color-secondary: 260 50% 70%;

-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+      --color-neutral: 250 30% 8%;
+      --color-neutral-accent: 250 40% 12%;

-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
+      --color-highlight: 250 20% 15%;
+    }
  }
 }

@layer base {
  * {
-    @apply border-border;
+    @apply border-highlight;
  }
  body {
-    @apply bg-background text-foreground;
+    @apply bg-neutral text-main;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
 }
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@ -3,53 +3,14 @@
 export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
    extend: {
      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        main: "hsl(var(--color-main))",
+        secondary: "hsl(var(--color-secondary))",
+        neutral: "hsl(var(--color-neutral))",
+        "neutral-accent": "hsl(var(--color-neutral-accent))",
+        highlight: "hsl(var(--color-highlight))",
+        primary: "hsl(var(--color-primary))",
      },
      keyframes: {
        "accordion-down": {
--- a/app/yarn.lock
+++ b/app/yarn.lock
@ -702,6 +702,22 @@
    "@radix-ui/react-use-callback-ref" "1.0.1"
    "@radix-ui/react-use-controllable-state" "1.0.1"

+"@radix-ui/react-scroll-area@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.4.tgz#13c36c453b2880aba57df67fb91a1d3f9b18998d"
+  integrity sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.1"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-select@^1.2.2":
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181"