updating example

frontend-nextjs/.env.example

@@ -4,7 +4,12 @@
 NEXT_PUBLIC_SUPABASE_URL=<YOUR_SUPABASE_URL>
 NEXT_PUBLIC_SUPABASE_ANON_KEY=<YOUR_SUPABASE_ANON_KEY>
 JWT_SECRET_KEY=<YOUR_JWT_SECRET_KEY>
+
+# Encryption key for E2E encryption of API keys
+# You can generate a random key with `openssl rand -base64 32`
 ENCRYPTION_KEY=<YOUR_ENCRYPTION_KEY>
+
+# OpenAI API key
 OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
 
 # NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321

frontend-nextjs/app/components/Nav/NavbarButtons.tsx

@@ -54,8 +54,8 @@ const NavbarButtons: React.FC<NavbarButtonsProps> = ({
                 >
                     <Button
                         size="sm"
-                        variant={isMobile ? "ghost" : "outline"}
-                        className="flex bg-nav-bar border-0 sm:mr-2 sm:border flex-row gap-2 items-center rounded-full"
+                        variant={"ghost"}
+                        className="flex bg-nav-bar border-0 sm:mr-2 flex-row gap-2 items-center rounded-full"
                     >
                         <FaGithub className="text-xl" />
                         <p className="hidden sm:flex font-normal">GitHub</p>

frontend-nextjs/app/components/Settings/AppSettings.tsx

@@ -13,6 +13,12 @@ import { createClient } from "@/utils/supabase/client";
 import React, { useCallback } from "react";
 import { doesUserHaveADevice, updateDevice } from "@/db/devices";
 import { useToast } from "@/components/ui/use-toast";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+    TooltipProvider,
+  } from "@/components/ui/tooltip";
 
 interface AppSettingsProps {
     selectedUser: IUser;
@@ -155,11 +161,23 @@ const AppSettings: React.FC<AppSettingsProps> = ({
                     <Label className="text-sm font-medium text-gray-700">
                             Register your device
                         </Label>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger className="inline-flex items-center justify-center h-4 w-4 rounded-full bg-gray-200 text-gray-600 text-xs hover:bg-gray-300">
+                              ?
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>For simplicity, you can register your ESP32 MAC address without the colons</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
                         <div 
                             className={`rounded-full flex-shrink-0 h-2 w-2 ${
                                 isConnected ? 'bg-green-500' : 'bg-amber-500'
                             }`} 
-                        />                    </div>
+                        />    
+
+                        </div>
                         
                         <div className="flex flex-row items-center gap-2 mt-2">
                             <Input