Playground style updates

.changeset/fresh-rings-occur.md

@@ -0,0 +1,7 @@
+---
+"@quri/versioned-squiggle-components": patch
+"@quri/squiggle-components": patch
+"@quri/ui": patch
+---
+
+Updated playground styles to look more professional, added StyledToggle

packages/components/src/components/CodeEditor/focusGutterExtension.tsx

@@ -125,10 +125,10 @@ class FocusableMarker extends GutterMarker {
         <div
           className={clsx(
             // initial color, specialized for active lines
-            "bg-violet-50 [.cm-activeLineGutter_&]:bg-white",
+            "bg-gray-100 [.cm-activeLineGutter_&]:bg-white",
             // highlight all markers on gutter hover; highlight the hovered markers even more
-            "group-hover/gutter:bg-violet-200 group-hover/marker:!bg-violet-400",
-            "br-1 mt-[1px] h-4 w-[3px] rounded-sm",
+            "group-hover/gutter:bg-gray-200 group-hover/marker:!bg-gray-500",
+            "br-1 mt-[1px] h-4 w-[4px] rounded-sm",
             "transition duration-75"
           )}
         />

packages/components/src/components/SquiggleEditor.tsx

@@ -56,7 +56,7 @@ export const SquiggleEditor: FC<SquiggleEditorProps> = ({
   return (
     <div>
       <div
-        className="rounded-sm border border-slate-300 bg-slate-50 p-2"
+        className="rounded-sm border border-gray-200 bg-gray-50 p-2"
         data-testid="squiggle-editor"
       >
         <CodeEditor

packages/components/src/components/SquigglePlayground/LeftPlaygroundPanel/index.tsx

@@ -9,12 +9,11 @@ import {
 import { SqProject } from "@quri/squiggle-lang";
 import {
   AdjustmentsVerticalIcon,
-  Bars3CenterLeftIcon,
+  CurlyBracketsIcon,
   Dropdown,
   DropdownMenu,
   DropdownMenuActionItem,
   PuzzleIcon,
-  TriangleIcon,
 } from "@quri/ui";
 
 import { isSimulating, Simulation } from "../../../lib/hooks/useSimulator.js";
@@ -98,9 +97,11 @@ export const LeftPlaygroundPanel = forwardRef<LeftPlaygroundPanelHandle, Props>(
         />
         <ToolbarItem
           tooltipText={`Format Code (${altKey()}+Shift+f)`}
-          icon={Bars3CenterLeftIcon}
+          icon={CurlyBracketsIcon}
           onClick={editorRef.current?.format}
-        />
+        >
+          Format
+        </ToolbarItem>
         <Dropdown
           render={() => (
             <DropdownMenu>
@@ -118,9 +119,7 @@ export const LeftPlaygroundPanel = forwardRef<LeftPlaygroundPanelHandle, Props>(
             </DropdownMenu>
           )}
         >
-          <ToolbarItem icon={TriangleIcon} iconClasses="rotate-180">
-            Menu
-          </ToolbarItem>
+          <ToolbarItem showDropdownArrow>Menu</ToolbarItem>
         </Dropdown>
         <div className="flex-1">
           {props.renderExtraControls?.({ openModal })}

packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx

@@ -91,7 +91,7 @@ export const ResizableTwoPanelLayout: FC<Props> = ({
         >
           <div
             ref={handleRef}
-            className="absolute top-0 h-full cursor-ew-resize border-l border-slate-300 transition hover:border-blue-500"
+            className="absolute top-0 h-full cursor-ew-resize border-l border-slate-200 transition hover:border-blue-500"
             style={{ width: 5, right: -5 }}
           />
         </DraggableCore>

packages/components/src/components/SquigglePlayground/index.tsx

@@ -195,7 +195,7 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
     } else {
       return (
         <div className="grid h-full place-items-center">
-          <RefreshIcon className="animate-spin text-slate-400" size={24} />
+          <RefreshIcon className="animate-spin text-gray-400" size={24} />
         </div>
       );
     }

packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx

@@ -29,9 +29,8 @@ type StandardProps = {
   title?: string;
   color?: string;
   textSize?: string;
-  font?: string;
   icon?: JSX.Element;
-  showColon?: boolean;
+  hasEdges?: boolean;
   isFocusEnabled?: boolean;
 };
 
@@ -51,18 +50,18 @@ const getStandardProps = (props: TitleProps): StandardProps => {
     viewerType === "tooltip" && { isFocusEnabled: false },
     valuePath.edges.length > 1 && {
       color: "text-teal-700",
-      showColon: true,
+      hasEdges: true,
     },
     headerVisibility === "large" && {
       color: "text-stone-700",
       textSize: "text-md font-bold",
-      showColon: false,
+      hasEdges: false,
       isFocusEnabled: false,
     },
     isRoot && {
       color: "text-stone-500",
       textSize: "text-sm font-semibold",
-      showColon: false,
+      hasEdges: false,
       isFocusEnabled: false,
     },
     parentValue?.tag === "Array" &&
@@ -71,13 +70,12 @@ const getStandardProps = (props: TitleProps): StandardProps => {
       },
     taggedName && {
       title: taggedName,
-      font: "font-sans",
     },
     isRootImport && {
       title: exportData?.sourceId || undefined,
-      color: "text-violet-900",
-      icon: <CodeBracketIcon size={12} className="mr-1 text-violet-900" />,
-      showColon: false,
+      color: "text-cyan-600",
+      icon: <CodeBracketIcon size={12} className="mr-1 text-cyan-600" />,
+      hasEdges: false,
     },
   ]);
 
@@ -91,32 +89,30 @@ export const Title: FC<TitleProps> = (props) => {
     title = pathToShortName(valuePath),
     color = "text-orange-900",
     icon = undefined,
-    showColon = false,
+    hasEdges = false,
     isFocusEnabled = true,
     textSize = "text-sm",
-    font = "font-mono",
   } = standards;
 
   return (
     <div
       className={clsx(
         "flex flex-row items-center leading-3",
-        showColon && "mr-3"
+        hasEdges && "mr-3"
       )}
     >
       {icon}
       <div
         className={clsx(
           color,
           textSize,
-          font,
+          "font-mono",
           isFocusEnabled && "cursor-pointer hover:underline"
         )}
         onClick={() => isFocusEnabled && zoomIn(valuePath)}
       >
         {title}
       </div>
-      {showColon && <div className="font-mono text-gray-400">:</div>}
     </div>
   );
 };

packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx

@@ -137,12 +137,12 @@ export const ValueWithContextViewer: FC<Props> = ({
       return (
         <div
           className={clsx(
-            "mr-1.5 flex w-4 cursor-pointer justify-center hover:!text-stone-600",
-            isOpen ? "text-stone-600 opacity-40" : "text-stone-800 opacity-40"
+            "mr-1.5 flex w-4 cursor-pointer justify-center hover:!text-gray-600",
+            isOpen ? "text-gray-200" : "text-gray-500"
           )}
           onClick={handle.toggleCollapsed}
         >
-          <Icon size={13} />
+          <Icon size={9} />
         </div>
       );
     } else {
@@ -158,7 +158,7 @@ export const ValueWithContextViewer: FC<Props> = ({
           className="group flex w-4 shrink-0 cursor-pointer justify-center"
           onClick={handle.toggleCollapsed}
         >
-          <div className="w-px bg-stone-100 group-hover:bg-stone-400" />
+          <div className="w-px bg-gray-50 group-hover:bg-gray-300" />
         </div>
       );
     } else {
@@ -178,10 +178,8 @@ export const ValueWithContextViewer: FC<Props> = ({
             }}
             tabIndex={viewerType === "tooltip" ? undefined : 0}
             className={clsx(
-              "group flex justify-between rounded-sm pr-0.5 hover:bg-stone-100 focus-visible:outline-none",
-              isZoomedIn
-                ? "mb-2 px-0.5 py-1 focus:bg-indigo-50"
-                : "focus:bg-indigo-100"
+              "group flex justify-between rounded-sm pr-0.5 hover:bg-gray-100 focus:bg-slate-100 focus-visible:outline-none",
+              isZoomedIn && "mb-2 px-0.5 py-1"
             )}
             onFocus={(_) => {
               scrollEditorToPath();
@@ -239,7 +237,7 @@ export const ValueWithContextViewer: FC<Props> = ({
                       className={clsx(
                         "cursor-pointer transition",
                         isRootImport
-                          ? "text-violet-400 hover:!text-violet-900 group-hover:text-violet-500 group-focus:text-violet-600"
+                          ? "text-cyan-200 hover:!text-cyan-900 group-hover:text-cyan-700 group-focus:text-cyan-700"
                           : "text-slate-200 hover:!text-slate-900 group-hover:text-slate-400 group-focus:text-slate-400"
                       )}
                     />

packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx

@@ -16,7 +16,9 @@ export const ZoomedInNavigationItem: FC<{
     >
       {text}
     </span>
-    <ChevronRightIcon className="text-slate-300" size={24} />
+    <span className="px-1">
+      <ChevronRightIcon className="text-gray-300" size={14} />
+    </span>
   </div>
 );
 
@@ -32,7 +34,7 @@ export const ZoomedInNavigation: FC<{
     : zoomedInPath.allPrefixPaths();
 
   return (
-    <div className="flex items-center">
+    <div className="mt-1 flex items-center">
       <ZoomedInNavigationItem onClick={zoomOut} text="Home" />
 
       {/* We remove the last element, because it's the one being shown  */}

packages/components/src/components/ViewerWithMenuBar/Layout.tsx

@@ -13,16 +13,17 @@ export const Layout: FC<{
     <div className="flex flex-col overflow-y-auto">
       <div
         className={clsx(
-          `mb-1 flex h-8 items-center justify-between`,
+          `mb-1 flex h-8 items-center justify-between overflow-hidden border-b border-gray-200`,
           `px-${xPadding}`
         )}
       >
-        {menu}
+        <div className="grid h-full place-items-stretch">{menu}</div>
         <div className="flex items-center">
           {indicator}
           {changeSeedAndRunButton}
         </div>
       </div>
+
       <div
         className="flex-1 overflow-auto px-2 pb-1"
         data-testid="dynamic-viewer-result"

packages/components/src/components/ViewerWithMenuBar/RandomizeSeedButton.tsx

@@ -24,11 +24,11 @@ const DiceIcon: FC<{ side: number; isSimulating: boolean }> = ({
   isSimulating,
 }) => {
   const props = {
-    size: 16,
+    size: 14,
     className: clsx(
       isSimulating
-        ? "animate-spin text-violet-400 group-hover:text-violet-900"
-        : "text-violet-200 group-hover:text-violet-500"
+        ? "animate-spin text-gray-500 group-hover:text-gray-600"
+        : "text-gray-300 group-hover:text-gray-600"
     ),
   };
   switch (side) {

packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx

@@ -16,11 +16,11 @@ export const SimulatingIndicator: FC<{
   return (
     <div
       className={clsx(
-        "whitespace-nowrap text-sm",
-        _isSimulating ? "text-zinc-200" : "text-zinc-400"
+        "whitespace-nowrap text-sm font-light",
+        _isSimulating ? "text-gray-200" : "text-gray-500"
       )}
     >
-      {`simulation #${simulation.executionId} in ${showTime(
+      {`Simulation #${simulation.executionId} in ${showTime(
         simulation.executionTime
       )}`}
     </div>

packages/components/src/components/ViewerWithMenuBar/ViewerMenu.tsx

@@ -2,17 +2,15 @@ import clsx from "clsx";
 import { FC } from "react";
 
 import {
-  Button,
-  CodeBracketIcon,
   Dropdown,
   DropdownMenu,
   DropdownMenuActionItem,
   DropdownMenuHeader,
-  TriangleIcon,
 } from "@quri/ui";
 
 import { SqOutputResult } from "../../../../squiggle-lang/src/public/types.js";
 import { SelectableViewerTab, ViewerTab } from "../../lib/utility.js";
+import { ToolbarItem } from "../ui/PanelWithToolbar/ToolbarItem.js";
 
 const MenuItemTitle: FC<{ title: string; type: string | null }> = ({
   title,
@@ -21,11 +19,11 @@ const MenuItemTitle: FC<{ title: string; type: string | null }> = ({
   const isEmpty = type === null;
   return (
     <div className="flex justify-between">
-      <span className={clsx(isEmpty && "text-slate-400")}>{title}</span>
+      <span className={clsx(isEmpty && "text-gray-400")}>{title}</span>
       {isEmpty ? (
-        <span className="text-slate-300">Empty</span>
+        <span className="text-gray-300">Empty</span>
       ) : (
-        <span className="text-blue-800">{type}</span>
+        <span className="text-gray-400">{type}</span>
       )}
     </div>
   );
@@ -78,12 +76,27 @@ export const ViewerMenu: FC<Props> = ({
                   return null;
               }
             };
+            const viewerName = () => {
+              switch (tab) {
+                case "Imports":
+                  return "Imports";
+                case "Variables":
+                  return "Local Variables";
+                case "Exports":
+                  return "Exported Variables";
+                case "Result":
+                  return "Final Result";
+                default:
+                  return "";
+              }
+            };
             return (
               tab !== "AST" && (
                 <DropdownMenuActionItem
                   key={tab}
-                  icon={CodeBracketIcon}
-                  title={<MenuItemTitle title={tab} type={getType()} />}
+                  title={
+                    <MenuItemTitle title={viewerName()} type={getType()} />
+                  }
                   onClick={() => {
                     setViewerTab(tab);
                     close();
@@ -94,7 +107,6 @@ export const ViewerMenu: FC<Props> = ({
           })}
           <DropdownMenuHeader>Debugging</DropdownMenuHeader>
           <DropdownMenuActionItem
-            icon={CodeBracketIcon}
             title={<MenuItemTitle title="AST" type="" />}
             onClick={() => {
               setViewerTab("AST");
@@ -104,12 +116,7 @@ export const ViewerMenu: FC<Props> = ({
         </DropdownMenu>
       )}
     >
-      <Button size="small">
-        <div className="flex items-center space-x-1.5">
-          <span>{viewerTabTitle(viewerTab)}</span>
-          <TriangleIcon className="rotate-180 text-slate-400" size={10} />
-        </div>
-      </Button>
+      <ToolbarItem showDropdownArrow>{viewerTabTitle(viewerTab)}</ToolbarItem>
     </Dropdown>
   );
 };

packages/components/src/components/ui/Alert.tsx

@@ -80,10 +80,10 @@ export const SuccessAlert: React.FC<{
 }> = (props) => (
   <Alert
     {...props}
-    backgroundColor="bg-green-50"
-    headingColor="text-green-800"
-    bodyColor="text-green-700"
+    backgroundColor="bg-emerald-50"
+    headingColor="text-emerald-800"
+    bodyColor="text-emerald-700"
     icon={CheckCircleIcon}
-    iconColor="text-green-400"
+    iconColor="text-emerald-400"
   />
 );