refactor(web): camera view + bugfixes

web/src/components/Button.jsx

@@ -55,7 +55,7 @@ export default function Button({
   type = 'contained',
   ...attrs
 }) {
-  let classes = `${className} ${ButtonTypes[type]} ${
+  let classes = `whitespace-nowrap flex items-center space-x-1 ${className} ${ButtonTypes[type]} ${
     ButtonColors[disabled ? 'disabled' : color][type]
   } font-sans inline-flex font-bold uppercase text-xs px-2 py-2 rounded outline-none focus:outline-none ring-opacity-50 transition-shadow transition-colors ${
     disabled ? 'cursor-not-allowed' : 'focus:ring-2 cursor-pointer'

web/src/components/Card.jsx

@@ -6,6 +6,7 @@ export default function Box({
   buttons = [],
   className = '',
   content,
+  elevated = true,
   header,
   href,
   icons,
@@ -16,14 +17,16 @@ export default function Box({
 }) {
   const Element = href ? 'a' : 'div';
 
+  const typeClasses = elevated ? 'shadow-md hover:shadow-lg transition-shadow' : 'border border-gray-200';
+
   return (
-    <div
-      className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-shadow rounded-lg overflow-hidden ${className}`}
-    >
-      <Element href={href} {...props}>
-        {media}
-        <div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
-      </Element>
+    <div className={`bg-white dark:bg-gray-800 rounded-lg overflow-hidden ${typeClasses} ${className}`}>
+      {media || header ? (
+        <Element href={href} {...props}>
+          {media}
+          <div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
+        </Element>
+      ) : null}
       {buttons.length || content ? (
         <div class="pl-4 pb-2">
           {content || null}

web/src/components/NavigationDrawer.jsx

@@ -49,10 +49,12 @@ export function Destination({ className = '', href, text, ...other }) {
       : 'class']: 'block p-2 text-sm font-semibold text-gray-900 rounded hover:bg-blue-500 dark:text-gray-200 hover:text-white dark:hover:text-white focus:outline-none ring-opacity-50 focus:ring-2 ring-blue-300',
   };
 
+  const El = external ? 'a' : Link;
+
   return (
-    <Link activeClassName="bg-blue-500 bg-opacity-50 text-white" {...styleProps} href={href} {...props} {...other}>
+    <El activeClassName="bg-blue-500 bg-opacity-50 text-white" {...styleProps} href={href} {...props} {...other}>
       <div onClick={handleDismiss}>{text}</div>
-    </Link>
+    </El>
   );
 }
 

web/src/components/TextField.jsx

@@ -60,8 +60,12 @@ export default function TextField({
         }`}
         ref={inputRef}
       >
-        <label className="flex space-x-2">
-          {LeadingIcon ? <LeadingIcon /> : null}
+        <label className="flex space-x-2 items-center">
+          {LeadingIcon ? (
+            <div class="w-10 h-full">
+              <LeadingIcon />
+            </div>
+          ) : null}
           <div className="relative w-full">
             <input
               className="h-6 mt-6 w-full bg-transparent focus:outline-none focus:ring-0"
@@ -82,7 +86,11 @@ export default function TextField({
               {label}
             </div>
           </div>
-          {TrailingIcon ? <TrailingIcon /> : null}
+          {TrailingIcon ? (
+            <div class="w-10 h-10">
+              <TrailingIcon />
+            </div>
+          ) : null}
         </label>
       </div>
       {helpText ? <div className="text-xs pl-3 pt-1">{helpText}</div> : null}