mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-03-18 09:41:32 -05:00
Code Issues Packages Projects Releases 138 Wiki Activity

revamped instructions

Browse Source
This commit is contained in:
knugget
2023-02-09 15:53:25 +01:00
parent 3701487534
commit cec677eaae
80 changed files with 797 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
.env.example
View File

@@ -1,76 +0,0 @@
########################################################################
# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
########################################################################
############
# Basics #
############
NEXTAUTH_SECRET=RANDOM_STRING
# Set this to your public-facing URL, e.g., https://example.com
NEXTAUTH_URL=http://localhost:3000
# This should always be localhost:3000 (or whatever port your app is running on)
NEXTAUTH_URL_INTERNAL=http://localhost:3000
DATABASE_URL='postgresql://postgres:postgres@localhost:5432/postgres?schema=public'
# For Docker Compose Production Setup use this Database URL:
# DATABASE_URL='postgresql://postgres:postgres@postgres:5432/formbricks?schema=public'
################
# Mail Setup #
################
# Necessary if email verification and password reset are enabled.
# See optional configurations below if you want to disable these features.
MAIL_FROM=noreply@example.com
SMTP_HOST=localhost
SMTP_PORT=1025
SMTP_SECURE_ENABLED=0 # Enable for TLS (port 465)
SMTP_USER=smtpUser
SMTP_PASSWORD=smtpPassword
########################################################################
# ------------------------------ OPTIONAL -----------------------------#
########################################################################
# Uncomment the variables you would like to use and customize the values.
#####################
# Disable Features #
#####################
# Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1
# Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1
# Signup. Disable the ability for new users to create an account.
# NEXT_PUBLIC_SIGNUP_DISABLED=1
##########
# Other #
##########
# Disable Sentry warning
SENTRY_IGNORE_API_RESOLUTION_ERROR=1
# Enable Sentry Error Tracking
NEXT_PUBLIC_SENTRY_DSN=
# Configure Github Login
NEXT_PUBLIC_GITHUB_AUTH_ENABLED=0
GITHUB_ID=
GITHUB_SECRET=
# Stripe Billing Variables
NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

110
apps/demo/components/AppPage.tsx
View File

