mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-17 03:21:51 -05:00
Code Issues Packages Projects Releases 162 Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
Johannes
2024-09-24 15:11:01 +02:00
parent fe7ca5a923
commit 7042d73e99
8 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
View File

@@ -8,7 +8,7 @@ import {
ArrowDownIcon,
ArrowUpIcon,
CopyIcon,
MoreVerticalIcon,
EllipsisVerticalIcon,
PlusIcon,
SplitIcon,
TrashIcon,
@@ -137,7 +137,7 @@ export function ConditionalLogic({
<DropdownMenu>
<DropdownMenuTrigger>
<MoreVerticalIcon className="h-4 w-4" />
<EllipsisVerticalIcon className="h-4 w-4 text-slate-700 hover:text-slate-950" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem

4
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorActions.tsx
View File

@@ -6,7 +6,7 @@ import {
getActionVariableOptions,
} from "@/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/lib/utils";
import { createId } from "@paralleldrive/cuid2";
import { CopyIcon, CornerDownRightIcon, MoreVerticalIcon, PlusIcon, TrashIcon } from "lucide-react";
import { CopyIcon, CornerDownRightIcon, EllipsisVerticalIcon, PlusIcon, TrashIcon } from "lucide-react";
import { getUpdatedActionBody } from "@formbricks/lib/surveyLogic/utils";
import {
TActionNumberVariableCalculateOperator,
@@ -195,7 +195,7 @@ export function LogicEditorActions({
</div>
<DropdownMenu>
<DropdownMenuTrigger id={`actions-${idx}-dropdown`}>
<MoreVerticalIcon className="h-4 w-4" />
<EllipsisVerticalIcon className="h-4 w-4 text-slate-700 hover:text-slate-950" />
</DropdownMenuTrigger>
<DropdownMenuContent>

6
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorConditions.tsx
View File

@@ -5,7 +5,7 @@ import {
getMatchValueProps,
} from "@/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/lib/utils";
import { createId } from "@paralleldrive/cuid2";
import { CopyIcon, MoreVerticalIcon, PlusIcon, TrashIcon, WorkflowIcon } from "lucide-react";
import { CopyIcon, EllipsisVerticalIcon, PlusIcon, TrashIcon, WorkflowIcon } from "lucide-react";
import { cn } from "@formbricks/lib/cn";
import {
addConditionBelow,
@@ -212,7 +212,7 @@ export function LogicEditorConditions({
<div className="mt-2">
<DropdownMenu>
<DropdownMenuTrigger>
<MoreVerticalIcon className="h-4 w-4" />
<EllipsisVerticalIcon className="h-4 w-4 text-slate-700 hover:text-slate-950" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
@@ -301,7 +301,7 @@ export function LogicEditorConditions({
)}
<DropdownMenu>
<DropdownMenuTrigger id={`condition-${depth}-${index}-dropdown`}>
<MoreVerticalIcon className="h-4 w-4" />
<EllipsisVerticalIcon className="h-4 w-4 text-slate-700 hover:text-slate-950" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem

4
packages/ui/BasicSegmentEditor/components/SegmentFilterItemContextMenu.tsx
View File

@@ -1,4 +1,4 @@
import { MoreVerticalIcon, Trash2Icon } from "lucide-react";
import { EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
import { cn } from "@formbricks/lib/cn";
import { Button } from "../../Button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../DropdownMenu";
@@ -20,7 +20,7 @@ export const SegmentFilterItemContextMenu = ({
<div className="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger disabled={viewOnly}>
<MoreVerticalIcon className="h-4 w-4" />
<EllipsisVerticalIcon className="h-4 w-4 text-slate-700 hover:text-slate-950" />
</DropdownMenuTrigger>
<DropdownMenuContent>

6
packages/ui/Command/index.tsx
View File

@@ -69,7 +69,7 @@ CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center" {...props} />);
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
@@ -80,7 +80,7 @@ const CommandGroup = React.forwardRef<
<CommandPrimitive.Group
ref={ref}
className={cn(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
"text-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-500",
className
)}
{...props}
@@ -104,7 +104,7 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none hover:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
"relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm font-medium text-slate-700 outline-none hover:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
className
)}
{...props}

2
packages/ui/DataTable/components/ColumnSettingsDropdown.tsx
View File

@@ -15,7 +15,7 @@ export const ColumnSettingsDropdown = <T,>({
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="py-2 focus:outline-none">
<EllipsisVerticalIcon name="three-dots" className="h-4 w-4" />{" "}
<EllipsisVerticalIcon name="three-dots" className="h-4 w-4 text-slate-700 hover:text-slate-950" />{" "}
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">

26
packages/ui/InputCombobox/index.tsx
View File

@@ -1,8 +1,7 @@
import debounce from "lodash/debounce";
import { CheckIcon, ChevronDownIcon, LucideProps, XIcon } from "lucide-react";
import Image from "next/image";
import React, { useEffect, useMemo, useState } from "react";
import { ForwardRefExoticComponent, RefAttributes } from "react";
import React, { ForwardRefExoticComponent, RefAttributes, useEffect, useMemo, useState } from "react";
import { cn } from "@formbricks/lib/cn";
import {
Command,
@@ -204,12 +203,12 @@ export const InputCombobox = ({
return (
<div
className={cn(
"flex max-w-[440px] overflow-hidden rounded-md border border-slate-300",
"group/icon flex max-w-[440px] overflow-hidden rounded-md border border-slate-300 transition-colors duration-200 ease-in-out hover:border-slate-400",
comboboxClasses
)}>
{withInput && inputType !== "dropdown" && (
<Input
className="min-w-0 rounded-none border-0 border-r border-slate-300 bg-white focus:border-slate-300"
className="min-w-0 rounded-none border-0 border-r border-slate-300 bg-white focus:border-slate-400"
{...inputProps}
id={`${id}-input`}
value={inputValue as string | number}
@@ -233,15 +232,14 @@ export const InputCombobox = ({
{clearable && inputType === "dropdown" ? (
<XIcon className="h-5 w-5 shrink-0 text-slate-300 hover:text-slate-400" onClick={handleClear} />
) : (
<ChevronDownIcon className="h-5 w-5 shrink-0 text-slate-300 hover:text-slate-400" />
<ChevronDownIcon className="h-5 w-5 shrink-0 text-slate-300 transition-colors duration-200 ease-in-out group-hover/icon:text-slate-400" />
)}
</div>
</PopoverTrigger>
<PopoverContent
className={cn(
"w-auto max-w-[400px] overflow-y-auto truncate border border-slate-400 bg-slate-50 p-0 shadow-none",
{ "px-2 pt-2": showSearch }
)}>
className={cn("w-auto max-w-[400px] overflow-y-auto truncate p-0", {
"px-2 pt-2": showSearch,
})}>
<Command>
{showSearch && (
<CommandInput
@@ -249,8 +247,10 @@ export const InputCombobox = ({
className="h-8 border-slate-400 bg-white placeholder-slate-300"
/>
)}
<CommandList className="mx-1 my-2">
<CommandEmpty className="mx-2 my-0">{emptyDropdownText}</CommandEmpty>
<CommandList className="m-1">
<CommandEmpty className="mx-2 my-0 text-xs font-semibold text-slate-500">
{emptyDropdownText}
</CommandEmpty>
{options && options.length > 0 && (
<CommandGroup>
{options.map((option) => (
@@ -258,7 +258,7 @@ export const InputCombobox = ({
key={option.value}
onSelect={() => handleSelect(option)}
title={option.label}
className="cursor-pointer truncate hover:text-slate-500">
className="cursor-pointer truncate">
{showCheckIcon &&
allowMultiSelect &&
Array.isArray(localValue) &&
@@ -288,7 +288,7 @@ export const InputCombobox = ({
<CommandItem
key={option.value}
onSelect={() => handleSelect(option)}
className="cursor-pointer truncate hover:text-slate-500">
className="cursor-pointer truncate">
{showCheckIcon &&
allowMultiSelect &&
Array.isArray(localValue) &&

4
packages/ui/Select/index.tsx
View File

@@ -36,7 +36,7 @@ const SelectContent: React.ComponentType<SelectPrimitive.SelectContentProps> = R
<SelectPrimitive.Content
ref={ref}
className={cn(
"animate-in fade-in-80 relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-slate-50 text-slate-700 shadow-md dark:bg-slate-700 dark:text-slate-300",
"animate-in fade-in-80 relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white text-slate-700 shadow-md dark:bg-slate-700 dark:text-slate-300",
className
)}
{...props}>
@@ -65,7 +65,7 @@ const SelectItem: React.ComponentType<SelectPrimitive.SelectItemProps> = React.f
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-2 text-sm font-medium outline-none hover:text-slate-500 focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}>