Some css cleanup

src/main.css

@@ -44,9 +44,11 @@ h3 {
 
 button {
   background-color: var(--primary-color);
+  border-radius: 8px;
+  min-height: 3rem;
+  color: black;
   font-family: inherit;
   font-size: inherit;
-  color: black;
 }
 
 button:disabled {

src/ui/Spinner.jsx

@@ -1,7 +1,7 @@
 import { spinner } from './Spinner.module.css';
 
-export default function Spinner() {
-  return <div className={spinner}>
+export default function Spinner({className}) {
+  return <div className={`${spinner} ${className}`}>
     <div></div>
     <div></div>
     <div></div>

src/ui/components/DrawerCard.module.css

@@ -5,13 +5,17 @@
   padding: 0 0 0 0.5rem;
 }
 
+.header button {
+  min-height: 0;
+  border: none;
+  background-color: transparent;
+}
+
 .title {
   padding: 0 0 0 0.25rem;
   flex-grow: 1;
   text-align: left;
   user-select: text;
-  border: none;
-  background-color: transparent;
 }
 
 .title h3 {

src/ui/components/Improv.jsx

@@ -5,11 +5,13 @@ import EntitySection from './EntitySection';
 import WifiSelectionComponent from './WifiSelectionComponent';
 
 import iif from '../../iif';
+import css from '../css';
 
 import { mdiWifiCheck, mdiWifiCog, mdiWifiCancel } from '@mdi/js';
 import { useState } from 'react';
 
-import { fill, flex } from './Improv.module.css';
+import { flex, flexFill } from '../utility.module.css';
+import { link } from './Improv.module.css';
 
 export default function Improv({
   initializing,
@@ -28,25 +30,26 @@ export default function Improv({
   const [ isShowingWifiDialog, setShowWifiDialog] = useState(false);
 
   if (notDetected && !initializing) {
-    return
+    return (
       <EntitySection title="Wi-Fi" className={flex}>
-        <Icon className={`${flex} ${fill}`} path={mdiWifiCancel} size={4}/>
+        <Icon className={css(flex, flexFill)} path={mdiWifiCancel} size={4}/>
         <h3 className={flex}>No Improv detected</h3>
       </EntitySection>
+    );
   }
 
   if (!initialized) {
-    return <Spinner />;
+    return <Spinner className={css(flex, flexFill)} />;
   }
 
   let wifiSection = <>
     <Icon
-      className={`${flex} ${fill}`}
+      className={css(flex, flexFill)}
       size={4}
       path={provisioned ? mdiWifiCheck : mdiWifiCog}
     />
     {iif(error && !provisioned,
-      <h3 className={`${fill} ${flex}`}>Provisioning failed.</h3>
+      <h3 className={css(flex, flexFill)}>Provisioning failed.</h3>
     )}
     <button
       onClick={() => {
@@ -58,7 +61,7 @@ export default function Improv({
     </button>
     {iif(nextUrl,
       <a
-        className={flex}
+        className={css(link, flex)}
         href={nextUrl}
         target="_blank"
       >

src/ui/components/Improv.module.css

@@ -1,14 +1,4 @@
-.fill {
-  flex-basis: 100%;
-}
-
-.flex {
-  display: flex;
-  flex-grow: 1;
-  justify-content: center;
-}
-
-a.flex {
+.link {
   text-decoration: inherit;
 }
 

src/ui/css.js

@@ -0,0 +1,3 @@
+export default function css(...args) {
+  return args.join(' ');
+}

src/ui/utility.module.css

@@ -0,0 +1,10 @@
+.flex {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+}
+
+.flexFill {
+  flex-basis: 100%;
+}
+