design: fix form design in light

Kanaries · Oct 7, 2023 · 776b4b1 · 776b4b1 · vercel · Oct 7, 2023
1 parent 9b0253d
commit 776b4b1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/packages/graphic-walker/src/App.tsx b/packages/graphic-walker/src/App.tsx
@@ -217,15 +217,15 @@ const App = observer<IGWProps>(function App(props) {
                         <LogPanel />
                         <BinPanel/>
                         {commonStore.showGeoJSONConfigPanel && <GeoConfigPanel geoList={props.geoList} />}
-                        <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
-                            <div className="md:col-span-3 xl:col-span-1">
+                        <div className="sm:grid sm:grid-cols-12 xl:grid-cols-6">
+                            <div className="sm:col-span-3 xl:col-span-1">
                                 <DatasetFields />
                             </div>
-                            <div className="md:col-span-2 xl:col-span-1">
+                            <div className="sm:col-span-2 xl:col-span-1">
                                 <FilterField />
                                 <AestheticFields />
                             </div>
-                            <div className="md:col-span-7 xl:col-span-4">
+                            <div className="sm:col-span-7 xl:col-span-4">
                                 <div>
                                     <PosFields />
                                 </div>

diff --git a/packages/graphic-walker/src/components/visualConfig/config-item.tsx b/packages/graphic-walker/src/components/visualConfig/config-item.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 export function ConfigItemContainer (props: { children?: React.ReactNode; className?: string }) {
-    return <div className="border border-gray-50 dark:border-gray-700 p-4 m-4 rounded-lg">
+    return <div className="border border-gray-200 dark:border-gray-700 p-4 m-4 rounded-lg">
         {props.children}
     </div>
 }
 
 export function ConfigItemContent (props: { children?: React.ReactNode }) {
-    return <div className="border-t border-gray-50 dark:border-gray-700 mt-4 pt-4">
+    return <div className="border-t border-gray-200 dark:border-gray-700 mt-4 pt-4">
         {props.children}
     </div>
 }