feat: more fonts, more styling

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
-/public/static
+/public/static/*.js
+/public/static/*.js.map
 .idea

public/global.css

@@ -11,7 +11,7 @@ html, body {
 body {
     color: #333;
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-family: DMSans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
 a {
@@ -67,3 +67,31 @@ button:focus {
 ::-webkit-scrollbar-thumb {
     background-color: rgba(0,0,0,0.25);
 }
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/static/DMSans-Regular.ttf) format('woff2');
+}
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(/static/DMSans-Bold.ttf) format('woff2');
+}
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: italic;
+    font-weight: 400;
+    src: url(/static/DMSans-Italic.ttf) format('woff2');
+}
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: italic;
+    font-weight: 600;
+    src: url(/static/DMSans-BoldItalic.ttf) format('woff2');
+}

src/ui/BeatGroup/Beat/Beat.css

@@ -1,11 +1,3 @@
-.beat:first-child {
-    padding-left: 5px;
-}
-
-.beat:last-child {
-    padding-right: 0;
-}
-
 .beat > * {
     padding-right: 1em;
     padding-left: 1em;

src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css

@@ -2,9 +2,9 @@
     width: 2em;
     height: 2em;
     margin-right: 0.2em;
-    background-color: white;
+    background-color: var(--color-ui-neutral-dark);
     border-width: 0.1em 0.1em 0.1em 0.1em;
-    border-color: black;
+    border-color: var(--color-ui-neutral-dark);
     border-style: solid;
     display: inline-block;
     transition: background-color 150ms;
@@ -12,7 +12,8 @@
 }
 
 .beat-unit:hover {
-    background-color: #f1c3b6;
+    border-color: var(--color-ui-neutral-dark-hover);
+    background-color: var(--color-ui-neutral-dark-hover);
     transition: none;
 }
 
@@ -21,7 +22,8 @@
 }
 
 .beat-unit.beat-unit-on {
-    background-color: darksalmon;
+    background-color: var(--color-ui-accent-light);
+    border-color: var(--color-ui-neutral-light);
     transition: none;
 }
 

src/ui/BeatGroup/BeatGroupView.ts

@@ -1,6 +1,5 @@
 import UINode, {UINodeOptions} from "../UINode";
 import BeatGroup from "../../BeatGroup";
-import BeatGroupSettingsView from "../BeatGroupSettings/BeatGroupSettingsView";
 import BeatView from "./Beat/BeatView";
 
 export type BeatGroupUINodeOptions = UINodeOptions & {
@@ -11,7 +10,6 @@ export type BeatGroupUINodeOptions = UINodeOptions & {
 export default class BeatGroupView extends UINode {
     private title: string;
     private beatGroup: BeatGroup;
-    private beatGroupSettingsView!: BeatGroupSettingsView;
     private beatViews: BeatView[] = [];
 
     constructor(options: BeatGroupUINodeOptions) {
@@ -25,12 +23,9 @@ export default class BeatGroupView extends UINode {
         for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {
             this.beatViews.push(new BeatView({beat: this.beatGroup.getBeatByIndex(i)}));
         }
-        this.beatGroupSettingsView = new BeatGroupSettingsView({beatGroup: this.beatGroup});
         return UINode.make("div", {
             classes: ["beat-group"],
             subs: [
-                UINode.make("h3", {innerText: this.title}),
-                this.beatGroupSettingsView.render(),
                 ...this.beatViews.map(bv => bv.render())
             ],
         });

src/ui/BeatGroupSettings/BeatGroupSettings.css

@@ -3,13 +3,12 @@
 
 .beat-group-settings-options {
     padding: 1em;
-    display: inline-flex;
-    width: 40em;
+    display: flex;
+    flex-direction: column;
     justify-content: space-evenly;
 }
 
 .beat-group-settings-option {
-    display: inline-block;
     text-align: center;
 }
 

src/ui/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -76,12 +76,14 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
             classes: ["beat-group-settings-option-group"],
             subs: [
                 UINode.make("div", {
+                    classes: ["beat-group-settings-autobeat-option", "beat-group-settings-option"],
                     subs: [
                         UINode.make("label", { innerText: "Auto beat length:"}),
                         this.autoBeatLengthCheckbox,
                     ],
                 }),
                 UINode.make("div", {
+                    classes: ["beat-group-settings-autobeat-option", "beat-group-settings-option"],
                     subs: [
                         UINode.make("label", { innerText: "Force full bars:"}),
                         this.forceFullBarsCheckbox,
@@ -92,7 +94,6 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
         this.node = UINode.make("div", {
             classes: ["beat-group-settings"],
             subs: [
-                UINode.make("div", { innerText: "Settings for beat" }),
                 UINode.make("div", {
                     classes: ["beat-group-settings-options"],
                     subs: [

src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css

@@ -1,7 +1,10 @@
-.loop-settings-option-group {
+.loop-settings {
     margin-top: 1em;
 }
 
+.loop-settings-option-group {
+}
+
 .loop-settings-option > label {
     width: 5em;
     text-align: left;
@@ -9,9 +12,11 @@
 
 .loop-settings > p {
     margin: 0;
+    font-weight: bold;
     text-align: center;
 }
 
 .loop-settings-option {
     display: flex;
+    justify-content: center;
 }

src/ui/Root/Root.css

@@ -12,22 +12,39 @@
     --color-title-dark: #282828;
 }
 
-body {
-    background-color: var(--color-bg-dark);
-    color: var(--color-p-light);
-}
-
 .root {
-    background-color: var(--color-bg-light);
-    margin-left: 10em;
-    margin-right: 10em;
+    color: var(--color-p-light);
+    background-color: var(--color-bg-dark);
+    height: 100vh;
+    display: flex;
+    align-content: center;
 }
 
-.root-title {
+.root-settings {
+    background-color: var(--color-bg-light);
+    height: 100%;
+    width: 30em;
+    padding: 3em;
+    display: inline-block;
+}
+
+.root-settings .root-title {
     color: var(--color-title-light);
     text-align: center;
 }
 
+.root-beat-stage-container {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.root-beat-stage {
+    margin: auto;
+}
+
 input[type="checkbox"] {
     position: relative;
     width: 2em;

src/ui/Root/RootView.ts

@@ -2,6 +2,7 @@ import UINode, {UINodeOptions} from "../UINode";
 import BeatGroupView from "../BeatGroup/BeatGroupView";
 import BeatGroup from "../../BeatGroup";
 import "./Root.css";
+import BeatGroupSettingsView from "../BeatGroupSettings/BeatGroupSettingsView";
 
 export type RootUINodeOptions = UINodeOptions & {
     title: string,
@@ -12,21 +13,40 @@ export default class RootView extends UINode {
     private title: string;
     private beatGroupView: BeatGroupView;
     private mainBeatGroup: BeatGroup;
+    private beatGroupSettingsView!: BeatGroupSettingsView;
+
 
     constructor(options: RootUINodeOptions) {
         super(options);
-        this.beatGroupView = new BeatGroupView({title: "THE BEAT", beatGroup: options.mainBeatGroup});
         this.mainBeatGroup = options.mainBeatGroup;
+        this.beatGroupView = new BeatGroupView({title: "THE BEAT", beatGroup: this.mainBeatGroup});
         this.title = options.title;
     }
 
     rebuild(): HTMLDivElement {
+        this.beatGroupSettingsView = new BeatGroupSettingsView({beatGroup: this.mainBeatGroup});
         return UINode.make("div", {
             classes: ["root"],
+            subs: [
+                UINode.make("div", {
+                    classes: ["root-settings"],
                     subs: [
                         UINode.make("h1", {innerText: this.title, classes: ["root-title"]}),
+                        this.beatGroupSettingsView.render(),
+                    ]
+                }),
+                UINode.make("div", {
+                    classes: ["root-beat-stage-container"],
+                    subs: [
+                        UINode.make("div", {
+                            classes: ["root-beat-stage"],
+                            subs: [
                                 this.beatGroupView.render(),
                             ],
+                        })
+                    ]
+                })
+            ],
         });
     }
 }

src/ui/Widgets/NumberInput/NumberInput.css

@@ -1,3 +1,7 @@
+.number-input {
+    text-align: center;
+}
+
 input[type="number"].number-input-input {
     -webkit-appearance: textfield;
     -moz-appearance: textfield;