beatify the page

popup.css

@@ -1,5 +1,5 @@
 body {
-    width: 200px;
+    width: 240px;
     padding: 15px;
     font-family: Arial, sans-serif;
     display: flex;
@@ -26,6 +26,7 @@ body {
     justify-content: space-between;
     width: 100%;
     margin-bottom: 10px;
+    align-items: flex-start;
   }
   
   button {
@@ -39,6 +40,7 @@ button {
     text-align: center;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     transition-duration: 0.4s;
+    margin: 0; /* 去掉左右外边距 */
   }
   
   button:hover {
@@ -48,23 +50,39 @@ button:hover {
   }
   
   button#bulk-delete {
-    width: 100%;
     font-size: 16px;
     background-color: #e74c3c;
     border-color: #c0392b;
     margin-top: 10px;
+    width: calc(200px + 40px); /* bulk-delete 宽度等于 body 的宽度减去左右内边距再加上两者之间的距离 */
   }
   
-button#bulk-delete:hover {
+  .buttons-wrapper {
-    background-color: #c0392b;
+    display: flex;
-    border-color: #a93226;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 10px;
+  }
+  
+  .buttons-row button {
+    width: 120px; /* 将 remove-checkboxes 和 add-checkboxes 按钮的宽度增加到 120px */
+  }
+  
+  .buttons-row button:first-child {
+    margin-right: 10px; /* 添加一个右外边距来增加两个按钮之间的距离 */
   }
   
   .footer {
-    margin-top: 10px;
+    margin-top: 20px;
     width: 100%;
     font-size: 12px;
     text-align: center;
     border-top: 1px solid #ccc;
     padding-top: 10px;
   }
+
+  button#remove-checkboxes {
+    background-color: #badb34;
+    border-color: #b6b929;
+  }
+  

popup.html

@@ -10,11 +10,13 @@
     <div class="header">
         <h1>bulk-delete-chatGPT</h1>
     </div>
+    <div class="buttons-wrapper">
         <div class="buttons-row">
-        <button id="add-checkboxes">添加复选框</button>
+            <button id="add-checkboxes"><span>Add</span><br><span>Checkboxes</span></button>
-        <button id="remove-checkboxes">去掉复选框</button>
+            <button id="remove-checkboxes"><span>Remove</span><br><span>Checkboxes</span></button>                       
+        </div>
+        <button id="bulk-delete">Bulk delete</button>
     </div>      
-    <button id="bulk-delete">批量删除对话</button>
     <div class="footer">
         <p id="copyright"></p>
     </div>

popup.js

@@ -12,4 +12,7 @@ document.getElementById('remove-checkboxes').addEventListener('click', () => {
 
 // Update copyright year
 const currentYear = new Date().getFullYear();
-document.getElementById('copyright').innerHTML = '© ' + currentYear + ' @qcrao';
+document.getElementById('copyright').innerHTML =
+  '&copy; ' + currentYear + ' <a href="https://github.com/qcrao" target="_blank">@qcrao</a>';
+
+