Enhance donation UI with theme-consistent styling and layout adjustments

Author: robertpiosik

packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.module.scss

@@ -1,5 +1,6 @@
 .container {
   display: flex;
+  justify-content: center;
 }
 
 .button {

packages/ui/src/components/editor/RecentDonations/RecentDonations.module.scss

@@ -25,8 +25,8 @@
       }
 
       &__username {
-        color: black;
-        background-color: #ffdd00;
+        color: var(--vscode-button-foreground);
+        background-color: var(--vscode-button-background);
         padding: var(--padding-2px) var(--padding-7px);
         font-weight: 600;
         border-radius: var(--border-radius-999px);

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat (CWC, prev. Gemini Coder)",
   "description": "Initialize any web chat with your code",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "npm run compile",

packages/vscode/src/view/frontend/tabs/donations/Donations.tsx

@@ -47,7 +47,11 @@ export const Donations: React.FC<Props> = (props) => {
         }
       </span>
 
-      <UiSeparator size="medium" />
+      <UiSeparator size="large" />
+
+      <UiBuyMeACoffee username="robertpiosik" />
+
+      <UiSeparator size="large" />
 
       {!is_initialized ? (
         <>Fetching recent donations...</>
@@ -62,10 +66,6 @@ export const Donations: React.FC<Props> = (props) => {
             />
           </div>
 
-          <UiBuyMeACoffee username="robertpiosik" />
-
-          <UiSeparator size="large" />
-
           <UiRecentDonations donations={donations} />
           {is_loading_more && (
             <div style={{ textAlign: 'center', padding: '1rem' }}>