mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-27 23:49:51 -05:00
Code Issues Packages Projects Releases 167 Wiki Activity

wip

Browse Source
This commit is contained in:
pandeymangg
2024-02-29 18:37:11 +05:30
parent a9d8239a25
commit d7fc7995bc
3 changed files with 69 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx
+57 -3
View File
@@ -1,15 +1,24 @@
"use client";
import React from "react";
import React, { useState } from "react";
import { TProduct } from "@formbricks/types/product";
import { ColorPicker } from "@formbricks/ui/ColorPicker";
import { Switch } from "@formbricks/ui/Switch";
const UnifiedStyling = () => {
type UnifiedStylingProps = {
product: TProduct;
};
const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
// const [color, setColor] = useState("#333");
const [color, setColor] = useState(product.styling?.brandColor?.light);
return (
<div className="flex">
{/* Styling settings */}
<div className="w-1/2 pr-6">
<div className="flex flex-col">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
<div className="flex items-center gap-6">
<Switch />
@@ -29,6 +38,51 @@ const UnifiedStyling = () => {
</div>
</div>
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<h3 className="text-base font-semibold text-slate-900">Brand color</h3>
<p className="text-sm text-slate-500">Change the text color of the survey questions.</p>
</div>
<ColorPicker color={color} onChange={setColor} containerClass="my-0" />
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<h3 className="text-base font-semibold text-slate-900">Question color</h3>
<p className="text-sm text-slate-500">Change the text color of the survey questions.</p>
</div>
<ColorPicker color={color} onChange={setColor} containerClass="my-0" />
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<h3 className="text-base font-semibold text-slate-900">Input color</h3>
<p className="text-sm text-slate-500">Change the text color of the survey questions.</p>
</div>
<ColorPicker color={color} onChange={setColor} containerClass="my-0" />
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<h3 className="text-base font-semibold text-slate-900">Input border color</h3>
<p className="text-sm text-slate-500">Change the text color of the survey questions.</p>
</div>
<ColorPicker color={color} onChange={setColor} containerClass="my-0" />
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<h3 className="text-base font-semibold text-slate-900">Card background color</h3>
<p className="text-sm text-slate-500">Change the text color of the survey questions.</p>
</div>
<ColorPicker color={color} onChange={setColor} containerClass="my-0" />
</div>
</div>
</div>
apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export default async function ProfileSettingsPage({ params }: { params: { enviro
<SettingsCard
title="Unified Styling"
description="Set styling for ALL surveys in this project. You can still overwrite these styles in the survey editor.">
<UnifiedStyling />
<UnifiedStyling product={product} />
</SettingsCard>
{/* <SettingsCard title="Brand Color" description="Match the surveys with your user interface.">
<EditBrandColor