darker blue

frontend/public/icons/fullscreen.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<g id="fullscreen">
+	<g>
+		<path fill="#fceade" fill-rule="evenodd" clip-rule="evenodd" d="M3.41,2H6c0.55,0,1-0.45,1-1S6.55,0,6,0H1C0.45,0,0,0.45,0,1v5
+			c0,0.55,0.45,1,1,1s1-0.45,1-1V3.41l5.29,5.29C7.47,8.89,7.72,9,8,9c0.55,0,1-0.45,1-1c0-0.28-0.11-0.53-0.29-0.71L3.41,2z M8,11
+			c-0.28,0-0.53,0.11-0.71,0.29L2,16.59V14c0-0.55-0.45-1-1-1s-1,0.45-1,1v5c0,0.55,0.45,1,1,1h5c0.55,0,1-0.45,1-1s-0.45-1-1-1
+			H3.41l5.29-5.29C8.89,12.53,9,12.28,9,12C9,11.45,8.55,11,8,11z M19,0h-5c-0.55,0-1,0.45-1,1s0.45,1,1,1h2.59l-5.29,5.29
+			C11.11,7.47,11,7.72,11,8c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29L18,3.41V6c0,0.55,0.45,1,1,1s1-0.45,1-1V1
+			C20,0.45,19.55,0,19,0z M19,13c-0.55,0-1,0.45-1,1v2.59l-5.29-5.29C12.53,11.11,12.28,11,12,11c-0.55,0-1,0.45-1,1
+			c0,0.28,0.11,0.53,0.29,0.71L16.59,18H14c-0.55,0-1,0.45-1,1s0.45,1,1,1h5c0.55,0,1-0.45,1-1v-5C20,13.45,19.55,13,19,13z"/>
+	</g>
+</g>
+</svg>

frontend/src/components/deployment/tabs/Tabs.tsx

@@ -8,8 +8,7 @@ import {
 } from "solid-js";
 import Tabs from "../../util/tabs/Tabs";
 import Config from "./config/Config";
-import Log from "./Log";
-import { combineClasses } from "../../../util/helpers";
+import Log from "./log/Log";
 import { ConfigProvider } from "./config/Provider";
 import { useAppState } from "../../../state/StateProvider";
 import { getDeploymentLog } from "../../../util/query";

frontend/src/components/deployment/tabs/log/Log.tsx

@@ -1,11 +1,11 @@
 import { Log as LogType } from "@monitor/types";
 import { Component, createEffect, createSignal, Show } from "solid-js";
-import { pushNotification } from "../../..";
-import { useAppState } from "../../../state/StateProvider";
-import { combineClasses } from "../../../util/helpers";
-import { useBuffer } from "../../../util/hooks";
-import Icon from "../../util/icons/Icon";
-import s from "../deployment.module.css";
+import { pushNotification } from "../../../..";
+import { useAppState } from "../../../../state/StateProvider";
+import { combineClasses } from "../../../../util/helpers";
+import { useBuffer } from "../../../../util/hooks";
+import Icon from "../../../util/icons/Icon";
+import s from "./log.module.css";
 
 const Log: Component<{
   log: LogType;

frontend/src/components/sidebar/server/Server.tsx

@@ -60,13 +60,6 @@ const Server: Component<{ id: string }> = (p) => {
             gap=".5rem"
             class={combineClasses(s.Deployments, open() ? s.Enter : s.Exit)}
           >
-            <Show
-              when={
-                deploymentIDs() && (deploymentIDs() as string[]).length === 0
-              }
-            >
-              <Flex justifyContent="center">no deployments</Flex>
-            </Show>
             <For each={deploymentIDs()}>{(id) => <Deployment id={id} />}</For>
             <Show when={permissions() >= 1}>
               <NewDeployment serverID={p.id} />

frontend/src/components/sidebar/sidebar.module.scss

@@ -2,17 +2,17 @@
 
 .Sidebar {
 	grid-area: sidebar;
-	background-color: c.$darkgrey;
+	background-color: c.$darkblue;
 	z-index: 10;
 }
 
 .Server {
-	background-color: c.$darkblue;
+	background-color: c.$blue;
 	height: fit-content;
 }
 
 .Deployments {
-	background-color: c.$darkblue;
+	background-color: c.$blue;
 	transform-origin: top;
 	padding: 0.5rem;
 }
@@ -25,7 +25,7 @@
 }
 
 .ServerButton:hover {
-	background-color: c.$blue;
+	background-color: c.$lightblue;
 }
 
 // .ServerButton:global(.selected):hover {
@@ -40,7 +40,7 @@
 }
 
 .DropdownItem:hover {
-	background-color: c.$blue;
+	background-color: c.$lightblue;
 }
 
 // .DropdownItem:global(.selected):hover {

