From 064e0c340806762f7e29e63e8d6544b2bc2d497f Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Mon, 4 Dec 2023 13:23:45 -0800
Subject: [PATCH] Fix modal sizes to fit smaller screens & bug fixes (#399)
* fix sizing of onboarding modals & lint
* fix extra scrolling on mobile onboarding flow
* added message to use desktop for onboarding
* linting
* change mobile alert copy
* fix div with bullet points to use list-disc instead
---------
Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
.../Steps/AppearanceSetup/index.jsx | 4 +--
.../Steps/CreateFirstWorkspace/index.jsx | 2 +-
.../Steps/DataHandling/index.jsx | 25 ++++++--------
.../Steps/EmbeddingSelection/index.jsx | 8 ++---
.../Steps/LLMSelection/index.jsx | 8 ++---
.../Steps/MultiUserSetup/index.jsx | 6 ++--
.../Steps/PasswordProtection/index.jsx | 6 ++--
.../Steps/UserModeSelection/index.jsx | 2 +-
.../Steps/VectorDatabaseConnection/index.jsx | 8 ++---
.../OnboardingFlow/OnboardingModal/index.jsx | 12 +++----
frontend/src/pages/OnboardingFlow/index.jsx | 34 ++++++++++++++++---
11 files changed, 69 insertions(+), 46 deletions(-)
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
index 3ccfa8c58..ed5c55799 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
@@ -58,7 +58,7 @@ function AppearanceSetup({ prevStep, nextStep }) {
return (
<div className="w-full">
- <div className="flex flex-col w-full px-10 py-12">
+ <div className="flex flex-col w-full px-8 py-4">
<div className="flex flex-col gap-y-2">
<h2 className="text-white text-sm font-medium">Custom Logo</h2>
<p className="text-sm font-base text-white/60">
@@ -108,7 +108,7 @@ function AppearanceSetup({ prevStep, nextStep }) {
</div>
</div>
</div>
- <div className="flex w-full justify-between items-center p-6 space-x-6 border-t rounded-b border-gray-500/50">
+ <div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-gray-500/50">
<button
onClick={prevStep}
type="button"
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
index 94e7789e5..c9fb442e9 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
@@ -46,7 +46,7 @@ function CreateFirstWorkspace() {
</div>
</div>
</div>
- <div className="flex w-full justify-end items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+ <div className="flex w-full justify-end items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
<button
type="submit"
className="border border-slate-200 px-4 py-2 rounded-lg text-slate-800 bg-slate-200 text-sm items-center flex gap-x-2 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow"
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
index b81a6795e..d988da797 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
@@ -153,7 +153,7 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
return (
<div className="max-w-[750px]">
<div className="p-8 flex flex-col gap-8">
- <div className="flex flex-col gap-y-3.5 border-b border-zinc-500/50 pb-8">
+ <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
<div className="text-white text-base font-bold">LLM Selection</div>
<div className="flex items-center gap-2.5">
<img
@@ -165,28 +165,25 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
{LLM_SELECTION_PRIVACY[llmChoice].name}
</p>
</div>
- <div className="flex flex-col">
+ <ul className="flex flex-col list-disc ml-4">
{LLM_SELECTION_PRIVACY[llmChoice].description.map((desc) => (
- <p className="text-white/90 text-sm">
- <b>•</b> {desc}
- </p>
+ <li className="text-white/90 text-sm">{desc}</li>
))}
- </div>
+ </ul>
</div>
-
- <div className="flex flex-col gap-y-3.5 border-b border-zinc-500/50 pb-8">
+ <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
<div className="text-white text-base font-bold">Embedding Engine</div>
<div className="flex items-center gap-2.5">
<img
src={EMBEDDING_ENGINE_PRIVACY[embeddingEngine].logo}
- alt="Vector DB Logo"
+ alt="LLM Logo"
className="w-8 h-8 rounded"
/>
<p className="text-white text-sm font-bold">
{EMBEDDING_ENGINE_PRIVACY[embeddingEngine].name}
</p>
</div>
- <ul className="flex flex-col list-disc">
+ <ul className="flex flex-col list-disc ml-4">
{EMBEDDING_ENGINE_PRIVACY[embeddingEngine].description.map(
(desc) => (
<li className="text-white/90 text-sm">{desc}</li>
@@ -195,26 +192,26 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
</ul>
</div>
- <div className="flex flex-col gap-y-3.5 ">
+ <div className="flex flex-col gap-y-2 pb-4">
<div className="text-white text-base font-bold">Vector Database</div>
<div className="flex items-center gap-2.5">
<img
src={VECTOR_DB_PRIVACY[vectorDb].logo}
- alt="Vector DB Logo"
+ alt="LLM Logo"
className="w-8 h-8 rounded"
/>
<p className="text-white text-sm font-bold">
{VECTOR_DB_PRIVACY[vectorDb].name}
</p>
</div>
- <ul className="flex flex-col list-disc">
+ <ul className="flex flex-col list-disc ml-4">
{VECTOR_DB_PRIVACY[vectorDb].description.map((desc) => (
<li className="text-white/90 text-sm">{desc}</li>
))}
</ul>
</div>
</div>
- <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+ <div className="flex w-[650px] justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
<button
onClick={prevStep}
type="button"
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
index d2edef606..c22229c0d 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
@@ -52,11 +52,11 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
return (
<div className="w-full">
<form onSubmit={handleSubmit} className="flex flex-col w-full">
- <div className="flex flex-col w-full px-1 md:px-8 py-12">
+ <div className="flex flex-col w-full px-1 md:px-8 py-4">
<div className="text-white text-sm font-medium pb-4">
Embedding Provider
</div>
- <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
+ <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
<input
hidden={true}
name="EmbeddingEngine"
@@ -90,7 +90,7 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
onClick={updateChoice}
/>
</div>
- <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
+ <div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
{embeddingChoice === "openai" && (
<OpenAiOptions settings={settings} />
)}
@@ -102,7 +102,7 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
)}
</div>
</div>
- <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+ <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
<button
onClick={prevStep}
type="button"
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
index 73e68c05c..eec16bc8f 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
@@ -59,11 +59,11 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
return (
<div>
<form onSubmit={handleSubmit} className="flex flex-col w-full">
- <div className="flex flex-col w-full px-1 md:px-8 py-12">
+ <div className="flex flex-col w-full px-1 md:px-8 py-4">
<div className="text-white text-sm font-medium pb-4">
LLM Providers
</div>
- <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
+ <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
<input hidden={true} name="LLMProvider" value={llmChoice} />
<LLMProviderOption
name="OpenAI"
@@ -111,7 +111,7 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
onClick={updateLLMChoice}
/>
</div>
- <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
+ <div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
{llmChoice === "openai" && <OpenAiOptions settings={settings} />}
{llmChoice === "azure" && <AzureAiOptions settings={settings} />}
{llmChoice === "anthropic" && (
@@ -123,7 +123,7 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
{llmChoice === "localai" && <LocalAiOptions settings={settings} />}
</div>
</div>
- <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+ <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
<button
onClick={prevStep}
type="button"
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
index 3b34f2ae6..675e88591 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
@@ -43,7 +43,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
return (
<div>
<form onSubmit={handleSubmit}>
- <div className="flex flex-col w-full md:px-8 py-12">
+ <div className="flex flex-col w-full md:px-8 py-4">
<div className="space-y-6 flex h-full w-96">
<div className="w-full flex flex-col gap-y-4">
<div>
@@ -89,7 +89,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
</div>
</div>
</div>
- <div className="flex w-full justify-between items-center p-6 space-x-6 border-t rounded-b border-gray-500/50">
+ <div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-gray-500/50">
<div className="w-96 text-white text-opacity-80 text-xs font-base">
By default, you will be the only admin. As an admin you will need to
create accounts for all new users or admins. Do not lose your
@@ -105,7 +105,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
</button>
<button
type="submit"
- className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
+ className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
border-slate-200 text-slate-800 bg-slate-200 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow
disabled:border-gray-400 disabled:text-slate-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
disabled={!(!!username && !!password)}
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
index 51ae732c1..c1f8b7302 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
@@ -45,7 +45,7 @@ function PasswordProtection({ nextStep, prevStep }) {
return (
<div className="w-full">
<form className="flex flex-col w-full" onSubmit={handleSubmit}>
- <div className="flex flex-col w-full px-1 md:px-8 py-12">
+ <div className="flex flex-col w-full px-1 md:px-8 py-4">
<div className="w-full flex flex-col gap-y-2 my-5">
<div className="w-80">
<div className="flex flex-col mb-3 ">
@@ -72,7 +72,7 @@ function PasswordProtection({ nextStep, prevStep }) {
</div>
</div>
</div>
- <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+ <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
<button
onClick={prevStep}
type="button"
@@ -92,7 +92,7 @@ function PasswordProtection({ nextStep, prevStep }) {
<button
type="submit"
disabled={!password}
- className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
+ className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
border-slate-200 text-slate-800 bg-slate-200 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow
disabled:border-gray-400 disabled:text-slate-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
>
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
index 6625257f5..b78c32533 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx
@@ -12,7 +12,7 @@ function UserModeSelection({ nextStep, prevStep }) {
return (
<div>
- <div className="flex flex-col justify-center items-center px-20 py-20">
+ <div className="flex flex-col justify-center items-center px-20 py-14">
<div className="w-80 text-white text-center text-2xl font-base">
How many people will be using your instance?
</div>
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
index d8766c816..99c42f1b2 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
@@ -55,11 +55,11 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
return (
<div>
<form onSubmit={handleSubmit} className="flex flex-col w-full">
- <div className="flex flex-col w-full px-1 md:px-8 py-12">
+ <div className="flex flex-col w-full px-1 md:px-8 py-4">
<div className="text-white text-sm font-medium pb-4">
Select your preferred vector database provider
</div>
- <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
+ <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
<input hidden={true} name="VectorDB" value={vectorDB} />
<VectorDBOption
name="Chroma"
@@ -107,7 +107,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
onClick={updateVectorChoice}
/>
</div>
- <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
+ <div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
{vectorDB === "pinecone" && (
<>
<div className="flex flex-col w-60">
@@ -287,7 +287,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
)}
</div>
</div>
- <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+ <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
<button
onClick={prevStep}
type="button"
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
index d00b7e956..3fd35c4cb 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx
@@ -12,10 +12,6 @@ import DataHandling from "./Steps/DataHandling";
const DIALOG_ID = "onboarding-modal";
-function hideModal() {
- document.getElementById(DIALOG_ID)?.close();
-}
-
const STEPS = {
llm_preference: {
title: "LLM Preference",
@@ -71,10 +67,14 @@ const STEPS = {
};
export const OnboardingModalId = DIALOG_ID;
-export default function OnboardingModal() {
+export default function OnboardingModal({ setModalVisible }) {
const [currentStep, setCurrentStep] = useState("llm_preference");
const [history, setHistory] = useState(["llm_preference"]);
+ function hideModal() {
+ setModalVisible(false);
+ }
+
const nextStep = (stepKey) => {
setCurrentStep(stepKey);
setHistory([...history, stepKey]);
@@ -99,7 +99,7 @@ export default function OnboardingModal() {
<dialog id={DIALOG_ID} className="bg-transparent outline-none">
<div className="relative max-h-full">
<div className="relative bg-main-gradient rounded-2xl shadow border-2 border-slate-300/10">
- <div className="flex items-start justify-between p-8 border-b rounded-t border-gray-500/50">
+ <div className="flex items-start justify-between px-6 py-4 border-b rounded-t border-gray-500/50">
<div className="flex flex-col gap-2">
<h3 className="text-xl font-semibold text-white">{step.title}</h3>
<p className="text-sm font-base text-white text-opacity-60 whitespace-pre">
diff --git a/frontend/src/pages/OnboardingFlow/index.jsx b/frontend/src/pages/OnboardingFlow/index.jsx
index a8a85380b..0839635c2 100644
--- a/frontend/src/pages/OnboardingFlow/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/index.jsx
@@ -1,16 +1,42 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import OnboardingModal, { OnboardingModalId } from "./OnboardingModal";
import useLogo from "../../hooks/useLogo";
+import { isMobile } from "react-device-detect";
export default function OnboardingFlow() {
const { logo } = useLogo();
+ const [modalVisible, setModalVisible] = useState(false);
+
+ useEffect(() => {
+ if (modalVisible) {
+ document.getElementById(OnboardingModalId)?.showModal();
+ }
+ }, [modalVisible]);
function showModal() {
- document?.getElementById(OnboardingModalId)?.showModal();
+ setModalVisible(true);
+ }
+
+ if (isMobile) {
+ return (
+ <div className="w-screen h-full bg-sidebar flex items-center justify-center">
+ <div className="w-fit p-20 py-24 border-2 border-slate-300/10 rounded-2xl bg-main-gradient shadow-lg">
+ <div className="text-white text-2xl font-base text-center">
+ Welcome to
+ </div>
+ <img src={logo} alt="logo" className="w-80 mx-auto m-3 mb-11" />
+ <div className="flex justify-center items-center">
+ <p className="text-white text-sm italic text-center">
+ Please use a desktop browser to continue onboarding.
+ </p>
+ </div>
+ </div>
+ </div>
+ );
}
return (
- <div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
+ <div className="w-screen h-full bg-sidebar flex items-center justify-center">
<div className="w-fit p-20 py-24 border-2 border-slate-300/10 rounded-2xl bg-main-gradient shadow-lg">
<div className="text-white text-2xl font-base text-center">
Welcome to
@@ -25,7 +51,7 @@ export default function OnboardingFlow() {
</button>
</div>
</div>
- <OnboardingModal />
+ {modalVisible && <OnboardingModal setModalVisible={setModalVisible} />}
</div>
);
}