Merge branch 'main' into bump-browser-based-sdks-to-3.1.0

Author: Lasse Boisen Andersen

packages/browser-sdk/src/toolbar/Features.css

@@ -69,6 +69,15 @@
   text-overflow: ellipsis;
   width: auto;
   padding: 6px 6px 6px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .feature-icon {
+    height: 15px;
+    width: 15px;
+    color: var(--dimmed-color);
+  }
 }
 
 .feature-link {

packages/browser-sdk/src/toolbar/Features.tsx

@@ -1,6 +1,8 @@
 import { h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
+import { Feature } from "../ui/icons/Feature";
+
 import { Switch } from "./Switch";
 import { FeatureItem } from "./Toolbar";
 
@@ -79,6 +81,7 @@ function FeatureRow({
       style={{ "--i": index }}
     >
       <td class="feature-name-cell">
+        <Feature class="feature-icon" />
         <a
           class="feature-link"
           href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}

packages/browser-sdk/src/toolbar/Toolbar.css

@@ -59,6 +59,7 @@
   --bg-color: hsla(230, 9%, 8%, 0.85);
   --bg-light-color: hsla(230, 9%, 6%, 0.85);
   --border-color: hsla(0, 0%, 100%, 0.1);
+  --dimmed-color: hsla(230, 9%, 40%, 1);
   --bg-blur: 3px;
 
   --logo-color: white;
@@ -97,7 +98,7 @@
     inset 0px 1px rgba(255, 255, 255, 0.1);
   border-radius: 7px;
   z-index: 999999;
-  min-width: 200px;
+  min-width: 220px;
   padding: 0;
 
   --visible-features: 15;

packages/browser-sdk/src/ui/icons/Feature.tsx

@@ -0,0 +1,19 @@
+import { FunctionComponent, h } from "preact";
+
+export const Feature: FunctionComponent<h.JSX.SVGAttributes<SVGSVGElement>> = (
+  props,
+) => (
+  <svg
+    fill="none"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.7474 1.72518C11.5222 1.2766 12.4778 1.27661 13.2526 1.72518L20.2526 5.77782C21.0246 6.22479 21.5 7.04929 21.5 7.94138V16.0586C21.5 16.9507 21.0246 17.7752 20.2526 18.2222L13.2526 22.2748C12.4778 22.7234 11.5222 22.7234 10.7474 22.2748L3.74741 18.2222C2.97537 17.7752 2.5 16.9507 2.5 16.0586V7.94138C2.5 7.04929 2.97537 6.22479 3.74741 5.77782L10.7474 1.72518ZM5.49388 7.0777L12.0001 10.8444L18.5062 7.07774L12 3.311L5.49388 7.0777ZM4.5 8.81329V16.3469L11.0001 20.1101V12.5765L4.5 8.81329ZM13.0001 20.11L19.5 16.3469V8.81337L13.0001 12.5765V20.11Z"
+      fill="currentColor"
+    />
+  </svg>
+);