From f8f0bb5f1390e4ffeb2b93a298e3662e84891ec5 Mon Sep 17 00:00:00 2001 From: Johannes Date: Tue, 22 Aug 2023 11:10:26 +0200 Subject: [PATCH] responsiveness tweaks --- .../[environmentId]/EnvironmentsNavbar.tsx | 11 ++-- .../settings/SettingsNavbar.tsx | 11 ++-- .../[environmentId]/settings/layout.tsx | 6 +- .../lookandfeel/EditHighlightBorder.tsx | 56 ++++++++++++++++++- .../settings/members/EditMemberships.tsx | 18 +++--- .../settings/setup/EnvironmentNotice.tsx | 18 +++--- .../shared/WidgetStatusIndicator.tsx | 7 +-- 7 files changed, 90 insertions(+), 37 deletions(-) diff --git a/apps/web/app/(app)/environments/[environmentId]/EnvironmentsNavbar.tsx b/apps/web/app/(app)/environments/[environmentId]/EnvironmentsNavbar.tsx index 0b29680e1c..d095f89151 100644 --- a/apps/web/app/(app)/environments/[environmentId]/EnvironmentsNavbar.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/EnvironmentsNavbar.tsx @@ -237,8 +237,7 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
- {/* */} + className="flex items-center justify-center rounded-md bg-gradient-to-b text-white transition-all ease-in-out hover:scale-105"> faveicon @@ -253,7 +252,7 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme item.current ? "bg-slate-100 text-slate-900" : "text-slate-900 hover:bg-slate-50 hover:text-slate-900", - "hidden items-center rounded-md px-2 py-1 text-sm font-medium sm:inline-flex" + "hidden items-center rounded-md px-2 py-1 text-sm font-medium lg:inline-flex" )} aria-current={item.current ? "page" : undefined}> @@ -263,7 +262,8 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme })}
-
+ {/* Mobile Menu */} +
setMobileNavMenuOpen(!mobileNavMenuOpen)}> @@ -290,7 +290,8 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
-
+ {/* User Dropdown */} +
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/SettingsNavbar.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/SettingsNavbar.tsx index 8efa0395c8..82fd341905 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/SettingsNavbar.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/SettingsNavbar.tsx @@ -4,7 +4,7 @@ import { useProduct } from "@/lib/products/products"; import { useTeam } from "@/lib/teams/teams"; import { truncate } from "@/lib/utils"; import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants"; -import { Popover, PopoverTrigger, PopoverContent } from "@formbricks/ui"; +import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui"; import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { AdjustmentsVerticalIcon, @@ -13,10 +13,10 @@ import { CreditCardIcon, DocumentCheckIcon, DocumentMagnifyingGlassIcon, + HashtagIcon, KeyIcon, LinkIcon, PaintBrushIcon, - HashtagIcon, UserCircleIcon, UsersIcon, } from "@heroicons/react/24/solid"; @@ -45,7 +45,6 @@ export default function SettingsNavbar({ environmentId }: { environmentId: strin links: NavigationLink[]; } - // Then, specify the type of the navigation array const navigation: NavigationSection[] = useMemo( () => [ { @@ -186,7 +185,7 @@ export default function SettingsNavbar({ environmentId }: { environmentId: strin return ( <> -
+
-
+ + {/* Mobile Menu */} +
setMobileNavMenuOpen(!mobileNavMenuOpen)}> diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx index 531d736c3c..d990621ed0 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx @@ -1,5 +1,5 @@ -import SettingsNavbar from "./SettingsNavbar"; import { Metadata } from "next"; +import SettingsNavbar from "./SettingsNavbar"; export const metadata: Metadata = { title: "Settings", @@ -10,8 +10,8 @@ export default function SettingsLayout({ children, params }) { <>
-
-
+
+
{children}
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/EditHighlightBorder.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/EditHighlightBorder.tsx index ad41b63c3b..acaa6fff34 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/EditHighlightBorder.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/EditHighlightBorder.tsx @@ -1,11 +1,11 @@ "use client"; import { cn } from "@formbricks/lib/cn"; +import { DEFAULT_BRAND_COLOR } from "@formbricks/lib/constants"; +import { TProduct, TProductUpdateInput } from "@formbricks/types/v1/product"; import { Button, ColorPicker, Label, Switch } from "@formbricks/ui"; import { useState } from "react"; import toast from "react-hot-toast"; -import { DEFAULT_BRAND_COLOR } from "@formbricks/lib/constants"; -import { TProduct, TProductUpdateInput } from "@formbricks/types/v1/product"; import { updateProductAction } from "./actions"; interface EditHighlightBorderProps { @@ -46,7 +46,7 @@ export const EditHighlightBorder = ({ product }: EditHighlightBorderProps) => { } }; - return ( + /* return (
@@ -92,4 +92,54 @@ export const EditHighlightBorder = ({ product }: EditHighlightBorderProps) => {
); +}; */ + + return ( +
+
+
+ +

Show highlight border

+
+ + {showHighlightBorder && color ? ( + <> + + + + ) : null} + + +
+ +
+

Preview

+
+

How easy was it for you to do this?

+
+ {[1, 2, 3, 4, 5].map((num) => ( +
+ {num} +
+ ))} +
+
+
+
+ ); }; diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/EditMemberships.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/EditMemberships.tsx index 56e9d54611..604e04f19f 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/members/EditMemberships.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/EditMemberships.tsx @@ -2,6 +2,7 @@ import ShareInviteModal from "@/app/(app)/environments/[environmentId]/settings/members/ShareInviteModal"; import TransferOwnershipModal from "@/app/(app)/environments/[environmentId]/settings/members/TransferOwnershipModal"; +import CustomDialog from "@/components/shared/CustomDialog"; import DeleteDialog from "@/components/shared/DeleteDialog"; import LoadingSpinner from "@/components/shared/LoadingSpinner"; import CreateTeamModal from "@/components/team/CreateTeamModal"; @@ -17,6 +18,7 @@ import { updateMemberRole, useMembers, } from "@/lib/members"; +import { useMemberships } from "@/lib/memberships"; import { useProfile } from "@/lib/profile"; import { capitalizeFirstLetter } from "@/lib/utils"; import { @@ -35,12 +37,10 @@ import { } from "@formbricks/ui"; import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { PaperAirplaneIcon, ShareIcon, TrashIcon } from "@heroicons/react/24/outline"; +import { useRouter } from "next/navigation"; import { useState } from "react"; import toast from "react-hot-toast"; import AddMemberModal from "./AddMemberModal"; -import { useRouter } from "next/navigation"; -import { useMemberships } from "@/lib/memberships"; -import CustomDialog from "@/components/shared/CustomDialog"; type EditMembershipsProps = { environmentId: string; @@ -292,7 +292,7 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) {
-
Fullname
+
Fullname
Email
Role
@@ -302,10 +302,12 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) {
-
- +
+
+ +
-
+

{member.name}

@@ -325,7 +327,7 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) { currentUserRole={role} />
-
+
{!member.accepted && (isExpired(member) ? ( diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx index 5c6a5fdd98..7cf29eb6a9 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx @@ -3,7 +3,7 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner"; import { useEnvironment } from "@/lib/environments/environments"; import { ErrorComponent } from "@formbricks/ui"; -import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; +import { LightBulbIcon } from "@heroicons/react/24/solid"; import { useRouter } from "next/navigation"; export default function EnvironmentNotice({ environmentId }: { environmentId: string }) { @@ -26,14 +26,14 @@ export default function EnvironmentNotice({ environmentId }: { environmentId: st return (
{environment.type === "production" && !environment.widgetSetupCompleted && ( - diff --git a/apps/web/components/shared/WidgetStatusIndicator.tsx b/apps/web/components/shared/WidgetStatusIndicator.tsx index 3be29c2fb8..87adc83fa2 100644 --- a/apps/web/components/shared/WidgetStatusIndicator.tsx +++ b/apps/web/components/shared/WidgetStatusIndicator.tsx @@ -1,16 +1,15 @@ "use client"; import LoadingSpinner from "@/components/shared/LoadingSpinner"; -import { Confetti } from "@formbricks/ui"; import { useEnvironment } from "@/lib/environments/environments"; import { useEnvironmentMutation } from "@/lib/environments/mutateEnvironments"; import { useEvents } from "@/lib/events/events"; import { timeSince } from "@formbricks/lib/time"; +import { Confetti, ErrorComponent } from "@formbricks/ui"; import { ArrowDownIcon, CheckIcon, ExclamationTriangleIcon } from "@heroicons/react/24/solid"; import clsx from "clsx"; import Link from "next/link"; import { useEffect, useMemo, useState } from "react"; -import { ErrorComponent } from "@formbricks/ui"; interface WidgetStatusIndicatorProps { environmentId: string; @@ -81,7 +80,7 @@ export default function WidgetStatusIndicator({ environmentId, type }: WidgetSta return (
-

{currentStatus.title}

+

{currentStatus.title}

{currentStatus.subtitle}{" "} {status !== "notImplemented" && {timeSince(events[0].createdAt)}}