update docs with new screenshots and devsever page

Author: laander

assets/feedback-ui-custom-styling.png

@@ -3,7 +3,7 @@
 The Reflag Browser SDK includes a UI you can use to collect feedback from user
 about particular flags.
 
-![image](https://github.com/reflagcom/javascript/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532)
+![Feedback UI example](/assets/feedback-ui-header.png)
 
 ## Global feedback configuration
 
@@ -186,7 +186,7 @@ page. It can be dismissed with the keyboard shortcut `<ESC>` or the dedicated
 close button in the top right corner. It is always centered on the page, capturing
 focus, and making it the primary interface the user needs to interact with.
 
-![image](https://github.com/reflagcom/javascript/assets/331790/6c6efbd3-cf7d-4d5b-b126-7ac978b2e512)
+![Feedback UI with modal positioning](/assets/feedback-ui-positioning-modal.png)
 
 Using a modal is the strongest possible push for feedback. You are interrupting the
 user's normal flow, which can cause annoyance. A good use-case for the modal is
@@ -206,7 +206,7 @@ user's interaction with the rest of the page. It can be dismissed with the dedic
 close button, but will automatically disappear after a short time period if the user
 does not interact with it.
 
-![image](https://github.com/reflagcom/javascript/assets/331790/30413513-fd5f-4a2c-852a-9b074fa4666c)
+![Feedback UI with dialog positioning](/assets/feedback-ui-positioning-dialog.png)
 
 Using a dialog is a soft push for feedback. It lets the user continue their work
 with a minimal amount of intrusion. The user can opt-in to respond but is not
@@ -234,7 +234,7 @@ position: {
 A popover that is anchored relative to a DOM-element (typically a button). It can
 be dismissed by clicking outside the popover or by pressing the dedicated close button.
 
-![image](https://github.com/reflagcom/javascript/assets/331790/4c5c5597-9ed3-4d4d-90c0-950926d0d967)
+![Feedback UI with popover positioning](/assets/feedback-ui-positioning-popover.png)
 
 You can use the popover mode to implement your own button to collect feedback manually.
 
@@ -273,8 +273,6 @@ translations by passing an object in the options to either or both of the
 These translations will replace the English ones used by the feedback interface.
 See examples below.
 
-![image](https://github.com/reflagcom/javascript/assets/331790/68805b38-e9f6-4de5-9f55-188216983e3c)
-
 See [default English localization keys](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx)
 for a reference of what translation keys can be supplied.
 
@@ -359,7 +357,7 @@ properties to your page in your CSS `:root`-scope.
 
 For example, a dark mode theme might look like this:
 
-![image](https://github.com/reflagcom/javascript/assets/34348/5d579b7b-a830-4530-8b40-864488a8597e)
+![Feedback UI with custom styling](/assets/feedback-ui-custom-styling.png)
 
 ```css
 :root {

assets/feedback-ui-header.png

@@ -248,7 +248,7 @@ await reflagClient.updateUser({ voiceHuddleOptIn: (!isEnabled).toString() });
 
 The Reflag Toolbar is great for toggling flags on/off for yourself to ensure that everything works both when a flag is on and when it's off.
 
-<img width="352" alt="Toolbar screenshot" src="https://github.com/user-attachments/assets/c223df5a-4bd8-49a1-8b4a-ad7001357693" />
+![Toolbar example](/assets/toolbar-example.png)
 
 The toolbar will automatically appear on `localhost`. However, it can also be incredibly useful in production.
 You have full control over when it appears through the `toolbar` configuration option passed to the `ReflagClient`.

assets/feedback-ui-positioning-dialog.png

@@ -26,15 +26,56 @@
     </script>
     <style>
       body {
-        font-family: sans-serif;
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          Oxygen,
+          Ubuntu,
+          Cantarell,
+          "Open Sans",
+          "Helvetica Neue",
+          sans-serif;
       }
-      #start-huddle {
+      #container {
         margin: 100px;
+        display: none;
+        flex-direction: row;
+        gap: 12px;
+      }
+
+      #container.show {
+        display: flex;
+      }
+
+      #container button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
+        position: relative;
+        white-space: nowrap;
+        vertical-align: middle;
+        line-height: 1.2;
+        border-radius: 7px;
+        font-weight: 550;
+        padding: 0 12px;
+        height: 28px;
+        font-size: 13px;
+        border: 1px solid #cfd0d8;
+        color: #09090b;
+        box-shadow:
+          0 1px 2px 0 rgba(0, 0, 0, 0.06),
+          0 1px 1px 0 rgba(0, 0, 0, 0.01);
+        background: white;
       }
     </style>
-    <div id="start-huddle" style="display: none">
-      <button onClick="onFeedbackClick(event)">Give feedback!</button>
-      <button onClick="reflag.track(flagKey)">Start huddle</button>
+    <div id="container">
+      <!-- <button onClick="reflag.track(flagKey)">Export to CSV</button> -->
+      <button onClick="onFeedbackClick(event)">Give feedback</button>
     </div>
 
     <script type="module">
@@ -65,13 +106,13 @@
         console.log("Flags updated");
         const flag = reflag.getFlag(flagKey);
 
-        const startHuddleElem = document.getElementById("start-huddle");
+        const startHuddleElem = document.getElementById("container");
         if (flag.isEnabled) {
-          // show the start-huddle button
-          if (startHuddleElem) startHuddleElem.style.display = "block";
+          // show the container button
+          if (startHuddleElem) startHuddleElem.classList.add("show");
         } else {
-          // hide the start-huddle button
-          if (startHuddleElem) startHuddleElem.style.display = "none";
+          // hide the container button
+          if (startHuddleElem) startHuddleElem.classList.remove("show");
         }
       });
     </script>