responsiveness tweaks

apps/web/app/(app)/environments/[environmentId]/EnvironmentsNavbar.tsx

@@ -237,8 +237,7 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
           <div className="flex space-x-4 py-2">
             <Link
               href={`/environments/${environmentId}/surveys/`}
-              className=" flex items-center justify-center rounded-md bg-gradient-to-b text-white transition-all ease-in-out hover:scale-105">
-              {/* <PlusIcon className="h-6 w-6" /> */}
+              className="flex items-center justify-center rounded-md bg-gradient-to-b text-white transition-all ease-in-out hover:scale-105">
               <Image src={FaveIcon} width={30} height={30} alt="faveicon" />
             </Link>
 
@@ -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}>
                   <IconComponent className="mr-3 h-5 w-5" />
@@ -263,7 +262,8 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
             })}
           </div>
 
-          <div className="flex items-center sm:hidden">
+          {/* Mobile Menu */}
+          <div className="flex items-center lg:hidden">
             <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
               <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
                 <span>
@@ -290,7 +290,8 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
             </Popover>
           </div>
 
-          <div className="hidden sm:ml-6 sm:flex sm:items-center">
+          {/* User Dropdown */}
+          <div className="hidden lg:ml-6 lg:flex lg:items-center">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <div className="flex cursor-pointer flex-row items-center space-x-5">

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 (
     <>
-      <div className="fixed hidden h-full bg-white py-2 pl-4 pr-10 sm:block ">
+      <div className="fixed hidden h-full bg-white py-2 pl-4 pr-10 md:block ">
         <nav className="flex-1 space-y-1 bg-white px-2">
           {navigation.map((item) => (
             <div key={item.title}>
@@ -223,7 +222,9 @@ export default function SettingsNavbar({ environmentId }: { environmentId: strin
           ))}
         </nav>
       </div>
-      <div className="fixed z-10 flex h-14 w-full items-center justify-between border-b border-slate-200 bg-white px-4 sm:hidden sm:px-6">
+
+      {/* Mobile Menu */}
+      <div className="fixed z-10 flex h-14 w-full items-center justify-between border-b border-slate-200 bg-white px-4 sm:px-6 md:hidden">
         <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
           <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
             <span className="flex items-center">

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 }) {
     <>
       <div className="sm:flex">
         <SettingsNavbar environmentId={params.environmentId} />
-        <div className="w-full sm:ml-64">
-          <div className="max-w-4xl px-6 pb-6 pt-14 sm:pt-6">
+        <div className="w-full md:ml-64">
+          <div className="max-w-4xl px-6 pb-6 pt-14 md:pt-6">
             <div>{children}</div>
           </div>
         </div>

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 (
     <div className="flex min-h-full w-full">
       <div className="flex w-1/2 flex-col px-6 py-5">
         <div className="mb-6 flex items-center space-x-2">
@@ -92,4 +92,54 @@ export const EditHighlightBorder = ({ product }: EditHighlightBorderProps) => {
       </div>
     </div>
   );
+}; */
+
+  return (
+    <div className="flex min-h-full w-full flex-col md:flex-row">
+      <div className="flex w-full flex-col px-6 py-5 md:w-1/2">
+        <div className="mb-6 flex items-center space-x-2">
+          <Switch id="highlightBorder" checked={showHighlightBorder} onCheckedChange={handleSwitch} />
+          <h2 className="text-sm font-medium text-slate-800">Show highlight border</h2>
+        </div>
+
+        {showHighlightBorder && color ? (
+          <>
+            <Label htmlFor="brandcolor">Color (HEX)</Label>
+            <ColorPicker color={color} onChange={setColor} />
+          </>
+        ) : null}
+
+        <Button
+          variant="darkCTA"
+          className="mt-4 flex max-w-[80px] items-center justify-center"
+          loading={updatingBorder}
+          onClick={handleUpdateHighlightBorder}>
+          Save
+        </Button>
+      </div>
+
+      <div className="mt-4 flex w-full flex-col items-center justify-center gap-4 bg-slate-200 px-6 py-5 md:mt-0 md:w-1/2">
+        <h3 className="text-slate-500">Preview</h3>
+        <div
+          className={cn("flex flex-col gap-4 rounded-lg border-2 bg-white p-5")}
+          {...(showHighlightBorder &&
+            color && {
+              style: {
+                borderColor: color,
+              },
+            })}>
+          <h3 className="text-sm font-semibold text-slate-800">How easy was it for you to do this?</h3>
+          <div className="grid grid-cols-5 rounded-xl border border-slate-400">
+            {[1, 2, 3, 4, 5].map((num) => (
+              <div
+                key={num}
+                className="flex justify-center border-r border-slate-400 px-3 py-2 last:border-r-0 lg:px-6 lg:py-5">
+                <span className="text-sm font-medium">{num}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };

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) {
       <div className="rounded-lg border border-slate-200">
         <div className="grid-cols-20 grid h-12 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
           <div className="col-span-2"></div>
-          <div className="hidden sm:col-span-5 sm:block">Fullname</div>
+          <div className="col-span-5">Fullname</div>
           <div className="col-span-5">Email</div>
           <div className="hidden sm:col-span-3 sm:block">Role</div>
           <div className="hidden sm:col-span-5 sm:block"></div>
@@ -302,10 +302,12 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) {
             <div
               className="grid-cols-20 grid h-auto w-full content-center rounded-lg p-0.5 py-2 text-left text-sm text-slate-900"
               key={member.email}>
-              <div className="h-58 col-span-2 hidden pl-4 sm:block">
-                <ProfileAvatar userId={member.userId || member.email} />
+              <div className="h-58 col-span-2  pl-4 ">
+                <div className="hidden sm:block">
+                  <ProfileAvatar userId={member.userId || member.email} />
+                </div>
               </div>
-              <div className="ph-no-capture col-span-5 hidden flex-col justify-center break-all sm:flex">
+              <div className="ph-no-capture col-span-5 flex flex-col justify-center break-all">
                 <p>{member.name}</p>
               </div>
               <div className="ph-no-capture col-span-5 flex flex-col justify-center break-all">
@@ -325,7 +327,7 @@ export function EditMemberships({ environmentId }: EditMembershipsProps) {
                   currentUserRole={role}
                 />
               </div>
-              <div className="col-span-5 ml-48 flex items-center justify-end gap-x-2 pr-4 sm:ml-0 sm:gap-x-4">
+              <div className="col-span-5 ml-48 hidden items-center justify-end gap-x-2 pr-4 sm:ml-0 sm:gap-x-4 lg:flex">
                 {!member.accepted &&
                   (isExpired(member) ? (
                     <Badge className="mr-2" type="gray" text="Expired" size="tiny" />

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 (
     <div>
       {environment.type === "production" && !environment.widgetSetupCompleted && (
-        <div className="flex items-center rounded-lg border border-amber-100 bg-amber-50 p-4 text-slate-900 shadow-sm">
-          <ExclamationTriangleIcon className="mr-3 h-6 w-6 text-amber-700" />
-          You&apos;re currently in the Production environment.
-          <a
-            onClick={() => changeEnvironment("development")}
-            className="ml-1 cursor-pointer font-medium underline">
-            Set up Development environment?
-          </a>
+        <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+          <LightBulbIcon className="mr-3 h-6 w-6 text-blue-400" />
+          <p>
+            You&apos;re currently in the Production environment.
+            <a onClick={() => changeEnvironment("development")} className="ml-1 cursor-pointer underline">
+              Switch to Development environment.
+            </a>
+          </p>
         </div>
       )}
     </div>

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 (
       <div
         className={clsx(
-          "flex flex-col items-center justify-center space-y-2 rounded-lg py-6",
+          "flex flex-col items-center justify-center space-y-2 rounded-lg py-6 text-center",
           status === "notImplemented" && "bg-slate-100",
           status === "running" && "bg-green-100",
           status === "issue" && "bg-amber-100"
@@ -95,7 +94,7 @@ export default function WidgetStatusIndicator({ environmentId, type }: WidgetSta
           )}>
           <currentStatus.icon />
         </div>
-        <p className="text-xl font-bold text-slate-800">{currentStatus.title}</p>
+        <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
         <p className="text-sm text-slate-700">
           {currentStatus.subtitle}{" "}
           {status !== "notImplemented" && <span>{timeSince(events[0].createdAt)}</span>}