frontend/src/components/util/icons/Icon.tsx

@@ -31,7 +31,8 @@ export type IconType =
   | "application"
   | "error"
   | "refresh"
-  | "cut";
+  | "cut"
+  | "fullscreen";
 
 const Icon: Component<{
   type: IconType;

frontend/src/components/util/menu/menu.module.scss

@@ -21,7 +21,7 @@
   display: grid;
   width: fit-content;
   /* border: solid 1px rgba(2, 107, 121, 0.25); */
-  background-color: c.$darkgrey;
+  background-color: c.$grey;
   z-index: 21;
   border-radius: 0.25rem;
   box-sizing: border-box;
@@ -117,7 +117,7 @@
   top: 100%;
   left: 0;
   padding: 0rem 0.5rem;
-  background-color: c.$darkgrey;
+  background-color: c.$grey;
   border-radius: 0.25rem;
   z-index: 30;
   white-space: nowrap;

frontend/src/style/app.scss

@@ -11,6 +11,8 @@
 		"sidebar content";
 }
 
+/* CONTENT */
+
 .content {
 	grid-area: content;
 	grid-template-columns: auto 2fr;

frontend/src/style/colors.scss

@@ -1,12 +1,12 @@
 $app-color: #fceade;
 
-$lightgrey: #65707f;
-$grey: #49515c;
-$darkgrey: #2c3137;
+$lightgrey: #49515c;
+$grey: #2c3137;
+$darkgrey: #1c1f23;
 
-$lightblue: #195abb;
-$blue: #174c9b;
-$darkblue: #113872;
+$lightblue: #1958b8;
+$blue: #133e7e;
+$darkblue: #0e2c59;
 
 $lightgreen: #4f8d5c;
 $green: #41764c;

frontend/src/style/index.scss

@@ -67,7 +67,7 @@ input::placeholder {
 }
 
 .grey {
-  background-color: c.$grey;
+  background-color: rgba(c.$grey, 0.8);
 }
 
 .grey:hover {
@@ -75,37 +75,69 @@ input::placeholder {
 }
 
 .green {
-  background-color: c.$green;
+  background-color: rgba(c.$green, 0.8);
 }
 
 .green:hover {
   background-color: c.$lightgreen;
 }
 
+.green-outlined {
+  border: solid 1px c.$green;
+}
+
+.green-outlined:hover {
+  border: solid 1px c.$lightgreen;
+}
+
 .red {
-  background-color: c.$red;
+  background-color: rgba(c.$red, 0.8);
 }
 
 .red:hover {
   background-color: c.$lightred;
 }
 
+.red-outlined {
+  border: solid 1px c.$red;
+}
+
+.red-outlined:hover {
+  border: solid 1px c.$lightred;
+}
+
 .blue {
-  background-color: c.$blue;
+  background-color: rgba(c.$blue, 0.8);
 }
 
 .blue:hover {
   background-color: c.$lightblue;
 }
 
+.blue-outlined {
+  border: solid 1px c.$blue;
+}
+
+.blue-outlined:hover {
+  border: solid 1px c.$lightblue;
+}
+
 .orange {
-  background-color: c.$orange;
+  background-color: rgba(c.$orange, 0.8);
 }
 
 .orange:hover {
   background-color: c.$lightorange;
 }
 
+.orange-outlined {
+  border: solid 1px c.$orange;
+}
+
+.orange-outlined:hover {
+  border: solid 1px c.$lightorange;
+}
+
 .shadow {
   box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 8px;
   transition: box-shadow 250ms ease;