feat: app settings (#658)

* feat: app settings

* refactor: cleanup routes

* style: smaller base font

* chore: migrate about modal

* fix: import links

apps/client/src/features/editors/Editor.module.scss

@@ -13,6 +13,7 @@ $playback-width: 26rem;
   color: $ui-white;
   transition-property: color;
   transition-duration: $transition-time-action;
+
   &:hover {
     color: $ontime-color;
   }
@@ -28,152 +29,54 @@ $playback-width: 26rem;
   background: $ui-black;
   width: 100%;
   height: 100%;
-  margin: auto;
   color: $ui-white;
   padding: 1rem 0.5rem;
-  font-family: $ontime-font-family;
+  
+  display: grid;
+  grid-template-columns: $menu-width auto;
+  grid-template-rows: 2rem 1fr;
+  grid-template-areas: 
+    'menu overview'
+    'menu main';
+  gap: 0.5rem;
+}
+
+.overview {
+  grid-area: overview;
+  background-color: $white-10;
+}
+
+.panelContainer {
+  grid-area: main;
 
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: $menu-width $rundown-width $playback-width auto;
+  grid-template-columns: $rundown-width $playback-width 1fr;
   grid-template-areas:
-    'sett rundown play info'
-    'sett rundown mess info';
+    'rundown play info'
+    'rundown mess info';
   gap: 0.5rem;
+  overflow: hidden;
 
   .rundown,
   .playback,
   .messages,
-  .info,
-  .settings {
+  .info {
     position: relative;
+    border-radius: 8px;
+    height: 100%;
+    background-color: $bg-container-l2;
+    padding: 1rem;
 
     .corner {
+      /* we show this if the component hasnt been extracted */
       display: inline;
     }
   }
 }
 
-/* 2/3 window, hide info */
-@media (max-width: 1450px) and (min-height: 700px) {
-  .mainContainer {
-    height: 100%;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: $menu-width 1fr $playback-width;
-
-    .info {
-      visibility: hidden;
-    }
-  }
-}
-
-/* 1/2 window, event list only */
-@media (max-width: 1100px) {
-  .mainContainer {
-    height: 100%;
-    grid-template-rows: 100%;
-    grid-template-columns: $menu-width $rundown-width;
-    grid-template-areas:
-      'sett rundown';
-
-    .info,
-    .messages,
-    .playback {
-      visibility: hidden;
-    }
-  }
-}
-
-/* 1/3 window, show control only */
-@media (max-width: 850px) and (min-height: 500px) {
-  .mainContainer {
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 100%;
-    grid-template-areas:
-      'play'
-      'mess';
-
-    .playback,
-    .messages {
-      visibility: visible;
-    }
-
-    .rundown,
-    .info,
-    .settings {
-      visibility: hidden;
-    }
-  }
-}
-
-/* 1/3 corner window, playback only */
-@media (max-width: 850px) and (max-height: 500px) {
-  .mainContainer {
-    grid-template-rows: 100%;
-    grid-template-columns: 100%;
-    grid-template-areas: 'play';
-
-    .playback {
-      visibility: visible;
-    }
-
-    .rundown,
-    .messages,
-    .info,
-    .settings {
-      visibility: hidden;
-    }
-  }
-}
-
-.mainContainer {
-  .settings,
-  .rundown,
-  .messages,
-  .playback,
-  .info {
-    border-radius: 8px;
-    height: 100%;
-    background-color: $bg-container-l2;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.eventEditor {
-  border-radius: 8px 8px 0 0;
-  background-color: $bg-container-l2;
-  box-shadow: $large-bottom-drawer-shadow;
-  border-top: 1px solid $white-20;
-  position: absolute;
-  bottom: 0;
-  width: 100vw;
-  left: 0;
-  z-index: 10;
-  color: white;
-  transition: bottom $transition-time-feedback;
-
-  &.noEvent {
-    bottom: -500px;
-    transition: bottom 0.7s;
-  }
-
-  .eventEditorLayout {
-    display: flex;
-  }
-
-  .header {
-    background-color: $gray-1250;
-    padding: 0.5rem;
-    border-left: 1px solid $white-10;
-    border-radius: 0 8px 0 0;
-  }
-}
-
 .rundown {
   grid-area: rundown;
-  height: 100%;
 
   .content {
     height: calc(100% - 1.5rem);
@@ -204,22 +107,6 @@ $playback-width: 26rem;
   min-width: 26rem;
 }
 
-.mainContainer > .settings {
-  grid-area: sett;
-  background-color: transparent;
-  margin: 0;
-  padding: 0 0.5rem 0 0;
-  width: fit-content;
-
-  display: flex;
-  flex-direction: column;
-}
-
-
-.mainContainer > .rundown {
-  padding: 1rem 0;
-}
-
 .content {
   padding-top: 1.5rem;
 }