@@ -56,7 +56,7 @@ const transactions = [
const statusStyles = {
success: "bg-green-100 text-green-800",
processing: "bg-yellow-100 text-yellow-800",
failed: "bg-gray-100 text-gray-800",
failed: "bg-slate-100 text-slate-800",
};
function classNames(...classes) {
@@ -84,7 +84,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
<div className="fixed inset-0 bg-slate-600 bg-opacity-75" />
</Transition.Child>
<div className="fixed inset-0 z-40 flex">
@@ -217,10 +217,10 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
</div>
<div className="flex flex-1 flex-col lg:pl-64">
<div className="flex h-16 flex-shrink-0 border-b border-gray-200 bg-white lg:border-none">
<div className="flex h-16 flex-shrink-0 border-b border-slate-200 bg-white lg:border-none">
<button
type="button"
className="border-r border-gray-200 px-4 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500 lg:hidden"
className="border-r border-slate-200 px-4 text-slate-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500 lg:hidden"
onClick={() => setSidebarOpen(true)}>
<span className="sr-only">Open sidebar</span>
<Bars3CenterLeftIcon className="h-6 w-6" aria-hidden="true" />
@@ -232,7 +232,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<label htmlFor="search-field" className="sr-only">
Search
</label>
<div className="relative w-full text-gray-400 focus-within:text-gray-600">
<div className="relative w-full text-slate-400 focus-within:text-slate-600">
<div
className="pointer-events-none absolute inset-y-0 left-0 flex items-center"
aria-hidden="true">
@@ -241,7 +241,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<input
id="search-field"
name="search-field"
className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-gray-900 placeholder-gray-500 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-slate-900 placeholder-slate-500 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
placeholder="Search transactions"
type="search"
/>
@@ -251,29 +251,29 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<div className="ml-4 flex items-center md:ml-6">
<button
onClick={onClickFeedback}
className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-gray-50">
className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
Feedback
</button>
<button
type="button"
className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
className="rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Profile dropdown */}
<Menu as="div" className="relative ml-3">
<div>
<Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-gray-50">
<Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
<img
className="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<span className="ml-3 hidden text-sm font-medium text-gray-700 lg:block">
<span className="ml-3 hidden text-sm font-medium text-slate-700 lg:block">
<span className="sr-only">Open user menu for </span>Emilia Birch
</span>
<ChevronDownIcon
className="ml-1 hidden h-5 w-5 flex-shrink-0 text-gray-400 lg:block"
className="ml-1 hidden h-5 w-5 flex-shrink-0 text-slate-400 lg:block"
aria-hidden="true"
/>
</Menu.Button>
@@ -292,8 +292,8 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<a
href="#"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
active ? "bg-slate-100" : "",
"block px-4 py-2 text-sm text-slate-700"
)}>
Your Profile
</a>
@@ -304,8 +304,8 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<a
href="#"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
active ? "bg-slate-100" : "",
"block px-4 py-2 text-sm text-slate-700"
)}>
Settings
</a>
@@ -316,8 +316,8 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<a
href="#"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
active ? "bg-slate-100" : "",
"block px-4 py-2 text-sm text-slate-700"
)}>
Logout
</a>
@@ -333,7 +333,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
{/* Page header */}
<div className="bg-white shadow">
<div className="px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
<div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-gray-200">
<div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-slate-200">
<div className="min-w-0 flex-1">
{/* Profile */}
<div className="flex items-center">
@@ -349,21 +349,21 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
alt=""
/>
<h1 className="ml-3 text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:leading-9">
<h1 className="ml-3 text-2xl font-bold leading-7 text-slate-900 sm:truncate sm:leading-9">
Good morning, Emilia Birch
</h1>
</div>
<dl className="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
<dt className="sr-only">Company</dt>
<dd className="flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6">
<dd className="flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6">
<BuildingOfficeIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
aria-hidden="true"
/>
Duke street studio
</dd>
<dt className="sr-only">Account status</dt>
<dd className="mt-3 flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6 sm:mt-0">
<dd className="mt-3 flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6 sm:mt-0">
<CheckCircleIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-green-400"
aria-hidden="true"
@@ -377,7 +377,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<div className="mt-6 flex space-x-3 md:mt-0 md:ml-4">
<button
type="button"
className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
className="inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
Add money
</button>
<button
@@ -392,7 +392,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<div className="mt-8">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<h2 className="text-lg font-medium leading-6 text-gray-900">Overview</h2>
<h2 className="text-lg font-medium leading-6 text-slate-900">Overview</h2>
<div className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
{/* Card */}
{cards.map((card) => (
@@ -400,19 +400,19 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<div className="p-5">
<div className="flex items-center">
<div className="flex-shrink-0">
<card.icon className="h-6 w-6 text-gray-400" aria-hidden="true" />
<card.icon className="h-6 w-6 text-slate-400" aria-hidden="true" />
</div>
<div className="ml-5 w-0 flex-1">
<dl>
<dt className="truncate text-sm font-medium text-gray-500">{card.name}</dt>
<dt className="truncate text-sm font-medium text-slate-500">{card.name}</dt>
<dd>
<div className="text-lg font-medium text-gray-900">{card.amount}</div>
<div className="text-lg font-medium text-slate-900">{card.amount}</div>
</dd>
</dl>
</div>
</div>
</div>
<div className="bg-gray-50 px-5 py-3">
<div className="bg-slate-50 px-5 py-3">
<div className="text-sm">
<a href={card.href} className="font-medium text-cyan-700 hover:text-cyan-900">
View all
@@ -424,33 +424,33 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
</div>
</div>
<h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-gray-900 sm:px-6 lg:px-8">
<h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-slate-900 sm:px-6 lg:px-8">
Recent activity
</h2>
{/* Activity list (smallest breakpoint only) */}
<div className="shadow sm:hidden">
<ul role="list" className="mt-2 divide-y divide-gray-200 overflow-hidden shadow sm:hidden">
<ul role="list" className="mt-2 divide-y divide-slate-200 overflow-hidden shadow sm:hidden">
{transactions.map((transaction) => (
<li key={transaction.id}>
<a href={transaction.href} className="block bg-white px-4 py-4 hover:bg-gray-50">
<a href={transaction.href} className="block bg-white px-4 py-4 hover:bg-slate-50">
<span className="flex items-center space-x-4">
<span className="flex flex-1 space-x-2 truncate">
<BanknotesIcon
className="h-5 w-5 flex-shrink-0 text-gray-400"
className="h-5 w-5 flex-shrink-0 text-slate-400"
aria-hidden="true"
/>
<span className="flex flex-col truncate text-sm text-gray-500">
<span className="flex flex-col truncate text-sm text-slate-500">
<span className="truncate">{transaction.name}</span>
<span>
<span className="font-medium text-gray-900">{transaction.amount}</span>{" "}
<span className="font-medium text-slate-900">{transaction.amount}</span>{" "}
{transaction.currency}
</span>
<time dateTime={transaction.datetime}>{transaction.date}</time>
</span>
</span>
<ChevronRightIcon
className="h-5 w-5 flex-shrink-0 text-gray-400"
className="h-5 w-5 flex-shrink-0 text-slate-400"
aria-hidden="true"
/>
</span>
@@ -460,17 +460,17 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
</ul>
<nav
className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3"
className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3"
aria-label="Pagination">
<div className="flex flex-1 justify-between">
<a
href="#"
className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">
className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
Previous
</a>
<a
href="#"
className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">
className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
Next
</a>
</div>
@@ -482,54 +482,54 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<div className="mt-2 flex flex-col">
<div className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<table className="min-w-full divide-y divide-slate-200">
<thead>
<tr>
<th
className="bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900"
className="bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900"
scope="col">
Transaction
</th>
<th
className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
scope="col">
Amount
</th>
<th
className="hidden bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900 md:block"
className="hidden bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900 md:block"
scope="col">
Status
</th>
<th
className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
scope="col">
Date
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-slate-200 bg-white">
{transactions.map((transaction) => (
<tr key={transaction.id} className="bg-white">
<td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
<td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-slate-900">
<div className="flex">
<a
href={transaction.href}
className="group inline-flex space-x-2 truncate text-sm">
<BanknotesIcon
className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
className="h-5 w-5 flex-shrink-0 text-slate-400 group-hover:text-slate-500"
aria-hidden="true"
/>
<p className="truncate text-gray-500 group-hover:text-gray-900">
<p className="truncate text-slate-500 group-hover:text-slate-900">
{transaction.name}
</p>
</a>
</div>
</td>
<td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<span className="font-medium text-gray-900">{transaction.amount}</span>
<td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
<span className="font-medium text-slate-900">{transaction.amount}</span>
{transaction.currency}
</td>
<td className="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
<td className="hidden whitespace-nowrap px-6 py-4 text-sm text-slate-500 md:block">
<span
className={classNames(
statusStyles[transaction.status],
@@ -538,7 +538,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
{transaction.status}
</span>
</td>
<td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
<td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
<time dateTime={transaction.datetime}>{transaction.date}</time>
</td>
</tr>
@@ -547,10 +547,10 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
</table>
{/* Pagination */}
<nav
className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3 sm:px-6"
aria-label="Pagination">
<div className="hidden sm:block">
<p className="text-sm text-gray-700">
<p className="text-sm text-slate-700">
Showing <span className="font-medium">1</span> to{" "}
<span className="font-medium">10</span> of <span className="font-medium">20</span>{" "}
results
@@ -559,12 +559,12 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
<div className="flex flex-1 justify-between sm:justify-end">
<a
href="#"
className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
Previous
</a>
<a
href="#"
className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
Next
</a>
</div>

6
apps/demo/components/SimpleFeedbackModal.tsx
View File

@@ -26,7 +26,7 @@ export default function SimpleFeedbackModal({ show, setShow }) {
<div className="p-4">
<div className="flex items-start">
<div className="ml-3 w-0 flex-1 pt-0.5">
<p className="text-sm font-medium text-gray-900">We would like to hear your feedback</p>
<p className="text-sm font-medium text-slate-900">We would like to hear your feedback</p>
<div className="mt-3 flex space-x-7">
<Form
hqUrl={process.env.NEXT_PUBLIC_FORMBRICKS_URL}
@@ -46,7 +46,7 @@ export default function SimpleFeedbackModal({ show, setShow }) {
</Form>
</div>
<hr className="my-2" />
<p className="mt-1 text-sm text-gray-500">
<p className="mt-1 text-sm text-slate-500">
If you have a specific issue, please contact support directly at email us or visit our
docs
</p>
@@ -54,7 +54,7 @@ export default function SimpleFeedbackModal({ show, setShow }) {
<div className="ml-4 flex flex-shrink-0">
<button
type="button"
className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
className="inline-flex rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
onClick={() => {
setShow(false);
}}>

32
apps/demo/components/feedback/FeedbackModal.tsx
View File

@@ -46,7 +46,7 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
<div className="absolute right-4 top-4 ml-4 flex flex-shrink-0">
<button
type="button"
className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
className="inline-flex rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
onClick={() => {
setShow(false);
setTimeout(() => {
@@ -65,7 +65,7 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
{typeof feedbackType === "undefined" ? (
<div className="p-4">
<div className="w-full text-center text-xs text-gray-700">What&apos;s on your mind?</div>
<div className="w-full text-center text-xs text-slate-700">What&apos;s on your mind?</div>
<nav className="mt-3 space-y-1" aria-label="Sidebar">
{navigation.map((item) => (
<button
@@ -73,10 +73,10 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
onClick={() => {
setFeedbackType(item);
}}
className="group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">
className="group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900">
<item.icon
className={clsx(
"text-gray-400 group-hover:text-gray-500",
"text-slate-400 group-hover:text-slate-500",
"-ml-1 mr-3 h-7 w-7 flex-shrink-0"
)}
aria-hidden="true"
@@ -91,13 +91,13 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
<button
key={feedbackType.name}
onClick={() => setFeedbackType(undefined)}
className="group flex w-full items-center justify-center bg-gray-200 px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900">
className="group flex w-full items-center justify-center bg-slate-200 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900">
<feedbackType.icon
className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-slate-400 group-hover:text-slate-500"
aria-hidden="true"
/>
<span className="truncate">{feedbackType.name}</span>
<ChevronDownIcon className="h-6 w-6 text-gray-500" />
<ChevronDownIcon className="h-6 w-6 text-slate-500" />
</button>
<div className="p-4">
@@ -111,10 +111,10 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
<p className="text-sm font-medium text-slate-700 group-hover:text-slate-900">
Thanks for sharing this!
</p>
<p className="text-xs font-medium text-gray-500 group-hover:text-gray-700">
<p className="text-xs font-medium text-slate-500 group-hover:text-slate-700">
Tom Cook, CEO
</p>
</div>
@@ -147,7 +147,7 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
rows={5}
name="message"
id="message"
className="mt-5 block w-full rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm"
className="mt-5 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm"
placeholder={
feedbackType.id === "idea"
? "I would love to..."
@@ -168,14 +168,14 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
</>
) : (
<div className="p-4">
<div className="w-full text-center font-medium text-gray-600">
<div className="w-full text-center font-medium text-slate-600">
{feedbackType.id === "bug"
? "Feedback received."
: feedbackType.id === "compliment"
? "Thanks for sharing!"
: "Brainstorming in progress..."}
</div>
<div className="mt-2 w-full text-center text-sm text-gray-500">
<div className="mt-2 w-full text-center text-sm text-slate-500">
{feedbackType.id === "bug"
? "We are doing our best to fix this asap. Thank you!"
: feedbackType.id === "compliment"
@@ -192,16 +192,16 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
/>
</div>
<div className="ml-3">
<p className="text-xs font-medium text-gray-700 group-hover:text-gray-900">
<p className="text-xs font-medium text-slate-700 group-hover:text-slate-900">
Tom Cook
</p>
<p className="text-xs font-medium text-gray-500 group-hover:text-gray-700">CEO</p>
<p className="text-xs font-medium text-slate-500 group-hover:text-slate-700">CEO</p>
</div>
</div>
</div>
<div className="mt-5 mb-2">
<div className="text-center text-xs text-gray-600">More to share?</div>
<div className="text-center text-xs font-bold text-gray-600">
<div className="text-center text-xs text-slate-600">More to share?</div>
<div className="text-center text-xs font-bold text-slate-600">
<Link href="https://slack.com" target="_blank">
Join Slack
</Link>

58
apps/demo/pages/demos/poll-results.tsx
View File

@@ -124,7 +124,7 @@ export default function Demo() {
</a>
</div>
<div className="-my-2 -mr-2 md:hidden">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
@@ -142,7 +142,7 @@ export default function Demo() {
<Popover.Panel
focus
className="absolute inset-x-0 top-0 z-30 origin-top-right transform p-2 transition md:hidden">
<div className="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div className="divide-y-2 divide-slate-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div className="px-5 pt-5 pb-6">
<div className="flex items-center justify-between">
<div>
@@ -153,7 +153,7 @@ export default function Demo() {
/>
</div>
<div className="-mr-2">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
@@ -169,7 +169,7 @@ export default function Demo() {
<main>
{/* Hero section */}
<div className="relative">
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-slate-100" />
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
<div className="absolute inset-0">
@@ -196,7 +196,7 @@ export default function Demo() {
{/* Alternating Feature Sections */}
<div className="relative overflow-hidden pl-12 pb-16">
<div aria-hidden="true" className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100" />
<div aria-hidden="true" className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-slate-100" />
<div className="relative">
<hr className="my-24 px-10" />
<div className="lg:mx-auto lg:max-w-7xl">
@@ -208,8 +208,8 @@ export default function Demo() {
</span>
</div>
<div className="mt-6">
<h2 className="text-3xl font-bold tracking-tight text-gray-900">The door is open</h2>
<p className="mt-4 text-lg text-gray-500">
<h2 className="text-3xl font-bold tracking-tight text-slate-900">The door is open</h2>
<p className="mt-4 text-lg text-slate-500">
Now it&lsquo;s up to you to continue! And we are here to support you.
<br />
<br />
@@ -219,7 +219,7 @@ export default function Demo() {
</div>
</div>
{/* Feedback Form */}
<div className="mt-8 border-l border-gray-200 pl-10">
<div className="mt-8 border-l border-slate-200 pl-10">
{!answered ? (
/* Formbricks Form using React Library */
<Form
@@ -229,8 +229,8 @@ export default function Demo() {
<Radio
name="evaluate"
label="Evaluate the online course you just completed"
legendClassName="mb-3 font-bold text-gray-800 text-xl"
labelClassName="font-regular text-gray-500 text-lg"
legendClassName="mb-3 font-bold text-slate-800 text-xl"
labelClassName="font-regular text-slate-500 text-lg"
options={[
"Perfect",
"Very satisfactory",
@@ -243,7 +243,7 @@ export default function Demo() {
name="feedback"
label="Would you like to send us a comment, an opinion, a correction?"
help="Only you and us can see your answer."
labelClassName="font-bold text-gray-800 text-xl"
labelClassName="font-bold text-slate-800 text-xl"
innerClassName="mt-3"
cols={50}
rows={4}
@@ -255,10 +255,10 @@ export default function Demo() {
</Form>
) : (
<>
<h2 className="mx-auto mb-3 text-lg font-bold text-gray-800">
<h2 className="mx-auto mb-3 text-lg font-bold text-slate-800">
Thanks a lot for your feedback
</h2>
<p className="mb-5 text-lg text-gray-500">
<p className="mb-5 text-lg text-slate-500">
Here you can see what other people answered.
</p>
{/* Visualize Submission using Formbricks Graphs Library */}
@@ -272,9 +272,9 @@ export default function Demo() {
</div>
{/* CTA Section */}
<div className="bg-gray-50">
<div className="bg-slate-50">
<div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
<h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<h2 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-4xl">
<span className="block">Ready to get started?</span>
<span className="-mb-1 block bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text pb-1 text-transparent">
Get in touch or create an account.
@@ -296,7 +296,7 @@ export default function Demo() {
</div>
</main>
<footer className="bg-gray-50" aria-labelledby="footer-heading">
<footer className="bg-slate-50" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
@@ -305,11 +305,11 @@ export default function Demo() {
<div className="grid grid-cols-2 gap-8 xl:col-span-2">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-base font-medium text-gray-900">Solutions</h3>
<h3 className="text-base font-medium text-slate-900">Solutions</h3>
<ul role="list" className="mt-4 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
<a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
{item.name}
</a>
</li>
@@ -317,11 +317,11 @@ export default function Demo() {
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-base font-medium text-gray-900">Support</h3>
<h3 className="text-base font-medium text-slate-900">Support</h3>
<ul role="list" className="mt-4 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
<a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
{item.name}
</a>
</li>
@@ -331,11 +331,11 @@ export default function Demo() {
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-base font-medium text-gray-900">Company</h3>
<h3 className="text-base font-medium text-slate-900">Company</h3>
<ul role="list" className="mt-4 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
<a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
{item.name}
</a>
</li>
@@ -343,11 +343,11 @@ export default function Demo() {
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-base font-medium text-gray-900">Legal</h3>
<h3 className="text-base font-medium text-slate-900">Legal</h3>
<ul role="list" className="mt-4 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
<a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
{item.name}
</a>
</li>
@@ -357,22 +357,22 @@ export default function Demo() {
</div>
</div>
<div className="mt-12 xl:mt-0">
<h3 className="text-base font-medium text-gray-900">Subscribe to our newsletter</h3>
<p className="mt-4 text-base text-gray-500">
<h3 className="text-base font-medium text-slate-900">Subscribe to our newsletter</h3>
<p className="mt-4 text-base text-slate-500">
The latest news, articles, and resources, sent to your inbox weekly.
</p>
</div>
</div>
<div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
<div className="mt-12 border-t border-slate-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
<div className="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">
<a key={item.name} href={item.href} className="text-slate-400 hover:text-slate-500">
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-base text-gray-400 md:order-1 md:mt-0">
<p className="mt-8 text-base text-slate-400 md:order-1 md:mt-0">
&copy; 2020 Your Company, Inc. All rights reserved.
</p>
</div>

6
apps/demo/pages/index.tsx
View File

@@ -32,12 +32,12 @@ export default function DemosOverview() {
{demos.map((demo) => (
<div
key={demo.name}
className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-teal-500 focus-within:ring-offset-2 hover:border-gray-400">
className="relative flex items-center space-x-3 rounded-lg border border-slate-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-teal-500 focus-within:ring-offset-2 hover:border-slate-400">
<div className="min-w-0 flex-1">
<Link href={demo.href} className="focus:outline-none" target="_blank">
<span className="absolute inset-0" aria-hidden="true" />
<p className="text-sm font-medium text-gray-900">{demo.name}</p>
<p className="truncate text-sm text-gray-500">{demo.description}</p>
<p className="text-sm font-medium text-slate-900">{demo.name}</p>
<p className="truncate text-sm text-slate-500">{demo.description}</p>
</Link>
</div>
</div>

2
apps/formbricks-com/components/engine/FeatureSelection.tsx
View File

@@ -43,7 +43,7 @@ export default function FeatureSelection({
<div className=" mx-auto grid max-w-5xl grid-cols-1 gap-6 px-2 sm:grid-cols-2">
{shuffledOptions.map((option) => (
<label htmlFor={`${element.id}-${option.value}`} key={`${element.id}-${option.value}`}>
<div className="drop-shadow-card duration-120 relative cursor-default rounded-lg border border-gray-200 bg-white p-6 transition-all ease-in-out hover:scale-105 dark:border-slate-700 dark:bg-slate-700">
<div className="drop-shadow-card duration-120 relative cursor-default rounded-lg border border-slate-200 bg-white p-6 transition-all ease-in-out hover:scale-105 dark:border-slate-700 dark:bg-slate-700">
<div className="absolute right-10">
<input
id={`${element.id}-${option.value}`}

2
apps/formbricks-com/components/engine/Input.tsx
View File

@@ -36,7 +36,7 @@ export default function Input({
<input
type={element.frontend?.type || "text"}
onBlur=""
className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-gray-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 dark:focus:bg-slate-700 dark:active:bg-slate-700 sm:text-sm"
className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-slate-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 dark:focus:bg-slate-700 dark:active:bg-slate-700 sm:text-sm"
placeholder={element.frontend?.placeholder || ""}
required={!!element.frontend?.required}
{...register(element.name!)}

2
apps/formbricks-com/components/engine/Progressbar.tsx
View File

@@ -1,6 +1,6 @@
export default function Progressbar({ progress }: { progress: number }) {
return (
<div className="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
<div className="h-1.5 w-full rounded-full bg-slate-200 dark:bg-slate-700">
<div
className="h-1.5 rounded-full bg-slate-700 dark:bg-slate-300"
style={{ width: `${Math.floor(progress * 100)}%` }}></div>

6
apps/formbricks-com/components/engine/Scale.tsx
View File

@@ -85,7 +85,7 @@ export default function Scale({
value={num}
className={({ checked, active }) =>
clsx(
checked ? "border-transparent" : "border-gray-200 dark:border-slate-700",
checked ? "border-transparent" : "border-slate-200 dark:border-slate-700",
active ? "border-brand ring-brand ring-2" : "",
"xs:rounded-lg relative flex cursor-pointer rounded-md border bg-white py-3 shadow-sm transition-all ease-in-out hover:scale-105 focus:outline-none dark:bg-slate-700 sm:p-4"
)
@@ -95,7 +95,7 @@ export default function Scale({
<div className="flex flex-1 flex-col justify-center">
<RadioGroup.Label
as="span"
className="mx-auto text-sm font-medium text-gray-900 dark:text-gray-200">
className="mx-auto text-sm font-medium text-slate-900 dark:text-slate-200">
{num}
</RadioGroup.Label>
</div>
@@ -120,7 +120,7 @@ export default function Scale({
</RadioGroup.Option>
))}
</div>
<div className="xs:text-sm mt-2 flex justify-between text-xs text-gray-700 dark:text-slate-400">
<div className="xs:text-sm mt-2 flex justify-between text-xs text-slate-700 dark:text-slate-400">
<p>{element.frontend.minLabel}</p>
<p>{element.frontend.maxLabel}</p>
</div>

2
apps/formbricks-com/components/engine/Textarea.tsx
View File

@@ -32,7 +32,7 @@ export default function Textarea({
</label>
<textarea
rows={element.frontend?.rows || 4}
className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-gray-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 sm:text-sm"
className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-slate-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 sm:text-sm"
placeholder={element.frontend?.placeholder || ""}
required={!!element.frontend?.required}
{...register(element.name!)}

2
apps/formbricks-com/components/home/Features.tsx
View File

@@ -49,7 +49,7 @@ export default function Features() {
</h3>
<dl className="mt-1 flex flex-grow flex-col justify-between">
<dt className="sr-only">Description</dt>
<dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
<dd className="text-sm text-slate-600 dark:text-slate-400">{feature.description}</dd>
</dl>
</div>
</li>

4
apps/formbricks-com/components/shared/CTA.tsx
View File

@@ -10,14 +10,14 @@ export default function CTA() {
<HeadingCentered closer teaser="Get started" heading="Ready for the last form tool you need?" />
<div className="mt-12 grid grid-cols-1 content-center md:grid-cols-2">
<div className="-mb-4 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 px-8 py-24 text-center text-gray-900 dark:from-slate-800 dark:to-slate-900 dark:text-gray-100 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl lg:p-24">
<div className="-mb-4 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 px-8 py-24 text-center text-slate-900 dark:from-slate-800 dark:to-slate-900 dark:text-slate-100 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl lg:p-24">
<h3 className="text-3xl font-bold">Self-hosted</h3>
<p className="mt-2 mb-4">Run locally e.g. with docker-compose.</p>
<Button variant="secondary" onClick={() => router.push("/docs")} className="mt-3">
Read docs
</Button>
</div>
<div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 py-24 text-center text-gray-800 dark:from-slate-800 dark:to-slate-700 dark:text-gray-100">
<div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 py-24 text-center text-slate-800 dark:from-slate-800 dark:to-slate-700 dark:text-slate-100">
<h3 className="text-3xl font-bold">Cloud</h3>
<p className="mt-2 mb-4">Use our free managed service.</p>
<Button variant="secondary" onClick={() => router.push("/waitlist")} className="mt-3" disabled>

6
apps/formbricks-com/components/shared/Footer.tsx
View File

@@ -64,8 +64,8 @@ export default function Footer() {
<FooterLogo className="mx-auto h-8 w-auto sm:h-10" />
</Link>
<p className="text-base text-slate-500 dark:text-slate-400">Experience Management for B2B SaaS</p>
<div className="border-gray-500">
<p className="text-sm text-slate-400 dark:text-gray-500">
<div className="border-slate-500">
<p className="text-sm text-slate-400 dark:text-slate-500">
&copy; 2022. All rights reserved.
<br />
<Link href="/imprint">Imprint</Link> | <Link href="/privacy">Privacy Policy</Link> |{" "}
@@ -74,7 +74,7 @@ export default function Footer() {
</div>
<div className="flex justify-center space-x-6">
{navigation.social.map((item) => (
<Link key={item.name} href={item.href} className="text-slate-400 hover:text-gray-500">
<Link key={item.name} href={item.href} className="text-slate-400 hover:text-slate-500">
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</Link>

6
apps/formbricks-com/components/shared/Header.tsx
View File

@@ -19,7 +19,7 @@ export default function Header() {
</Link>
</div>
<div className="-my-2 -mr-2 md:hidden">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<span className="sr-only">Open menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
@@ -55,14 +55,14 @@ export default function Header() {
<Popover.Panel
focus
className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
<div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
<div className="dark:divide-slate divide-y-2 divide-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-700 dark:bg-slate-800">
<div className="px-5 pt-5 pb-6">
<div className="flex items-center justify-between">
<div>
<FooterLogo className="h-8 w-auto" />
</div>
<div className="-mr-2">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>

6
apps/formbricks-com/components/shared/HeaderPMF.tsx
View File

@@ -19,7 +19,7 @@ export default function Header() {
</Link>
</div>
<div className="-my-2 -mr-2 md:hidden">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<span className="sr-only">Open menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
@@ -62,14 +62,14 @@ export default function Header() {
<Popover.Panel
focus
className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
<div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
<div className="dark:divide-slate divide-y-2 divide-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-700 dark:bg-slate-800">
<div className="px-5 pt-5 pb-6">
<div className="flex items-center justify-between">
<div>
<FooterLogo className="h-8 w-auto" />
</div>
<div className="-mr-2">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>

40
apps/formbricks-com/components/shared/HeaderWithMenu.tsx
View File

@@ -107,7 +107,7 @@ export default function Header() {
</Link>
</div>
<div className="-my-2 -mr-2 md:hidden">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<span className="sr-only">Open menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
@@ -294,23 +294,23 @@ export default function Header() {
<Popover.Panel
focus
className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
<div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
<div className="dark:divide-slate divide-y-2 divide-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-700 dark:bg-slate-800">
<div className="px-5 pt-5 pb-6">
<div className="flex items-center justify-between">
<div>
<FooterLogo className="h-8 w-auto" />
</div>
<div className="-mr-2">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<nav className="relative bg-gray-200 px-5 py-6 dark:bg-slate-800">
<nav className="relative bg-slate-200 px-5 py-6 dark:bg-slate-800">
<div>
<h4 className="mb-3 text-sm text-gray-900 dark:text-gray-300">Survey Creation</h4>
<h4 className="mb-3 text-sm text-slate-900 dark:text-slate-300">Survey Creation</h4>
{creation.map((brick) => (
<Link
key={brick.name}
@@ -330,8 +330,8 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-200"
: "text-gray-400 dark:text-gray-500",
? "text-slate-900 dark:text-slate-200"
: "text-slate-400 dark:text-slate-500",
"text-lg font-semibold"
)}>
{brick.name}
@@ -339,8 +339,8 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-400"
: "text-gray-400 dark:text-gray-600",
? "text-slate-900 dark:text-slate-400"
: "text-slate-400 dark:text-slate-600",
"text-sm"
)}>
{brick.description}
@@ -350,7 +350,7 @@ export default function Header() {
))}
</div>
<div>
<h4 className="mt-8 mb-3 text-sm text-gray-900 dark:text-gray-300">Data Pipelines</h4>
<h4 className="mt-8 mb-3 text-sm text-slate-900 dark:text-slate-300">Data Pipelines</h4>
{pipes.map((brick) => (
<Link
key={brick.name}
@@ -370,8 +370,8 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-200"
: "text-gray-400 dark:text-gray-500",
? "text-slate-900 dark:text-slate-200"
: "text-slate-400 dark:text-slate-500",
"text-lg font-semibold"
)}>
{brick.name}
@@ -379,8 +379,8 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-400"
: "text-gray-400 dark:text-gray-600",
? "text-slate-900 dark:text-slate-400"
: "text-slate-400 dark:text-slate-600",
"text-sm"
)}>
{brick.description}
@@ -390,7 +390,7 @@ export default function Header() {
))}
</div>
<div>
<h4 className="mt-8 mb-3 text-sm text-gray-900 dark:text-gray-300">Data Insights</h4>
<h4 className="mt-8 mb-3 text-sm text-slate-900 dark:text-slate-300">Data Insights</h4>
{insights.map((brick) => (
<Link
key={brick.name}
@@ -410,8 +410,8 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-200"
: "text-gray-400 dark:text-gray-500",
? "text-slate-900 dark:text-slate-200"
: "text-slate-400 dark:text-slate-500",
"text-lg font-semibold"
)}>
{brick.name}
@@ -419,8 +419,8 @@ export default function Header() {
<p
className={clsx(
brick.status
? "text-gray-900 dark:text-gray-400"
: "text-gray-400 dark:text-gray-600",
? "text-slate-900 dark:text-slate-400"
: "text-slate-400 dark:text-slate-600",
"text-sm"
)}>
{brick.description}
@@ -432,7 +432,7 @@ export default function Header() {
</nav>
</div>
<div className="px-5 py-6">
<div className="grid grid-cols-3 text-center text-sm font-medium text-gray-900 hover:text-gray-700 dark:text-slate-200 sm:text-base">
<div className="grid grid-cols-3 text-center text-sm font-medium text-slate-900 hover:text-slate-700 dark:text-slate-200 sm:text-base">
<Link href="/community">Community</Link>
<Link href="/blog">Blog</Link>

2
apps/formbricks-com/components/shared/LayoutMdx.tsx
View File

@@ -23,7 +23,7 @@ export default function LayoutMdx({ meta, children }: Props) {
{meta.title && (
<header className="mb-9 space-y-1">
{meta.title && (
<h1 className="font-display text-3xl tracking-tight text-slate-800 dark:text-gray-100">
<h1 className="font-display text-3xl tracking-tight text-slate-800 dark:text-slate-100">
{meta.title}
</h1>
)}

4
apps/formbricks-com/components/shared/MdxCTA.tsx
View File

@@ -14,14 +14,14 @@ export default function CTA() {
Try Formbricks right now!
</p>
<div className="mt-12 grid grid-cols-1 content-center md:grid-cols-2">
<div className="-mb-2 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 text-center text-gray-900 dark:from-slate-800 dark:to-slate-900 dark:text-slate-200 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl">
<div className="-mb-2 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 text-center text-slate-900 dark:from-slate-800 dark:to-slate-900 dark:text-slate-200 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl">
<h3 className="text-3xl font-bold">Self-hosted</h3>
<p className="mt-2 mb-4 dark:text-slate-400">Run locally with docker-compose.</p>
<Button variant="secondary" onClick={() => router.push("/docs")} className="mt-3 mb-8 md:mb-0">
Read docs
</Button>
</div>
<div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 pb-10 text-center text-gray-800 dark:from-slate-800 dark:to-slate-700 dark:text-slate-200">
<div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 pb-10 text-center text-slate-800 dark:from-slate-800 dark:to-slate-700 dark:text-slate-200">
<h3 className="text-3xl font-bold">Cloud</h3>
<p className="mt-2 mb-4 dark:text-slate-400">Use our free managed service.</p>
<Button variant="secondary" onClick={() => router.push("/waitlist")} className="mt-3">

8
apps/formbricks-com/components/shared/PricingPmf.tsx
View File

@@ -61,7 +61,9 @@ export default function PricingPmf() {
<p
className={clsx(
"mt-4 whitespace-pre-wrap text-sm",
tier.highlight ? "text-gray-600 dark:text-slate-300" : "text-gray-500 dark:text-slate-300"
tier.highlight
? "text-slate-600 dark:text-slate-300"
: "text-slate-500 dark:text-slate-300"
)}>
{tier.description}
</p>
@@ -83,8 +85,8 @@ export default function PricingPmf() {
className={clsx(
"text-base font-medium",
tier.highlight
? "text-gray-500 dark:text-slate-400"
: "text-gray-400 dark:text-slate-500"
? "text-slate-500 dark:text-slate-400"
: "text-slate-400 dark:text-slate-500"
)}>
{tier.paymentRythm}
</span>

2
apps/formbricks-com/components/shared/TryItCTA.tsx
View File

@@ -26,7 +26,7 @@ export default function HeadingCentered() {
</Button>
</div>
<div className="flex items-center">
<div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-gray-100 ">
<div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-slate-100 ">
<p>npm install @formbricks/react</p>
<button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
<DocumentDuplicateIcon className="h-8 w-8" />

10
apps/formbricks-com/pages/blog/weekly-update-021222/index.mdx
View File

@@ -58,15 +58,15 @@ import { Form, Radio, Submit, sendToHq, Textarea } from "@formbricks/react";
<Radio
name="evaluate"
label="Evaluate the online course you just completed"
legendClassName="mb-3 font-bold text-gray-800 text-xl"
labelClassName="font-regular text-gray-500 text-lg"
legendClassName="mb-3 font-bold text-slate-800 text-xl"
labelClassName="font-regular text-slate-500 text-lg"
options={["Perfect", "Very satisfactory", "Satisfactory", "Not very satisfactory", "Useless"]}
/>
<Textarea
name="feedback"
label="Would you like to send us a comment, an opinion, a correction?"
help="Only you and us can see your answer."
labelClassName="font-bold text-gray-800 text-xl"
labelClassName="font-bold text-slate-800 text-xl"
innerClassName="mt-3"
cols={50}
rows={4}
@@ -105,10 +105,10 @@ import { Bar } from "@formbricks/charts";
...
<h2 className="mx-auto mb-3 text-lg font-bold text-gray-800">
<h2 className="mx-auto mb-3 text-lg font-bold text-slate-800">
Thanks a lot for your feedback
</h2>
<p className="mb-5 text-lg text-gray-500">
<p className="mb-5 text-lg text-slate-500">
Here you can see what other people answered.
</p>

2
apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx
View File

@@ -141,7 +141,7 @@ You can also use Tailwind to extend the classes, like so:
help="Take what you like"
options={["Pineapple", "Ananas", "Piña"]}
legendClassName="font-bold"
optionClassName="bg-gray rounded-sm"
optionClassName="bg-slate rounded-sm"
/>
```

2
apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx
View File

@@ -75,7 +75,7 @@ You can style your email field with adding CSS to the section classes. This is h
You can also use Tailwind to extend the classes, like so:
```jsx
<Email name="email" label="What's your email?" inputClassName="bg-gray-800 my-5" />
<Email name="email" label="What's your email?" inputClassName="bg-slate-800 my-5" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).

2
apps/formbricks-com/pages/docs/react-form-library/input-password/index.mdx
View File

@@ -83,7 +83,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
You can also use Tailwind to extend the classes, like so:
```jsx
<Password name="password" label="Password" validation="required" outerClassName="bg-gray-800" />
<Password name="password" label="Password" validation="required" outerClassName="bg-slate-800" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).

2
apps/formbricks-com/pages/docs/react-form-library/input-phone/index.mdx
View File

@@ -77,7 +77,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
You can also use Tailwind to extend the classes, like so:
```jsx
<Phone name="phone" label="Phone" outerClassName="bg-gray-800" />
<Phone name="phone" label="Phone" outerClassName="bg-slate-800" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).

2
apps/formbricks-com/pages/docs/react-form-library/input-radio/index.mdx
View File

@@ -163,7 +163,7 @@ You can also use Tailwind to extend the classes, like so:
help="Only choose one"
options={["Sushi", "Pasta", "Pizza"]}
legendClassName="font-bold"
optionClassName="bg-gray rounded-sm"
optionClassName="bg-slate rounded-sm"
/>
```

2
apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx
View File

@@ -81,7 +81,7 @@ You can also use Tailwind to extend the classes, like so:
name="search"
placeholder="Search..."
label="Search"
innerClassName="border-gray-700 border-2 rounded-full"
innerClassName="border-slate-700 border-2 rounded-full"
/>
```

2
apps/formbricks-com/pages/docs/react-form-library/input-text/index.mdx
View File

@@ -77,7 +77,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
You can also use Tailwind to extend the classes, like so:
```jsx
<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).

2
apps/formbricks-com/pages/docs/react-form-library/input-textarea/index.mdx
View File

@@ -84,7 +84,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
You can also use Tailwind to extend the classes, like so:
```jsx
<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).

2
apps/formbricks-com/pages/docs/react-form-library/input-url/index.mdx
View File

@@ -75,7 +75,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
You can also use Tailwind to extend the classes, like so:
```jsx
<URL name="url" label="Company website" outerClassName="bg-gray-800 my-5" />
<URL name="url" label="Company website" outerClassName="bg-slate-800 my-5" />
```
Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).

2
apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
View File

@@ -9,7 +9,7 @@ export const meta = {
We love Tailwind! This is why Formbricks React natively supports Tailwind. All you have to do is target the classes using props. For example, to extend “formbricks-outer” class:
```jsx
<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
```
### Overview of props to target CSS classes

2
apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
View File

@@ -67,7 +67,7 @@ to style the message wrapper and the message itself:
<Text
name="email"
label="Email"
messagesClassName="bg-gray-100 rounded"
messagesClassName="bg-slate-100 rounded"
messageClassName="text-base sm:text-sm text-red-500"
/>
```

8
apps/web/src/components/AnalyticsCard.tsx
View File

@@ -17,13 +17,13 @@ const AnalyticsCard: React.FC<Props> = ({ value, label, toolTipText, trend, smal
return (
<div className="rounded-md bg-white shadow-md">
<div key={label} className="px-4 py-5 sm:p-6">
<dt className="has-tooltip inline-flex text-base font-normal text-gray-900">
<dt className="has-tooltip inline-flex text-base font-normal text-slate-900">
{label}{" "}
{toolTipText && (
<QuestionMarkCircleIcon className="text-red hover:text-ui-gray-dark ml-1 h-4 w-4" />
<QuestionMarkCircleIcon className="text-red hover:text-ui-slate-dark ml-1 h-4 w-4" />
)}
{toolTipText && (
<span className="tooltip -mt-6 -ml-8 flex grow rounded bg-gray-600 p-1 px-4 text-center text-xs text-white shadow-lg">
<span className="tooltip -mt-6 -ml-8 flex grow rounded bg-slate-600 p-1 px-4 text-center text-xs text-white shadow-lg">
{toolTipText}
</span>
)}
@@ -32,7 +32,7 @@ const AnalyticsCard: React.FC<Props> = ({ value, label, toolTipText, trend, smal
<div
className={clsx(
smallerText ? "text-lg" : "text-xl",
"flex items-baseline text-xl font-semibold text-gray-800"
"flex items-baseline text-xl font-semibold text-slate-800"
)}>
{value}
</div>

4
apps/web/src/components/Modal.tsx
View File

@@ -15,7 +15,7 @@ export default function Modal({ open, setOpen, children }) {
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@@ -32,7 +32,7 @@ export default function Modal({ open, setOpen, children }) {
<div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button
type="button"
className="focus:ring-brand rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
className="focus:ring-brand rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
onClick={() => setOpen(false)}>
<span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />

8
apps/web/src/components/TabNavigation.tsx
View File

@@ -11,7 +11,7 @@ export default function TabNavigation({ tabs, currentTab, setCurrentTab }) {
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-teal-500 focus:ring-teal-500"
className="block w-full rounded-md border-slate-300 focus:border-teal-500 focus:ring-teal-500"
onChange={(e) => setCurrentTab(e.target.value)}
defaultValue={currentTab}>
{tabs.map((tab) => (
@@ -20,7 +20,7 @@ export default function TabNavigation({ tabs, currentTab, setCurrentTab }) {
</select>
</div>
<div className="hidden sm:block">
<div className="border-b border-gray-200">
<div className="border-b border-slate-200">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<button
@@ -29,13 +29,13 @@ export default function TabNavigation({ tabs, currentTab, setCurrentTab }) {
className={clsx(
tab.name === currentTab
? "border-teal-500 text-teal-600"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
: "border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700",
"group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
)}
aria-current={currentTab === tab.name ? "page" : undefined}>
<tab.icon
className={clsx(
tab.name === currentTab ? "text-teal-500" : "text-gray-400 group-hover:text-gray-500",
tab.name === currentTab ? "text-teal-500" : "text-slate-400 group-hover:text-slate-500",
"-ml-0.5 mr-2 h-5 w-5"
)}
aria-hidden="true"

4
apps/web/src/components/UpgradeModal.tsx
View File

@@ -5,8 +5,8 @@ export default function UpgradeModal({ open, setOpen, organisationId }) {
return (
<Modal open={open} setOpen={setOpen}>
<div className="my-6 sm:flex-auto">
<h1 className="text-xl font-semibold text-gray-900">Upgrade to benefit from all features</h1>
<p className="mt-2 text-sm text-gray-700">
<h1 className="text-xl font-semibold text-slate-900">Upgrade to benefit from all features</h1>
<p className="mt-2 text-sm text-slate-700">
You do not currently have an active subscription. Upgrade to get access to all features and improve
your user research.
</p>

2
apps/web/src/components/auth/PasswordResetForm.tsx
View File

@@ -49,7 +49,7 @@ export const PasswordResetForm = ({}) => {
type="email"
autoComplete="email"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>

2
apps/web/src/components/auth/ResetPasswordForm.tsx
View File

@@ -49,7 +49,7 @@ export const ResetPasswordForm = ({ token }) => {
name="password"
type="password"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>

8
apps/web/src/components/auth/SigninForm.tsx
View File

@@ -45,7 +45,7 @@ export const SigninForm = ({ callbackUrl, error }) => {
type="email"
autoComplete="email"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>
@@ -60,7 +60,7 @@ export const SigninForm = ({ callbackUrl, error }) => {
type="password"
autoComplete="current-password"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>
@@ -83,10 +83,10 @@ export const SigninForm = ({ callbackUrl, error }) => {
<>
<div className="relative">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-gray-300" />
<div className="w-full border-t border-slate-300" />
</div>
<div className="relative flex justify-center">
<span className="bg-white px-2 text-sm text-gray-500">Sign in with</span>
<span className="bg-white px-2 text-sm text-slate-500">Sign in with</span>
</div>
</div>
<GithubButton text="Sign in with GitHub" />{" "}

14
apps/web/src/components/auth/SignupForm.tsx
View File

@@ -60,7 +60,7 @@ export const SignupForm = () => {
type="text"
autoComplete="given-name"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>
@@ -75,7 +75,7 @@ export const SignupForm = () => {
type="email"
autoComplete="email"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>
@@ -89,7 +89,7 @@ export const SignupForm = () => {
name="password"
type="password"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>
@@ -99,14 +99,14 @@ export const SignupForm = () => {
Sign up
</Button>
<div className="mt-3 text-center text-xs text-gray-600">
<div className="mt-3 text-center text-xs text-slate-600">
Already have an account?{" "}
<Link href="/auth/signin" className="text-brand hover:text-brand-light">
Log in.
</Link>
</div>
{(process.env.NEXT_PUBLIC_TERMS_URL || process.env.NEXT_PUBLIC_PRIVACY_URL) && (
<div className="mt-3 text-center text-xs text-gray-400">
<div className="mt-3 text-center text-xs text-slate-400">
By clicking &quot;Sign Up&quot;, you agree to our
<br />
{process.env.NEXT_PUBLIC_TERMS_URL && (
@@ -137,10 +137,10 @@ export const SignupForm = () => {
<>
<div className="relative">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-gray-300" />
<div className="w-full border-t border-slate-300" />
</div>
<div className="relative flex justify-center">
<span className="bg-white px-2 text-sm text-gray-500">Sign up with</span>
<span className="bg-white px-2 text-sm text-slate-500">Sign up with</span>
</div>
</div>
<GithubButton text="Sign up with GitHub" />

20
apps/web/src/components/customers/CustomersPage.tsx
View File

@@ -32,7 +32,7 @@ export default function FormsPage() {
return (
<div className="mx-auto py-8 sm:px-6 lg:px-8">
<header className="mb-8">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
Customers
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{organisation.name}
@@ -55,18 +55,18 @@ export default function FormsPage() {
<div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50">
<table className="min-w-full divide-y divide-slate-300">
<thead className="bg-slate-50">
<tr>
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-900 sm:pl-6">
Email
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
created At
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
# submissions
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
@@ -76,17 +76,17 @@ export default function FormsPage() {
</thead>
<tbody className="bg-white">
{customers.map((customer, customerIdx) => (
<tr key={customer.email} className={customerIdx % 2 === 0 ? undefined : "bg-gray-50"}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
<tr key={customer.email} className={customerIdx % 2 === 0 ? undefined : "bg-slate-50"}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-slate-900 sm:pl-6">
<Link
href={`/organisations/${router.query.organisationId}/customers/${customer.email}`}>
{customer.email}
</Link>
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
{convertDateTimeString(customer.createdAt)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
{customer._count?.submissions}
</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">

48
apps/web/src/components/customers/SingleCustomerPage.tsx
View File

@@ -38,45 +38,45 @@ export default function SingleCustomerPage() {
return (
<div>
<main className="mx-auto px-4 sm:px-6 lg:px-8">
<button className="inline-flex pt-5 text-sm text-gray-500" onClick={() => router.back()}>
<button className="inline-flex pt-5 text-sm text-slate-500" onClick={() => router.back()}>
<BackIcon className="mr-2 h-5 w-5" />
Back
</button>
<div className="flex items-baseline justify-between border-b border-gray-200 pt-4 pb-6">
<h1 className="text-4xl font-bold tracking-tight text-gray-900">{customer.email}</h1>
<div className="flex items-baseline justify-between border-b border-slate-200 pt-4 pb-6">
<h1 className="text-4xl font-bold tracking-tight text-slate-900">{customer.email}</h1>
</div>
<section className="pt-6 pb-24">
<div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
<div className="space-y-6">
<h2 className="text-lg font-bold text-gray-700">Properties</h2>
<h2 className="text-lg font-bold text-slate-700">Properties</h2>
{"name" in customer.data && (
<div>
<dt className="text-sm font-medium text-gray-500">Name</dt>
<dd className="mt-1 text-sm text-gray-900">{customer.data.name}</dd>
<dt className="text-sm font-medium text-slate-500">Name</dt>
<dd className="mt-1 text-sm text-slate-900">{customer.data.name}</dd>
</div>
)}
<div>
<dt className="text-sm font-medium text-gray-500">Email</dt>
<dd className="mt-1 text-sm text-gray-900">{customer.email}</dd>
<dt className="text-sm font-medium text-slate-500">Email</dt>
<dd className="mt-1 text-sm text-slate-900">{customer.email}</dd>
</div>
{Object.entries(customer.data).map(
([key, value]) =>
!["name", "email"].includes(key) && (
<div>
<dt className="text-sm font-medium text-gray-500">{key}</dt>
<dd className="mt-1 text-sm text-gray-900">{value.toString()}</dd>
<dt className="text-sm font-medium text-slate-500">{key}</dt>
<dd className="mt-1 text-sm text-slate-900">{value.toString()}</dd>
</div>
)
)}
<hr className="text-gray-600" />
<hr className="text-slate-600" />
<div>
<dt className="text-sm font-medium text-gray-500">Number of forms participated</dt>
<dd className="mt-1 text-sm text-gray-900">{formsParticipated}</dd>
<dt className="text-sm font-medium text-slate-500">Number of forms participated</dt>
<dd className="mt-1 text-sm text-slate-900">{formsParticipated}</dd>
</div>
<div>
<dt className="text-sm font-medium text-gray-500">Number of form submissions</dt>
<dd className="mt-1 text-sm text-gray-900">{customer.submissions.length}</dd>
<dt className="text-sm font-medium text-slate-500">Number of form submissions</dt>
<dd className="mt-1 text-sm text-slate-900">{customer.submissions.length}</dd>
</div>
</div>
@@ -96,7 +96,7 @@ export default function SingleCustomerPage() {
<div className="relative pb-8">
{submissionIdx !== customer.submissions.length - 1 ? (
<span
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
aria-hidden="true"
/>
) : null}
@@ -106,23 +106,23 @@ export default function SingleCustomerPage() {
<div className="flex w-full justify-between">
<div></div>
<div className="text-sm text-gray-400">
<div className="text-sm text-slate-400">
<time dateTime={convertDateTimeString(submission.createdAt)}>
{convertDateTimeString(submission.createdAt)}
</time>
</div>
</div>
<div className="mt-3">
<p className="whitespace-pre-wrap text-sm text-gray-500">
<p className="whitespace-pre-wrap text-sm text-slate-500">
{Object.entries(
MergeWithSchema(submission.data, submission.form.schema)
).map(([key, value]) => (
<li key={key} className="py-5">
<p className="text-sm font-semibold text-gray-800">{key}</p>
<p className="text-sm font-semibold text-slate-800">{key}</p>
<p
className={clsx(
value ? "text-gray-600" : "text-gray-400",
"whitespace-pre-line pt-1 text-sm text-gray-600"
value ? "text-slate-600" : "text-slate-400",
"whitespace-pre-line pt-1 text-sm text-slate-600"
)}>
{value.toString()}
</p>
@@ -131,11 +131,11 @@ export default function SingleCustomerPage() {
</p>
</div>
</div>
<div className=" bg-gray-50 p-4 sm:p-6">
<div className=" bg-slate-50 p-4 sm:p-6">
<div className="flex w-full justify-between gap-4">
<div>
<p className="text-sm font-thin text-gray-500">Device</p>
<p className="text-sm text-gray-500">
<p className="text-sm font-thin text-slate-500">Device</p>
<p className="text-sm text-slate-500">
{parseUserAgent(submission.meta.userAgent)}
</p>
</div>

2
apps/web/src/components/forms/FormsPage.tsx
View File

@@ -27,7 +27,7 @@ export default function FormsPage({}) {
return (
<div className="mx-auto py-8 sm:px-6 lg:px-8">
<header className="mb-8">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
Forms
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{organisation.name}

16
apps/web/src/components/forms/NewFormModal.tsx
View File

@@ -232,7 +232,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-gray-500 bg-opacity-30 backdrop-blur-md transition-opacity" />
<div className="fixed inset-0 bg-slate-500 bg-opacity-30 backdrop-blur-md transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@@ -249,7 +249,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
<div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button
type="button"
className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-0 focus:ring-offset-2"
className="rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-0 focus:ring-offset-2"
onClick={() => setOpen(false)}>
<span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
@@ -269,7 +269,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
<input
type="text"
name="label"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
placeholder="e.g. Feedback Box App"
value={label}
onChange={(e) => setLabel(e.target.value)}
@@ -278,7 +278,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
/>
</div>
</div>
<hr className="my-6 text-gray-600" />
<hr className="my-6 text-slate-600" />
<RadioGroup value={formType} onChange={setFormType}>
<RadioGroup.Label className="text-sm font-light text-slate-800">
Choose your form type
@@ -297,9 +297,9 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
value={formType.id}
className={({ checked, active, disabled }) =>
clsx(
checked ? "border-transparent" : "border-gray-300",
checked ? "border-transparent" : "border-slate-300",
active ? "border-brand ring-brand ring-2" : "",
disabled ? "bg-gray-100" : "bg-white",
disabled ? "bg-slate-100" : "bg-white",
"relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex"
)
}>
@@ -312,7 +312,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
</RadioGroup.Description>
<span className="flex items-center">
<span className="flex flex-col text-sm">
<RadioGroup.Label as="span" className="font-medium text-gray-900">
<RadioGroup.Label as="span" className="font-medium text-slate-900">
{formType.name}
{formType.needsUpgrade && (
<Link href={`/organisations/${organisation.id}/settings/billing`}>
@@ -322,7 +322,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
</Link>
)}
</RadioGroup.Label>
<RadioGroup.Description as="span" className="text-gray-500">
<RadioGroup.Description as="span" className="text-slate-500">
{formType.description}
</RadioGroup.Description>
</span>

30
apps/web/src/components/forms/custom/FormOverviewPage.tsx
View File

@@ -57,7 +57,7 @@ export default function FormOverviewPage() {
return (
<div className="mx-auto py-8 sm:px-6 lg:px-8">
<header className="mb-8">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
{form.label}
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{organisation.name}
@@ -74,7 +74,7 @@ export default function FormOverviewPage() {
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-teal-500 focus:ring-teal-500"
className="block w-full rounded-md border-slate-300 focus:border-teal-500 focus:ring-teal-500"
defaultValue={activeTab.name}>
{tabs.map((tab) => (
<option key={tab.name}>{tab.name}</option>
@@ -82,7 +82,7 @@ export default function FormOverviewPage() {
</select>
</div>
<div className="hidden sm:block">
<div className="border-b border-gray-200">
<div className="border-b border-slate-200">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<button
@@ -91,7 +91,7 @@ export default function FormOverviewPage() {
className={clsx(
activeTab.name === tab.name
? "border-teal-500 text-teal-600"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
: "border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700",
"group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
)}
aria-current={activeTab.name === tab.name ? "page" : undefined}>
@@ -99,7 +99,7 @@ export default function FormOverviewPage() {
className={clsx(
activeTab.name === tab.name
? "text-teal-500"
: "text-gray-400 group-hover:text-gray-500",
: "text-slate-400 group-hover:text-slate-500",
"-ml-0.5 mr-2 h-5 w-5"
)}
aria-hidden="true"
@@ -124,7 +124,7 @@ export default function FormOverviewPage() {
<input
id="formId"
type="text"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
value={form.id}
disabled
/>
@@ -147,13 +147,13 @@ export default function FormOverviewPage() {
</label>
<div className="mt-3">
<div className="mt-1 flex rounded-md shadow-sm">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500 sm:text-sm">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-200 px-3 text-slate-500 sm:text-sm">
POST
</span>
<input
id="captureUrl"
type="text"
className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-slate-300 bg-slate-100 shadow-sm sm:text-sm"
value={capturePostUrl}
disabled
/>
@@ -172,7 +172,7 @@ export default function FormOverviewPage() {
</div>
</div>
<div className="col-span-2 text-sm text-gray-600">
<div className="col-span-2 text-sm text-slate-600">
<h3 className="block text-lg font-semibold text-slate-800">How to get started</h3>
<ol className="list-decimal leading-8 text-slate-700">
<li>POST a submission to the capture endpoint.</li>
@@ -218,13 +218,13 @@ export default function FormOverviewPage() {
</label>
<div className="mt-3">
<div className="mt-1 flex rounded-md shadow-sm">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500 sm:text-sm">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-200 px-3 text-slate-500 sm:text-sm">
POST
</span>
<input
id="captureUrl"
type="text"
className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-slate-300 bg-slate-100 shadow-sm sm:text-sm"
value={`${window.location.protocol}//${window.location.host}/api/capture/forms/${form.id}/submissions`}
disabled
/>
@@ -241,7 +241,7 @@ export default function FormOverviewPage() {
</Button>
</div>
</div>
<div className="mt-4 rounded-md bg-black p-4 font-light text-gray-200 first-letter:text-sm">
<div className="mt-4 rounded-md bg-black p-4 font-light text-slate-200 first-letter:text-sm">
<pre>
<code className="language-js whitespace-pre-wrap">
{`{
@@ -256,15 +256,15 @@ export default function FormOverviewPage() {
</pre>
</div>
</div>
<div className="col-span-2 text-sm text-gray-600">
<div className="col-span-2 text-sm text-slate-600">
<h3 className="block pb-4 text-lg font-semibold text-slate-800">Quick Tips</h3>
<p className="font-bold">Authentication</p>
<p className="my-3 text-sm text-gray-600">
<p className="my-3 text-sm text-slate-600">
Via the API you can send submissions directly to Formbricks HQ. The API doesn&apos;t need
any authentication and can also be called in the users browser.
</p>
<p className="pt-3 font-bold">CustomerId</p>
<p className="my-3 text-sm text-gray-600">
<p className="my-3 text-sm text-slate-600">
You can pass along a customer ID to identify the respondent. This allows you to attribute
submissions of several surveys to the same respondent.
</p>

4
apps/web/src/components/forms/feedback/FeedbackPage.tsx
View File

@@ -39,8 +39,8 @@ export default function FeedbackPage() {
return (
<div>
<main className="mx-auto px-4 sm:px-6 lg:px-8">
<div className="border-b border-gray-200 pt-8">
<h1 className="pb-6 text-4xl font-bold tracking-tight text-gray-900">{form.label}</h1>
<div className="border-b border-slate-200 pt-8">
<h1 className="pb-6 text-4xl font-bold tracking-tight text-slate-900">{form.label}</h1>
<TabNavigation tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
</div>
{currentTab === "Results" ? (

8
apps/web/src/components/forms/feedback/FeedbackResults.tsx
View File

@@ -71,10 +71,10 @@ export default function FeedbackResults() {
leaveTo="translate-x-full">
<Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
<div className="flex items-center justify-between px-4">
<h2 className="text-lg font-medium text-gray-900">Filters</h2>
<h2 className="text-lg font-medium text-slate-900">Filters</h2>
<button
type="button"
className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400"
className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-slate-400"
onClick={() => setMobileFiltersOpen(false)}>
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
@@ -82,9 +82,9 @@ export default function FeedbackResults() {
</div>
{/* Filters */}
<form className="mt-4 border-t border-gray-200">
<form className="mt-4 border-t border-slate-200">
<h3 className="sr-only">Categories</h3>
<ul role="list" className="px-2 py-3 font-medium text-gray-900">
<ul role="list" className="px-2 py-3 font-medium text-slate-900">
{subCategories.map((category) => (
<li key={category.name}>
<Link href={category.href} className="block px-2 py-3">

28
apps/web/src/components/forms/feedback/FeedbackTimeline.tsx
View File

@@ -51,7 +51,7 @@ export default function FeedbackTimeline({ submissions }) {
<div className="relative pb-8">
{submissionIdx !== submissions.length - 1 ? (
<span
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
aria-hidden="true"
/>
) : null}
@@ -60,7 +60,7 @@ export default function FeedbackTimeline({ submissions }) {
<span
className={clsx(
"bg-white",
"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-gray-50"
"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-slate-50"
)}>
{submission.data.feedbackType === "compliment" ? (
<ComplimentIcon className="h-6 w-6 text-white" aria-hidden="true" />
@@ -88,54 +88,54 @@ export default function FeedbackTimeline({ submissions }) {
</span>
)}
<div className="text-sm text-gray-400">
<div className="text-sm text-slate-400">
<time dateTime={convertDateTimeString(submission.createdAt)}>
{convertDateTimeString(submission.createdAt)}
</time>
</div>
</div>
<div className="mt-3">
<p className="whitespace-pre-wrap text-sm text-gray-500">
<p className="whitespace-pre-wrap text-sm text-slate-500">
{submission.data.message}{" "}
</p>
</div>
</div>
<div className=" bg-gray-50 p-4 sm:p-6">
<div className=" bg-slate-50 p-4 sm:p-6">
<div className="flex w-full justify-between gap-4">
<div>
<p className="text-sm font-thin text-gray-500">User</p>
<p className="text-sm font-thin text-slate-500">User</p>
{submission.customerEmail ? (
<Link
className="text-sm font-medium text-gray-700"
className="text-sm font-medium text-slate-700"
href={`/organisations/${router.query.organisationId}/customers/${submission.customerEmail}`}>
{submission.customerEmail}
</Link>
) : (
<p className="text-sm text-gray-500">Anonymous</p>
<p className="text-sm text-slate-500">Anonymous</p>
)}
</div>
<div>
<p className="text-sm font-thin text-gray-500">Device</p>
<p className="text-sm text-gray-500">
<p className="text-sm font-thin text-slate-500">Device</p>
<p className="text-sm text-slate-500">
{parseUserAgent(submission.meta.userAgent)}
</p>
</div>
<div>
<p className="text-sm font-thin text-gray-500">Page</p>
<p className="text-sm text-gray-500">{submission.data.pageUrl}</p>
<p className="text-sm font-thin text-slate-500">Page</p>
<p className="text-sm text-slate-500">{submission.data.pageUrl}</p>
</div>
</div>
<div className="mt-8 flex w-full justify-end">
{!submission.archived ? (
<button
className="text-base text-gray-500 underline"
className="text-base text-slate-500 underline"
onClick={() => toggleArchiveSubmission(submission)}>
Archive
</button>
) : (
<button
className="text-base text-gray-500 underline"
className="text-base text-slate-500 underline"
onClick={() => toggleArchiveSubmission(submission)}>
Restore
</button>

208
apps/web/src/components/forms/feedback/SetupInstructions.tsx
View File

@@ -14,63 +14,94 @@ export default function SetupInstructions({}) {
return (
<div>
<div className="grid grid-cols-5 gap-8 py-4">
<div className="col-span-3 text-sm text-gray-600">
<h3 className="block text-lg font-semibold text-slate-800">How to get started</h3>
<p>You have to options to embed your Fedback widget: Via JavaScript embed and via NPM.</p>
</div>
<div className="col-span-2">
<div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
<div className="col-span-3">
<div>
<label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
Your form ID
</label>
<div className="mt-3 w-96">
<input
id="formId"
type="text"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
value={formId}
disabled
/>
<Button
variant="secondary"
className="mt-2 w-full justify-center"
onClick={() => {
navigator.clipboard.writeText(formId);
toast("Copied form ID to clipboard");
}}>
copy
</Button>
<div className="mb-6">
<h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
<p>You can install the Feedback Box with NPM and with a JavaScript embed:</p>
</div>
</div>
</div>
</div>
<hr className="my-4 text-gray-800" />
<div className="py-6">
<label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
Javascript Snippet
</label>
<ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
<li>
Copy the Javascript widget below into your application and customize the config according to your
needs.
</li>
<li>
Setup the button that opens the widget with the onClick handler let your users open the widget.
</li>
<li>You are ready to receive your feedback and view it in the Results tab.</li>
<li>Get notified or pipe submission data to to Slack or Email in the Data Pipelines tab.</li>
</ol>
<p>
Place this Javascript script tags into the head of your HTML file and include the button into the
body to start using Formbricks Feedback.
</p>
<div className="mt-3">
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-gray-200">
<pre>
<code className="language-html whitespace-pre-wrap">
{`<!--HTML header script -->
<div>
<h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
<ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Install Feedback Box with NPM</li>
<li>
Set up the config file according to your needs.{" "}
<a
target="_blank"
rel="noreferrer"
className="text-brand-dark font-bold underline"
href="https://formbricks.com/docs/best-practices/feedback-box">
Read the docs
</a>{" "}
for more info.
</li>
<li>You&apos;re done! Your feedback will show up in the Results tab.</li>
</ol>
<h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`npm install @formbricks/feedback`}</code>
</pre>
</div>
<h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`config: {
hqUrl: "${window.location.protocol}//${window.location.host}",
formId: "${formId}",
divId: "test-div",
contact: {
name: "Johannes",
position: "Co-Founder",
imgUrl: "https://avatars.githubusercontent.com/u/72809645?v=4",
},
customer: {
id: "uUid", // fill dynamically
name: "User", // fill dynamically
email: "test@cal.com", // fill dynamically
},
style: {
brandColor: "#0E1420",
headerBGColor: "#E5E7EB",
headerTitleColor: "#4B5563",
boxBGColor: "#F9FAFB",
textColor: "#374151",
buttonHoverColor: "#F3F4F6",
},
}`}</code>
</pre>
</div>
</div>
<hr className="my-10 text-slate-800" />
<div>
<h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
<ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Copy the Javascript snippet below into the HEAD of your HTML file.</li>
<li>Set up a button with the onClick handler below to let your users open the widget.</li>
<li>
Set up the config file according to your needs.{" "}
<a
target="_blank"
rel="noreferrer"
className="text-brand-dark font-bold underline"
href="https://formbricks.com/docs/best-practices/feedback-box">
Read the docs
</a>{" "}
for more info.
</li>
<li>You&apos;re done! Your feedback will show up in the Results tab.</li>
</ol>
<div className="mt-6">
<h4 className="mb-2 block text-lg font-semibold text-slate-800">
Add to HTML &#60;head&#62;{" "}
</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">
{`<!--HTML header script -->
<script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.1.5/dist/index.umd.js" defer></script>
<script>
@@ -82,11 +113,72 @@ window.formbricks = {
...window.formbricks,
};
</script>
`}
</code>
</pre>
</div>
</div>
<!--Button element -->
<div className="mt-3">
<h4 className="my-2 block text-lg font-semibold text-slate-800">Setup Button onClick</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">
{`<!--Button element -->
<button onclick={(e) => window.formbricks.open(e)}>Feedback</button>`}
</code>
</pre>
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
<div className="col-span-2">
<div className="rounded-lg bg-slate-100 p-8">
<label htmlFor="formId" className="block text-xl font-bold text-slate-800">
Your Feedback Box ID
</label>
<div className="mt-3">
<input
id="formId"
type="text"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
value={formId}
disabled
/>
<Button
variant="primary"
className="mt-2 w-full justify-center"
onClick={() => {
navigator.clipboard.writeText(formId);
toast("Copied form ID to clipboard");
}}>
Copy to clipboard
</Button>
</div>
<div className="mt-10">
<h4 className="my-2 block text-xl font-semibold text-slate-800">Feedback Box Docs</h4>
<p>Get detailed instructions in our Docs:</p>
<Button
variant="secondary"
target="_blank"
className="mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/docs")}>
Docs
</Button>
</div>
<div className="mt-10">
<h4 className="my-2 block text-xl font-semibold text-slate-800">Need help? Join Discord!</h4>
<p>Got a question? We&apos;re happy to help:</p>
<Button
variant="secondary"
target="_blank"
className="bg-purple mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/discord")}>
Join Discord
</Button>
</div>
</div>
</div>
</div>

10
apps/web/src/components/forms/pipelines/AddPipelineModal.tsx
View File

@@ -57,17 +57,17 @@ export default function AddPipelineModal({ open, setOpen }) {
<>
{typeId === null ? (
<>
<h2 className="text-ui-gray-dark mb-6 text-xl font-bold">
<h2 className="text-ui-slate-dark mb-6 text-xl font-bold">
Please choose a pipeline you want to add
</h2>
{availablePipelines.map((pipeline) => (
<div
className="border-ui-gray-light mb-5 w-full border bg-white shadow sm:rounded"
className="border-ui-slate-light mb-5 w-full border bg-white shadow sm:rounded"
key={pipeline.title}>
<div className="px-4 py-5 sm:p-6">
<h3 className="text-lg font-medium leading-6 text-gray-900">{pipeline.title}</h3>
<h3 className="text-lg font-medium leading-6 text-slate-900">{pipeline.title}</h3>
<div className="mt-2 sm:flex sm:items-start sm:justify-between">
<div className="max-w-xl text-sm text-gray-500">
<div className="max-w-xl text-sm text-slate-500">
<p>{pipeline.description}</p>
</div>
<div className="mt-5 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center">
@@ -84,7 +84,7 @@ export default function AddPipelineModal({ open, setOpen }) {
))}
</>
) : (
<form className="w-full space-y-8 divide-y divide-gray-200" onSubmit={handleSubmit}>
<form className="w-full space-y-8 divide-y divide-slate-200" onSubmit={handleSubmit}>
<PipelineSettings typeId={typeId} pipeline={pipeline} setPipeline={setPipeline} />
<div className="pt-5">
<div className="flex justify-end">

20
apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
View File

@@ -152,7 +152,7 @@ export default function PipelinesOverview({}) {
{pipelines.length > 0 ? (
<>
<div className="overflow-hidden bg-white shadow sm:rounded-md">
<ul role="list" className="divide-y divide-gray-200">
<ul role="list" className="divide-y divide-slate-200">
{pipelines.map((pipeline) => (
<li key={pipeline.id}>
<div className="block">
@@ -161,9 +161,9 @@ export default function PipelinesOverview({}) {
<div className="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
<div>
<p className="truncate text-sm font-medium text-slate-800">{pipeline.label}</p>
<p className="mt-2 flex items-center text-sm text-gray-500">
<p className="mt-2 flex items-center text-sm text-slate-500">
<BoltIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
aria-hidden="true"
/>
<span className="truncate">{pipeline.type}</span>
@@ -176,8 +176,8 @@ export default function PipelinesOverview({}) {
checked={pipeline.enabled}
onChange={() => toggleEnabled(pipeline)}
className={clsx(
pipeline.enabled ? "bg-brand-dark" : "bg-gray-200",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
pipeline.enabled ? "bg-brand-dark" : "bg-slate-200",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
)}>
<span className="sr-only">Use setting</span>
<span
@@ -193,7 +193,7 @@ export default function PipelinesOverview({}) {
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
)}
aria-hidden="true">
<svg className="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<svg className="h-3 w-3 text-slate-400" fill="none" viewBox="0 0 12 12">
<path
d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
stroke="currentColor"
@@ -226,7 +226,7 @@ export default function PipelinesOverview({}) {
</div>
<div className="inline-flex">
<button onClick={() => openSettings(pipeline)}>
<Cog6ToothIcon className="mx-2 h-4 w-4 text-gray-400" aria-hidden="true" />
<Cog6ToothIcon className="mx-2 h-4 w-4 text-slate-400" aria-hidden="true" />
</button>
<button
onClick={() => {
@@ -234,7 +234,7 @@ export default function PipelinesOverview({}) {
deletePipelineAction(pipeline.id);
}
}}>
<TrashIcon className="mx-2 h-4 w-4 text-gray-400" aria-hidden="true" />
<TrashIcon className="mx-2 h-4 w-4 text-slate-400" aria-hidden="true" />
</button>
</div>
</div>
@@ -251,8 +251,8 @@ export default function PipelinesOverview({}) {
<div className="mx-10 mb-5 grid grid-cols-3 gap-3">
{integrations.map((integration) => (
<div className="col-span-1 my-1 flex" key={integration.id}>
<div className="text-ui-gray-medium relative col-span-1 flex w-full">
<integration.icon className="text-ui-gray-medium h-6 w-6" />
<div className="text-ui-slate-medium relative col-span-1 flex w-full">
<integration.icon className="text-ui-slate-medium h-6 w-6" />
<div className="inline-flex items-center truncate px-4 text-sm">
<p className="">{integration.name}</p>
{integration.comingSoon && (

4
apps/web/src/components/forms/pipelines/UpdatePipelineModal.tsx
View File

@@ -33,7 +33,7 @@ export default function UpdatePipelineModal({ open, setOpen, pipelineId }) {
{isLoadingPipeline ? (
<LoadingSpinner />
) : (
<form className="w-full space-y-8 divide-y divide-gray-200" onSubmit={handleSubmit}>
<form className="w-full space-y-8 divide-y divide-slate-200" onSubmit={handleSubmit}>
<PipelineSettings
typeId={pipeline.type}
pipeline={pipeline}
@@ -44,7 +44,7 @@ export default function UpdatePipelineModal({ open, setOpen, pipelineId }) {
<button
type="button"
onClick={() => setOpen(false)}
className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
className="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
Cancel
</button>
<button

34
apps/web/src/components/forms/pipelines/emailNotification.tsx
View File

@@ -46,17 +46,17 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
};
return (
<div className="space-y-8 divide-y divide-gray-200">
<div className="space-y-8 divide-y divide-slate-200">
<div>
<h2 className="text-ui-gray-dark mb-3 text-xl font-bold">Configure Email notifications</h2>
<p className="mt-1 text-sm text-gray-500">
<h2 className="text-ui-slate-dark mb-3 text-xl font-bold">Configure Email notifications</h2>
<p className="mt-1 text-sm text-slate-500">
Configure Email notifications. To learn more about how email notifications work, please check out
our docs.
</p>
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-4">
<label htmlFor="label" className="block text-sm font-medium text-gray-700">
<label htmlFor="label" className="block text-sm font-medium text-slate-700">
Pipeline Label
</label>
<div className="mt-1">
@@ -67,14 +67,14 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
placeholder="My Email Notification Pipeline"
value={pipeline.label || ""}
onChange={(e) => updateField("label", e.target.value)}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
required
/>
</div>
</div>
<div className="sm:col-span-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
<label htmlFor="email" className="block text-sm font-medium text-slate-700">
Email address
</label>
<div className="mt-1">
@@ -85,11 +85,11 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
placeholder="mail@example.com"
value={pipeline.config.email || ""}
onChange={(e) => updateField("email", e.target.value, "config")}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
required
/>
</div>
<p className="mt-2 text-xs text-gray-500" id="email-description">
<p className="mt-2 text-xs text-slate-500" id="email-description">
The email address that will receive notifications when the form/page is completed
</p>
</div>
@@ -98,13 +98,13 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
<div className="pt-8">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">Advanced Settings</h3>
<p className="mt-1 text-sm text-gray-500">Set up this webhook to fit your needs.</p>
<h3 className="text-lg font-medium leading-6 text-slate-900">Advanced Settings</h3>
<p className="mt-1 text-sm text-slate-500">Set up this webhook to fit your needs.</p>
</div>
<div className="mt-6">
<fieldset>
<legend className="sr-only">Events</legend>
<div className="text-base font-medium text-gray-900" aria-hidden="true">
<div className="text-base font-medium text-slate-900" aria-hidden="true">
Events
</div>
<div className="mt-4 space-y-4">
@@ -118,14 +118,14 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
type="checkbox"
checked={pipeline.events.includes(eventType.id)}
onChange={() => toggleEvent(eventType.id)}
className="h-4 w-4 rounded-sm border-gray-300 text-teal-600 focus:ring-teal-500"
className="h-4 w-4 rounded-sm border-slate-300 text-teal-600 focus:ring-teal-500"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor={eventType.id} className="font-medium text-gray-700">
<label htmlFor={eventType.id} className="font-medium text-slate-700">
{eventType.name}
</label>
<p className="text-gray-500">{eventType.description}</p>
<p className="text-slate-500">{eventType.description}</p>
</div>
</div>
</div>
@@ -136,12 +136,12 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
{/* <div className="mt-6">
<fieldset>
<legend className="sr-only">Conditions</legend>
<div className="text-base font-medium text-gray-900" aria-hidden="true">
<div className="text-base font-medium text-slate-900" aria-hidden="true">
Conditions
</div>
<div className="mt-4 space-y-4">
<div className="rounded-sm border border-gray-100 bg-gray-50 px-2 py-5">
<p className="flex justify-center text-xs text-gray-600">
<div className="rounded-sm border border-slate-100 bg-slate-50 px-2 py-5">
<p className="flex justify-center text-xs text-slate-600">
conditional data piping coming soon
</p>
</div>

28
apps/web/src/components/forms/pipelines/slackNotification.tsx
View File

@@ -48,10 +48,10 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
};
return (
<div className="space-y-8 divide-y divide-gray-200">
<div className="space-y-8 divide-y divide-slate-200">
<div>
<h2 className="text-ui-gray-dark mb-3 text-xl font-bold">Configure Slack Notification</h2>
<p className="mt-1 text-sm text-gray-500">
<h2 className="text-ui-slate-dark mb-3 text-xl font-bold">Configure Slack Notification</h2>
<p className="mt-1 text-sm text-slate-500">
This pipeline uses Slack webhooks. To learn more how to setup these please checkout the{" "}
<Link href="https://api.slack.com/messaging/webhooks" target="_blank" className="underline">
Slack Documentation
@@ -60,7 +60,7 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-4">
<label htmlFor="label" className="block text-sm font-medium text-gray-700">
<label htmlFor="label" className="block text-sm font-medium text-slate-700">
Pipeline Label
</label>
<div className="mt-1">
@@ -71,14 +71,14 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
placeholder="My Slack Notification Pipeline"
value={pipeline.label || ""}
onChange={(e) => updateField("label", e.target.value)}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
required
/>
</div>
</div>
<div className="sm:col-span-4">
<label htmlFor="endpointUrl" className="block text-sm font-medium text-gray-700">
<label htmlFor="endpointUrl" className="block text-sm font-medium text-slate-700">
Endpoint URL
</label>
<div className="mt-1">
@@ -94,11 +94,11 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
placeholder="https://hooks.slack.com/services/ABC123/DEFGH456/IJKLM7890"
value={pipeline.config.endpointUrl || ""}
onChange={(e) => updateField("endpointUrl", e.target.value, "config")}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
required
/>
</div>
<p className="mt-2 text-xs text-gray-500" id="url-description">
<p className="mt-2 text-xs text-slate-500" id="url-description">
The Webhook URL provided by Slack
</p>
</div>
@@ -107,13 +107,13 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
<div className="pt-8">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">Advanced Settings</h3>
<p className="mt-1 text-sm text-gray-500">Set up this pipeline to fit your needs.</p>
<h3 className="text-lg font-medium leading-6 text-slate-900">Advanced Settings</h3>
<p className="mt-1 text-sm text-slate-500">Set up this pipeline to fit your needs.</p>
</div>
<div className="mt-6">
<fieldset>
<legend className="sr-only">Events</legend>
<div className="text-base font-medium text-gray-900" aria-hidden="true">
<div className="text-base font-medium text-slate-900" aria-hidden="true">
Events
</div>
<div className="mt-4 space-y-4">
@@ -127,14 +127,14 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
type="checkbox"
checked={pipeline.events.includes(eventType.id)}
onChange={() => toggleEvent(eventType.id)}
className="h-4 w-4 rounded-sm border-gray-300 text-teal-600 focus:ring-teal-500"
className="h-4 w-4 rounded-sm border-slate-300 text-teal-600 focus:ring-teal-500"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor={eventType.id} className="font-medium text-gray-700">
<label htmlFor={eventType.id} className="font-medium text-slate-700">
{eventType.name}
</label>
<p className="text-gray-500">{eventType.description}</p>
<p className="text-slate-500">{eventType.description}</p>
</div>
</div>
</div>

40
apps/web/src/components/forms/pipelines/webhook.tsx
View File

@@ -46,16 +46,16 @@ export function WebhookSettings({ pipeline, setPipeline }) {
};
return (
<div className="space-y-8 divide-y divide-gray-200">
<div className="space-y-8 divide-y divide-slate-200">
<div>
<h2 className="text-ui-gray-dark mb-3 text-xl font-bold">Configure Webhook</h2>
<p className="mt-1 text-sm text-gray-500">
<h2 className="text-ui-slate-dark mb-3 text-xl font-bold">Configure Webhook</h2>
<p className="mt-1 text-sm text-slate-500">
Configure your webhook. To learn more about how webhooks work, please check out our docs.
</p>
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-4">
<label htmlFor="label" className="block text-sm font-medium text-gray-700">
<label htmlFor="label" className="block text-sm font-medium text-slate-700">
Webhook Label
</label>
<div className="mt-1">
@@ -66,14 +66,14 @@ export function WebhookSettings({ pipeline, setPipeline }) {
placeholder="My Webhook Pipeline"
value={pipeline.label || ""}
onChange={(e) => updateField("label", e.target.value)}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
required
/>
</div>
</div>
<div className="sm:col-span-4">
<label htmlFor="endpointUrl" className="block text-sm font-medium text-gray-700">
<label htmlFor="endpointUrl" className="block text-sm font-medium text-slate-700">
Endpoint URL
</label>
<div className="mt-1">
@@ -89,16 +89,16 @@ export function WebhookSettings({ pipeline, setPipeline }) {
value={pipeline.config.endpointUrl || ""}
placeholder="https://api.example.com"
onChange={(e) => updateField("endpointUrl", e.target.value, "config")}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
required
/>
</div>
<p className="mt-2 text-xs text-gray-500" id="email-description">
<p className="mt-2 text-xs text-slate-500" id="email-description">
Your server URL to which the data should be sent (https requiteal)
</p>
</div>
<div className="sm:col-span-4">
<label htmlFor="secret" className="block text-sm font-medium text-gray-700">
<label htmlFor="secret" className="block text-sm font-medium text-slate-700">
Secret
</label>
<div className="mt-1">
@@ -108,10 +108,10 @@ export function WebhookSettings({ pipeline, setPipeline }) {
id="secret"
value={pipeline.config.secret || ""}
onChange={(e) => updateField("secret", e.target.value, "config")}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
/>
</div>
<p className="mt-2 text-xs text-gray-500" id="email-description">
<p className="mt-2 text-xs text-slate-500" id="email-description">
We sign all event notification payloads with a SHA256 signature using this secret
</p>
</div>
@@ -120,13 +120,13 @@ export function WebhookSettings({ pipeline, setPipeline }) {
<div className="pt-8">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">Advanced Settings</h3>
<p className="mt-1 text-sm text-gray-500">Set up this webhook to fit your needs.</p>
<h3 className="text-lg font-medium leading-6 text-slate-900">Advanced Settings</h3>
<p className="mt-1 text-sm text-slate-500">Set up this webhook to fit your needs.</p>
</div>
<div className="mt-6">
<fieldset>
<legend className="sr-only">Events</legend>
<div className="text-base font-medium text-gray-900" aria-hidden="true">
<div className="text-base font-medium text-slate-900" aria-hidden="true">
Events
</div>
<div className="mt-4 space-y-4">
@@ -140,14 +140,14 @@ export function WebhookSettings({ pipeline, setPipeline }) {
type="checkbox"
checked={pipeline.events.includes(eventType.id)}
onChange={() => toggleEvent(eventType.id)}
className="h-4 w-4 rounded-sm border-gray-300 text-teal-600 focus:ring-teal-500"
className="h-4 w-4 rounded-sm border-slate-300 text-teal-600 focus:ring-teal-500"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor={eventType.id} className="font-medium text-gray-700">
<label htmlFor={eventType.id} className="font-medium text-slate-700">
{eventType.name}
</label>
<p className="text-gray-500">{eventType.description}</p>
<p className="text-slate-500">{eventType.description}</p>
</div>
</div>
</div>
@@ -158,12 +158,12 @@ export function WebhookSettings({ pipeline, setPipeline }) {
<div className="mt-6">
<fieldset>
<legend className="sr-only">Conditions</legend>
<div className="text-base font-medium text-gray-900" aria-hidden="true">
<div className="text-base font-medium text-slate-900" aria-hidden="true">
Conditions
</div>
<div className="mt-4 space-y-4">
<div className="rounded-sm border border-gray-100 bg-gray-50 px-2 py-5">
<p className="flex justify-center text-xs text-gray-600">
<div className="rounded-sm border border-slate-100 bg-slate-50 px-2 py-5">
<p className="flex justify-center text-xs text-slate-600">
conditional data piping coming soon
</p>
</div>

4
apps/web/src/components/forms/pmf/PMFPage.tsx
View File

@@ -49,8 +49,8 @@ export default function PMFPage() {
return (
<div>
<main className="mx-auto px-4 sm:px-6 lg:px-8">
<div className="border-b border-gray-200 pt-8">
<h1 className="pb-6 text-4xl font-bold tracking-tight text-gray-900">{form.label}</h1>
<div className="border-b border-slate-200 pt-8">
<h1 className="pb-6 text-4xl font-bold tracking-tight text-slate-900">{form.label}</h1>
<TabNavigation tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
</div>
{currentTab === "Results" ? (

34
apps/web/src/components/forms/pmf/PMFTimeline.tsx
View File

@@ -67,7 +67,7 @@ export default function PMFTimeline({ submissions }) {
<div className="relative pb-8">
{submissionIdx !== submissions.length - 1 ? (
<span
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
aria-hidden="true"
/>
) : null}
@@ -76,7 +76,7 @@ export default function PMFTimeline({ submissions }) {
<span
className={clsx(
"bg-white",
"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-gray-50"
"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-slate-50"
)}>
{submission.data.disappointment === "veryDisappointed" ? (
<VeryDisappointedIcon className="h-6 w-6 text-white" aria-hidden="true" />
@@ -104,22 +104,22 @@ export default function PMFTimeline({ submissions }) {
</span>
) : null}
<div className="text-sm text-gray-400">
<div className="text-sm text-slate-400">
<time dateTime={convertDateTimeString(submission.createdAt)}>
{convertDateTimeString(submission.createdAt)}
</time>
</div>
</div>
<div className="mt-3">
<ul className="whitespace-pre-wrap text-sm text-gray-500">
<ul className="whitespace-pre-wrap text-sm text-slate-500">
{Object.entries(MergeWithSchema(submission.data, form.schema)).map(
([key, value]) => (
<li key={key} className="py-5">
<p className="text-sm font-semibold text-gray-800">{key}</p>
<p className="text-sm font-semibold text-slate-800">{key}</p>
<p
className={clsx(
value ? "text-gray-600" : "text-gray-400",
"whitespace-pre-line pt-1 text-sm text-gray-600"
value ? "text-slate-600" : "text-slate-400",
"whitespace-pre-line pt-1 text-sm text-slate-600"
)}>
{value.toString()}
</p>
@@ -129,44 +129,44 @@ export default function PMFTimeline({ submissions }) {
</ul>
</div>
</div>
<div className=" bg-gray-50 p-4 sm:p-6">
<div className=" bg-slate-50 p-4 sm:p-6">
<div className="flex w-full justify-between gap-4">
<div>
<p className="text-sm font-thin text-gray-500">User</p>
<p className="text-sm font-thin text-slate-500">User</p>
{submission.customerEmail ? (
<Link
className="text-sm font-medium text-gray-700"
className="text-sm font-medium text-slate-700"
href={`${form.id.startsWith("demo") ? "/demo" : ""}/organisations/${
router.query.organisationId
}/customers/${submission.customerEmail}`}>
{submission.customerEmail}
</Link>
) : (
<p className="text-sm text-gray-500">Anonymous</p>
<p className="text-sm text-slate-500">Anonymous</p>
)}
</div>
<div>
<p className="text-sm font-thin text-gray-500">Device</p>
<p className="text-sm text-gray-500">
<p className="text-sm font-thin text-slate-500">Device</p>
<p className="text-sm text-slate-500">
{parseUserAgent(submission.meta.userAgent)}
</p>
</div>
<div>
<p className="text-sm font-thin text-gray-500">Page</p>
<p className="text-sm text-gray-500">{submission.data.pageUrl}</p>
<p className="text-sm font-thin text-slate-500">Page</p>
<p className="text-sm text-slate-500">{submission.data.pageUrl}</p>
</div>
</div>
<div className="mt-8 flex w-full justify-end">
{!submission.archived ? (
<button
className="text-base text-gray-500 underline"
className="text-base text-slate-500 underline"
onClick={() => toggleArchiveSubmission(submission)}>
Archive
</button>
) : (
<button
className="text-base text-gray-500 underline"
className="text-base text-slate-500 underline"
onClick={() => toggleArchiveSubmission(submission)}>
Restore
</button>

176
apps/web/src/components/forms/pmf/SetupInstructions.tsx
View File

@@ -13,9 +13,171 @@ export default function SetupInstructions({}) {
}, []);
return (
<div>
<div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
<div className="col-span-3">
<div>
<div className="mb-6">
<h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
<p>You can install the PMF Survey with NPM and with a JavaScript embed:</p>
</div>
<div>
<h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
<ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Install PMF Survey Box with NPM</li>
<li>
Set up the config file according to your needs.{" "}
<a
target="_blank"
rel="noreferrer"
className="text-brand-dark font-bold underline"
href="https://formbricks.com/docs/best-practices/pmf-survey">
Read the docs
</a>{" "}
for more info.
</li>
<li>You&apos;re done! Your submissions will show up in the Results tab.</li>
</ol>
<h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`npm install @formbricks/pmf`}</code>
</pre>
</div>
<h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`config: {
formbricksUrl: "${window.location.protocol}//${window.location.host}",
formId: "${formId}",
containerId: "formbricks",
customer: {
id: "uUid", // fill dynamically e.g. from session object
name: "User name", // fill dynamically
email: "example@fmail.com", // fill dynamically
},
}`}</code>
</pre>
</div>
</div>
<hr className="my-10 text-slate-800" />
<div>
<h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
<ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Copy the Javascript snippet below into the HEAD of your HTML file.</li>
<li>Set up a button with the onClick handler below to let your users open the widget.</li>
<li>
Set up the config file according to your needs.{" "}
<a
target="_blank"
rel="noreferrer"
className="text-brand-dark font-bold underline"
href="https://formbricks.com/docs/best-practices/pmf-survey">
Read the docs
</a>{" "}
for more info.
</li>
<li>You&apos;re done! Your submissions will show up in the Results tab.</li>
</ol>
<div className="mt-6">
<h4 className="mb-2 block text-lg font-semibold text-slate-800">
Add to HTML &#60;head&#62;{" "}
</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">
{`<!-- HTML header script -->
<script src="https://cdn.jsdelivr.net/npm/@formbricks/pmf@0.1.0/dist/index.umd.js" defer></script>
<script>
window.formbricks = {
...window.formbricks,
config: {
formbricksUrl: "${window.location.protocol}//${window.location.host}",
formId: "${formId}",
containerId: "formbricks-container",
},
};
</script>`}
</code>
</pre>
</div>
</div>
<div className="mt-3">
<h4 className="my-2 block text-lg font-semibold text-slate-800">Setup Button onClick</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">
{`
<!-- Element to hold the survey -->
<div id="formbricks-container"></div>`}
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
<div className="col-span-2">
<div className="rounded-lg bg-slate-100 p-8">
<label htmlFor="formId" className="block text-xl font-bold text-slate-800">
Your PMF Survey ID
</label>
<div className="mt-3">
<input
id="formId"
type="text"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
value={formId}
disabled
/>
<Button
variant="primary"
className="mt-2 w-full justify-center"
onClick={() => {
navigator.clipboard.writeText(formId);
toast("Copied form ID to clipboard");
}}>
Copy to clipboard
</Button>
</div>
<div className="mt-10">
<h4 className="my-2 block text-xl font-semibold text-slate-800">PMF Survey Docs</h4>
<p>Get detailed instructions in our Docs:</p>
<Button
variant="secondary"
target="_blank"
className="mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/docs")}>
Docs
</Button>
</div>
<div className="mt-10">
<h4 className="my-2 block text-xl font-semibold text-slate-800">Need help? Join Discord!</h4>
<p>Got a question? We&apos;re happy to help:</p>
<Button
variant="secondary"
target="_blank"
className="bg-purple mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/discord")}>
Join Discord
</Button>
</div>
</div>
</div>
</div>
</div>
/*
<div>
<div className="grid grid-cols-5 gap-8 py-4">
<div className="col-span-3 text-sm text-gray-600">
<div className="col-span-3 text-sm text-slate-600">
<h3 className="block text-lg font-semibold text-slate-800">How to get started</h3>
<ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Copy the Javascript widget below into your application</li>
@@ -39,19 +201,19 @@ export default function SetupInstructions({}) {
<div className="col-span-2">
<div>
<label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
Your form ID
Your PMF Survey ID
</label>
<div className="mt-3 w-96">
<input
id="formId"
type="text"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
value={formId}
disabled
/>
<Button
variant="secondary"
variant="primary"
className="mt-2 w-full justify-center"
onClick={() => {
navigator.clipboard.writeText(formId);
@@ -63,7 +225,7 @@ export default function SetupInstructions({}) {
</div>
</div>
</div>
<hr className="my-4 text-gray-800" />
<hr className="my-4 text-slate-800" />
<div className="py-6">
<label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
Javascript Snippet
@@ -73,7 +235,7 @@ export default function SetupInstructions({}) {
hold the survey into the body to start using the Formbricks PMF survey.
</p>
<div className="mt-3">
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-gray-200">
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">
{`<!-- HTML header script -->
@@ -97,6 +259,6 @@ window.formbricks = {
</div>
</div>
</div>
</div>
</div> */
);
}

6
apps/web/src/components/forms/shared/FilterNavigation.tsx
View File

@@ -154,8 +154,8 @@ export default function FilterNavigation({
}}
className={clsx(
option.active
? "bg-gray-200 text-gray-900"
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
? "bg-slate-200 text-slate-900"
: "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
"group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium"
)}
aria-current={option.active ? "page" : undefined}>
@@ -164,7 +164,7 @@ export default function FilterNavigation({
{/* {item.count ? (
<span
className={clsx(
item.id === currentFilter ? "bg-white" : "bg-gray-100 group-hover:bg-white",
item.id === currentFilter ? "bg-white" : "bg-slate-100 group-hover:bg-white",
"ml-auto inline-block rounded-full py-0.5 px-3 text-xs"
)}>
{item.count}

8
apps/web/src/components/forms/submissions/SubmissionDisplay.tsx
View File

@@ -6,14 +6,14 @@ import clsx from "clsx";
export default function SubmissionDisplay({ schema, submission }) {
return (
<div className="flow-root">
<ul role="list" className="divide-ui-gray-light divide-y">
<ul role="list" className="divide-ui-slate-light divide-y">
{Object.entries(MergeWithSchema(submission.data, schema)).map(([key, value]) => (
<li key={key} className="py-5">
<p className="text-sm font-semibold text-gray-800">{key}</p>
<p className="text-sm font-semibold text-slate-800">{key}</p>
<p
className={clsx(
value ? "text-gray-600" : "text-gray-400",
"whitespace-pre-line pt-1 text-sm text-gray-600"
value ? "text-slate-600" : "text-slate-400",
"whitespace-pre-line pt-1 text-sm text-slate-600"
)}>
{value.toString()}
</p>

22
apps/web/src/components/forms/submissions/SubmissionsPage.tsx
View File

@@ -75,8 +75,8 @@ export default function SubmissionsPage() {
{!activeSubmission ? (
<button
type="button"
className="relative mx-auto mt-8 block w-96 rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2">
<span className="mt-2 block text-sm font-medium text-gray-500">
className="relative mx-auto mt-8 block w-96 rounded-lg border-2 border-dashed border-slate-300 p-12 text-center hover:border-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2">
<span className="mt-2 block text-sm font-medium text-slate-500">
Select a response on the left to see the details here
</span>
</button>
@@ -85,7 +85,7 @@ export default function SubmissionsPage() {
<div className="bg-white px-4 py-5 shadow sm:px-12 sm:pb-4 sm:pt-12">
<div className="grid grid-cols-2 gap-8 divide-x">
<div className="flow-root">
<h1 className="mb-8 text-gray-700">
<h1 className="mb-8 text-slate-700">
{convertDateTimeString(activeSubmission.createdAt.toString())}
</h1>
<SubmissionDisplay submission={activeSubmission} schema={form.schema} />
@@ -94,7 +94,7 @@ export default function SubmissionsPage() {
</div>
<div className="w-full">
<button
className="flex w-full items-center justify-center gap-2 border border-transparent bg-gray-300 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none"
className="flex w-full items-center justify-center gap-2 border border-transparent bg-slate-300 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none"
onClick={() => {
if (
confirm("Are you sure you want to delete this submission? It will be gone forever!")
@@ -110,16 +110,16 @@ export default function SubmissionsPage() {
)}
</div>
</main>
<aside className="border-ui-gray-light order-first flex h-full flex-1 flex-shrink-0 flex-col border-r md:w-96 md:flex-none">
<aside className="border-ui-slate-light order-first flex h-full flex-1 flex-shrink-0 flex-col border-r md:w-96 md:flex-none">
{/* <DownloadResponses formId={params.formId} /> */}
<div className="flex justify-between pt-4 pb-2">
<h2 className="px-5 text-lg font-medium text-gray-900">Responses</h2>
<h2 className="px-5 text-lg font-medium text-slate-900">Responses</h2>
<Switch.Group as="div" className="mr-3 flex items-center">
<Switch
checked={finishedOnly}
onChange={setFinishedOnly}
className={clsx(
finishedOnly ? "bg-teal-600" : "bg-gray-200",
finishedOnly ? "bg-teal-600" : "bg-slate-200",
"relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
)}>
<span
@@ -136,7 +136,7 @@ export default function SubmissionsPage() {
</Switch.Group>
</div>
{filteredSubmissions.length === 0 ? (
<p className="mt-3 px-5 text-sm text-gray-500">No responses yet</p>
<p className="mt-3 px-5 text-sm text-slate-500">No responses yet</p>
) : (
<RadioGroup
value={activeSubmission}
@@ -144,13 +144,13 @@ export default function SubmissionsPage() {
className="mb-32 min-h-0 flex-1 overflow-y-auto shadow-inner"
as="div">
<div className="relative">
<ul className="divide-ui-gray-light relative z-0 divide-y">
<ul className="divide-ui-slate-light relative z-0 divide-y">
{filteredSubmissions.map((submission) => (
<RadioGroup.Option
key={submission.id}
value={submission}
className={({ checked }) =>
clsx(checked ? "bg-gray-100" : "", "relative flex items-center space-x-3 px-6 py-5 ")
clsx(checked ? "bg-slate-100" : "", "relative flex items-center space-x-3 px-6 py-5 ")
}>
<div className="min-w-0 flex-1">
<button
@@ -158,7 +158,7 @@ export default function SubmissionsPage() {
className="w-full text-left focus:outline-none">
{/* Extend touch target to entire panel */}
<span className="absolute inset-0" aria-hidden="true" />
<p className="text-sm font-medium text-gray-900">
<p className="text-sm font-medium text-slate-900">
{submission.finished ? "✅" : "💬"} {convertDateTimeString(submission.createdAt)}
</p>
</button>

12
apps/web/src/components/forms/summary/SummaryPage.tsx
View File

@@ -40,7 +40,7 @@ export default function SummaryPage() {
return (
<div className="mx-auto py-8 sm:px-6 lg:px-8">
<header className="mb-8">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
Summary - {form.label}
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{organisation.name}
@@ -52,10 +52,10 @@ export default function SummaryPage() {
</div>
<div className="relative my-10">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-gray-300" />
<div className="w-full border-t border-slate-300" />
</div>
<div className="relative flex justify-center">
<span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">Questions &amp; Answers</span>
<span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">Questions &amp; Answers</span>
</div>
</div>
{Object.keys(form.schema).length === 0 ? (
@@ -104,7 +104,7 @@ export default function SummaryPage() {
<div className="py-12">
{["email", "number", "phone", "search", "text", "textarea", "url"].includes(elem.type) ? (
<div>
<h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
<h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-slate-900">
{elem.label}
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{capitalizeFirstLetter(elem.type)}
@@ -114,7 +114,7 @@ export default function SummaryPage() {
</div>
) : ["checkbox", "radio"].includes(elem.type) ? (
<div>
<h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
<h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-slate-900">
{elem.label}
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{capitalizeFirstLetter(elem.type)}
@@ -124,7 +124,7 @@ export default function SummaryPage() {
</div>
) : ["nps"].includes(elem.type) ? (
<div>
<h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
<h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-slate-900">
{elem.label}
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{capitalizeFirstLetter(elem.type)}

2
apps/web/src/components/integrations/IconCheckbox.tsx
View File

@@ -35,7 +35,7 @@ export default function IconCheckbox({
<label
htmlFor={`${page.id}-${element.id}-${option.value}`}
key={`${page.id}-${element.id}-${option.value}`}>
<div className="drop-shadow-card duration-120 relative w-32 cursor-default rounded-lg border border-gray-200 bg-white p-6 text-center transition-all ease-in-out hover:scale-105">
<div className="drop-shadow-card duration-120 relative w-32 cursor-default rounded-lg border border-slate-200 bg-white p-6 text-center transition-all ease-in-out hover:scale-105">
<div className="absolute right-4 top-3">
<input
id={`${page.id}-${element.id}-${option.value}`}

2
apps/web/src/components/integrations/ThankYouPage.tsx
View File

@@ -1,6 +1,6 @@
export default function ThankYouPage() {
return (
<div className="mt-6 mb-10 max-w-2xl rounded-lg border border-gray-200 bg-white p-6 text-center">
<div className="mt-6 mb-10 max-w-2xl rounded-lg border border-slate-200 bg-white p-6 text-center">
<h3 className="text-brand-dark mt-2 text-lg font-bold">Thank you!</h3>
<p className="py-2 text-sm text-slate-400">
We&apos;ll send you a message once we built these integrations.

38
apps/web/src/components/layout/LayoutApp.tsx
View File

@@ -67,8 +67,8 @@ export default function LayoutApp({ children }) {
<title>Formbricks</title>
<meta name="description" content="Build user research into your product" />
</Head>
<div className="h-screen">
<Disclosure as="nav" className="border-b border-gray-200 bg-white">
<div className="">
<Disclosure as="nav" className="border-b border-slate-200 bg-white">
{({ open }) => (
<>
<div className="mx-auto w-full px-4 sm:px-6 lg:px-8">
@@ -83,7 +83,7 @@ export default function LayoutApp({ children }) {
<div className="hidden sm:ml-6 sm:flex sm:items-center">
{/* <button
type="button"
className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
className="rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button> */}
@@ -110,10 +110,10 @@ export default function LayoutApp({ children }) {
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-slate-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="px-4 py-3">
<p className="text-sm">Signed in as</p>
<p className="truncate text-sm font-medium text-gray-900">{session.user.name}</p>
<p className="truncate text-sm font-medium text-slate-900">{session.user.name}</p>
</div>
<div className="py-1">
{userNavigation.map((item) => (
@@ -122,8 +122,8 @@ export default function LayoutApp({ children }) {
<Link
href={item.href}
className={clsx(
active ? "bg-gray-100" : "",
"flex justify-start px-4 py-2 text-sm text-gray-700"
active ? "bg-slate-100" : "",
"flex justify-start px-4 py-2 text-sm text-slate-700"
)}>
{item.name}
</Link>
@@ -135,7 +135,7 @@ export default function LayoutApp({ children }) {
memberships.map((membership) => (
<>
<div className="px-4 py-3">
<p className="truncate text-sm font-medium text-gray-900">
<p className="truncate text-sm font-medium text-slate-900">
{membership.organisation.name}
</p>
</div>
@@ -145,8 +145,8 @@ export default function LayoutApp({ children }) {
<Link
href={`/organisations/${membership.organisation.id}/settings/billing`}
className={clsx(
active ? "bg-gray-100" : "",
"flex justify-start px-4 py-2 text-sm text-gray-700"
active ? "bg-slate-100" : "",
"flex justify-start px-4 py-2 text-sm text-slate-700"
)}>
Billing
</Link>
@@ -161,8 +161,8 @@ export default function LayoutApp({ children }) {
<button
onClick={() => signOut()}
className={clsx(
active ? "bg-gray-100" : "",
"flex w-full justify-start px-4 py-2 text-sm text-gray-700"
active ? "bg-slate-100" : "",
"flex w-full justify-start px-4 py-2 text-sm text-slate-700"
)}>
Sign out
</button>
@@ -175,7 +175,7 @@ export default function LayoutApp({ children }) {
</div>
<div className="-mr-2 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -188,7 +188,7 @@ export default function LayoutApp({ children }) {
</div>
<Disclosure.Panel className="sm:hidden">
<div className="border-t border-gray-200 pt-4 pb-3">
<div className="border-t border-slate-200 pt-4 pb-3">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<Image
@@ -198,12 +198,12 @@ export default function LayoutApp({ children }) {
/>
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">{session.user.name}</div>
<div className="text-sm font-medium text-gray-500">{session.user.email}</div>
<div className="text-base font-medium text-slate-800">{session.user.name}</div>
<div className="text-sm font-medium text-slate-500">{session.user.email}</div>
</div>
{/* <button
type="button"
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button> */}
@@ -214,7 +214,7 @@ export default function LayoutApp({ children }) {
key={item.name}
as="a"
href={item.href}
className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">
className="block px-4 py-2 text-base font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-800">
{item.name}
</Disclosure.Button>
))}
@@ -225,7 +225,7 @@ export default function LayoutApp({ children }) {
)}
</Disclosure>
<main className="h-full bg-gray-50">{children}</main>
<main className="min-h-screen bg-slate-50">{children}</main>
<ToastContainer />
</div>
</>

4
apps/web/src/components/layout/LayoutAuth.tsx
View File

@@ -20,10 +20,10 @@ export default function LayoutAuth({ title = "Formbricks HQ", children }: Props)
<Head>
<title>{title}</title>
</Head>
<div className="min-h-screen bg-gray-50">
<div className="min-h-screen bg-slate-50">
{" "}
<div className="isolate bg-white">
<div className="bg-gradient-radial flex min-h-screen from-gray-200 to-gray-50">
<div className="bg-gradient-radial flex min-h-screen from-slate-200 to-slate-50">
<div className="mx-auto flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
<div className="mx-auto w-full max-w-sm rounded-xl bg-white p-8 shadow-xl lg:w-96">
<div className="mb-8 text-center">

20
apps/web/src/components/layout/LayoutDemo.tsx
View File

@@ -18,7 +18,7 @@ export default function LayoutDemo({ children }) {
<meta name="description" content="Build user research into your product" />
</Head>
<div className="min-h-screen">
<Disclosure as="nav" className="border-b border-gray-200 bg-white">
<Disclosure as="nav" className="border-b border-slate-200 bg-white">
{({ open }) => (
<>
<div className="mx-auto w-full px-4 sm:px-6 lg:px-8">
@@ -33,7 +33,7 @@ export default function LayoutDemo({ children }) {
<div className="hidden sm:ml-6 sm:flex sm:items-center">
{/* <button
type="button"
className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
className="rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button> */}
@@ -60,10 +60,10 @@ export default function LayoutDemo({ children }) {
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-slate-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="px-4 py-3">
<p className="text-sm">Signed in as</p>
<p className="truncate text-sm font-medium text-gray-900">Demo</p>
<p className="truncate text-sm font-medium text-slate-900">Demo</p>
</div>
</Menu.Items>
</Transition>
@@ -71,7 +71,7 @@ export default function LayoutDemo({ children }) {
</div>
<div className="-mr-2 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -84,7 +84,7 @@ export default function LayoutDemo({ children }) {
</div>
<Disclosure.Panel className="sm:hidden">
<div className="border-t border-gray-200 pt-4 pb-3">
<div className="border-t border-slate-200 pt-4 pb-3">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<Image
@@ -94,12 +94,12 @@ export default function LayoutDemo({ children }) {
/>
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">Demo User</div>
<div className="text-sm font-medium text-gray-500">demo@formbricks.com</div>
<div className="text-base font-medium text-slate-800">Demo User</div>
<div className="text-sm font-medium text-slate-500">demo@formbricks.com</div>
</div>
{/* <button
type="button"
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button> */}
@@ -110,7 +110,7 @@ export default function LayoutDemo({ children }) {
)}
</Disclosure>
<main className="h-full bg-gray-50">{children}</main>
<main className="h-full bg-slate-50">{children}</main>
<ToastContainer />
</div>
</>

10
apps/web/src/components/layout/LayoutWrapperCustomForm.tsx
View File

@@ -40,7 +40,7 @@ export default function LayoutWrapperCustomForm({ children }) {
<Disclosure as="header" className="bg-white shadow">
{({}) => (
<>
<div className="px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
<div className="px-2 sm:px-4 lg:divide-y lg:divide-slate-200 lg:px-8">
<nav className="hidden lg:flex lg:space-x-8 lg:py-2" aria-label="Global">
{navigation.map((item) => (
<Link
@@ -48,8 +48,8 @@ export default function LayoutWrapperCustomForm({ children }) {
href={item.href}
className={clsx(
item.current
? "bg-gray-100 text-gray-900"
: "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
? "bg-slate-100 text-slate-900"
: "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
"inline-flex items-center rounded-md py-2 px-3 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}>
@@ -68,8 +68,8 @@ export default function LayoutWrapperCustomForm({ children }) {
href={item.href}
className={clsx(
item.current
? "bg-gray-100 text-gray-900"
: "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
? "bg-slate-100 text-slate-900"
: "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
"block rounded-md py-2 px-3 text-base font-medium"
)}
aria-current={item.current ? "page" : undefined}>

16
apps/web/src/components/layout/LayoutWrapperOrganisation.tsx
View File

@@ -40,11 +40,11 @@ export default function LayoutWrapperOrganisation({ children }: LayoutWrapperOrg
<Disclosure as="header" className="bg-white shadow">
{({ open }) => (
<>
<div className="mx-auto w-full px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
<div className="mx-auto w-full px-2 sm:px-4 lg:divide-y lg:divide-slate-200 lg:px-8">
<nav className="py-2" aria-label="Global">
<div className="relative z-10 flex items-center lg:hidden">
<div className="relative z-10 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="focus:ring-brand inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset">
<Disclosure.Button className="focus:ring-brand inline-flex items-center justify-center rounded-md p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset">
<span className="sr-only">Open menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -53,15 +53,15 @@ export default function LayoutWrapperOrganisation({ children }: LayoutWrapperOrg
)}
</Disclosure.Button>
</div>
<div className="hidden lg:flex lg:space-x-4">
<div className="hidden sm:flex lg:space-x-4">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={clsx(
item.current
? "bg-gray-100 text-gray-900"
: "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
? "bg-slate-100 text-slate-900"
: "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
"inline-flex items-center rounded-md py-2 px-3 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}>
@@ -81,8 +81,8 @@ export default function LayoutWrapperOrganisation({ children }: LayoutWrapperOrg
onClick={() => router.push(item.href)}
className={clsx(
item.current
? "bg-gray-100 text-gray-900"
: "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
? "bg-slate-100 text-slate-900"
: "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
"block rounded-md py-2 px-3 text-base font-medium"
)}
aria-current={item.current ? "page" : undefined}>

40
apps/web/src/components/me/ProfileSettingsPage.tsx
View File

@@ -14,7 +14,7 @@ export default function ProfileSettingsPage() {
return (
<div className="mx-auto mt-8 max-w-7xl px-4 sm:px-6 lg:px-8">
<header className="mb-8">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">Account Settings</h1>
<h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">Account Settings</h1>
</header>
{/* Payment details */}
<div className="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
@@ -23,8 +23,8 @@ export default function ProfileSettingsPage() {
<div className="px-4 sm:px-6 lg:px-8">
<div className="sm:flex sm:items-center">
<div className="mt-6 sm:flex-auto">
<h1 className="text-xl font-semibold text-gray-900">Personal API Keys</h1>
<p className="mt-2 text-sm text-gray-700">
<h1 className="text-xl font-semibold text-slate-900">Personal API Keys</h1>
<p className="mt-2 text-sm text-slate-700">
These keys allow full access to your personal account through the API, as if you were
logged in. Try not to keep disused keys around. If you have any suspicion that one of
these may be compromised, delete it and use a new one.
@@ -39,27 +39,27 @@ export default function ProfileSettingsPage() {
<div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle">
<div className="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50">
<table className="min-w-full divide-y divide-slate-300">
<thead className="bg-slate-50">
<tr>
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-900 sm:pl-6 lg:pl-8">
Label
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
Value
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
Last Used
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
Created
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
@@ -67,28 +67,28 @@ export default function ProfileSettingsPage() {
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-slate-200 bg-white">
{isLoadingApiKeys ? (
<LoadingSpinner />
) : apiKeys.length === 0 ? (
<tr>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-slate-900 sm:pl-6 lg:pl-8">
You don&apos;t have any API Keys yet
</td>
</tr>
) : (
apiKeys.map((apiKey) => (
<tr key={apiKey.hashedKey}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-slate-900 sm:pl-6 lg:pl-8">
{apiKey.label}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
{apiKey.apiKey || <span className="italic">secret</span>}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
{convertDateTimeString(apiKey.lastUsed)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
{convertDateTimeString(apiKey.createdAt)}
</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
@@ -122,10 +122,10 @@ export default function ProfileSettingsPage() {
</div>
{openNewApiKeyModal && (
<Modal open={openNewApiKeyModal} setOpen={setOpenNewApiKeyModal}>
<h2 className="text-2xl font-bold leading-tight tracking-tight text-gray-900">
<h2 className="text-2xl font-bold leading-tight tracking-tight text-slate-900">
Create a Personal API Key
</h2>
<hr className="my-4 w-full text-gray-400" />
<hr className="my-4 w-full text-slate-400" />
<form
onSubmit={async (e: any) => {
e.preventDefault();
@@ -134,7 +134,7 @@ export default function ProfileSettingsPage() {
setOpenNewApiKeyModal(false);
}}>
<div>
<label htmlFor="label" className="block text-sm font-medium text-gray-700">
<label htmlFor="label" className="block text-sm font-medium text-slate-700">
Email
</label>
<div className="mt-1">
@@ -142,12 +142,12 @@ export default function ProfileSettingsPage() {
type="text"
name="label"
id="label"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="Label, e.g. Github"
/>
</div>
</div>
<p className="mt-3 text-sm text-gray-800">
<p className="mt-3 text-sm text-slate-800">
Key value will only ever be shown once, immediately after creation. Copy it to your destination
right away.
</p>

2
apps/web/src/components/onboarding/OnboardingPage.tsx
View File

@@ -26,7 +26,7 @@ export default function OnboardingPage() {
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-gray-200 bg-opacity-75 backdrop-blur transition-opacity" />
<div className="fixed inset-0 bg-slate-200 bg-opacity-75 backdrop-blur transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">

10
apps/web/src/components/settings/BillingPage.tsx
View File

@@ -48,7 +48,7 @@ export default function SettingsPage() {
return (
<div className="mx-auto py-8 sm:px-6 lg:px-8">
<header className="mb-8">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
Billing
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{organisation.name}
@@ -58,8 +58,8 @@ export default function SettingsPage() {
{organisation.plan === "free" ? (
<>
<div className="my-6 sm:flex-auto">
<h1 className="text-xl font-semibold text-gray-900">Upgrade to benefit from all features</h1>
<p className="mt-2 text-sm text-gray-700">
<h1 className="text-xl font-semibold text-slate-900">Upgrade to benefit from all features</h1>
<p className="mt-2 text-sm text-slate-700">
You do not currently have an active subscription. Upgrade to get access to all features and
improve your user research.
</p>
@@ -71,8 +71,8 @@ export default function SettingsPage() {
) : (
<>
<div className="my-6 sm:flex-auto">
<h1 className="text-xl font-semibold text-gray-900">View and manage your billing details</h1>
<p className="mt-2 text-sm text-gray-700">
<h1 className="text-xl font-semibold text-slate-900">View and manage your billing details</h1>
<p className="mt-2 text-sm text-slate-700">
View and edit your billing details, as well as cancel your subscription.
</p>
</div>

2
apps/web/src/components/settings/SettingsPage.tsx
View File

@@ -25,7 +25,7 @@ export default function SettingsPage() {
return (
<div className="mx-auto py-8 sm:px-6 lg:px-8">
<header className="mb-8">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
Settings
<span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
{organisation.name}

2
apps/web/src/pages/auth/signup/index.tsx
View File

@@ -15,7 +15,7 @@ export default function SignUpPage() {
<hr className="my-4" />
<Link
href="/"
className="mt-5 flex w-full justify-center rounded-md border border-gray-400 bg-white px-4 py-2 text-sm font-medium text-gray-600 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
className="mt-5 flex w-full justify-center rounded-md border border-slate-400 bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
Login
</Link>
</>

4
apps/web/src/pages/billing-confirmation.tsx
View File

@@ -10,8 +10,8 @@ export default function Billing({}) {
<Confetti />
<div className="mx-auto max-w-sm py-8 sm:px-6 lg:px-8">
<div className="my-6 sm:flex-auto">
<h1 className="text-center text-xl font-semibold text-gray-900">Upgrade successful</h1>
<p className="mt-2 text-center text-sm text-gray-700">
<h1 className="text-center text-xl font-semibold text-slate-900">Upgrade successful</h1>
<p className="mt-2 text-center text-sm text-slate-700">
Thanks a lot for upgrading your formbricks subscription. You can now access all features and
improve your user research.
</p>

4
packages/charts/src/charts/Table.tsx
View File

@@ -39,11 +39,11 @@ export function Table({ submissions, schema, fieldName }: Props) {
}, [submissions, schema]);
return (
<div className="my-4 mt-6 flow-root h-44 max-h-64 overflow-y-scroll px-8 text-center">
<ul className="divide-ui-gray-light -my-5 divide-y">
<ul className="divide-ui-slate-light -my-5 divide-y">
{data.map((answer) => (
<li key={answer} className="py-4">
<div className="relative focus-within:ring-2 focus-within:ring-slate-500">
<h3 className="text-sm text-gray-700">
<h3 className="text-sm text-slate-700">
<span className="absolute inset-0" aria-hidden="true" />
{answer}
</h3>

2
packages/react/README.md
View File

@@ -73,7 +73,7 @@ Simply create a style sheet, import it and add your CSS to these classes:
We love Tailwind! This is why Formbricks React natively supports Tailwind. All you have to do is target the classes using props. For example, to extend “formbricks-outer” class:
```jsx
<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
```
## Validation & Error Messages

16
packages/react/src/styles.css
View File

@@ -7,7 +7,7 @@
}
.formbricks-label {
@apply text-base font-medium text-gray-700 font-sans sm:text-sm;
@apply text-base font-medium text-slate-700 font-sans sm:text-sm;
}
button.formbricks-input {
@@ -21,19 +21,19 @@ input[type="password"].formbricks-input,
input[type="search"].formbricks-input,
input[type="tel"].formbricks-input,
input[type="url"].formbricks-input {
@apply form-input text-base block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
@apply form-input text-base block rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
}
input[type="radio"].formbricks-input {
@apply h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-500 mr-2;
@apply h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-500 mr-2;
}
textarea.formbricks-input {
@apply form-textarea text-base font-sans block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
@apply form-textarea text-base font-sans block rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
}
.formbricks-help {
@apply font-sans text-base sm:text-sm text-gray-500;
@apply font-sans text-base sm:text-sm text-slate-500;
}
.formbricks-prefix-icon {
@@ -49,11 +49,11 @@ textarea.formbricks-input {
}
.formbricks-legend {
@apply text-base font-medium text-gray-700 font-sans sm:text-sm;
@apply text-base font-medium text-slate-700 font-sans sm:text-sm;
}
.formbricks-fieldset {
@apply border-gray-50 rounded-lg max-w-md;
@apply border-slate-50 rounded-lg max-w-md;
}
.formbricks-input-nps {
@@ -77,5 +77,5 @@ textarea.formbricks-input {
}
[data-type="nps"] .formbricks-input-addition-item {
@apply text-xs text-gray-500;
@apply text-xs text-slate-500;
}

14
packages/ui/src/Button.tsx
View File

@@ -59,7 +59,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
size === "base" && "px-6 py-2 text-sm font-medium rounded-xl",
size === "lg" && "px-4 py-2 text-base font-medium rounded-lg",
size === "icon" &&
"w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-gray-200 transition",
"w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-slate-200 transition",
// turn button into a floating action button (fab)
size === "fab" ? "fixed" : "relative",
size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
@@ -67,20 +67,20 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
// different styles depending on variant
variant === "highlight" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
? "border border-transparent bg-slate-400 text-white"
: "text-white bg-gradient-to-b from-brand-light to-brand-dark hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900 transition ease-in-out delay-50 hover:scale-105"),
variant === "primary" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
? "border border-transparent bg-slate-400 text-white"
: "text-slate-900 bg-gradient-to-b from-brand-light to-brand-dark hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900"),
variant === "secondary" &&
(disabled
? "border border-gray-200 text-gray-400 bg-white"
? "border border-slate-200 text-slate-400 bg-white"
: "hover:text-slate-600 hover:bg-slate-300 bg-slate-200 text-slate-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:text-slate-400 dark:hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 transition ease-in-out delay-50 hover:scale-105"),
variant === "alert" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
? "border border-transparent bg-slate-400 text-white"
: "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-red-600 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
variant === "minimal" &&
(disabled
@@ -88,8 +88,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
: "text-slate-600 hover:text-slate-500 bg-slate-200 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 dark:hover:text-slate-400 dark:hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-1 dark:focus:bg-slate-900 focus:bg-slate-700 focus:ring-neutral-500 transition ease-in-out delay-50 hover:scale-105"),
variant === "warn" &&
(disabled
? "text-gray-400 bg-transparent"
: "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
? "text-slate-400 bg-transparent"
: "text-slate-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
// set not-allowed cursor if disabled
loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",