style: tweak the appearance of option cards

apps/client/src/stylesheets/theme-next-dark.css

@@ -227,8 +227,8 @@
     --card-background-color: #ffffff12;
     --card-background-hover-color: #3c3c3c;
     --card-background-press-color: #464646;
-    --card-border-color: #222222;
+    --card-border-color: transparent;
-    --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    --card-box-shadow: none;
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);

apps/client/src/stylesheets/theme-next-light.css

@@ -223,12 +223,12 @@
 
     --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
 
-    --card-background-color: var(--accented-background-color);
+    --card-background-color: #0000000d;
     --card-background-hover-color: #f9f9f9;
     --card-background-press-color: #efefef;
-    --card-border-color: #eaeaea;
+    --card-border-color: transparent;
     --card-shadow-color: rgba(0, 0, 0, 0.1);
-    --card-box-shadow: 0 0 12px var(--card-shadow-color);
+    --card-box-shadow: none;
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);

apps/client/src/stylesheets/theme-next/pages.css

@@ -148,7 +148,7 @@ div.note-detail-empty {
     --options-card-min-width: 500px;
     --options-card-max-width: 900px;
     --options-card-padding: 17px;
-    --options-title-font-size: 1rem;
+    --options-title-font-size: .75rem;
     --options-title-offset: 13px;
 }
 /* Create a gap at the top of the option pages */
@@ -173,8 +173,7 @@ div.note-detail-empty {
 }
 
 .options-section:not(.tn-no-card) {
-    margin: auto;    
+    border-radius: 8px;
-    border-radius: 12px;
     border: 1px solid var(--card-border-color) !important;
     box-shadow: var(--card-box-shadow);
     background: var(--card-background-color);
@@ -182,7 +181,7 @@ div.note-detail-empty {
     margin-bottom: calc(var(--options-title-offset) + 26px) !important;
 }
 
-body.desktop .option-section:not(.tn-no-card) {
+body.desktop .options-section:not(.tn-no-card) {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
 }
@@ -193,9 +192,16 @@ body.desktop .option-section:not(.tn-no-card) {
     padding-bottom: var(--default-padding);
 }
 
+.options-section:not(.tn-no-card) h4,
+.options-section:not(.tn-no-card) h5 {
+    text-transform: uppercase;
+    letter-spacing: .4pt;
+}
+
+
 .options-section:not(.tn-no-card) h4 {
     font-size: var(--options-title-font-size);
-    font-weight: bold;
+    font-weight: 600;
     color: var(--launcher-pane-text-color);
     margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
     margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;

apps/client/src/widgets/type_widgets/options/etapi.tsx

@@ -101,7 +101,7 @@ function TokenList({ tokens }: { tokens: EtapiToken[] }) {
 
     return (
         tokens.length ? (
-            <div style={{ overflow: "auto", height: "500px"}}>
+            <div style={{ overflow: "auto"}}>
                 <table className="table table-stripped">
                     <thead>
                         <tr>