space-popover-items

alexburner · Nov 20, 2022 · 649a615 · 649a615
1 parent 8d634d1
commit 649a615
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 33 deletions.
diff --git a/src/components/SpaceControls.tsx b/src/components/SpaceControls.tsx
@@ -65,7 +65,6 @@ const SpaceDisplay = ({ space }: { space: Space }): JSX.Element => {
 }
 
 const POPOVER_PADDING = '20px'
-const FIELD_FONT_SIZE = '16px'
 
 const SpacePopover = ({
   children,
@@ -85,38 +84,17 @@ const SpacePopover = ({
     <PopoverWrapper>
       <PopoverTrigger setOpen={setOpen}>{children}</PopoverTrigger>
       <Popover isOpen={isOpen} setClose={setClose}>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-          }}
-        >
-          <div style={{ padding: POPOVER_PADDING }}>
-            {/* <div style={{ margin: '12px 0 0', textAlign: 'center' }}>
-              <SearchForLocation setLocalSpace={setLocalSpace} />
-            </div> */}
-            <div style={{ margin: '12px 0 0', textAlign: 'center' }}>
-              <UseCurrentLocation setLocalSpace={setLocalSpace} />
-            </div>
-            <div style={{ margin: '12px 0 0', textAlign: 'center' }}>
-              <LatLongFields
-                localSpace={localSpace}
-                setLocalSpace={setLocalSpace}
-              />
-            </div>
+        <div className="space-popover-items">
+          <div className="p-5">
+            <UseCurrentLocation setLocalSpace={setLocalSpace} />
+          </div>
+          <div className="p-3">
+            <LatLongFields
+              localSpace={localSpace}
+              setLocalSpace={setLocalSpace}
+            />
           </div>
-          {/* Popover Footer */}
-          <div
-            style={{
-              padding: POPOVER_PADDING,
-              height: '74px',
-              borderTop: '1px solid #E8E8E8',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
+          <div className="p-2">
             {/* Save/Cancel */}
             <div style={{ textAlign: 'center' }}>
               <FormButton

diff --git a/src/components/SpaceControls/UseCurrentLocation.tsx b/src/components/SpaceControls/UseCurrentLocation.tsx
@@ -10,7 +10,7 @@ export const UseCurrentLocation = ({
   const [loading, setLoading] = useState(false)
   return (
     <button
-      className="button"
+      className="button is-info is-light is-large"
       disabled={loading}
       onClick={() => {
         setLoading(true)

diff --git a/src/style.css b/src/style.css
@@ -61,3 +61,9 @@ tr td:first-child {
 tr td:last-child {
   text-align: left;
 }
+
+/* Space Popover */
+
+.space-popover-items > div:not(:last-child) {
+  border-bottom: 1px solid #e8e8e8;
+}