Minor UI refactors

packages/components/src/components/SquigglePlayground.tsx

@@ -215,31 +215,31 @@ const ViewSettings: React.FC<{ register: UseFormRegister<FormFields> }> = ({
             name="minX"
             type="number"
             register={register}
-            label="The minimum of the charted distribution domain"
+            label="Min X Value"
           />
           <InputItem
             name="maxX"
             type="number"
             register={register}
-            label="The maximum of the charted distribution domain"
+            label="Max X Value"
           />
           <InputItem
             name="title"
             type="text"
             register={register}
-            label="The title shown on the distribution"
+            label="Title"
           />
           <InputItem
             name="tickFormat"
             type="text"
             register={register}
-            label="The format that the ticks are rendered"
+            label="Tick Format"
           />
           <InputItem
             name="color"
             type="color"
             register={register}
-            label="The color of the charted distribution"
+            label="Color"
           />
         </div>
       </HeadedSection>
@@ -521,7 +521,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   );
 
   const withEditor = (
-    <div className="flex mt-1">
+    <div className="flex mt-2">
       <div className="w-1/2">{tabs}</div>
       <div className="w-1/2 p-2 pl-4">{squiggleChart}</div>
     </div>

packages/components/src/components/ui/Toggle.tsx

@@ -23,8 +23,8 @@ export const Toggle: React.FC<Props> = ({
       layout
       transition={{ duration: 0.2 }}
       className={clsx(
-        "rounded-full py-1 bg-indigo-500 text-white text-xs font-semibold flex items-center space-x-1",
-        status ? "bg-indigo-500" : "bg-gray-400",
+        "rounded-md py-0.5 bg-slate-500 text-white text-xs font-semibold flex items-center space-x-1",
+        status ? "bg-slate-500" : "bg-gray-400",
         status ? "pl-1 pr-3" : "pl-3 pr-1",
         !status && "flex-row-reverse space-x-reverse"
       )}