feat: refactor connector form

src/app/components/ConnectorForm/index.tsx

@@ -32,7 +32,7 @@ function ConnectorForm({
     <div className="flex h-full justify-center items-center">
       {video && (
         <div
-          className="flex-1 relative h-0 mb-6"
+          className="flex-1 relative h-0"
           style={{ paddingBottom: "56.25%" }}
         >
           <video className="absolute t-0 l-0 w-full h-full" controls>
@@ -42,7 +42,7 @@ function ConnectorForm({
       )}
       {image && (
         <>
-          <div className="w-96 mb-6">
+          <div className="w-96">
             <img
               src={image}
               alt="Screenshot"
@@ -56,8 +56,8 @@ function ConnectorForm({
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="max-w-xl mx-auto mt-6 relative bg-white dark:bg-surface-02dp p-10 rounded-2xl border border-gray-200 darK:border-neutral-700">
-        <div className="flex items-center mb-4">
+      <div className="flex flex-col max-w-xl mx-auto mt-6 relative bg-white dark:bg-surface-02dp p-10 rounded-2xl border border-gray-200 dark:border-neutral-700 gap-4">
+        <div className="flex items-center">
           {logo && <img src={logo} className="w-16 mr-4 rounded-lg" />}
           {/*
               TODO: this can be simplified to always wrap the title in h1, without checking if it
@@ -71,17 +71,17 @@ function ConnectorForm({
           )}
         </div>
         {description && (
-          <div className="text-gray-700 dark:text-white whitespace-pre-line mb-8">
+          <div className="text-gray-700 dark:text-white whitespace-pre-line">
             {typeof description === "string" ? (
               <p className="mb-6">{description}</p>
             ) : (
               description
             )}
           </div>
         )}
-        {media}
+        {video || (image && media)}
         <div>{children}</div>
-        <div className="mt-8 flex justify-center">
+        <div className="mt-4 flex justify-center">
           <Button
             type="submit"
             label={submitLabel}

src/app/router/Welcome/Welcome.tsx

@@ -3,7 +3,6 @@ import SetPassword from "@screens/Onboard/SetPassword";
 import TestConnection from "@screens/Onboard/TestConnection";
 import ChooseConnector from "@screens/connectors/ChooseConnector";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Outlet, Route, HashRouter as Router, Routes } from "react-router-dom";
 import Container from "~/app/components/Container";
 import LocaleSwitcher from "~/app/components/LocaleSwitcher/LocaleSwitcher";
@@ -54,8 +53,6 @@ function Welcome() {
 }
 
 function Layout() {
-  const { t } = useTranslation();
-
   const [languageChanged, setLanguageChanged] = useState(false);
   i18n.on("languageChanged", () => {
     // Trigger rerender to update displayed language
@@ -70,21 +67,7 @@ function Layout() {
       <div className="flex justify-center items-center">
         <div className="w-full">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8">
-            <div className="text-center font-serif font-medium text-2xl mt-8 dark:text-white">
-              <p>
-                {t("welcome.title")}
-                <img
-                  src="assets/icons/alby_icon_yellow.svg"
-                  alt="Alby"
-                  className="dark:hidden inline align-middle w-6 ml-2"
-                />
-                <img
-                  src="assets/icons/alby_icon_yellow_dark.svg"
-                  alt="Alby"
-                  className="hidden dark:inline align-middle w-6 ml-2"
-                />
-              </p>
-            </div>
+            <div className="text-center font-serif font-medium text-2xl mt-8 dark:text-white"></div>
           </div>
           <Container maxWidth="xl">
             <Outlet />

src/i18n/locales/en/translation.json

@@ -1,7 +1,6 @@
 {
   "translation": {
     "welcome": {
-      "title": "Welcome to Alby",
       "set_password": {
         "title": "Set extension unlock passcode",
         "description1": "Set a passcode to unlock Alby Extension in this browser",