change(ui): icon changes for table of caeds (url, fetch, referrer)

2024-09-10 15:50:50 +05:30 · 2024-09-10 15:50:50 +05:30 · 3f6c1dad6f
commit 3f6c1dad6f
parent 4a019e9821
13 changed files with 131 additions and 21 deletions
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth.tsx
@ -10,28 +10,28 @@ function ByFetch(props: any) {
      ptitle: 'Dresses',
      value: '500',
      progress: 75,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_fetch-request' size={24} />
    },
    {
      label: 'https://www.reddit.com',
      ptitle: 'Search: summer dresses',
      value: '306',
      progress: 60,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_fetch-request' size={24} />
    },
    {
      label: 'https://www.company.com/account/orders',
      ptitle: 'Account: Orders',
      value: '198',
      progress: 30,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_fetch-request' size={24} />
    },
    {
      label: 'android-app://com.slack/',
      ptitle: 'Checkout: Confirmation',
      value: '47',
      progress: 15,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_fetch-request' size={24} />
    }
  ];

--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer.tsx
@ -10,28 +10,28 @@ function ByReferrer(props: any) {
      ptitle: 'Dresses',
      value: '500',
      progress: 75,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_referrer' size={24} />
    },
    {
      label: 'https://www.reddit.com',
      ptitle: 'Search: summer dresses',
      value: '306',
      progress: 60,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_referrer' size={24} />
    },
    {
      label: 'https://www.company.com/account/orders',
      ptitle: 'Account: Orders',
      value: '198',
      progress: 30,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_referrer' size={24} />
    },
    {
      label: 'android-app://com.slack/',
      ptitle: 'Checkout: Confirmation',
      value: '47',
      progress: 15,
-      icon: <Icon name='link-45deg' size={24} />
+      icon: <Icon name='icn_referrer' size={24} />
    }
  ];

--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
@ -15,35 +15,35 @@ function ByUrl(props: any) {
      ptitle: 'Dresses',
      value: '500',
      progress: 75,
-      icon: <Icon name="link-45deg" size={24} />
+      icon: <Icon name="icn_url" size={24} />
    },
    {
      label: '/search?q=summer+dresses',
      ptitle: 'Search: summer dresses',
      value: '306',
      progress: 60,
-      icon: <Icon name="link-45deg" size={24} />
+      icon: <Icon name="icn_url" size={24} />
    },
    {
      label: '/account/orders',
      ptitle: 'Account: Orders',
      value: '198',
      progress: 30,
-      icon: <Icon name="link-45deg" size={24} />
+      icon: <Icon name="icn_url" size={24} />
    },
    {
      label: '/checkout/confirmation',
      ptitle: 'Checkout: Confirmation',
      value: '47',
      progress: 15,
-      icon: <Icon name="link-45deg" size={24} />
+      icon: <Icon name="icn_url" size={24} />
    },
    {
      label: '/checkout/payment',
      ptitle: 'Checkout: Payment',
      value: '5',
      progress: 5,
-      icon: <Icon name="link-45deg" size={24} />
+      icon: <Icon name="icn_url" size={24} />
    }
  ];

