cleanup storybook icons color docs

cypress-io · May 23, 2022 · b58e911 · b58e911 · vercel · May 23, 2022
1 parent efb31b3
commit b58e911
Showing 1 changed file with 27 additions and 23 deletions.
diff --git a/storybook/intro/stories/intro/Icons.stories.mdx b/storybook/intro/stories/intro/Icons.stories.mdx
@@ -42,36 +42,40 @@ For more info, check-out the Icon component documentation on the framework you a
               }));
         return (<>
           <h3 className="text-lg border-b-1 border-gray-300 pb-1">Use the dropdowns below to customize the colors of the icons</h3>
-          <div className={`flex items-center justify-evenly border-b-1 border-gray-300 p-3 text-${strokeColor.value}-600 bg-${fillColor.value}-50`}>
-            <div className="w-1/4">
+          <div className="flex border-b-1 border-gray-300">
+            <div className={`p-3 w-1/2 flex items-center justify-evenly text-${strokeColor.value}-600 bg-${fillColor.value}-50`}>
+              <div className="w-1/2">
               strokeColor
               <Select 
                 defaultValue={strokeColor} 
                 className="ml-2 mr-4" 
                 onChange={setStrokeColor} 
                 options={colorOptions} 
               />
-            </div><div className="w-1/4">
-              fillColor
-              <Select
-                defaultValue={fillColor} 
-                className="mx-2 mr-4" 
-                onChange={setFillColor} 
-                options={colorOptions} />
-            </div><div className="w-1/4">
-              secondaryStrokeColor
-              <Select
-                defaultValue={secondaryStrokeColor} 
-                className="mx-2 mr-4" 
-                onChange={setSecondaryStrokeColor} 
-                options={colorOptions} />
-            </div><div className="w-1/4">
-              secondaryFillColor
-              <Select
-                defaultValue={secondaryFillColor} 
-                className="mx-2" 
-                onChange={setSecondaryFillColor} 
-                options={colorOptions} />
+              </div><div className="w-1/2">
+                fillColor
+                <Select
+                  defaultValue={fillColor} 
+                  className="mx-2 mr-4" 
+                  onChange={setFillColor} 
+                  options={colorOptions} />
+              </div>
+            </div><div className={`p-3 w-1/2 flex items-center justify-evenly text-${secondaryStrokeColor.value}-600 bg-${secondaryFillColor.value}-50`}>
+              <div className="w-1/2">
+                secondaryStrokeColor
+                <Select
+                  defaultValue={secondaryStrokeColor} 
+                  className="mx-2 mr-4" 
+                  onChange={setSecondaryStrokeColor} 
+                  options={colorOptions} />
+              </div><div className="w-1/2">
+                secondaryFillColor
+                <Select
+                  defaultValue={secondaryFillColor} 
+                  className="mx-2" 
+                  onChange={setSecondaryFillColor} 
+                  options={colorOptions} />
+              </div>
             </div>
           </div>
           <div>