style: 💄 minor UI changes and removed harcoded value

growupanand · Feb 14, 2024 · c183e64 · c183e64
1 parent 0adb281
commit c183e64
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 19 deletions.
diff --git a/apps/web/src/app/(protectedPage)/(mainPage)/dashboard/_components/responseUsageCard.tsx b/apps/web/src/app/(protectedPage)/(mainPage)/dashboard/_components/responseUsageCard.tsx
@@ -39,7 +39,7 @@ export function ResponseUsageCard({ organizationId }: Readonly<Props>) {
   }
 
   if (data) {
-    const usage = 200;
+    const usage = data;
     const maximum = formSubmissionLimit;
     const usagePercentage = (usage / maximum) * 100;
 

diff --git a/apps/web/src/app/(protectedPage)/forms/[formId]/_components/formPageHeader.tsx b/apps/web/src/app/(protectedPage)/forms/[formId]/_components/formPageHeader.tsx
@@ -25,7 +25,7 @@ function FormPageHeader({ formId }: Props) {
   }
 
   return (
-    <div className="sticky top-0 z-50 border-b bg-white/70 p-3 shadow-sm backdrop-blur">
+    <div className="sticky top-0 z-50 border-b bg-white/70 p-3 backdrop-blur">
       <div className="flex items-center justify-between ">
         <div
           className={cn(
@@ -55,7 +55,7 @@ function FormPageHeader({ formId }: Props) {
               <ChevronRight size={20} />
               <ChangeNameInput
                 form={data}
-                className="w-full text-xl font-medium"
+                className="w-full text-lg font-medium"
               />
             </>
           ) : (

diff --git a/.../app/(protectedPage)/forms/[formId]/conversations/_components/conversationsNavigation.tsx b/.../app/(protectedPage)/forms/[formId]/conversations/_components/conversationsNavigation.tsx
@@ -1,5 +1,4 @@
 import { Conversation } from "@convoform/db";
-import { Card, CardContent } from "@convoform/ui/components/ui/card";
 import { Skeleton } from "@convoform/ui/components/ui/skeleton";
 
 import { timeAgo } from "@/lib/utils";
@@ -41,17 +40,22 @@ export function ConversationsNavigation({
 }
 
 const ConversationsCardSkelton = () => (
-  <Card className="border-0 bg-transparent shadow-none">
-    <CardContent className="pt-6">
-      <h3 className="mb-5 px-4 text-lg font-semibold tracking-tight">
-        <Skeleton className="h-5 w-20" />
-      </h3>
-      <nav className="flex flex-col gap-1">
-        <Skeleton className="h-[40px] w-full" />
-        <Skeleton className="h-[40px] w-full" />
-      </nav>
-    </CardContent>
-  </Card>
+  <div>
+    <nav className="grid gap-1">
+      <div className="flex h-[40px] w-full items-center justify-between ps-3">
+        <Skeleton className="h-[15px] w-[80px]" />
+        <Skeleton className="h-[15px] w-[40px]" />
+      </div>
+      <div className="flex h-[40px] w-full items-center justify-between ps-3">
+        <Skeleton className="h-[15px] w-[80px]" />
+        <Skeleton className="h-[15px] w-[40px]" />
+      </div>
+      <div className="flex h-[40px] w-full items-center justify-between ps-3">
+        <Skeleton className="h-[15px] w-[80px]" />
+        <Skeleton className="h-[15px] w-[40px]" />
+      </div>
+    </nav>
+  </div>
 );
 
 ConversationsNavigation.ConversationsCardSkelton = ConversationsCardSkelton;
diff --git a/...src/app/(protectedPage)/forms/[formId]/conversations/_components/conversationsSidebar.tsx b/...src/app/(protectedPage)/forms/[formId]/conversations/_components/conversationsSidebar.tsx
@@ -9,7 +9,7 @@ import {
   SheetContent,
   SheetTrigger,
 } from "@convoform/ui/components/ui/sheet";
-import { List } from "lucide-react";
+import { GanttChartSquare, List } from "lucide-react";
 
 import { SecondaryNavigation } from "@/components/common/secondaryNavigation";
 import { api } from "@/trpc/react";
@@ -68,7 +68,18 @@ export default function ConversationsSidebar({ formId }: Props) {
             <div className="mb-3">
               <SecondaryNavigation
                 items={[
-                  { href: `/forms/${formId}/conversations`, title: "Overview" },
+                  {
+                    href: `/forms/${formId}/conversations`,
+                    title: (
+                      <div className="flex w-full items-center justify-between">
+                        <span className="text-lg">Overview</span>
+                        <GanttChartSquare
+                          className="text-muted-foreground"
+                          size={20}
+                        />
+                      </div>
+                    ),
+                  },
                 ]}
               />
             </div>
@@ -93,7 +104,15 @@ export default function ConversationsSidebar({ formId }: Props) {
             items={[
               {
                 href: `/forms/${formId}/conversations`,
-                title: "Overview",
+                title: (
+                  <div className="flex w-full items-center justify-between">
+                    <span className="text-lg">Overview</span>
+                    <GanttChartSquare
+                      className="text-muted-foreground"
+                      size={20}
+                    />
+                  </div>
+                ),
               },
             ]}
           />

diff --git a/apps/web/src/app/(protectedPage)/forms/[formId]/layout.tsx b/apps/web/src/app/(protectedPage)/forms/[formId]/layout.tsx
@@ -16,7 +16,7 @@ export default function Layout({
   params: { formId },
 }: Readonly<Props>) {
   return (
-    <div className="relative flex h-screen flex-col ">
+    <div className="relative flex h-screen flex-col gap-3 ">
       <FormEditorPageHeader formId={formId} />
       <div className="grow">{children}</div>
     </div>