Skip to content

Commit 064e0c3

Browse files
shatfield4timothycarambat
shatfield4
and
timothycarambat
authored
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 <[email protected]>
1 parent 6fa8b0c commit 064e0c3

File tree

11 files changed

+69
-46
lines changed

11 files changed

+69
-46
lines changed

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function AppearanceSetup({ prevStep, nextStep }) {
5858

5959
return (
6060
<div className="w-full">
61-
<div className="flex flex-col w-full px-10 py-12">
61+
<div className="flex flex-col w-full px-8 py-4">
6262
<div className="flex flex-col gap-y-2">
6363
<h2 className="text-white text-sm font-medium">Custom Logo</h2>
6464
<p className="text-sm font-base text-white/60">
@@ -108,7 +108,7 @@ function AppearanceSetup({ prevStep, nextStep }) {
108108
</div>
109109
</div>
110110
</div>
111-
<div className="flex w-full justify-between items-center p-6 space-x-6 border-t rounded-b border-gray-500/50">
111+
<div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-gray-500/50">
112112
<button
113113
onClick={prevStep}
114114
type="button"

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function CreateFirstWorkspace() {
4646
</div>
4747
</div>
4848
</div>
49-
<div className="flex w-full justify-end items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
49+
<div className="flex w-full justify-end items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
5050
<button
5151
type="submit"
5252
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"

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
153153
return (
154154
<div className="max-w-[750px]">
155155
<div className="p-8 flex flex-col gap-8">
156-
<div className="flex flex-col gap-y-3.5 border-b border-zinc-500/50 pb-8">
156+
<div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
157157
<div className="text-white text-base font-bold">LLM Selection</div>
158158
<div className="flex items-center gap-2.5">
159159
<img
@@ -165,28 +165,25 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
165165
{LLM_SELECTION_PRIVACY[llmChoice].name}
166166
</p>
167167
</div>
168-
<div className="flex flex-col">
168+
<ul className="flex flex-col list-disc ml-4">
169169
{LLM_SELECTION_PRIVACY[llmChoice].description.map((desc) => (
170-
<p className="text-white/90 text-sm">
171-
<b>•</b> {desc}
172-
</p>
170+
<li className="text-white/90 text-sm">{desc}</li>
173171
))}
174-
</div>
172+
</ul>
175173
</div>
176-
177-
<div className="flex flex-col gap-y-3.5 border-b border-zinc-500/50 pb-8">
174+
<div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
178175
<div className="text-white text-base font-bold">Embedding Engine</div>
179176
<div className="flex items-center gap-2.5">
180177
<img
181178
src={EMBEDDING_ENGINE_PRIVACY[embeddingEngine].logo}
182-
alt="Vector DB Logo"
179+
alt="LLM Logo"
183180
className="w-8 h-8 rounded"
184181
/>
185182
<p className="text-white text-sm font-bold">
186183
{EMBEDDING_ENGINE_PRIVACY[embeddingEngine].name}
187184
</p>
188185
</div>
189-
<ul className="flex flex-col list-disc">
186+
<ul className="flex flex-col list-disc ml-4">
190187
{EMBEDDING_ENGINE_PRIVACY[embeddingEngine].description.map(
191188
(desc) => (
192189
<li className="text-white/90 text-sm">{desc}</li>
@@ -195,26 +192,26 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
195192
</ul>
196193
</div>
197194

198-
<div className="flex flex-col gap-y-3.5 ">
195+
<div className="flex flex-col gap-y-2 pb-4">
199196
<div className="text-white text-base font-bold">Vector Database</div>
200197
<div className="flex items-center gap-2.5">
201198
<img
202199
src={VECTOR_DB_PRIVACY[vectorDb].logo}
203-
alt="Vector DB Logo"
200+
alt="LLM Logo"
204201
className="w-8 h-8 rounded"
205202
/>
206203
<p className="text-white text-sm font-bold">
207204
{VECTOR_DB_PRIVACY[vectorDb].name}
208205
</p>
209206
</div>
210-
<ul className="flex flex-col list-disc">
207+
<ul className="flex flex-col list-disc ml-4">
211208
{VECTOR_DB_PRIVACY[vectorDb].description.map((desc) => (
212209
<li className="text-white/90 text-sm">{desc}</li>
213210
))}
214211
</ul>
215212
</div>
216213
</div>
217-
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
214+
<div className="flex w-[650px] justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
218215
<button
219216
onClick={prevStep}
220217
type="button"

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
5252
return (
5353
<div className="w-full">
5454
<form onSubmit={handleSubmit} className="flex flex-col w-full">
55-
<div className="flex flex-col w-full px-1 md:px-8 py-12">
55+
<div className="flex flex-col w-full px-1 md:px-8 py-4">
5656
<div className="text-white text-sm font-medium pb-4">
5757
Embedding Provider
5858
</div>
59-
<div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
59+
<div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
6060
<input
6161
hidden={true}
6262
name="EmbeddingEngine"
@@ -90,7 +90,7 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
9090
onClick={updateChoice}
9191
/>
9292
</div>
93-
<div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
93+
<div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
9494
{embeddingChoice === "openai" && (
9595
<OpenAiOptions settings={settings} />
9696
)}
@@ -102,7 +102,7 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
102102
)}
103103
</div>
104104
</div>
105-
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
105+
<div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
106106
<button
107107
onClick={prevStep}
108108
type="button"

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
5959
return (
6060
<div>
6161
<form onSubmit={handleSubmit} className="flex flex-col w-full">
62-
<div className="flex flex-col w-full px-1 md:px-8 py-12">
62+
<div className="flex flex-col w-full px-1 md:px-8 py-4">
6363
<div className="text-white text-sm font-medium pb-4">
6464
LLM Providers
6565
</div>
66-
<div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
66+
<div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
6767
<input hidden={true} name="LLMProvider" value={llmChoice} />
6868
<LLMProviderOption
6969
name="OpenAI"
@@ -111,7 +111,7 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
111111
onClick={updateLLMChoice}
112112
/>
113113
</div>
114-
<div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
114+
<div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
115115
{llmChoice === "openai" && <OpenAiOptions settings={settings} />}
116116
{llmChoice === "azure" && <AzureAiOptions settings={settings} />}
117117
{llmChoice === "anthropic" && (
@@ -123,7 +123,7 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
123123
{llmChoice === "localai" && <LocalAiOptions settings={settings} />}
124124
</div>
125125
</div>
126-
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
126+
<div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
127127
<button
128128
onClick={prevStep}
129129
type="button"

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
4343
return (
4444
<div>
4545
<form onSubmit={handleSubmit}>
46-
<div className="flex flex-col w-full md:px-8 py-12">
46+
<div className="flex flex-col w-full md:px-8 py-4">
4747
<div className="space-y-6 flex h-full w-96">
4848
<div className="w-full flex flex-col gap-y-4">
4949
<div>
@@ -89,7 +89,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
8989
</div>
9090
</div>
9191
</div>
92-
<div className="flex w-full justify-between items-center p-6 space-x-6 border-t rounded-b border-gray-500/50">
92+
<div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-gray-500/50">
9393
<div className="w-96 text-white text-opacity-80 text-xs font-base">
9494
By default, you will be the only admin. As an admin you will need to
9595
create accounts for all new users or admins. Do not lose your
@@ -105,7 +105,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
105105
</button>
106106
<button
107107
type="submit"
108-
className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
108+
className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
109109
border-slate-200 text-slate-800 bg-slate-200 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow
110110
disabled:border-gray-400 disabled:text-slate-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
111111
disabled={!(!!username && !!password)}

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function PasswordProtection({ nextStep, prevStep }) {
4545
return (
4646
<div className="w-full">
4747
<form className="flex flex-col w-full" onSubmit={handleSubmit}>
48-
<div className="flex flex-col w-full px-1 md:px-8 py-12">
48+
<div className="flex flex-col w-full px-1 md:px-8 py-4">
4949
<div className="w-full flex flex-col gap-y-2 my-5">
5050
<div className="w-80">
5151
<div className="flex flex-col mb-3 ">
@@ -72,7 +72,7 @@ function PasswordProtection({ nextStep, prevStep }) {
7272
</div>
7373
</div>
7474
</div>
75-
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
75+
<div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
7676
<button
7777
onClick={prevStep}
7878
type="button"
@@ -92,7 +92,7 @@ function PasswordProtection({ nextStep, prevStep }) {
9292
<button
9393
type="submit"
9494
disabled={!password}
95-
className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
95+
className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
9696
border-slate-200 text-slate-800 bg-slate-200 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow
9797
disabled:border-gray-400 disabled:text-slate-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
9898
>

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function UserModeSelection({ nextStep, prevStep }) {
1212

1313
return (
1414
<div>
15-
<div className="flex flex-col justify-center items-center px-20 py-20">
15+
<div className="flex flex-col justify-center items-center px-20 py-14">
1616
<div className="w-80 text-white text-center text-2xl font-base">
1717
How many people will be using your instance?
1818
</div>

‎frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
5555
return (
5656
<div>
5757
<form onSubmit={handleSubmit} className="flex flex-col w-full">
58-
<div className="flex flex-col w-full px-1 md:px-8 py-12">
58+
<div className="flex flex-col w-full px-1 md:px-8 py-4">
5959
<div className="text-white text-sm font-medium pb-4">
6060
Select your preferred vector database provider
6161
</div>
62-
<div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
62+
<div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
6363
<input hidden={true} name="VectorDB" value={vectorDB} />
6464
<VectorDBOption
6565
name="Chroma"
@@ -107,7 +107,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
107107
onClick={updateVectorChoice}
108108
/>
109109
</div>
110-
<div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
110+
<div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
111111
{vectorDB === "pinecone" && (
112112
<>
113113
<div className="flex flex-col w-60">
@@ -287,7 +287,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
287287
)}
288288
</div>
289289
</div>
290-
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
290+
<div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
291291
<button
292292
onClick={prevStep}
293293
type="button"

‎frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@ import DataHandling from "./Steps/DataHandling";
1212

1313
const DIALOG_ID = "onboarding-modal";
1414

15-
function hideModal() {
16-
document.getElementById(DIALOG_ID)?.close();
17-
}
18-
1915
const STEPS = {
2016
llm_preference: {
2117
title: "LLM Preference",
@@ -71,10 +67,14 @@ const STEPS = {
7167
};
7268

7369
export const OnboardingModalId = DIALOG_ID;
74-
export default function OnboardingModal() {
70+
export default function OnboardingModal({ setModalVisible }) {
7571
const [currentStep, setCurrentStep] = useState("llm_preference");
7672
const [history, setHistory] = useState(["llm_preference"]);
7773

74+
function hideModal() {
75+
setModalVisible(false);
76+
}
77+
7878
const nextStep = (stepKey) => {
7979
setCurrentStep(stepKey);
8080
setHistory([...history, stepKey]);
@@ -99,7 +99,7 @@ export default function OnboardingModal() {
9999
<dialog id={DIALOG_ID} className="bg-transparent outline-none">
100100
<div className="relative max-h-full">
101101
<div className="relative bg-main-gradient rounded-2xl shadow border-2 border-slate-300/10">
102-
<div className="flex items-start justify-between p-8 border-b rounded-t border-gray-500/50">
102+
<div className="flex items-start justify-between px-6 py-4 border-b rounded-t border-gray-500/50">
103103
<div className="flex flex-col gap-2">
104104
<h3 className="text-xl font-semibold text-white">{step.title}</h3>
105105
<p className="text-sm font-base text-white text-opacity-60 whitespace-pre">

0 commit comments

Comments
 (0)