AliasesBottomSheet.js in solara-0.5.0

- old
+ new

@@ -1,26 +1,26 @@
 class AliasesBottomSheet extends HTMLElement {
     constructor() {
         super();
-        this.attachShadow({ mode: 'open' });
+        this.attachShadow({mode: 'open'});
         this.shadowRoot.innerHTML = `
           <style>
     .aliases-bottom-sheet {
         display: none;
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: white;
+        background-color: var(--background-color);
         border-top-left-radius: 14px;
         border-top-right-radius: 14px;
         box-shadow: 0 -1.4px 7px rgba(0, 0, 0, 0.1);
         z-index: 1000;
         padding: 14px;
         transition: transform 0.3s ease-out;
         transform: translateY(100%);
-        max-width: 490px;
+        max-width: 50%;
         margin: 0 auto;
         width: 100%;
         max-height: 56vh;
         overflow-y: auto;
     }
@@ -40,11 +40,11 @@
         padding: 0;
     }
     .aliases-bottom-sheet li {
         margin-bottom: 7px;
         font-family: monospace;
-        background-color: #f1f1f1;
+        background-color: var(--card-item-bg);
         padding: 3.5px;
         border-radius: 3.5px;
         font-size: 11.2px;
     }
     .overlay {
@@ -67,16 +67,16 @@
         font-size: 11.2px;
         transition: background-color 0.3s ease;
         margin-top: 14px;
     }
     .close-aliases:hover {
-        background-color: #3a7bc8;
+        background-color: var(--hover);
     }
 </style>
 
 <div class="overlay"></div>
 <div class="aliases-bottom-sheet" id="aliasesSheet">
-    <h3>Aliases</h3>
+    <h2>Aliases</h2>
     <div id="commonAliases">
         <h4>Common Aliases</h4>
         <ul id="commonAliasesList"></ul>
     </div>
     <div id="brandAliases">
\ No newline at end of file