--- a/frontend/app/components/ui/Icons/icn_fetch_request.tsx
+++ b/frontend/app/components/ui/Icons/icn_fetch_request.tsx
@ -0,0 +1,19 @@
+
+/* Auto-generated, do not edit */
+import React from 'react';
+
+interface Props {
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+}
+
+function Icn_fetch_request(props: Props) {
+    const { size = 14, width = size, height = size, fill = '' } = props;
+    return (
+      <svg fill="none" viewBox="0 0 32 32" width={ `${ width }px` } height={ `${ height }px` } ><g><path d="M22 0H10C4.477 0 0 4.477 0 10v12c0 5.523 4.477 10 10 10h12c5.523 0 10-4.477 10-10V10c0-5.523-4.477-10-10-10Z" fill="#EEE2F6"/><path d="M16 15.925a9.02 9.02 0 0 0-4.892 1.43.632.632 0 0 1-.849-.134l-1-1.333a.564.564 0 0 1 .126-.81A11.859 11.859 0 0 1 16 13.074c2.446 0 4.718.735 6.614 2.001.268.18.322.55.125.812l-.724.96a.629.629 0 0 1-.364.232 5.39 5.39 0 0 0-.803.246c-1.405-.905-3.068-1.401-4.848-1.401Zm10.34-4.837-1 1.333a.615.615 0 0 1-.84.128A15.007 15.007 0 0 0 16 9.925c-3.155 0-6.086.971-8.5 2.624a.615.615 0 0 1-.84-.128l-1-1.333a.573.573 0 0 1 .123-.817A17.848 17.848 0 0 1 16 7.075c3.795 0 7.317 1.182 10.217 3.196.266.185.32.555.123.817Zm-13.348 8.807a5.91 5.91 0 0 1 3.008-.82c.46 0 .906.058 1.337.163.186.045.311.178.367.346a.698.698 0 0 1-.053.547A5.983 5.983 0 0 0 16.925 23v.004c0 .196 0 .391.035.587l-.487.651a.592.592 0 0 1-.947.001l-2.666-3.555c-.198-.263-.141-.632.133-.793Zm6.22 1.368 1.334-1.6a.592.592 0 0 1 .909 0l1.333 1.6a.403.403 0 0 1-.31.662.553.553 0 0 0-.553.553v2.855a.592.592 0 0 1-.592.592h-.666a.592.592 0 0 1-.592-.592V22.48a.553.553 0 0 0-.553-.554.403.403 0 0 1-.31-.662Zm6.713-.596v2.854c0 .306.248.554.553.554.342 0 .53.399.31.662l-1.334 1.6a.592.592 0 0 1-.909 0l-1.333-1.6a.403.403 0 0 1 .31-.662.553.553 0 0 0 .553-.553v-2.855c0-.327.265-.592.592-.592h.666c.327 0 .592.265.592.592Z" fill="#000" stroke="#EEE2F6" strokeWidth=".15"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>
+  );
+}
+
+export default Icn_fetch_request;
--- a/frontend/app/components/ui/Icons/icn_referrer.tsx
+++ b/frontend/app/components/ui/Icons/icn_referrer.tsx
@ -0,0 +1,19 @@
+
+/* Auto-generated, do not edit */
+import React from 'react';
+
+interface Props {
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+}
+
+function Icn_referrer(props: Props) {
+    const { size = 14, width = size, height = size, fill = '' } = props;
+    return (
+      <svg fill="none" viewBox="0 0 32 32" width={ `${ width }px` } height={ `${ height }px` } ><g><path d="M22 0H10C4.477 0 0 4.477 0 10v12c0 5.523 4.477 10 10 10h12c5.523 0 10-4.477 10-10V10c0-5.523-4.477-10-10-10Z" fill="#E2F6F0"/><path d="M13 7H9a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2ZM11 15v4a2 2 0 0 0 2 2h4M23 17h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Z" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>
+  );
+}
+
+export default Icn_referrer;
--- a/frontend/app/components/ui/Icons/icn_url.tsx
+++ b/frontend/app/components/ui/Icons/icn_url.tsx
@ -0,0 +1,19 @@
+
+/* Auto-generated, do not edit */
+import React from 'react';
+
+interface Props {
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+}
+
+function Icn_url(props: Props) {
+    const { size = 14, width = size, height = size, fill = '' } = props;
+    return (
+      <svg fill="none" viewBox="0 0 32 32" width={ `${ width }px` } height={ `${ height }px` } ><g><path d="M22 0H10C4.477 0 0 4.477 0 10v12c0 5.523 4.477 10 10 10h12c5.523 0 10-4.477 10-10V10c0-5.523-4.477-10-10-10Z" fill="#E2E4F6"/><path d="M13 21h-2a5 5 0 0 1 0-10h2M19 11h2a5 5 0 1 1 0 10h-2M12 16h8" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>
+  );
+}
+
+export default Icn_url;
--- a/frontend/app/components/ui/Icons/index.ts
+++ b/frontend/app/components/ui/Icons/index.ts
@ -302,6 +302,9 @@ export { default as Ic_errors } from './ic_errors';
 export { default as Ic_network } from './ic_network';
 export { default as Ic_rage } from './ic_rage';
 export { default as Ic_resources } from './ic_resources';
