add ui-elemnts

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts

@@ -22,9 +22,6 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 
 			#logviewer-layout {
 				margin: 20px;
-			}
-
-			#logviewer-layout {
 				height: calc(100vh - 160px);
 				display: grid;
 				grid-template-columns: 7fr 2fr;

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts

@@ -9,16 +9,32 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			:host {
-				display: block;
+			#layout {
+				margin: 20px;
 			}
-
-			#header {
+			#levels-container,
+			#input-container {
 				display: flex;
 				align-items: center;
-				padding: 0 var(--uui-size-space-6);
 				gap: var(--uui-size-space-4);
 				width: 100%;
+				margin-bottom: 20px;
+			}
+
+			#levels-container {
+				justify-content: space-between;
+			}
+
+			#input-container {
+				justify-content: space-between;
+			}
+
+			#search-input {
+				flex: 1;
+			}
+
+			#saved-searches-button {
+				flex-shrink: 0;
 			}
 		`,
 	];
@@ -33,7 +49,28 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 	}
 
 	render() {
-		return html` <h1>Search</h1> `;
+		return html`
+			<div id="layout">
+				<div id="levels-container">
+					<uui-button>Log level: All <uui-symbol-expand></uui-symbol-expand></uui-button>
+					<uui-button-group>
+						<uui-button>Polling</uui-button>
+						<uui-button compact><uui-symbol-expand></uui-symbol-expand></uui-button>
+					</uui-button-group>
+				</div>
+				<div id="input-container">
+					<uui-input id="search-input" .placeholder=${'Search logs...'}>
+						<uui-button slot="append" id="saved-searches-button"
+							>Saved searches <uui-symbol-expand></uui-symbol-expand
+						></uui-button>
+					</uui-input>
+					<uui-button look="primary">Search</uui-button>
+				</div>
+				<uui-box>
+					<p>Total items: 234</p>
+				</uui-box>
+			</div>
+		`;
 	}
 }