enhancement(web): login and onboarding tooltips (#702)

* attempt to fix broken link

* removed PUBLIC_URL from link

* enhancement(web): login and onboarding rework

web/src/screens/auth/login.tsx

@@ -7,6 +7,7 @@ import logo from "../../logo.png";
 import { APIClient } from "../../api/APIClient";
 import { AuthContext } from "../../utils/Context";
 import { PasswordInput, TextInput } from "../../components/inputs/text";
+import { Tooltip } from "react-tooltip";
 
 type LoginFormFields = {
   username: string;
@@ -47,14 +48,13 @@ export const Login = () => {
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
-        <img
-          className="mx-auto h-12 w-auto"
-          src={logo}
-          alt="logo"
-        />
+        <img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
+        <h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
+          autobrr
+        </h1>
       </div>
       <div className="sm:mx-auto sm:w-full sm:max-w-md shadow-lg">
-        <div className="bg-white dark:bg-gray-800 py-8 px-4 sm:rounded-lg sm:px-10">
+        <div className="bg-white dark:bg-gray-800 py-10 px-4 sm:rounded-lg sm:px-10">
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="space-y-6">
               <TextInput<LoginFormFields>
@@ -85,6 +85,12 @@ export const Login = () => {
               >
                 Sign in
               </button>
+              <div>
+                <p className="flex float-right items-center mt-3 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide cursor-pointer" id="forgot">
+                  Forgot?<svg className="ml-1 w-3 h-3" viewBox="0 0 72 72"><path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2m5 49.75H27v-24h10v24m-5-29.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10" fill="white"/></svg>
+                  <Tooltip style={{ maxWidth: "350px", fontSize: "12px", textTransform: "none", fontWeight: "normal", borderRadius: "0.375rem", backgroundColor: "#34343A", color: "#fff", opacity: "1" }} place="bottom" delayShow={100} delayHide={150} anchorId="forgot" html="<p style='padding-top: 2px'>If you forget your password you can reset it via the terminal: <code>autobrrctl --config /home/username/.config/autobrr change-password <USERNAME></code></p>" clickable={true}/>
+                </p>
+              </div>
             </div>
           </form>
         </div>

web/src/screens/auth/onboarding.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { APIClient } from "../../api/APIClient";
 
 import { TextField, PasswordField } from "../../components/inputs";
+import logo from "../../logo.png";
 
 interface InputValues {
   username: string;
@@ -40,10 +41,9 @@ export const Onboarding = () => {
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
-        <h1
-          className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4"
-        >
-          Create a new user
+        <img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
+        <h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
+          autobrr
         </h1>
       </div>
       <div className="sm:mx-auto sm:w-full sm:max-w-md shadow-lg">
@@ -68,7 +68,7 @@ export const Onboarding = () => {
                   type="submit"
                   className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
                 >
-                  Create account!
+                  Create account
                 </button>
               </div>
             </Form>

web/src/screens/filters/action.tsx

@@ -13,6 +13,7 @@ import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { DeleteModal } from "../../components/modals";
 import { CollapsableSection } from "./details";
 import { CustomTooltip } from "../../components/tooltips/CustomTooltip";
+import { Link } from "react-router-dom";
 
 interface FilterActionsProps {
   filter: Filter;
@@ -236,7 +237,7 @@ const TypeForm = ({ action, idx, clients }: TypeFormProps) => {
             <SwitchGroup
               name={`actions.${idx}.ignore_rules`}
               label="Ignore client rules"
-              tooltip={<CustomTooltip anchorId={`actions.${idx}.ignore_rules`} clickable={true}><div><p>Choose to ignore rules set in <a className='text-blue-400 visited:text-blue-400' href="../../settings/clients">Client Settings</a>.</p></div></CustomTooltip>} /> 
+              tooltip={<CustomTooltip anchorId={`actions.${idx}.ignore_rules`} clickable={true}><div><p>Choose to ignore rules set in <Link className='text-blue-400 visited:text-blue-400' to="/settings/clients">Client Settings</Link>.</p></div></CustomTooltip>} /> 
           </div>
           <div className="col-span-6">
             <Select