From c1a351a7043309950d8dc53d7a8c2febbe05da8a Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Wed, 13 Jul 2022 13:55:35 -0700
Subject: [PATCH] Minor UI refactors

---
 .../components/src/components/SquigglePlayground.tsx | 12 ++++++------
 packages/components/src/components/ui/Toggle.tsx     |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 534be721..a8f5852a 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/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>
diff --git a/packages/components/src/components/ui/Toggle.tsx b/packages/components/src/components/ui/Toggle.tsx
index 510b86cb..90e73e08 100644
--- a/packages/components/src/components/ui/Toggle.tsx
+++ b/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"
       )}