Misc fixes

src/components/Connection.tsx

@@ -76,7 +76,6 @@ export const Connection = (): JSX.Element => {
               {state.deviceStatus ===
                 Types.DeviceStatusEnum.DEVICE_CONNECTED && (
                 <Button
-                  padding={2}
                   border
                   onClick={async (): Promise<void> => {
                     await connection.disconnect();

src/components/connection/Serial.tsx

@@ -3,13 +3,15 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { FiCheck } from 'react-icons/fi';
 
+import { useAppDispatch } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { IconButton } from '@components/generic/IconButton';
 import { serial, setConnection } from '@core/connection';
-import { connType } from '@core/slices/appSlice';
+import { connType, setConnectionParams } from '@core/slices/appSlice';
 
 export const Serial = (): JSX.Element => {
   const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
+  const dispatch = useAppDispatch();
 
   const { register, handleSubmit, control } = useForm<{
     device?: SerialPort;
@@ -45,6 +47,14 @@ export const Serial = (): JSX.Element => {
           </div>
           <IconButton
             onClick={async (): Promise<void> => {
+              dispatch(
+                setConnectionParams({
+                  type: connType.SERIAL,
+                  params: {
+                    port: device,
+                  },
+                }),
+              );
               await setConnection(connType.SERIAL);
             }}
             icon={<FiCheck />}

src/components/generic/Button.tsx

@@ -6,23 +6,21 @@ type DefaultButtonProps = JSX.IntrinsicElements['button'];
 
 interface ButtonProps extends DefaultButtonProps {
   icon?: JSX.Element;
-  circle?: boolean;
   active?: boolean;
   border?: boolean;
-  padding?: number;
+  padding?: string;
   confirmAction?: () => void;
 }
 
 export const Button = ({
   icon,
-  circle,
   className,
   active,
   border,
   confirmAction,
   disabled,
   children,
-  padding = 3,
+  padding = '2',
   ...props
 }: ButtonProps): JSX.Element => {
   const [hasConfirmed, setHasConfirmed] = React.useState(false);
@@ -42,27 +40,17 @@ export const Button = ({
   return (
     <button
       onClick={handleConfirm}
-      className={`items-center select-none flex dark:text-white active:scale-95 transition duration-200 ease-in-out ${
+      className={`items-center select-none flex border border-transparent dark:text-white active:scale-95 transition duration-200 ease-in-out focus-within:border-primary dark:focus-within:border-primary focus-within:shadow-border rounded-md p-${padding} space-x-3 text-sm ${
         active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
-      } ${
-        circle
-          ? 'rounded-full h-10 w-10'
-          : `rounded-md p-${padding} space-x-3 text-sm`
       } ${
         disabled
           ? 'cursor-not-allowed dark:bg-primaryDark bg-white'
           : 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-md'
-      } ${
-        border ? 'border border-gray-400 dark:border-gray-200' : ''
-      } ${className}`}
+      } ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${className}`}
       {...props}
     >
       {icon && (
-        <div
-          className={`text-gray-500 dark:text-gray-400 ${
-            circle ? 'mx-auto' : ''
-          }`}
-        >
+        <div className="text-gray-500 dark:text-gray-400">
           {hasConfirmed ? <FiCheck /> : icon}
         </div>
       )}

src/components/menu/Navigation.tsx

@@ -22,7 +22,7 @@ export const Navigation = ({
     >
       <div onClick={onClick}>
         <Button
-          icon={<FiMessageSquare className="w-6 h-6" />}
+          icon={<FiMessageSquare className="w-5 h-5" />}
           active={route.name === 'messages'}
           className="w-full md:w-auto"
           {...routes.messages().link}
@@ -32,7 +32,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<FiGrid className="w-6 h-6" />}
+          icon={<FiGrid className="w-5 h-5" />}
           className="w-full md:w-auto"
           active={route.name === 'nodes'}
           {...routes.nodes().link}
@@ -42,7 +42,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<FiPackage className="w-6 h-6" />}
+          icon={<FiPackage className="w-5 h-5" />}
           className="w-full md:w-auto"
           active={route.name === 'plugins'}
           {...routes.plugins().link}
@@ -52,7 +52,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<FiSettings className="w-6 h-6" />}
+          icon={<FiSettings className="w-5 h-5" />}
           className="w-full md:w-auto"
           active={route.name === 'settings'}
           {...routes.settings().link}

src/components/menu/buttons/DeviceStatus.tsx

@@ -14,7 +14,7 @@ export const DeviceStatus = (): JSX.Element => {
 
   return (
     <Button
-      padding={0}
+      padding="0"
       active
       onClick={(): void => {
         dispatch(dispatch(openConnectionModal()));

src/components/menu/buttons/Notifications.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { FiBell, FiX } from 'react-icons/fi';
+
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { IconButton } from '@components/generic/IconButton';
+import { shift, useFloating } from '@floating-ui/react-dom';
+import { Popover } from '@headlessui/react';
+
+export const Notifications = (): JSX.Element => {
+  const [unreadCount, setUnreadCount] = React.useState(0);
+  const notifications = useAppSelector((state) => state.app.notifications);
+
+  const { x, y, reference, floating, strategy } = useFloating({
+    placement: 'bottom',
+    middleware: [shift()],
+  });
+
+  React.useEffect(() => {
+    setUnreadCount(
+      notifications.filter((notification) => !notification.read).length,
+    );
+  }, [notifications]);
+
+  return (
+    <Popover>
+      <Popover.Button as="div" className="relative" ref={reference}>
+        <IconButton icon={<FiBell className="w-5 h-5" />} />
+        {unreadCount > 0 && (
+          <div className="absolute pointer-events-none top-1 right-1">
+            <div className="w-3 h-3 text-xs font-semibold leading-3 text-center text-white bg-orange-500 rounded-full">
+              {unreadCount}
+            </div>
+          </div>
+        )}
+      </Popover.Button>
+
+      <Popover.Panel
+        ref={floating}
+        style={{
+          position: strategy,
+          top: y ?? '',
+          left: x ?? '',
+        }}
+        className="fixed z-50 border border-gray-300 rounded-md shadow-md w-72 bg-primaryDark dark:border-gray-600"
+      >
+        <div className="divide-y divide-gray-600">
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className={`p-1 flex text-sm justify-between ${
+                notification.read
+                  ? 'text-gray-600 dark:text-gray-300'
+                  : 'text-gray-900 dark:text-white'
+              }`}
+            >
+              <div className="my-auto">{notification.icon}</div>
+
+              <div className="my-auto font-light">{notification.title}</div>
+
+              <div className="flex space-x-1">
+                {notification.action ? (
+                  <div className="my-auto w-18">
+                    <Button
+                      border
+                      padding="0.5"
+                      onClick={notification.action.action}
+                    >
+                      {notification.action.message}
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="w-16" />
+                )}
+                <IconButton icon={<FiX />} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+};