ui improvements

2024-07-03 21:59:10 +05:30 · 2024-07-03 21:59:10 +05:30 · e22ba900da
commit e22ba900da
parent 7bab39d891
9 changed files with 96 additions and 75 deletions
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx
@ -1,8 +1,9 @@
 import React from 'react';
 import { Button, Space } from 'antd';
 import { filtersMap } from 'Types/filter/newFilter';
-import { Icon } from 'UI';
+// import { Icon } from 'UI';
 import { Empty } from 'antd';
+import { Info } from 'lucide-react'
 import { ArrowRight } from 'lucide-react';
 import CardSessionsByList from 'Components/Dashboard/Widgets/CardSessionsByList';
 import { useModal } from 'Components/ModalContext';
@ -57,10 +58,10 @@ function SessionsBy(props: Props) {
          image={null}
          style={{ minHeight: 220 }}
          className="flex flex-col items-center justify-center"
-          imageStyle={{ height: 60 }}
+          imageStyle={{ height: 0}}
          description={
-            <div className="flex items-center justify-center text-lg">
-              <Icon name="info-circle" className="mr-2" size="18" />
+            <div className="flex items-center gap-2 justify-center text-lg font-medium text-black">
+              <Info size={16} />
              No data available for the selected period.
            </div>
          }
--- a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
@ -29,13 +29,13 @@ function AddCardSelectionModal(props: Props) {
    return (
        <>
            <Modal
-                title="Add card to dashboard"
+                title="Add a card to dashboard"
                open={props.open}
                footer={null}
                onCancel={props.onClose}
                className='addCard'
            >
-                <Row gutter={16} justify="center">
+                <Row gutter={16} justify="center" className='py-5'>
                    <Col span={12}>
                        <div className="flex flex-col items-center justify-center hover:bg-indigo-50 border rounded-lg shadow-sm cursor-pointer gap-3" style={{height: '80px'}} onClick={() => onClick(true)}>
                            <GalleryVertical style={{fontSize: '24px', color: '#394EFF'}}/>
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@ -30,7 +30,7 @@ function DashboardList({ siteId }: { siteId: string }) {
            title: 'Title',
            dataIndex: 'name',
            width: '25%',
-            render: (t) => <div className="link capitalize-first">{t}</div>,
+            render: (t) => <div className="link cap-first">{t}</div>,
        },
        {
            title: 'Last Modified',
@ -46,6 +46,7 @@ function DashboardList({ siteId }: { siteId: string }) {
            width: '16.67%',
            sorter: (a, b) => a.owner?.localeCompare(b.owner),
            sortDirections: ['ascend', 'descend'],
+            render: (owner) => <div className="cap-first">{owner}</div>,
        },
        {
            title: (
@ -63,7 +64,7 @@ function DashboardList({ siteId }: { siteId: string }) {
            width: '16.67%',
            dataIndex: 'isPublic',
            render: (isPublic: boolean) => (
-                <Tag icon={isPublic ? <TeamOutlined /> : <LockOutlined />}>
+                <Tag icon={isPublic ? <TeamOutlined /> : <LockOutlined />} bordered={false} className='rounded-lg'>
                    {isPublic ? 'Team' : 'Private'}
                </Tag>
            ),
@ -103,16 +104,16 @@ function DashboardList({ siteId }: { siteId: string }) {
    return (
        list.length === 0 && !dashboardStore.filter.showMine ? (
            <div className='flex justify-center text-center'>
-            <Empty
-                image={<AnimatedSVG name={emptyImage} size={imageDimensions.width} />}
-                imageStyle={{
-                    width: imageDimensions.width,
-                    height: imageDimensions.height,
-                    margin: 'auto',
-                    padding: '2rem 0'
-                }}
-                description={emptyDescription}
-            />
+                <Empty
+                    image={<AnimatedSVG name={emptyImage} size={imageDimensions.width} />}
+                    imageStyle={{
+                        width: imageDimensions.width,
+                        height: imageDimensions.height,
+                        margin: 'auto',
+                        padding: '2rem 0'
+                    }}
+                    description={emptyDescription}
+                />
            </div>
        ) : (
            <Table
@ -136,7 +137,6 @@ function DashboardList({ siteId }: { siteId: string }) {
            />
        )
    );
-
 }

 export default connect((state: any) => ({
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
@ -1,5 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { Button, Input, Segmented, Space } from 'antd';
+import { Info } from 'lucide-react';
 import { CARD_LIST, CARD_CATEGORIES, CardType } from './ExampleCards';
 import { useStore } from 'App/mstore';
 import Option from './Option';
@ -21,6 +22,15 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
  const { metricStore, dashboardStore } = useStore();
  const dashboardId = window.location.pathname.split('/')[3];
  const [libraryQuery, setLibraryQuery] = React.useState<string>('');
+  const [headerText, setHeaderText] = useState<string>('');
+
+  useEffect(() => {
+    if (dashboardId) {
+      setHeaderText(isLibrary ? 'Your Library' : 'Create Card');
+    } else {
+      setHeaderText('Select a card template to start your dashboard');
+    }
+  }, [dashboardId, isLibrary]);

  const handleCardSelection = (card: string) => {
    metricStore.init();
@ -29,7 +39,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
    const cardData: any = {
      metricType: selectedCard.cardType,
      name: selectedCard.title,
-      metricOf: selectedCard.metricOf
+      metricOf: selectedCard.metricOf,
    };

    if (selectedCard.cardType === FUNNEL) {
@ -43,14 +53,16 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
  };

  const cardItems = useMemo(() => {
-    return CARD_LIST.filter((card) => card.category === selected && (!card.isEnterprise || card.isEnterprise && isEnterprise))
+    return CARD_LIST.filter((card) => card.category === selected && (!card.isEnterprise || (card.isEnterprise && isEnterprise)))
      .map((card) => (
        <div key={card.key} className={card.width ? `col-span-${card.width}` : 'col-span-2'}>
-          <card.example onCard={handleCardSelection}
-                        type={card.key}
-                        title={card.title}
-                        data={card.data}
-                        height={card.height} />
+          <card.example
+            onCard={handleCardSelection}
+            type={card.key}
+            title={card.title}
+            data={card.data}
+            height={card.height}
+          />
        </div>
      ));
  }, [selected]);
@ -73,18 +85,22 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {

  return (
    <>
-      <Space className="items-center justify-between">
+      <Space className="items-center justify-between px-2">
        <div className="text-xl leading-4 font-medium">
-          {dashboardId ? (isLibrary ? 'Your Library' : 'Create Card') : 'Select a template to create a card'}
+          {headerText}
+          {headerText === 'Select a card template to start your dashboard' && (
+            <div className='text-sm font-normal mt-3 text-gray-500 flex gap-2 items-center'>
+              <Info size={14} /> Following card previews are based on mock data for illustrative purposes only.
+            </div>
+          )}
        </div>
        {isLibrary && (
          <Space>
-            {selectedCards.length > 0 ? (
+            {selectedCards.length > 0 && (
              <Button type="primary" onClick={onAddSelected}>
                Add {selectedCards.length} Selected
              </Button>
-            ) : ''}
-
+            )}
            <Input.Search
              placeholder="Find by card title"
              onChange={(value) => setLibraryQuery(value.target.value)}
@ -93,15 +109,17 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
          </Space>
        )}
      </Space>
-
      {!isLibrary && <CategorySelector setSelected={setSelectedCategory} selected={selected} />}
-
-      {isLibrary ?
-        <CardsLibrary query={libraryQuery}
-                      selectedList={selectedCards}
-                      category={selected}
-                      onCard={onCardClick} /> :
-        <ExampleCardsGrid items={cardItems} />}
+      {isLibrary ? (
+        <CardsLibrary
+          query={libraryQuery}
+          selectedList={selectedCards}
+          category={selected}
+          onCard={onCardClick}
+        />
+      ) : (
+        <ExampleCardsGrid items={cardItems} />
+      )}
    </>
  );
 };
@ -115,11 +133,11 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({ setSelected, select
  <Segmented
    options={CARD_CATEGORIES.map(({ key, label, icon }) => ({
      label: <Option key={key} label={label} Icon={icon} />,
-      value: key
+      value: key,
    }))}
    value={selected}
    onChange={setSelected}
-    className="w-fit"
+    className="w-fit shadow-sm"
  />
 );

--- a/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
@ -40,9 +40,9 @@ const CardViewMenu = () => {
            icon: <TrashIcon size={16}/>,
            onClick: () => {
                Modal.confirm({
-                    title: 'Are you sure you want to remove this card?',
+                    title: 'Confirm Card Deletion',
                    icon: null,
-                    // content: 'Bla bla ...',
+                    content:'Are you sure you want to remove this card? This action is permanent and cannot be undone.',
                    footer: (_, {OkBtn, CancelBtn}) => (
                        <>
                            <CancelBtn/>
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx
@ -21,7 +21,7 @@ function CardMenu({card}: any) {
        },
        {
            key: 'hide',
-            label: 'Remove',
+            label: 'Remove from Dashboard',
            icon: <EyeOffIcon size={16}/>,
        },
    ];
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
@ -21,17 +21,17 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
  return (
    <div>
      <div className="flex items-start py-1">
-        <div className="font-medium">Name</div>
-        <div className="rounded-lg bg-active-blue px-2 py-1 ml-2 cursor-pointer word-break">
+        <div className="font-medium w-36">Name</div>
+        <Tag className='text-base max-w-96 rounded-lg text-clip bg-indigo-50 whitespace-nowrap overflow-hidden text-clip cursor-pointer word-break' bordered={false}>
          <CopyText content={resource.url}>{resource.url}</CopyText>
-        </div>
+        </Tag>
      </div>

      <div className="flex items-center py-1">
-        <div className="font-medium">Type</div>
-        <div className="rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip">
+        <div className="font-medium w-36">Type</div>
+        <Tag className='text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip' bordered={false}>
          {resource.type}
-        </div>
+        </Tag>
      </div>

      {resource.method && (
--- a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
@ -13,8 +13,8 @@ function Headers(props: Props) {
      <NoContent
        title={
          <div className="flex flex-col items-center justify-center">
-            <AnimatedSVG name={ICONS.NO_RESULTS} size="60" />
-            <div className="mt-6 text-2xl">No data available</div>
+            <AnimatedSVG name={ICONS.NO_RESULTS} size={30} />
+            <div className="mt-6 text-base">No data available</div>
          </div>
        }
        size="small"
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
@ -1,6 +1,6 @@
 import React from "react";
 import { Icon, Popover, Tooltip } from "UI";
-import { Dropdown, Menu, Button } from "antd";
+import { Dropdown, Menu, Button} from "antd";
 import {EllipsisVertical} from 'lucide-react';
 import styles from "./itemMenu.module.css";
 import cn from "classnames";
@ -96,28 +96,30 @@ export default class ItemMenu extends React.PureComponent<Props> {
          </div>
        )}
      >
-        <Button
-          className={cn("select-none", !this.props.flat ? parentStyles : "", {
-            "": !this.props.flat && displayed && label,
-          }, 'border-0 shadow-one')}
-        >
-          {label && (
-            <span className={cn("font-medium")}>
-              {label}
-            </span>
-          )}
-          {!this.props.flat && (
-            <div
-              ref={(ref) => {
-                this.menuBtnRef = ref;
-              }}
-              className={cn("rounded-full flex items-center justify-center")}
-              role="button"
+        
+            <Button
+              className={cn("select-none", !this.props.flat ? parentStyles : "", {
+                "": !this.props.flat && displayed && label,
+              }, ' shadow-sm')}
            >
-              <EllipsisVertical size={16} />
-            </div>
-          )}
-        </Button>
+              {label && (
+                <span className={cn("font-medium")}>
+                  {label}
+                </span>
+              )}
+              {!this.props.flat && (
+                <div
+                  ref={(ref) => {
+                    this.menuBtnRef = ref;
+                  }}
+                  className={cn("rounded-full flex items-center justify-center")}
+                  role="button"
+                >
+                  <EllipsisVertical size={16} />
+                </div>
+              )}
+            </Button>
+        
      </Popover>
    );
  }