Edit tutorial cards and input

src/PublicApp.tsx

@@ -13,21 +13,23 @@ interface UnauthenticatedTimeContextProps {
   setStartTime: (startTime: boolean) => void;
 }
 
-export const UnauthenticatedTimeContext = createContext<UnauthenticatedTimeContextProps>({
-  setStartTime: () => { },
-});
+export const UnauthenticatedTimeContext =
+  createContext<UnauthenticatedTimeContextProps>({
+    setStartTime: () => {},
+  });
 
 const PublicApp: FC = () => {
   // The total time spent on the app
   // It is used to show force the user to login after a certain amount of time
   const [startTime, setStartTime] = useState<boolean>(false);
 
   // Time limit in seconds
-  const timeLimit = 1 * 60; // 1 minutes
+  const timeLimit = 100; // 100 seconds
 
   // The AuthDialog is shown when the user is not authenticated and the time limit is reached
   const initialShowDialog = localStorage.getItem("expiredFreeTrial") === "true";
-  const [showAuthDialog, setShowAuthDialog] = useState<boolean>(initialShowDialog);
+  const [showAuthDialog, setShowAuthDialog] =
+    useState<boolean>(initialShowDialog);
 
   // Create time context
   const unauthenticatedTimeContext: UnauthenticatedTimeContextProps = {
@@ -54,10 +56,19 @@ const PublicApp: FC = () => {
       <UnauthenticatedTimeContext.Provider value={unauthenticatedTimeContext}>
         <div className="flex h-screen w-screen flex-row">
           <Routes>
-            <Route path="/public" element={<UnsavedGraphTemplate showLandingPage={true} />} />
-            <Route path="/public/graph/:uid" element={<UnsavedGraphTemplate />} />
+            <Route
+              path="/public"
+              element={<UnsavedGraphTemplate showLandingPage={true} />}
+            />
+            <Route
+              path="/public/graph/:uid"
+              element={<UnsavedGraphTemplate />}
+            />
             <Route path="/public/graph" element={<UnsavedGraphTemplate />} />
-            <Route path="/shared/graph/:uid" element={<RedirectSharedGraph />} />
+            <Route
+              path="/shared/graph/:uid"
+              element={<RedirectSharedGraph />}
+            />
             {/* Keep for legacy reasons */}
             <Route path="/graph/:uid" element={<RedirectSharedGraph />} />
             <Route path="*" element={<Navigate to="/public" />} />
@@ -66,7 +77,11 @@ const PublicApp: FC = () => {
       </UnauthenticatedTimeContext.Provider>
       {/* The AuthDialog is shown when the user is not authenticated and the time limit is reached
       No setter is passed to the AuthDialog because the user can only close it by logging in or creating an account */}
-      <AuthDialog isOpen={showAuthDialog} setIsOpen={() => { }} signInText="Sign in to your account to continue using the app" />
+      <AuthDialog
+        isOpen={showAuthDialog}
+        setIsOpen={() => {}}
+        signInText="Sign in to your account to continue using the app"
+      />
     </BrowserRouter>
   );
 };

src/components/auth/AuthInput.tsx

@@ -6,7 +6,10 @@ interface AuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 const AuthInput = ({ label, name, ...rest }: AuthInputProps) => {
-  const { register, formState: { errors } } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   const error = errors[name];
 
@@ -22,14 +25,12 @@ const AuthInput = ({ label, name, ...rest }: AuthInputProps) => {
         {...register(name)}
         {...rest}
         className={
-          "block w-full rounded-none rounded-l-md border-0 py-1.5 text-sm leading-6 text-gray-900 ring-1 ring-inset ring-gray-300 transition-all placeholder:text-gray-400 focus:ring-2 focus:ring-inset"
+          "block w-full rounded-md border-0 py-1.5 text-sm leading-6 text-gray-900 ring-1 ring-inset ring-gray-300 transition-all placeholder:text-gray-400 focus:outline focus:outline-[3px] focus:outline-blue-200 focus:ring-2 focus:ring-blue-400"
         }
       />
-      {error &&
-        <p className="mt-2 text-red-500 text-xs">
-          {error.message?.toString()}
-        </p>
-      }
+      {error && (
+        <p className="mt-2 text-xs text-red-500">{error.message?.toString()}</p>
+      )}
     </div>
   );
 };

src/components/graph/search_bar/SearchBar.tsx

@@ -56,16 +56,15 @@ const SearchBar: FC<SearchBarProps> = ({ className, onSearchAddress }) => {
   const popoverRef = useRef<HTMLDivElement>(null); // Popover ref for hotkeys
   const { user } = useAuthState();
   const { mutate: searchLabels } = useSearchLabels({
-    mutation:
-    {
+    mutation: {
       onSuccess: (data) => {
         if (data.labels) {
           setEntitySearchResults(data.labels);
         } else {
           setEntitySearchResults([]);
         }
-      }
-    }
+      },
+    },
   });
 
   // The current query the user is typing
@@ -100,9 +99,10 @@ const SearchBar: FC<SearchBarProps> = ({ className, onSearchAddress }) => {
     // If the query is the same as the last time searched, don't search again
     searchLabels({
       data: {
-        query, limit: MAX_SEARCH_HISTORY
-      }
-    })
+        query,
+        limit: MAX_SEARCH_HISTORY,
+      },
+    });
   }, [query]);
 
   // Combine uniqueSearchHistory and entitySearchResults into a single list of search results

src/components/graph/tutorial/TutorialDialog.tsx

@@ -43,7 +43,7 @@ const ProgressCircle: FC<ProgressCircleProps> = ({
         <div
           className={clsx(
             "absolute h-2 w-2 rounded-full",
-            isCompleted ? "bg-blue-500" : "bg-gray-200",
+            isCompleted || isCurrent ? "bg-blue-500" : "bg-gray-200",
           )}
         />
       }
@@ -63,7 +63,7 @@ const ProgressCircles: FC<ProgressCirclesProps> = ({
   setCurrentStep,
 }) => {
   // Number of circles to show at a time
-  const maxVisibleCircles = 5;
+  const maxVisibleCircles = 8;
 
   // Start index of the circles to show
   const start = Math.max(0, currentStep - Math.floor(maxVisibleCircles / 2));
@@ -141,9 +141,10 @@ const TutorialDialog: FC<TutorialProps> = ({
   };
 
   return (
-    <Modal isOpen={isTutorialOpen} closeModal={closeTutorial} >
-      <div className="w-[30rem]" onKeyDown={
-        async (event: KeyboardEvent<HTMLElement>) => {
+    <Modal isOpen={isTutorialOpen} closeModal={closeTutorial}>
+      <div
+        className="w-[30rem]"
+        onKeyDown={async (event: KeyboardEvent<HTMLElement>) => {
           const hotKey = event.key;
           switch (hotKey) {
             case hotKeysMap.ARROW_LEFT.key:
@@ -153,8 +154,8 @@ const TutorialDialog: FC<TutorialProps> = ({
               await hotKeysMap.ARROW_RIGHT.asyncHandler!(event);
               break;
           }
-        }
-      }>
+        }}
+      >
         <div className="mb-2 flex w-full justify-end">
           <XMarkIcon
             className="h-11 w-11 cursor-pointer rounded-full p-1.5 text-gray-400 transition-all duration-300 hover:bg-gray-100"