From 9d3fe1cbea9f4e95b2d75ef47e9aa01cf9632bd4 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Mon, 4 Apr 2022 01:50:55 -0700 Subject: [PATCH] darker blue --- frontend/public/icons/fullscreen.svg | 16 +++++++ .../src/components/deployment/tabs/Tabs.tsx | 3 +- .../deployment/tabs/{ => log}/Log.tsx | 12 +++--- .../log/log.module.css} | 0 .../src/components/sidebar/server/Server.tsx | 7 ---- .../components/sidebar/sidebar.module.scss | 10 ++--- frontend/src/components/util/icons/Icon.tsx | 3 +- .../src/components/util/menu/menu.module.scss | 4 +- frontend/src/style/app.scss | 2 + frontend/src/style/colors.scss | 12 +++--- frontend/src/style/index.scss | 42 ++++++++++++++++--- 11 files changed, 77 insertions(+), 34 deletions(-) create mode 100644 frontend/public/icons/fullscreen.svg rename frontend/src/components/deployment/tabs/{ => log}/Log.tsx (88%) rename frontend/src/components/deployment/{deployment.module.css => tabs/log/log.module.css} (100%) diff --git a/frontend/public/icons/fullscreen.svg b/frontend/public/icons/fullscreen.svg new file mode 100644 index 000000000..8022c2176 --- /dev/null +++ b/frontend/public/icons/fullscreen.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/frontend/src/components/deployment/tabs/Tabs.tsx b/frontend/src/components/deployment/tabs/Tabs.tsx index 0895dbeb8..6ded7bf5f 100644 --- a/frontend/src/components/deployment/tabs/Tabs.tsx +++ b/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"; diff --git a/frontend/src/components/deployment/tabs/Log.tsx b/frontend/src/components/deployment/tabs/log/Log.tsx similarity index 88% rename from frontend/src/components/deployment/tabs/Log.tsx rename to frontend/src/components/deployment/tabs/log/Log.tsx index a93425cfa..bee9491f7 100644 --- a/frontend/src/components/deployment/tabs/Log.tsx +++ b/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; diff --git a/frontend/src/components/deployment/deployment.module.css b/frontend/src/components/deployment/tabs/log/log.module.css similarity index 100% rename from frontend/src/components/deployment/deployment.module.css rename to frontend/src/components/deployment/tabs/log/log.module.css diff --git a/frontend/src/components/sidebar/server/Server.tsx b/frontend/src/components/sidebar/server/Server.tsx index fc4f6607d..8d2ba9099 100644 --- a/frontend/src/components/sidebar/server/Server.tsx +++ b/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)} > - - no deployments - {(id) => } = 1}> diff --git a/frontend/src/components/sidebar/sidebar.module.scss b/frontend/src/components/sidebar/sidebar.module.scss index 64d6228ae..c8a902d92 100644 --- a/frontend/src/components/sidebar/sidebar.module.scss +++ b/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 { diff --git a/frontend/src/components/util/icons/Icon.tsx b/frontend/src/components/util/icons/Icon.tsx index 7fd9abde7..0762134a9 100644 --- a/frontend/src/components/util/icons/Icon.tsx +++ b/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; diff --git a/frontend/src/components/util/menu/menu.module.scss b/frontend/src/components/util/menu/menu.module.scss index d537005e3..e7d591e6e 100644 --- a/frontend/src/components/util/menu/menu.module.scss +++ b/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; diff --git a/frontend/src/style/app.scss b/frontend/src/style/app.scss index 75a376c06..b75ef90ee 100644 --- a/frontend/src/style/app.scss +++ b/frontend/src/style/app.scss @@ -11,6 +11,8 @@ "sidebar content"; } +/* CONTENT */ + .content { grid-area: content; grid-template-columns: auto 2fr; diff --git a/frontend/src/style/colors.scss b/frontend/src/style/colors.scss index 65cd15395..a495b90db 100644 --- a/frontend/src/style/colors.scss +++ b/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; diff --git a/frontend/src/style/index.scss b/frontend/src/style/index.scss index 2942f4019..2373486b1 100644 --- a/frontend/src/style/index.scss +++ b/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;