style/note badges: tweak

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

@@ -202,11 +202,11 @@
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
 
-    --badge-temporaraily-editable-background-color: #4fa52b;
-    --badge-read-only-background-color: #e33f3b;
-    --badge-share-background-color: #3b82f6;
-    --badge-clipped-note-background-color: #57a2a5;
-    --badge-execute-background-color: #f59e0b;
+    --badge-temporaraily-editable-background-color: #297331;
+    --badge-read-only-background-color: #af4340;
+    --badge-share-background-color: #4d4d4d;
+    --badge-clipped-note-background-color: #295773;
+    --badge-execute-background-color: #604180;
 
     --note-icon-background-color: #444444;
     --note-icon-color: #d4d4d4;

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

@@ -194,11 +194,11 @@
     --badge-background-color: #00000011;
     --badge-text-color: var(--muted-text-color);
 
-    --badge-temporaraily-editable-background-color: #4fa52b;
-    --badge-read-only-background-color: #e33f3b;
-    --badge-share-background-color: #3b82f6;
-    --badge-clipped-note-background-color: #57a2a5;
-    --badge-execute-background-color: #f59e0b;
+    --badge-temporaraily-editable-background-color: #35a64c;
+    --badge-read-only-background-color: #c8302c;
+    --badge-share-background-color: #6b6b6b;
+    --badge-clipped-note-background-color: #2284c0;
+    --badge-execute-background-color: #7b47af;
 
     --note-icon-background-color: #4f4f4f;
     --note-icon-color: white;

apps/client/src/widgets/note_title.css

@@ -80,6 +80,18 @@ body.experimental-feature-new-layout {
             .ext-badge .text {
                 display: none;
             }
+        
+            .ext-badge {
+                --size: 2em;
+                width: var(--size);
+                height: var(--size);
+                padding: 0;
+
+                .bx {
+                    opacity: 1;
+                    margin: 0;
+                }
+            };
         }
     }
 

apps/client/src/widgets/react/Badge.css

@@ -1,15 +1,20 @@
 .ext-badge {
     display: flex;
+    height: 1.9em;
     align-items: center;
-    padding: 2px 6px;
+    justify-content: center;
     border-radius: var(--badge-radius);
+    padding-inline: 8px;
     font-size: 0.75em;
+    letter-spacing: .2pt;
     background-color: var(--color, transparent);
     color: white;
     min-width: 0;
     flex-shrink: 1;
+    white-space: collapse;
 
-    &.clickable {
+    &.clickable,
+    .dropdown-badge & {
         cursor: pointer;
 
         &:hover {
@@ -17,12 +22,20 @@
         }
     }
 
+    .bx {
+        font-size: 1.2em;
+        margin-inline-end: 4px;
+        opacity: .6;
+    }
+
     a {
         color: inherit !important;
         text-decoration: none;
     }
 
     > * {
+        display: flex;
+        align-items: center;
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;

apps/client/src/widgets/react/Badge.tsx

@@ -36,7 +36,7 @@ export function Badge({ icon, className, text, tooltip, href, ...containerProps
     });
 
     const content = <>
-        {icon && <><Icon icon={icon} />&nbsp;</>}
+        {icon && <Icon icon={icon} />}
         <span class="text">{text}</span>
     </>;