Gui tweaks2 (#40)

* Update runInCloud.ts, endpointSchema.tsx, and 2 more files...

* Update runInCloud.ts and main.css

src/commands/runInCloud.ts

@@ -47,7 +47,7 @@ export class CloudRunner {
             }
 
             //TODO: reuse the same terminal (will require having only 1 simultaneous test run)
-            const terminalOutputter = this.createAndShowTerminal(`Running Code in UP9 - ${this._up9Auth.getEnv()} on workspace ${defaultWorkspace}\n\r(in order to change env/workspace, please change configuration in the UP9:Code browser)\n\r`, promise);
+            const terminalOutputter = this.createAndShowTerminal(`Running Code in UP9 - ${this._up9Auth.getEnv()} on workspace ${defaultWorkspace}\n\r(in order to change env/workspace, please change configuration in the UP9:Code browser)\n\r\n\r`, promise);
 
             // terminal takes a second to properly initialize, calls to print before its ready will result in nothing being printed
             await delay(1000);

src/webview/src/components/endpointSchema.tsx

@@ -76,7 +76,7 @@ const EndpointSchema: React.FC<EndpointSchemaProps> = ({schema, isThemeDark}) =>
         return Array.from(codes);
     }, [responses]);
 
-    return <div style={{marginTop: "6px", overflowY: "auto", maxHeight: "calc(100% - 65px)"}}>
+    return <div style={{marginTop: "6px", overflowY: "auto", maxHeight: "calc(100vh - 300px)"}}>
         {schema?.parameters?.length ? <SchemaAccordion header="Parameters" key={"params"}>
             <table>
                 <thead>

src/webview/src/components/testsBrowserComponent.tsx

@@ -5,7 +5,7 @@ import {sendApiMessage, setExtensionDefaultWorkspace, signOut} from "../provider
 import { ApiMessageType } from "../../../models/internal";
 import {Form, FormControl, Dropdown} from 'react-bootstrap';
 import { userIcon, logoIcon } from "./svgs";
-
+import { isHexColorDark } from "../utils";
 import { LoadingOverlay } from "./loadingOverlay";
 import TestCodeViewer from "./testCodeViewer";
 import $ from "jquery";
@@ -175,6 +175,17 @@ interface TestBrowserParameterDropdownProps {
 const TestBrowserParameterDropdown: React.FC<TestBrowserParameterDropdownProps> = ({label, className, placeholder, disabled, items, value, onSelect, onDropdownToggle}) => {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const [filterInputValue, setFilterInputValue] = useState("");
+    const [isThemeDark, setIsThemeDark] = useState(null);
+
+    const editorBackgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-background');
+
+    useEffect(() => {
+        setIsThemeDark(isHexColorDark(editorBackgroundColor))
+    }, [editorBackgroundColor]);
+
+    const inputForegroundColor = getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-foreground');
+    const alphaTextColorModifier = isThemeDark ? 'c8' : '66';
+    const triggerTextColor = !value && !disabled ? `${inputForegroundColor}${alphaTextColorModifier}` : inputForegroundColor
 
     const selectedItem = useMemo(() => {
         if (value) {
@@ -206,7 +217,7 @@ const TestBrowserParameterDropdown: React.FC<TestBrowserParameterDropdownProps>
                 $('.select-dropdown .dropdown-menu').hide().show(0); //this is a very strange workaround for a very strange html bug, without this the drop down sometimes shifts the entire page until anything changes in the dom
             }
         }}>
-        <Dropdown.Toggle disabled={disabled}>
+        <Dropdown.Toggle disabled={disabled} style={{color: triggerTextColor}}>
             {selectedItem ? selectedItem.label : placeholder}
         </Dropdown.Toggle>
         {isDropdownOpen && <Dropdown.Menu>

src/webview/src/main.css

@@ -208,19 +208,23 @@ hr {
 	opacity: 0.75;
 }
 
+.empty-dropdown {
+	opacity: 0.7;
+}
+
+.selected-dropdown {
+	font-weight: 500;
+}
+
 .workspaces-form-group .form-label, .endpoints-form-group .form-label, .services-form-group .form-label {
 	font-size: 0.9em;
 	opacity: 0.8;
 	margin-bottom: 0;
-	margin-right: 0.9em;
-}
-
-.services-form-group .form-label {
-	margin-right: 38px;
 }
 
 .select-dropdown {
 	width: 100%;
+	left: 87px;
 }
 
 .select-dropdown .dropdown-menu {
@@ -249,6 +253,7 @@ hr {
 	position: absolute;
 	right: 12px;
 	margin-top: 0.6em;
+	color: var(--vscode-input-foreground);
 }
 
 .select-dropdown .dropdown-item, .discreet-dropdown .dropdown-item {
@@ -270,6 +275,10 @@ hr {
 	align-items: center;
 }
 
+.dropdown-container .form-label {
+	position: absolute;
+}
+
 .workspaces-form-group {
 	margin-bottom: 12px;
 	flex-grow: 2;
@@ -289,13 +298,10 @@ hr {
 	min-width: 0;
 }
 
-.endpoints-form-group .form-label {
-	margin-right: 25px;
-}
 
 .endpoints-form-group, .services-form-group, .workspaces-form-group {
 	flex-basis: 100%;
-	max-width: 100%;
+	max-width: calc(100% - 87px);
 	margin-right: 0;
 }
 
@@ -367,7 +373,7 @@ hr {
 }
 
 @media screen and (max-width: 400px) {
-    .auth-icon-container, .user-icon {
+    .auth-icon-container {
         display: none !important;
     }
 }