few more styling updates

Author: laander

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

@@ -1,13 +1,3 @@
-.search-input {
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid var(--border-color);
-  color: white;
-  padding: 0 0 6px 0;
-  margin-bottom: 4px;
-  width: 100%;
-}
-
 .features-table {
   width: 100%;
   border-collapse: collapse;
@@ -21,31 +11,43 @@
   color: var(--brand300);
 }
 
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-left: 10px;
-  background: linear-gradient(
-      45deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 43%,
-      #fff 45%,
-      #fff 55%,
-      rgba(0, 0, 0, 0) 57%,
-      rgba(0, 0, 0, 0) 100%
-    ),
-    linear-gradient(
-      135deg,
-      transparent 0%,
-      transparent 43%,
-      #fff 45%,
-      #fff 55%,
-      transparent 57%,
-      transparent 100%
-    );
-  cursor: pointer;
+.search-input {
+  background: transparent;
+  border: none;
+  color: white;
+  width: 100%;
+  font-size: 12px;
+
+  &::placeholder {
+    color: var(--gray500);
+  }
+
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-left: 10px;
+    background: linear-gradient(
+        45deg,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, 0) 43%,
+        #fff 45%,
+        #fff 55%,
+        rgba(0, 0, 0, 0) 57%,
+        rgba(0, 0, 0, 0) 100%
+      ),
+      linear-gradient(
+        135deg,
+        transparent 0%,
+        transparent 43%,
+        #fff 45%,
+        #fff 55%,
+        transparent 57%,
+        transparent 100%
+      );
+    cursor: pointer;
+  }
 }
 
 .feature-name-cell {

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

@@ -83,7 +83,7 @@ export function FeatureSearch({
   return (
     <input
       type="search"
-      placeholder="Search"
+      placeholder="Search features"
       onInput={(s) => onSearch(s.currentTarget.value)}
       autoFocus
       class="search-input"

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

@@ -90,6 +90,7 @@
   border-radius: 7px;
   z-index: 999999;
   min-width: 200px;
+  padding: 0;
 }
 
 .toolbar-toggle {
@@ -116,27 +117,29 @@
   align-items: center;
 
   animation: bounceInUp 1s ease-out;
-}
 
-.toolbar-toggle.open {
-  color: var(--gray500);
-}
+  transition: color 0.1s ease;
 
-.toolbar-toggle .override-indicator {
-  position: absolute;
-  top: -3px;
-  right: -3px;
-  width: 8px;
-  height: 8px;
-  background-color: var(--brand400);
-  border-radius: 50%;
-  opacity: 0;
-  transition: opacity 0.1s ease-in-out;
-  border: 1px solid var(--brand300);
+  &.open {
+    color: var(--gray500);
+  }
 
-  &.show {
-    opacity: 1;
-    animation: gelatine 0.5s;
+  & .override-indicator {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 8px;
+    height: 8px;
+    background-color: var(--brand400);
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    border: 1px solid var(--brand300);
+
+    &.show {
+      opacity: 1;
+      animation: gelatine 0.5s;
+    }
   }
 }
 

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

@@ -3,8 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import { BucketClient } from "../client";
 import { toolbarContainerId } from "../ui/constants";
-import { Dialog, useDialog } from "../ui/Dialog";
-import { Close } from "../ui/icons/Close";
+import { Dialog, DialogContent, DialogHeader, useDialog } from "../ui/Dialog";
 import { Logo } from "../ui/icons/Logo";
 import { Offset, Placement } from "../ui/types";
 import { parseUnanchoredPosition } from "../ui/utils";
@@ -95,14 +94,18 @@ export default function Toolbar({
         }}
         close={close}
       >
-        <FeatureSearch onSearch={onSearch} />
-        <FeaturesTable
-          features={searchedFeatures}
-          setEnabledOverride={bucketClient.setFeatureOverride.bind(
-            bucketClient,
-          )}
-          appBaseUrl={appBaseUrl}
-        />
+        <DialogHeader>
+          <FeatureSearch onSearch={onSearch} />
+        </DialogHeader>
+        <DialogContent>
+          <FeaturesTable
+            features={searchedFeatures}
+            setEnabledOverride={bucketClient.setFeatureOverride.bind(
+              bucketClient,
+            )}
+            appBaseUrl={appBaseUrl}
+          />
+        </DialogContent>
       </Dialog>
     </div>
   );
@@ -136,11 +139,7 @@ function ToolbarToggle({
   return (
     <div ref={innerRef} class={toggleClasses} onClick={onClick} style={offsets}>
       <div class={indicatorClasses}></div>
-      {isOpen ? (
-        <Close width="16" height="16" />
-      ) : (
-        <Logo height="13px" width="13px" />
-      )}
+      <Logo height="13px" width="13px" />
     </div>
   );
 }

packages/browser-sdk/src/ui/Dialog.css

@@ -94,3 +94,12 @@
       fade 300ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 }
+
+.dialog-header {
+  border-bottom: 1px solid var(--border-color);
+  padding: 7px 12px;
+}
+
+.dialog-content {
+  padding: 7px 12px;
+}

packages/browser-sdk/src/ui/Dialog.tsx

@@ -221,3 +221,19 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
     </>
   );
 };
+
+export function DialogHeader({
+  children,
+}: {
+  children: preact.ComponentChildren;
+}) {
+  return <header class="dialog-header">{children}</header>;
+}
+
+export function DialogContent({
+  children,
+}: {
+  children: preact.ComponentChildren;
+}) {
+  return <div class="dialog-content">{children}</div>;
+}