Feat/55 v2 (#225)

* chore: upgrade relevant libraries
* feat(skip): add skip styling to paginated items
* chore: upgrade relevant libraries
* Fix: issue with text colour (#214)
* fix: adjust text colour from context
* fix: issue with wrong proptype
* fix issue with vite migration (#217)
* hotfix: 1.8.2 issues vite migration
* fix: file import options
* feat(55): styling
* refactor: remove onhover option for entry block
* refactor: relocate logging provider
* refactor: convert to typescript
* feat(55): add event editor
* refactor: extract event actions
* fix: bad import
* feat(55): redesign components
* fix: issues with not awaiting async
* refactor: replace socket with subscription
* refactor: remove unused
* style: small tweaks
* refactor: extract event actions
* refactor: cleanup debug
* refactor: chakra imports
* fix: optimistic mutations
* refactor: handle promise rejections
* refactor: validation
* fix: rq optimistic mutations
* feat: add playback feedback to block
* refactor: no optimistic adding of events
* refactor: simplify cursor state
* styles: cleanup editor style
* refactor: cleanup duration update
* fix: revert package upgrade (issues with vitest)
* fix: prevent cyclic imports
* refactor: extract data fetcher
* refactor: typescript migration
* chore: update tests

client/src/theme/_main.scss

@@ -1,6 +1,5 @@
 //////////////////////////////////// general app colours
 
-
 $bg-black-gradient: #202020;
 $bg-black: #121212;
 $bg-black-100: #070707;
@@ -24,6 +23,7 @@ $ontime-pink-variant: #ff6969;
 $ontime-roll: #2b6cb0;
 $ontime-delay: #dd6b20;
 $action-blue: #3182ce;
+$ontime-paused: #c05621;
 $opacity-disabled: 0.4;
 
 //rgba(255, 255, 255, 0.39); - $bg-gray-700
@@ -47,6 +47,7 @@ $header-gray: #ccc;
 $label-gray: #aaa;
 $clocks: #ddd;
 $bg-gray: #f4f4f8;
+$text-delay: #a97d24;
 
 $light-bg: #2b6cb0;
 $light-bg-transparent: #2b6cb055;
@@ -67,8 +68,7 @@ $block-delay-color: #ecc94b;
 $delay-text: #d69e2e;
 $block-delay-border: #d69e2e55;
 $block-block-color: #805ad5;
-$block-icon-drag: $bg-gray-100;
-$block-border: 1px solid $bg-gray-800;
+$block-border: 1px solid $bg-gray-900;
 
 //////////////////////////////////// viewer cards
 @mixin card-title {
@@ -91,7 +91,10 @@ $block-border: 1px solid $bg-gray-800;
 
 //////////////////////////////////// custom inputs
 $input-bg: rgba(255, 255, 255, 0.03);
-$input-border: 1px solid $bg-gray-800;
+$input-hover-bg: rgba(255, 255, 255, 0.13);
+$input-bg-delayed: rgba(214, 158, 46, 0.07);
+$input-hover-bg-delayed: rgba(214, 158, 46, 0.17);
+$input-border: 1px solid transparent;
 $input-delayed-border: 1px solid $block-delay-border;
 
 //////////////////////////////////// general app element overriders

client/src/theme/theme.js

@@ -30,7 +30,7 @@ const theme = extendTheme({
     },
     Textarea: {
       baseStyle: {
-        borderRadius: 4,
+        borderRadius: 3,
       },
       variants: {
         filled: {