+export { default as Icn_fetch_request } from './icn_fetch_request';
+export { default as Icn_referrer } from './icn_referrer';
+export { default as Icn_url } from './icn_url';
 export { default as Id_card } from './id_card';
 export { default as Image } from './image';
 export { default as Info_circle_fill } from './info_circle_fill';
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
--- a/frontend/app/mstore/types/IconProvider.tsx
+++ b/frontend/app/mstore/types/IconProvider.tsx
@ -69,7 +69,7 @@ class IssueIconProvider implements IconProvider {

 class UrlIconProvider implements IconProvider {
  getIcon(obj: any): React.ReactNode {
-    return <Icon name="link-45deg" size={24} />;
+    return <Icon name="icn_url" size={24} />;
  }
 }

@ -118,13 +118,13 @@ class UserIconProvider implements IconProvider {

 class ReferrerIconProvider implements IconProvider {
  getIcon(obj: any): React.ReactNode {
-    return <Icon name="referrer" size={24} />;
+    return <Icon name="icn_referrer" size={24} />;
  }
 }

 class FetchIconProvider implements IconProvider {
  getIcon(obj: any): React.ReactNode {
-    return <Icon name="fetch-request" size={24} />;
+    return <Icon name="icn_fetch-request" size={24} />;
  }
 }

--- a/frontend/app/mstore/types/sessionsCardData.ts
+++ b/frontend/app/mstore/types/sessionsCardData.ts
@ -15,6 +15,7 @@ import {
  UserIconProvider,
  FetchIconProvider,
 } from './IconProvider';
+import { FilterKey } from 'Types/filter/filterType';

 interface NameFormatter {
  format(name: string): string;
@ -103,7 +104,7 @@ export class SessionsByRow {
          nameFormatter: new IssueFormatter(),
          iconProvider: new IssueIconProvider(),
        };
-      case 'location':
+      case FilterKey.LOCATION:
        return {
          nameFormatter: new BaseFormatter(),
          iconProvider: new UrlIconProvider(),
@ -120,9 +121,9 @@ export class SessionsByRow {
        };
      case 'userId':
        return { nameFormatter: new UserNameFormatter(), iconProvider: new UserIconProvider() };
-      case 'referrer':
-        return { nameFormatter: new BaseFormatter(), iconProvider: new UrlIconProvider() };
-      case 'fetch':
+      case FilterKey.REFERRER:
+        return { nameFormatter: new BaseFormatter(), iconProvider: new ReferrerIconProvider() };
+      case FilterKey.FETCH:
        return {
          nameFormatter: new BaseFormatter(),
          iconProvider: new FetchIconProvider(),
--- a/frontend/app/svg/icons/icn_fetch-request.svg
+++ b/frontend/app/svg/icons/icn_fetch-request.svg
@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+<g clip-path="url(#clip0_101_1415)">
+<path d="M22 0H10C4.47715 0 0 4.47715 0 10V22C0 27.5228 4.47715 32 10 32H22C27.5228 32 32 27.5228 32 22V10C32 4.47715 27.5228 0 22 0Z" fill="#EEE2F6"/>
+<path d="M16 15.925C14.1956 15.925 12.5164 16.4501 11.1076 17.3552C10.8274 17.5352 10.4547 17.4813 10.2592 17.2205L9.25969 15.8879C9.06304 15.6257 9.11714 15.2562 9.38504 15.0771C11.281 13.8102 13.5536 13.075 16 13.075C18.4459 13.075 20.7182 13.8099 22.614 15.0764C22.8822 15.2557 22.9361 15.6259 22.7387 15.888L22.0153 16.8488C21.927 16.9661 21.7968 17.0461 21.6508 17.0795C21.3762 17.1423 21.1044 17.2229 20.848 17.3258C19.4425 16.4213 17.7803 15.925 16 15.925ZM26.3402 11.088L25.3405 12.421C25.1448 12.682 24.7729 12.7356 24.5001 12.5489C22.0855 10.8963 19.1554 9.925 16 9.925C12.8446 9.925 9.91448 10.8963 7.4999 12.5489C7.22716 12.7356 6.85525 12.682 6.6595 12.421L5.6598 11.088C5.46336 10.8261 5.51701 10.4561 5.78289 10.2714C8.68288 8.25663 12.2047 7.075 16 7.075C19.7954 7.075 23.3171 8.25663 26.2171 10.2714C26.483 10.4561 26.5367 10.8261 26.3402 11.088ZM12.9925 19.895C13.8732 19.3758 14.9031 19.075 16 19.075C16.46 19.075 16.9057 19.1329 17.3373 19.2378C17.5233 19.2831 17.6482 19.4158 17.7043 19.5836C17.7608 19.7527 17.7463 19.9556 17.6508 20.1313C17.1867 20.9857 16.925 21.9603 16.925 23V23.0036C16.925 23.2001 16.925 23.3954 16.9602 23.5915L16.4731 24.2425C16.2366 24.5585 15.7629 24.5588 15.526 24.243L12.86 20.6883C12.6624 20.4249 12.7187 20.0564 12.9925 19.895ZM19.2116 21.2632L20.5455 19.6626C20.782 19.3787 21.218 19.3787 21.4545 19.6626L22.7884 21.2632C23.0074 21.526 22.8205 21.925 22.4785 21.925C22.1728 21.925 21.925 22.1728 21.925 22.4785V25.3333C21.925 25.6601 21.6601 25.925 21.3333 25.925H20.6667C20.3399 25.925 20.075 25.6601 20.075 25.3333V22.4785C20.075 22.1728 19.8272 21.925 19.5215 21.925C19.1795 21.925 18.9926 21.526 19.2116 21.2632ZM25.925 20.6667V23.5215C25.925 23.8272 26.1728 24.075 26.4785 24.075C26.8205 24.075 27.0074 24.474 26.7884 24.7368L25.4545 26.3374C25.218 26.6213 24.782 26.6213 24.5455 26.3374L23.2116 24.7368C22.9926 24.474 23.1795 24.075 23.5215 24.075C23.8272 24.075 24.075 23.8272 24.075 23.5215V20.6667C24.075 20.3399 24.3399 20.075 24.6667 20.075H25.3333C25.6601 20.075 25.925 20.3399 25.925 20.6667Z" fill="black" stroke="#EEE2F6" stroke-width="0.15"/>
+</g>
+<defs>
+<clipPath id="clip0_101_1415">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/frontend/app/svg/icons/icn_referrer.svg
+++ b/frontend/app/svg/icons/icn_referrer.svg
@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+<g clip-path="url(#clip0_101_1422)">
+<path d="M22 0H10C4.47715 0 0 4.47715 0 10V22C0 27.5228 4.47715 32 10 32H22C27.5228 32 32 27.5228 32 22V10C32 4.47715 27.5228 0 22 0Z" fill="#E2F6F0"/>
+<path d="M13 7H9C7.89543 7 7 7.89543 7 9V13C7 14.1046 7.89543 15 9 15H13C14.1046 15 15 14.1046 15 13V9C15 7.89543 14.1046 7 13 7Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 15V19C11 19.5304 11.2107 20.0391 11.5858 20.4142C11.9609 20.7893 12.4696 21 13 21H17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 17H19C17.8954 17 17 17.8954 17 19V23C17 24.1046 17.8954 25 19 25H23C24.1046 25 25 24.1046 25 23V19C25 17.8954 24.1046 17 23 17Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_101_1422">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/frontend/app/svg/icons/icn_url.svg
+++ b/frontend/app/svg/icons/icn_url.svg
@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+<g clip-path="url(#clip0_101_1431)">
+<path d="M22 0H10C4.47715 0 0 4.47715 0 10V22C0 27.5228 4.47715 32 10 32H22C27.5228 32 32 27.5228 32 22V10C32 4.47715 27.5228 0 22 0Z" fill="#E2E4F6"/>
+<path d="M13 21H11C9.67392 21 8.40215 20.4732 7.46447 19.5355C6.52678 18.5979 6 17.3261 6 16C6 14.6739 6.52678 13.4021 7.46447 12.4645C8.40215 11.5268 9.67392 11 11 11H13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 11H21C22.3261 11 23.5979 11.5268 24.5355 12.4645C25.4732 13.4021 26 14.6739 26 16C26 17.3261 25.4732 18.5979 24.5355 19.5355C23.5979 20.4732 22.3261 21 21 21H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16H20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_101_1431">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>