Fixed some styling issues, fixed icons

ui/src/components/Topbar/index.tsx

@@ -4,13 +4,14 @@ import Link from 'next/link';
 import { AiOutlineUser } from 'react-icons/ai';
 import { useState } from 'react';
 import { getAirports } from '@/api/airport';
-import { useRouter } from 'next/navigation';
+// import { useRouter } from 'next/navigation';
 import { Autocomplete, Avatar } from '@mantine/core';
+import './topbar.css';
 
 export default function Topbar() {
   const [searchValue, setSearchValue] = useState('');
   const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
-  const router = useRouter();
+  // const router = useRouter();
 
   async function onChange(value: string) {
     setSearchValue(value);
@@ -24,28 +25,30 @@ export default function Topbar() {
     );
   }
 
-  function onClick(value: string) {
-    router.push(`/airport/${value}`);
-  }
+  // function onClick(value: string) {
+  //   router.push(`/airport/${value}`);
+  // }
 
   return (
-    <nav style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div style={{ display: 'flex' }}>
-        <Link href={'/'} style={{ paddingLeft: '2em', paddingRight: '2em', margin: 'auto' }}>
+    <nav className='navbar'>
+      <div className='left'>
+        <Link href={'/'} className='title'>
           <span>Aviation Weather</span>
         </Link>
-        <Autocomplete
-          autoFocus
-          radius='xl'
-          placeholder='Search Airports...'
-          limit={10}
-          data={airports}
-          value={searchValue}
-          onChange={onChange}
-          onBlur={() => setSearchValue('')}
-        />
+        <div className='search'>
+          <Autocomplete
+            autoFocus
+            radius='xl'
+            placeholder='Search Airports...'
+            limit={10}
+            data={airports}
+            value={searchValue}
+            onChange={onChange}
+            onBlur={() => setSearchValue('')}
+          />
+        </div>
       </div>
-      <Link className='' href={'/profile'}>
+      <Link className='avatar' href={'/profile'}>
         <Avatar>
           <AiOutlineUser />
         </Avatar>

ui/src/components/Topbar/topbar.css

@@ -0,0 +1,19 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  height: 46px;
+}
+
+.navbar .left {
+  display: flex;
+}
+
+.navbar .title {
+  padding-left: 2em;
+  padding-right: 2em;
+  margin: auto;
+}
+
+.navbar .left .search {
+  margin: auto;
+}