Modernize and streamline Sketch top bar UI
Comprehensive improvements to the top bar interface:
Removed Elements:
- Poll checkbox and all polling UI controls
- Network status indicator and all status messages
- Dotted underlines from tooltip elements
Button Improvements:
- Added SVG icons to Restart and Stop buttons
- Made buttons responsive (text hides below 1400px)
- Stop button now disabled when no active calls
Layout Simplification:
- Simplified hostname display (outside hostname only)
- Simplified working directory display (outside directory only)
- Repositioned tab chooser for better layout
- Improved responsive behavior across viewport sizes
Enhanced Features:
- Added GitHub repo auto-detection with clickable links
- Improved VSCode integration with button styling
- Changed 'SSH Connection' to 'Connect to Container'
- Enhanced tooltips with more descriptive text
The UI is now cleaner, more responsive, and provides a better user experience
across different screen sizes.
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-network-status.ts b/webui/src/web-components/sketch-network-status.ts
index 2a0e455..cf168fd 100644
--- a/webui/src/web-components/sketch-network-status.ts
+++ b/webui/src/web-components/sketch-network-status.ts
@@ -7,9 +7,6 @@
connection: string;
@property()
- message: string;
-
- @property()
error: string;
// See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
@@ -23,37 +20,6 @@
align-items: center;
}
- .polling-indicator {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- margin-right: 4px;
- background-color: #ccc;
- }
-
- .polling-indicator.active {
- background-color: #4caf50;
- animation: pulse 1.5s infinite;
- }
-
- .polling-indicator.error {
- background-color: #f44336;
- animation: pulse 1.5s infinite;
- }
-
- @keyframes pulse {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: 0.5;
- }
- 100% {
- opacity: 1;
- }
- }
-
.status-text {
font-size: 11px;
color: #666;
@@ -74,23 +40,15 @@
super.disconnectedCallback();
}
- indicator() {
- if (this.connection === "disabled") {
- return "";
- }
- return this.connection === "connected" ? "active" : "error";
- }
-
render() {
+ // Only render if there's an error to display
+ if (!this.error) {
+ return html``;
+ }
+
return html`
<div class="status-container">
- <span
- id="pollingIndicator"
- class="polling-indicator ${this.indicator()}"
- ></span>
- <span id="statusText" class="status-text"
- >${this.error || this.message}</span
- >
+ <span id="statusText" class="status-text">${this.error}</span>
</div>
`;
}