Replace Button with TextButton in Donations component and adjust styling for Fieldset, TextButton, and Modal components

Author: robertpiosik

packages/ui/src/components/editor/panel/Donations/Donations.tsx

@@ -2,8 +2,8 @@ import styles from './Donations.module.scss'
 import { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
 import { Scrollable } from '../Scrollable'
-import { Button } from '../../common/Button/Button'
 import { Fieldset } from '../Fieldset'
+import { TextButton } from '../TextButton'
 
 const get_href_from_url_like_string = (text: string): string | null => {
   if (/\s/.test(text)) {
@@ -136,7 +136,8 @@ export const Donations: React.FC<DonationsProps> = (props) => {
         <div className={styles.container}>
           <div className={styles.about}>
             Hi there! By donating to Code Web Chat, you’re supporting my mission
-            to independently build the world’s best free and open-source AI coding tools.
+            to independently build the world’s best free and open-source AI
+            coding tools.
             <br />
             Thank you for your support!
           </div>
@@ -179,12 +180,9 @@ export const Donations: React.FC<DonationsProps> = (props) => {
                     <span className={styles.wallets__wallet__hash}>
                       {wallet.address}
                     </span>
-                    <Button
-                      is_small
-                      on_click={() => props.on_show_qr_code(wallet)}
-                    >
+                    <TextButton on_click={() => props.on_show_qr_code(wallet)}>
                       Scan QR
-                    </Button>
+                    </TextButton>
                   </div>
                 </div>
               ))}

packages/ui/src/components/editor/panel/Fieldset/Fieldset.module.scss

@@ -5,7 +5,7 @@
   border-radius: 10px;
 
   &__label {
-    padding: 8px 12px 8px 12px;
+    padding: 8px 10px 8px 10px;
     font-size: 11px;
     font-weight: 600;
     color: var(--cwc-text-color-dimmed);
@@ -29,6 +29,6 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 2px 12px 12px 12px;
+    padding: 2px 10px 10px 10px;
   }
 }

packages/ui/src/components/editor/panel/TextButton/TextButton.module.scss

@@ -1,6 +1,6 @@
 .button {
-  font-size: 12px;
   color: var(--vscode-textLink-foreground);
+  white-space: nowrap;
 
   &:disabled {
     opacity: 0.5;

packages/ui/src/components/editor/panel/modals/Modal/Modal.module.scss

@@ -24,7 +24,7 @@
 .icon {
   font-size: 30px !important;
   text-align: center;
-  margin-top: 24px;
+  padding-top: 16px;
   display: flex;
   justify-content: center;
 
@@ -42,6 +42,10 @@
   font-weight: 500;
   font-size: 14px;
   padding: 12px 12px 0 12px;
+
+  &--with-icon {
+    padding-top: 6px;
+  }
 }
 
 .scrollable {

packages/ui/src/components/editor/panel/modals/Modal/Modal.tsx

@@ -37,7 +37,15 @@ export const Modal: React.FC<Props> = (props) => {
           />
         )}
 
-        {props.title && <div className={styles.title}>{props.title}</div>}
+        {props.title && (
+          <div
+            className={cn(styles.title, {
+              [styles['title--with-icon']]: !!props.icon
+            })}
+          >
+            {props.title}
+          </div>
+        )}
 
         {props.content_slot &&
           (props.content_max_height ? (