more appearance improvements

withhaibun · Nov 3, 2023 · 7475a15 · 7475a15
1 parent a4c1005
commit 7475a15
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/modules/out-review/dashboard/web/src/reviews/assets/reviews.ts b/modules/out-review/dashboard/web/src/reviews/assets/reviews.ts
@@ -1,6 +1,7 @@
 import { css } from "lit";
 
-export const controls = css`ul {
+export const controls = css`
+ul {
   list-style: none;
 }
 .artifact::before,
@@ -21,6 +22,16 @@ export const controls = css`ul {
   border-radius: 4px;
 }
 
+.styled-select {
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  padding: 5px 10px; /* Padding inside the select box */
+  font-size: 16px; /* Font size */
+  appearance: none; /* Removes default browser style */
+  -webkit-appearance: none; /* For Safari */
+  -moz-appearance: none; /* For Firefox */
+}
+
 .ok-false::before {
   content: '✕ ';
   color: red;

diff --git a/modules/out-review/dashboard/web/src/reviews/components.ts b/modules/out-review/dashboard/web/src/reviews/components.ts
@@ -82,7 +82,7 @@ export class AReview extends LitElement {
       return html`<h1>No data</h1>`;
     }
     const chooseView = html`
-  <select @change=${(e: Event) => this.view = <TView>(<HTMLSelectElement>e.target).value}>
+  <select class="styled-select" @change=${(e: Event) => this.view = <TView>(<HTMLSelectElement>e.target).value}>
     ${views.map(option => html`
       <option ?selected=${this.view === option} value=${option}>
         ${option.charAt(0).toUpperCase() + option.slice(1)}
@@ -92,6 +92,7 @@ export class AReview extends LitElement {
 `;
 
     return this.reviewLD && html`
+            <div style="margin-bottom: 4px; padding-left: 20px">View ${chooseView} <label for="show-all-messages"></label></div>
       ${viewStyle}
       <div style="margin-left: 40px">
         <h2 class="ok-${this.reviewLD.meta.ok}">${this.reviewLD.meta.feature}</h2>
@@ -102,7 +103,6 @@ export class AReview extends LitElement {
     })}
           </div>
           <div class="detail-container">
-            View ${chooseView} <label for="show-all-messages"></label>
             ${this.detail}
           </div>
         </div>