v2 beta 4 (#361)

* ux: rename end action

* chore: update demo db

* style: tweaks on extracted rundown

* chore: prevent console logs in production code

* feat: go mode

* style: remove window size limits

* style: rename delete action

* style: small tweaks on icons

* fix: style override on params

* chore: update test db

* refactor: small code quality improvements

* refactor: prevent circular imports

apps/client/src/features/control/playback/PlaybackControl.module.scss

@@ -1,130 +1,4 @@
-@use '../../../theme/v2Styles' as *;
-@use '../../../theme/ontimeColours' as *;
-@use '../../../theme/mixins' as *;
-
 .mainContainer {
   width: 100%;
-  display: grid;
   margin: 0 auto;
-  gap: $element-inner-spacing;
 }
-
-.timeContainer {
-  display: grid;
-  grid-template-areas:
-    'ind clk clk btn'
-    '... sta fin btn';
-  grid-template-rows: 1fr auto;
-  grid-template-columns: 1.5em 1fr 1fr 5em;
-  gap: $element-inner-spacing;
-  justify-items: start;
-}
-
-.timer {
-  grid-area: clk;
-  white-space: nowrap;
-  max-width: 300px;
-}
-
-.indicators {
-  grid-area: ind;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-}
-
-.indRoll,
-.indDelay,
-.indNegative {
-  background-color: $gray-1350;
-}
-
-.indRoll,
-.indRollActive,
-.indDelay,
-.indDelayActive {
-  margin: 0 auto;
-  border-radius: 6px;
-  width: 12px;
-  height: 12px;
-}
-
-.indRollActive {
-  background-color: $ontime-roll;
-}
-
-.indNegative,
-.indNegativeActive {
-  margin: 0 auto;
-  width: 90%;
-  height: 4px;
-}
-
-.indNegativeActive {
-  background-color: $playback-negative;
-}
-
-.indDelayActive {
-  background-color: $ontime-delay;
-}
-
-.btn {
-  grid-area: btn;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  width: 100%;
-  gap: $element-inner-spacing;
-}
-
-.minus {
-  grid-area: min;
-  display: flex;
-  flex-direction: column;
-}
-
-.start,
-.finish,
-.roll {
-  height: 24px;
-}
-
-.start {
-  grid-area: sta;
-}
-
-.finish {
-  grid-area: fin;
-}
-
-.roll {
-  grid-area: 2 / 2 / 2 / 4 ;
-}
-
-.time {
-  color: $section-white;
-  font-size: $text-body-size;
-}
-
-.tag {
-  color: $label-gray;
-  font-size: 13px;
-}
-
-.rolltag {
-  color: $ontime-roll;
-  font-size: $text-body-size;
-}
-
-.playbackContainer {
-  display: flex;
-  justify-content: space-evenly;
-  padding-top: 0.5em;
-  gap: $element-spacing;
-}
-
-.invertX {
-  transform: rotateY(180deg);
-}