MessageBottomSheet.js in solara-0.5.0

- old
+ new

@@ -8,27 +8,27 @@
         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: 700px;
+        max-width: 60%;
         margin: 0 auto;
         width: 100%;
     }
     .message-bottom-sheet.show {
         transform: translateY(0);
     }
     .message-content {
-        max-height: 210px; /* Reduced from 300px */
+        max-height: 50%;
         overflow-y: auto;
         margin-bottom: 14px;
     }
     .close-message {
         width: 7%;
@@ -40,11 +40,11 @@
         border-radius: 3.5px;
         cursor: pointer;
         font-size: 11.2px;
     }
     .close-message:hover {
-        background-color: #0056b3;
+        background-color: var(--hover);
     }
 </style>
 <div class="message-bottom-sheet" id="messageBottomSheet">
     <div class="message-content" id="messageContent"></div>
     <button class="close-message" id="closeMessage">Close</button>
@@ -53,10 +53,10 @@
     `;
 
         this.messageBottomSheet = this.shadowRoot.getElementById('messageBottomSheet');
         this.messageContent = this.shadowRoot.getElementById('messageContent');
         this.closeMessageButton = this.shadowRoot.getElementById('closeMessage');
-            this.overlay = this.shadowRoot.getElementById('overlay');
+        this.overlay = this.shadowRoot.getElementById('overlay');
 
         this.closeMessageButton.onclick = () => this.hideMessage();
         this.overlay.onclick = () => this.hideMessage();
     }
 
\ No newline at end of file