mirror of
https://github.com/formbricks/formbricks.git
synced 2026-04-24 11:39:22 -05:00
Use Poppins font as default, add snoopForms favicons, update login-screen, add snoopForms colors
* colors, login, UI, fonts * add poppins font * add _document with included favicon and smooth-scrolling * update favicon imports Co-authored-by: knugget <johannes@knugget.de>
This commit is contained in:
Matthias Nannt
@@ -34,7 +34,7 @@ export default function FormList() {
|
||||
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
<button onClick={() => newForm()}>
|
||||
<li className="col-span-1">
|
||||
<div className="overflow-hidden text-white bg-red-600 rounded-lg shadow">
|
||||
<div className="overflow-hidden text-white rounded-lg shadow bg-snoopred">
|
||||
<div className="px-4 py-8 sm:p-10">+ New Form</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -43,7 +43,7 @@ export default function FormList() {
|
||||
.sort((a, b) => b.updatedAt - a.updatedAt)
|
||||
.map((form, formIdx) => (
|
||||
<li key={form.id} className="col-span-1 ">
|
||||
<div className="bg-white divide-y divide-gray-200 rounded-lg shadow">
|
||||
<div className="bg-white divide-y rounded-lg shadow divide-lightgray-200">
|
||||
<Link href={`/forms/${form.id}`}>
|
||||
<a>
|
||||
<div className="px-4 py-5 sm:p-6">{form.name}</div>
|
||||
@@ -54,7 +54,7 @@ export default function FormList() {
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button className="flex items-center p-2 -m-2 text-gray-400 rounded-full hover:text-gray-600 focus:outline-none">
|
||||
<Menu.Button className="flex items-center p-2 -m-2 rounded-full text-darkgray-400 hover:text-darkgray-500-600 focus:outline-none">
|
||||
<span className="sr-only">Open options</span>
|
||||
<DotsHorizontalIcon
|
||||
className="w-5 h-5"
|
||||
@@ -84,13 +84,13 @@ export default function FormList() {
|
||||
onClick={() => deleteForm(form, formIdx)}
|
||||
className={classNames(
|
||||
active
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "text-gray-700",
|
||||
? "bg-lightgray-100 text-darkgray-700"
|
||||
: "text-darkgray-500",
|
||||
"flex px-4 py-2 text-sm w-full"
|
||||
)}
|
||||
>
|
||||
<TrashIcon
|
||||
className="w-5 h-5 mr-3 text-gray-400"
|
||||
className="w-5 h-5 mr-3 text-darkgray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>Delete Form</span>
|
||||
|
||||
@@ -3,7 +3,7 @@ export default function Loading() {
|
||||
<div className="min-h-screen px-4 py-16 bg-white sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
|
||||
<div className="mx-auto max-w-max">
|
||||
<main className="sm:flex">
|
||||
<p className="mt-1 text-base text-gray-500">Loading...</p>
|
||||
<p className="mt-1 text-base text-darkgray-500">Loading...</p>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,13 +12,13 @@ const formTypes = [
|
||||
id: "NOCODE",
|
||||
title: "No-Code Builder",
|
||||
description:
|
||||
"Use our Notion-like form builder to build your form without a single line of code",
|
||||
"Use our Notion-like form builder to build your form without a single line of code.",
|
||||
},
|
||||
{
|
||||
id: "CODE",
|
||||
title: "Code",
|
||||
description: "Use our snoopReact library to code the form yourself\n",
|
||||
additionalDescription: "(VueJS and other framework support coming soon)",
|
||||
description: "Use our snoopReact library to code the form yourself.",
|
||||
additionalDescription: "",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -73,7 +73,7 @@ export default function FormOnboardingModal({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 backdrop-blur" />
|
||||
<Dialog.Overlay className="fixed inset-0 transition-opacity bg-darkgray-500 bg-opacity-10 backdrop-blur" />
|
||||
</Transition.Child>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
@@ -96,33 +96,27 @@ export default function FormOnboardingModal({
|
||||
onSubmit={(e) => submitForm(e)}
|
||||
className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-6"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
|
||||
{/* <div>
|
||||
<div className="flex items-center justify-center w-12 h-12 mx-auto bg-snoopred-100 rounded-full">
|
||||
<LightBulbIcon
|
||||
className="w-6 h-6 text-red-600"
|
||||
className="w-6 h-6 text-snoopred"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900"
|
||||
className="text-lg font-medium leading-6 text-darkgray-700"
|
||||
>
|
||||
Welcome to your form
|
||||
Create a new form
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
Please choose a name and a building approach and then we
|
||||
are ready to start.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-4" />
|
||||
</div>
|
||||
<hr className="my-4" /> */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
className="text-sm text-darkgray-500"
|
||||
>
|
||||
Name your form
|
||||
</label>
|
||||
@@ -130,17 +124,17 @@ export default function FormOnboardingModal({
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 sm:text-sm"
|
||||
placeholder="My form"
|
||||
className="block w-full p-1 rounded-lg focus:ring-2 focus:ring-snoopred sm:text-lg mb-8"
|
||||
placeholder="e.g. Customer Research Survey"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-5" />
|
||||
{/* <hr className="my-5" /> */}
|
||||
<RadioGroup value={formType} onChange={setFormType}>
|
||||
<RadioGroup.Label className="text-base font-medium text-gray-900">
|
||||
<RadioGroup.Label className="text-sm text-darkgray-500">
|
||||
How would you like to build your form?
|
||||
</RadioGroup.Label>
|
||||
|
||||
@@ -151,8 +145,8 @@ export default function FormOnboardingModal({
|
||||
value={formType}
|
||||
className={({ checked, active }) =>
|
||||
classNames(
|
||||
checked ? "border-transparent" : "border-gray-300",
|
||||
active ? "border-red-500 ring-2 ring-red-500" : "",
|
||||
checked ? "border-transparent" : "border-lightgray-300",
|
||||
active ? "border-snoopred ring-2 ring-snoopred" : "",
|
||||
"relative bg-white border rounded-lg shadow-sm p-4 flex cursor-pointer focus:outline-none"
|
||||
)
|
||||
}
|
||||
@@ -163,19 +157,19 @@ export default function FormOnboardingModal({
|
||||
<span className="flex flex-col">
|
||||
<RadioGroup.Label
|
||||
as="span"
|
||||
className="block text-sm font-medium text-gray-900"
|
||||
className="block text-lg font-medium text-darkgray-900"
|
||||
>
|
||||
{formType.title}
|
||||
</RadioGroup.Label>
|
||||
<RadioGroup.Description
|
||||
as="span"
|
||||
className="flex items-center mt-1 text-sm text-gray-500 whitespace-pre-wrap"
|
||||
className="flex items-center mt-1 text-sm text-darkgray-500 whitespace-pre-wrap"
|
||||
>
|
||||
{formType.description}
|
||||
</RadioGroup.Description>
|
||||
<RadioGroup.Description
|
||||
as="span"
|
||||
className="flex items-center mt-1 text-xs text-gray-400 whitespace-pre-wrap"
|
||||
className="flex items-center mt-1 text-xs text-darkgray-500-400 whitespace-pre-wrap"
|
||||
>
|
||||
{formType.additionalDescription}
|
||||
</RadioGroup.Description>
|
||||
@@ -184,14 +178,14 @@ export default function FormOnboardingModal({
|
||||
<CheckCircleIcon
|
||||
className={classNames(
|
||||
!checked ? "invisible" : "",
|
||||
"h-5 w-5 text-red-600"
|
||||
"h-5 w-5 text-snoopred"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
className={classNames(
|
||||
active ? "border" : "border-2",
|
||||
checked ? "border-red-500" : "border-transparent",
|
||||
checked ? "border-snoopred" : "border-transparent",
|
||||
"absolute -inset-px rounded-lg pointer-events-none"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
@@ -205,9 +199,9 @@ export default function FormOnboardingModal({
|
||||
<div className="mt-5 sm:mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
|
||||
className="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-snoopred border border-transparent rounded-md shadow-sm hover:bg-snoopred-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-snoopred sm:text-sm"
|
||||
>
|
||||
Start
|
||||
Create form
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function Layout({ children }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100">
|
||||
<div className="min-h-screen bg-lightgray-100">
|
||||
<Disclosure as="nav" className="bg-white shadow-sm">
|
||||
{({ open }) => (
|
||||
<>
|
||||
@@ -31,9 +31,7 @@ export default function Layout({ children }) {
|
||||
<div className="flex justify-between h-16">
|
||||
<div className="flex">
|
||||
<div className="flex items-center flex-shrink-0">
|
||||
<h1 className="font-bold text-red-600 text-md">
|
||||
snoopForms
|
||||
</h1>
|
||||
<img src="../../snoopForms_Logo_v4.svg" alt="snoopForms logo"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
@@ -42,7 +40,7 @@ export default function Layout({ children }) {
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button className="flex text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
|
||||
<Menu.Button className="flex text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-snoopred">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<Image
|
||||
width={32}
|
||||
@@ -72,8 +70,8 @@ export default function Layout({ children }) {
|
||||
<button
|
||||
onClick={() => signOut()}
|
||||
className={classNames(
|
||||
active ? "bg-gray-100" : "",
|
||||
"block px-4 py-2 text-sm text-gray-700 w-full text-left"
|
||||
active ? "bg-lightgray-100" : "",
|
||||
"block px-4 py-2 text-sm text-darkgray-700 hover:text-darkgray-900 w-full text-left"
|
||||
)}
|
||||
>
|
||||
Sign Out
|
||||
@@ -88,7 +86,7 @@ export default function Layout({ children }) {
|
||||
</div>
|
||||
<div className="flex items-center -mr-2 sm:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<Disclosure.Button className="inline-flex items-center justify-center p-2 text-gray-400 bg-white rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
|
||||
<Disclosure.Button className="inline-flex items-center justify-center p-2 text-darkgray-400 bg-white rounded-md hover:text-darkgray-500 hover:bg-lightgray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-snoopred">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{open ? (
|
||||
<XIcon className="block w-6 h-6" aria-hidden="true" />
|
||||
@@ -101,7 +99,7 @@ export default function Layout({ children }) {
|
||||
</div>
|
||||
|
||||
<Disclosure.Panel className="sm:hidden">
|
||||
<div className="pt-4 pb-3 border-t border-gray-200">
|
||||
<div className="pt-4 pb-3 border-t border-lightgray-200">
|
||||
<div className="flex items-center px-4">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
@@ -114,7 +112,7 @@ export default function Layout({ children }) {
|
||||
<div className="mt-3 space-y-1">
|
||||
<button
|
||||
onClick={() => signOut()}
|
||||
className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
|
||||
className="block px-4 py-2 text-base font-medium text-darkgray-500 hover:text-darkgray-800 hover:bg-lightgray-100"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
|
||||
@@ -22,10 +22,10 @@ export default function LayoutShare({ title, formId, currentStep, children }) {
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
</Head>
|
||||
<div className="flex min-h-screen overflow-hidden bg-gray-50">
|
||||
<div className="flex min-h-screen overflow-hidden bg-lightgray-50">
|
||||
<div className="flex flex-col flex-1 overflow-hidden">
|
||||
<header className="w-full">
|
||||
<div className="relative z-10 flex flex-shrink-0 h-16 bg-white border-b border-gray-200 shadow-sm">
|
||||
<div className="relative z-10 flex flex-shrink-0 h-16 bg-white border-b border-lightgray-200 shadow-sm">
|
||||
<div className="flex flex-1 px-4 sm:px-6">
|
||||
<MenuBreadcrumbs formId={formId} />
|
||||
<MenuSteps formId={formId} currentStep={currentStep} />
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function MenuBreadcrumbs({ formId }) {
|
||||
<li>
|
||||
<div>
|
||||
<Link href="/forms/">
|
||||
<a className="text-gray-400 hover:text-gray-500">
|
||||
<a className="text-darkgray-400 hover:text-darkgray-500">
|
||||
<HomeIcon
|
||||
className="flex-shrink-0 w-5 h-5"
|
||||
aria-hidden="true"
|
||||
@@ -35,7 +35,7 @@ export default function MenuBreadcrumbs({ formId }) {
|
||||
<li key={page.name}>
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5 h-5 text-gray-300"
|
||||
className="flex-shrink-0 w-5 h-5 text-darkgray-300"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -45,7 +45,7 @@ export default function MenuBreadcrumbs({ formId }) {
|
||||
</svg>
|
||||
<a
|
||||
href={page.href}
|
||||
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
|
||||
className="ml-4 text-sm font-medium text-darkgray-500 hover:text-darkgray-500"
|
||||
aria-current={page.current ? "page" : undefined}
|
||||
>
|
||||
{page.name}
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function MenuProfile({}) {
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button className="flex text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<Menu.Button className="flex text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-snoopred-500">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img
|
||||
className="w-8 h-8 rounded-full"
|
||||
@@ -37,8 +37,8 @@ export default function MenuProfile({}) {
|
||||
<button
|
||||
onClick={() => signOut()}
|
||||
className={classNames(
|
||||
active ? "bg-gray-100" : "",
|
||||
"block px-4 py-2 text-sm text-gray-700 w-full text-left"
|
||||
active ? "bg-lightgray-100" : "",
|
||||
"block px-4 py-2 text-sm text-darkgray-500 w-full text-left"
|
||||
)}
|
||||
>
|
||||
Sign Out
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function MenuSteps({ formId, currentStep }: MenuStepsProps) {
|
||||
<select
|
||||
id="tabs"
|
||||
name="tabs"
|
||||
className="block w-full py-2 pl-3 pr-10 text-base border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm"
|
||||
className="block w-full py-2 pl-3 pr-10 text-base border-lightgray-300 rounded-md focus:outline-none focus:ring-snoopred focus:border-snoopred sm:text-sm"
|
||||
defaultValue={tabs.find((tab) => tab.id === currentStep).name}
|
||||
onChange={(e) => {
|
||||
const stepId = e.target.children[e.target.selectedIndex].id;
|
||||
@@ -62,8 +62,8 @@ export default function MenuSteps({ formId, currentStep }: MenuStepsProps) {
|
||||
<a
|
||||
className={classNames(
|
||||
tab.id === currentStep
|
||||
? "border-red-500 text-red-600"
|
||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
||||
? "border-snoopred text-snoopred"
|
||||
: "border-transparent text-darkgray-500 hover:text-darkgray-500 hover:border-lightgray-300",
|
||||
"whitespace-nowrap py-5 px-1 border-b-2 font-medium text-sm"
|
||||
)}
|
||||
aria-current={tab.id === currentStep ? "page" : undefined}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useMemo } from "react";
|
||||
import { useForm } from "../../lib/forms";
|
||||
import { convertDateTimeString } from "../../lib/utils";
|
||||
import Loading from "../Loading";
|
||||
|
||||
export default function Submission({ formId, submissionSession }) {
|
||||
const { form, isLoadingForm } = useForm(formId);
|
||||
|
||||
// fill the schema with the values provided by the user
|
||||
const getSubmission = (submissionSession, schema) => {
|
||||
if (!schema) return {};
|
||||
const submission = JSON.parse(JSON.stringify(schema));
|
||||
submission.id = submissionSession.id;
|
||||
submission.createdAt = submissionSession.createdAt;
|
||||
if (submissionSession.events.length > 0) {
|
||||
for (const page of submission.pages) {
|
||||
if (page.type === "form") {
|
||||
const pageSubmission = submissionSession.events.find(
|
||||
(s) => s.type === "pageSubmission" && s.data?.pageName === page.name
|
||||
);
|
||||
if (typeof pageSubmission !== "undefined") {
|
||||
for (const element of page.elements) {
|
||||
if (element.type !== "submit") {
|
||||
if (element.name in pageSubmission.data?.submission) {
|
||||
element.value = pageSubmission.data.submission[element.name];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return submission;
|
||||
};
|
||||
|
||||
const submission = useMemo(() => {
|
||||
if (form && submissionSession) {
|
||||
return getSubmission(submissionSession, form.schema);
|
||||
}
|
||||
}, [form, submissionSession]);
|
||||
|
||||
if (isLoadingForm) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow sm:rounded-lg max-w-">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<div className="text-darkgray-500-600">
|
||||
<p className="text-sm">
|
||||
{convertDateTimeString(submission.createdAt)}
|
||||
</p>
|
||||
{submission.pages.map((page) => (
|
||||
<div key={page.name}>
|
||||
{page.elements?.map(
|
||||
(element) =>
|
||||
element.type !== "submit" && (
|
||||
<div key={element.name}>
|
||||
<p className="font-semibold text-snoopred">
|
||||
{element.label}
|
||||
</p>
|
||||
<p className="font-normal">
|
||||
{element.value || "[not provided]"}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user