diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx index 7ccc8814c..7a6543654 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx @@ -1,40 +1,45 @@ import { Segmented } from 'antd'; -import { Angry, ArrowDownUp, Mouse, MousePointerClick, Unlink } from 'lucide-react'; +import { + Angry, + ArrowDownUp, + Mouse, + MousePointerClick, + Unlink, +} from 'lucide-react'; import React from 'react'; - - import ExCard from './ExCard'; - const TYPES = { - Frustrations: 0, - Errors: 1, - Users: 2 -} + Frustrations: 'frustrations', + Errors: 'errors', + Users: 'users', +}; -function ExampleCount() { +function ExampleCount({ onCard }: { onCard: (card: string) => void }) { const [type, setType] = React.useState(TYPES.Frustrations); const el = { [TYPES.Frustrations]: , [TYPES.Errors]: , - [TYPES.Users]: + [TYPES.Users]: , }; return (
Sessions by
- setType(Number(v))} - /> + setType(v)} + />
} @@ -78,7 +83,7 @@ export function Frustrations() { }, ]; - const lineWidth = 140 + const lineWidth = 140; return (
{rows.map((r) => ( @@ -148,7 +153,7 @@ export function Errors() { }, ]; - const lineWidth = 270 + const lineWidth = 270; return (
{rows.map((r) => ( @@ -160,30 +165,30 @@ export function Errors() { {r.icon}
{r.label}
-
-
-
+
+
+
{r.value}
))}
- ) + ); } export function Users() { @@ -207,8 +212,8 @@ export function Users() { { label: 'maria@mycompany.com', value: '123', - } - ] + }, + ]; return (
@@ -226,7 +231,7 @@ export function Users() {
))}
- ) + ); } export function Circle({ @@ -234,7 +239,7 @@ export function Circle({ badgeType, }: { children: React.ReactNode; - badgeType: 0 | 1 | 2; + badgeType: 0 | 1 | 2 | 3; }) { const colors = { // frustrations @@ -243,6 +248,8 @@ export function Circle({ 1: '#FFF1F0', // users and domains 2: '#EBF4F5', + // sessions by url + 3: '#E2E4F6', }; return ( @@ -255,5 +262,4 @@ export function Circle({ ); } - -export default ExampleCount \ No newline at end of file +export default ExampleCount; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx index b93dcb374..e84b8932c 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx @@ -3,17 +3,21 @@ import React from 'react' function ExCard({ title, children, + type, + onCard, }: { title: React.ReactNode; children: React.ReactNode; + type: string; + onCard: (card: string) => void; }) { return (
{title}
-
{children}
+
onCard(type)}>{children}
); } diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx index e3989fb9c..5e9f41f87 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx @@ -3,7 +3,7 @@ import React from 'react'; import ExCard from './ExCard'; -function ExampleFunnel() { +function ExampleFunnel({ onCard }: { onCard: (card: string) => void }) { const steps = [ { progress: 500, @@ -16,7 +16,11 @@ function ExampleFunnel() { }, ]; return ( - + <> {steps.map((step, index) => (
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx index 7c7669532..cc2ab61c1 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx @@ -6,7 +6,7 @@ import CustomNode from 'App/components/shared/Insights/SankeyChart/CustomNode'; import ExCard from './ExCard'; -function ExamplePath() { +function ExamplePath({ onCard }: { onCard: (card: string) => void }) { const data = { nodes: [ { idd: 0, name: 'Home' }, @@ -30,7 +30,11 @@ function ExamplePath() { ], }; return ( - + void }) { const rows = [ ['5K', '1K'], ['4K', '750'], @@ -21,7 +21,11 @@ function PerfBreakdown() { ]; const bgs = ['#E2E4F6', '#A7BFFF', '#394EFF']; return ( - +
{rows.map((r) => ( diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByBrowser.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByBrowser.tsx new file mode 100644 index 000000000..2416c7768 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByBrowser.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +import { Icon } from 'UI'; + +import ExCard from '../ExCard'; +import ByComponent from './Component'; + +function ByBrowser({ onCard }: { onCard: (card: string) => void }) { + const rows = [ + { + label: 'Chrome', + progress: 85, + value: '2.5K', + icon: , + }, + { + label: 'Edge', + progress: 25, + value: '405', + icon: , + }, + { + label: 'Safari', + progress: 5, + value: '302', + icon: , + }, + { + label: 'Firefox', + progress: 3, + value: '194', + icon: , + }, + { + label: 'Opera', + progress: 1, + value: '57', + icon: , + }, + ]; + + const lineWidth = 200; + return ( + + ); +} + +export default ByBrowser; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByCountry.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByCountry.tsx new file mode 100644 index 000000000..920258f6e --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByCountry.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +import { Icon } from 'UI'; + +import ByComponent from './Component'; + +function ByCountry({ onCard }: { onCard: (card: string) => void }) { + const rows = [ + { + label: 'United States', + progress: 70, + value: '165K', + icon: , + }, + { + label: 'India', + progress: 25, + value: '100K', + icon: , + }, + { + label: 'United Kingdom', + progress: 10, + value: '50K', + icon: , + }, + { + label: 'France', + progress: 7, + value: '30K', + icon: , + }, + { + label: 'Germany', + progress: 4, + value: '20K', + icon: , + }, + ]; + + return ( + + ); +} + +export default ByCountry; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/BySystem.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/BySystem.tsx new file mode 100644 index 000000000..5700d568f --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/BySystem.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import { Icon } from 'UI'; + +import ByComponent from './Component'; + +function BySystem({ onCard }: { onCard: (card: string) => void }) { + const rows = [ + { + label: 'Windows', + progress: 75, + value: '2.5K', + icon: , + }, + { + label: 'MacOS', + progress: 25, + value: '405', + icon: , + }, + { + label: 'Ubuntu', + progress: 10, + value: '302', + icon: , + }, + { + label: 'Fedora', + progress: 7, + value: '302', + icon: , + }, + { + label: 'Unknown', + progress: 4, + value: '194', + icon: , + }, + ]; + + const lineWidth = 200; + return ( + + ); +} + +export default BySystem; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx new file mode 100644 index 000000000..f648beef9 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx @@ -0,0 +1,104 @@ +import { LinkOutlined } from '@ant-design/icons'; +import { Segmented } from 'antd'; +import React from 'react'; + +import { Circle } from '../Count'; +import ExCard from '../ExCard'; + +function ByUrl({ onCard }: { onCard: (card: string) => void }) { + const [mode, setMode] = React.useState(0); + const rows = [ + { + label: '/category/womens/dresses', + ptitle: 'Dresses', + value: '500', + progress: 75, + icon: , + }, + { + label: '/search?q=summer+dresses', + ptitle: 'Search: summer dresses', + value: '306', + progress: 60, + icon: , + }, + { + label: '/account/orders', + ptitle: 'Account: Orders', + value: '198', + progress: 30, + icon: , + }, + { + label: '/checkout/confirmation', + ptitle: 'Checkout: Confirmation', + value: '47', + progress: 15, + icon: , + }, + { + label: '/checkout/payment', + ptitle: 'Checkout: Payment', + value: '5', + progress: 5, + icon: , + }, + ]; + + const lineWidth = 240; + return ( + +
Sessions by
+
setMode(Number(v))} + /> +
+
+ } + > +
+ {rows.map((r) => ( +
+ {r.icon} +
+
{mode === 0 ? r.label : r.ptitle}
+
+
+
+
+
+
{r.value}
+
+ ))} +
+ + ); +} + +export default ByUrl; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx new file mode 100644 index 000000000..45783145d --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx @@ -0,0 +1,59 @@ +import ExCard from '../ExCard' +import React from 'react' + +function ByComponent({ title, rows, lineWidth, onCard, type }: { + title: string + rows: { + label: string + progress: number + value: string + icon: React.ReactNode + }[] + onCard: (card: string) => void + type: string + lineWidth: number +}) { + return ( + +
+ {rows.map((r) => ( +
+
{r.icon}
+
{r.label}
+
+
+
+
+
{r.value}
+
+ ))} +
+ + ) +} + +export default ByComponent \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByErrors.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByErrors.tsx index fd8a9f776..e1fbe01ac 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByErrors.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByErrors.tsx @@ -2,9 +2,11 @@ import React from 'react' import ExCard from "./ExCard"; import { Errors } from "./Count"; -function SessionsByErrors() { +function SessionsByErrors({ onCard }: { onCard: (card: string) => void }) { return ( diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx index 2c9f57afb..044f4c4c3 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx @@ -2,9 +2,11 @@ import React from 'react' import ExCard from "./ExCard"; import { Frustrations } from "./Count"; -function SessionsByIssues() { +function SessionsByIssues({ onCard }: { onCard: (card: string) => void }) { return ( diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx index 1233fe9f8..3f055b078 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Circle } from './Count'; import ExCard from './ExCard'; -function SlowestDomain() { +function SlowestDomain({ onCard }: { onCard: (card: string) => void }) { const rows = [ { label: 'kroger.com', @@ -41,7 +41,11 @@ function SlowestDomain() { const lineWidth = 240; return ( - +
{rows.map((r) => (
void }) { const rows = [50, 40, 30, 20, 10]; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; const [isMulti, setIsMulti] = React.useState(false); return (
Trend
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/index.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/index.tsx index 48ce0f714..42b7714a2 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/index.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/index.tsx @@ -3,116 +3,172 @@ import { Activity, BarChart, TableCellsMerge, TrendingUp } from 'lucide-react'; import React from 'react'; import { Modal } from 'UI'; -import ExampleCount from "./Examples/Count"; +import ExampleCount from './Examples/Count'; import ExampleFunnel from './Examples/Funnel'; import ExamplePath from './Examples/Path'; -import PerfBreakdown from "./Examples/PerfBreakdown"; -import SessionsByErrors from "./Examples/SessionsByErrors"; -import SessionsByIssues from "./Examples/SessionsByIssues"; -import SlowestDomain from "./Examples/SlowestDomain"; +import PerfBreakdown from './Examples/PerfBreakdown'; +import ByBrowser from './Examples/SessionsBy/ByBrowser'; +import ByCountry from './Examples/SessionsBy/ByCountry'; +import BySystem from './Examples/SessionsBy/BySystem'; +import ByUrl from './Examples/SessionsBy/ByUrl'; +import SessionsByErrors from './Examples/SessionsByErrors'; +import SessionsByIssues from './Examples/SessionsByIssues'; +import SlowestDomain from './Examples/SlowestDomain'; import ExampleTrend from './Examples/Trend'; function NewDashboardModal(props: { onClose: () => void; open: boolean }) { - const initial = 'performance-monitoring' //'product-analytics'; - const [selected, setSelected] = React.useState(initial); - let item; - switch (selected) { - case 'product-analytics': - item = - break; - case 'performance-monitoring': - item = - break; - default: - item =
under construction
- break; - } + const [step, setStep] = React.useState(0); + + const onCard = (card: string) => { + console.log(card); + }; return (
-
-
- Select your first card type to add to the dashboard -
-
- Close -
-
-
- - -
Product Analytics
-
- ), - value: 'product-analytics', - }, - { - label: ( -
- -
Performance Monitoring
-
- ), - value: 'performance-monitoring', - }, - { - label: ( -
- -
Web Analytics
-
- ), - value: 'web-analytics', - }, - { - label: ( -
- -
Core Web Vitals
-
- ), - value: 'core-web-vitals', - }, - ]} - onChange={(v) => setSelected(v)} - /> - -
- {item} -
-
+ {step === 0 ? ( + + ) : null}
); } -function ProductAnalytics() { +function SelectCard({ + onClose, + onCard, +}: { + onClose: () => void; + onCard: (card: string) => void; +}) { + const initial = 'product-analytics'; + const [selected, setSelected] = React.useState(initial); + let item; + switch (selected) { + case 'product-analytics': + item = ; + break; + case 'performance-monitoring': + item = ; + break; + case 'web-analytics': + item = ; + break; + case 'core-web-vitals': + item = ; + break; + default: + item =
under construction
; + break; + } return ( <> - - - - +
+
+ Select your first card type to add to the dashboard +
+
+ Close +
+
+
+ + +
Product Analytics
+
+ ), + value: 'product-analytics', + }, + { + label: ( +
+ +
Performance Monitoring
+
+ ), + value: 'performance-monitoring', + }, + { + label: ( +
+ +
Web Analytics
+
+ ), + value: 'web-analytics', + }, + { + label: ( +
+ +
Core Web Vitals
+
+ ), + value: 'core-web-vitals', + }, + ]} + onChange={(v) => setSelected(v)} + /> + +
+ {item} +
+
- ) + ); } -function PerformanceMonitoring() { +function ProductAnalytics({ onCard }: { onCard: (card: string) => void }) { return ( <> - - - - + + + + - ) + ); +} + +function PerformanceMonitoring({ onCard }: { onCard: (card: string) => void }) { + return ( + <> + + + + + + ); +} + +function WebAnalytics({ onCard }: { onCard: (card: string) => void }) { + return ( + <> + + + + + + ); +} + +function CoreWebVitals({ onCard }: { onCard: (card: string) => void }) { + return ( + <> + + + + + + ); } export default NewDashboardModal; diff --git a/frontend/app/components/ui/Icons/color_apple.tsx b/frontend/app/components/ui/Icons/color_apple.tsx new file mode 100644 index 000000000..fd2d70368 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_apple.tsx @@ -0,0 +1,23 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_apple(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + ); +} + +export default Color_apple; diff --git a/frontend/app/components/ui/Icons/color_chrome.tsx b/frontend/app/components/ui/Icons/color_chrome.tsx new file mode 100644 index 000000000..b3afbb0c2 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_chrome.tsx @@ -0,0 +1,35 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_chrome(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + ); +} + +export default Color_chrome; diff --git a/frontend/app/components/ui/Icons/color_de.tsx b/frontend/app/components/ui/Icons/color_de.tsx new file mode 100644 index 000000000..fda367e2b --- /dev/null +++ b/frontend/app/components/ui/Icons/color_de.tsx @@ -0,0 +1,32 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_de(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + ); +} + +export default Color_de; diff --git a/frontend/app/components/ui/Icons/color_edge.tsx b/frontend/app/components/ui/Icons/color_edge.tsx new file mode 100644 index 000000000..4b87cda44 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_edge.tsx @@ -0,0 +1,48 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_edge(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_edge; diff --git a/frontend/app/components/ui/Icons/color_fedora.tsx b/frontend/app/components/ui/Icons/color_fedora.tsx new file mode 100644 index 000000000..cee809d8d --- /dev/null +++ b/frontend/app/components/ui/Icons/color_fedora.tsx @@ -0,0 +1,24 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_fedora(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + ); +} + +export default Color_fedora; diff --git a/frontend/app/components/ui/Icons/color_firefox.tsx b/frontend/app/components/ui/Icons/color_firefox.tsx new file mode 100644 index 000000000..14599d88d --- /dev/null +++ b/frontend/app/components/ui/Icons/color_firefox.tsx @@ -0,0 +1,125 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_firefox(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_firefox; diff --git a/frontend/app/components/ui/Icons/color_fr.tsx b/frontend/app/components/ui/Icons/color_fr.tsx new file mode 100644 index 000000000..63096a3ab --- /dev/null +++ b/frontend/app/components/ui/Icons/color_fr.tsx @@ -0,0 +1,32 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_fr(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + ); +} + +export default Color_fr; diff --git a/frontend/app/components/ui/Icons/color_gb.tsx b/frontend/app/components/ui/Icons/color_gb.tsx new file mode 100644 index 000000000..dca48c674 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_gb.tsx @@ -0,0 +1,44 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_gb(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_gb; diff --git a/frontend/app/components/ui/Icons/color_in.tsx b/frontend/app/components/ui/Icons/color_in.tsx new file mode 100644 index 000000000..238230446 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_in.tsx @@ -0,0 +1,39 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_in(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_in; diff --git a/frontend/app/components/ui/Icons/color_microsoft.tsx b/frontend/app/components/ui/Icons/color_microsoft.tsx new file mode 100644 index 000000000..dc87acf25 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_microsoft.tsx @@ -0,0 +1,25 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_microsoft(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + ); +} + +export default Color_microsoft; diff --git a/frontend/app/components/ui/Icons/color_opera.tsx b/frontend/app/components/ui/Icons/color_opera.tsx new file mode 100644 index 000000000..9baa333ed --- /dev/null +++ b/frontend/app/components/ui/Icons/color_opera.tsx @@ -0,0 +1,37 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_opera(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_opera; diff --git a/frontend/app/components/ui/Icons/color_safari.tsx b/frontend/app/components/ui/Icons/color_safari.tsx new file mode 100644 index 000000000..ab79ee3da --- /dev/null +++ b/frontend/app/components/ui/Icons/color_safari.tsx @@ -0,0 +1,172 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_safari(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_safari; diff --git a/frontend/app/components/ui/Icons/color_ubuntu.tsx b/frontend/app/components/ui/Icons/color_ubuntu.tsx new file mode 100644 index 000000000..3a001b2f4 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_ubuntu.tsx @@ -0,0 +1,23 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_ubuntu(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + ); +} + +export default Color_ubuntu; diff --git a/frontend/app/components/ui/Icons/color_us.tsx b/frontend/app/components/ui/Icons/color_us.tsx new file mode 100644 index 000000000..8cb83e9b5 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_us.tsx @@ -0,0 +1,39 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_us(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_us; diff --git a/frontend/app/components/ui/Icons/index.ts b/frontend/app/components/ui/Icons/index.ts index d50dc4e9b..736064750 100644 --- a/frontend/app/components/ui/Icons/index.ts +++ b/frontend/app/components/ui/Icons/index.ts @@ -113,6 +113,20 @@ export { default as Cog } from './cog'; export { default as Cogs } from './cogs'; export { default as Collection_play } from './collection_play'; export { default as Collection } from './collection'; +export { default as Color_apple } from './color_apple'; +export { default as Color_chrome } from './color_chrome'; +export { default as Color_de } from './color_de'; +export { default as Color_edge } from './color_edge'; +export { default as Color_fedora } from './color_fedora'; +export { default as Color_firefox } from './color_firefox'; +export { default as Color_fr } from './color_fr'; +export { default as Color_gb } from './color_gb'; +export { default as Color_in } from './color_in'; +export { default as Color_microsoft } from './color_microsoft'; +export { default as Color_opera } from './color_opera'; +export { default as Color_safari } from './color_safari'; +export { default as Color_ubuntu } from './color_ubuntu'; +export { default as Color_us } from './color_us'; export { default as Columns_gap_filled } from './columns_gap_filled'; export { default as Columns_gap } from './columns_gap'; export { default as Console_error } from './console_error'; diff --git a/frontend/app/components/ui/Icons/integrations_apple.tsx b/frontend/app/components/ui/Icons/integrations_apple.tsx new file mode 100644 index 000000000..b84ea4d9c --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_apple.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 Integrations_apple(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_apple; diff --git a/frontend/app/components/ui/Icons/integrations_chrome.tsx b/frontend/app/components/ui/Icons/integrations_chrome.tsx new file mode 100644 index 000000000..88574badb --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_chrome.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 Integrations_chrome(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_chrome; diff --git a/frontend/app/components/ui/Icons/integrations_edge.tsx b/frontend/app/components/ui/Icons/integrations_edge.tsx new file mode 100644 index 000000000..75a19ef28 --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_edge.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 Integrations_edge(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_edge; diff --git a/frontend/app/components/ui/Icons/integrations_fedora.tsx b/frontend/app/components/ui/Icons/integrations_fedora.tsx new file mode 100644 index 000000000..c4f344afc --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_fedora.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 Integrations_fedora(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_fedora; diff --git a/frontend/app/components/ui/Icons/integrations_firefox.tsx b/frontend/app/components/ui/Icons/integrations_firefox.tsx new file mode 100644 index 000000000..e196e1cb2 --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_firefox.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 Integrations_firefox(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_firefox; diff --git a/frontend/app/components/ui/Icons/integrations_microsoft.tsx b/frontend/app/components/ui/Icons/integrations_microsoft.tsx new file mode 100644 index 000000000..bdc0e6a0c --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_microsoft.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 Integrations_microsoft(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_microsoft; diff --git a/frontend/app/components/ui/Icons/integrations_opera.tsx b/frontend/app/components/ui/Icons/integrations_opera.tsx new file mode 100644 index 000000000..3fe1eb35e --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_opera.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 Integrations_opera(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_opera; diff --git a/frontend/app/components/ui/Icons/integrations_safari.tsx b/frontend/app/components/ui/Icons/integrations_safari.tsx new file mode 100644 index 000000000..b2e7068ce --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_safari.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 Integrations_safari(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_safari; diff --git a/frontend/app/components/ui/Icons/integrations_ubuntu.tsx b/frontend/app/components/ui/Icons/integrations_ubuntu.tsx new file mode 100644 index 000000000..1f5b1abc6 --- /dev/null +++ b/frontend/app/components/ui/Icons/integrations_ubuntu.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 Integrations_ubuntu(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Integrations_ubuntu; diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index 7c42917a6..0543bd6de 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -115,6 +115,20 @@ import { Cogs, Collection_play, Collection, + Color_apple, + Color_chrome, + Color_de, + Color_edge, + Color_fedora, + Color_firefox, + Color_fr, + Color_gb, + Color_in, + Color_microsoft, + Color_opera, + Color_safari, + Color_ubuntu, + Color_us, Columns_gap_filled, Columns_gap, Console_error, @@ -476,7 +490,7 @@ import { Zoom_in } from './Icons' -export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down-up' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_avatar1' | 'avatar/icn_avatar10' | 'avatar/icn_avatar11' | 'avatar/icn_avatar12' | 'avatar/icn_avatar13' | 'avatar/icn_avatar14' | 'avatar/icn_avatar15' | 'avatar/icn_avatar16' | 'avatar/icn_avatar17' | 'avatar/icn_avatar18' | 'avatar/icn_avatar19' | 'avatar/icn_avatar2' | 'avatar/icn_avatar20' | 'avatar/icn_avatar21' | 'avatar/icn_avatar22' | 'avatar/icn_avatar23' | 'avatar/icn_avatar3' | 'avatar/icn_avatar4' | 'avatar/icn_avatar5' | 'avatar/icn_avatar6' | 'avatar/icn_avatar7' | 'avatar/icn_avatar8' | 'avatar/icn_avatar9' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'battery-charging' | 'battery' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'bookmark' | 'broadcast' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-list' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-left-text' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-check' | 'clipboard-list-check' | 'clock-history' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection-play' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-2-back' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'db-icons/icn-card-clickMap' | 'db-icons/icn-card-errors' | 'db-icons/icn-card-funnel' | 'db-icons/icn-card-funnels' | 'db-icons/icn-card-insights' | 'db-icons/icn-card-library' | 'db-icons/icn-card-mapchart' | 'db-icons/icn-card-pathAnalysis' | 'db-icons/icn-card-performance' | 'db-icons/icn-card-resources' | 'db-icons/icn-card-table' | 'db-icons/icn-card-timeseries' | 'db-icons/icn-card-webVitals' | 'desktop' | 'device' | 'diagram-3' | 'dice-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'emoji-dizzy' | 'enter' | 'envelope-check' | 'envelope-paper' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'exclamation-triangle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-bar-graph' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filetype-js' | 'filetype-pdf' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/tag-element' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'integrations/zustand' | 'journal-code' | 'key' | 'keyboard' | 'layer-group' | 'layers-half' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'low-disc-space' | 'magic' | 'map-marker-alt' | 'memory-ios' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'mouse-pointer-click' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-circle-fill' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle-fill' | 'record-circle' | 'record2' | 'redo-back' | 'redo' | 'redux' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'side_menu_closed' | 'side_menu_open' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'sparkles' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'terminal' | 'text-paragraph' | 'thermometer-sun' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'user-switch' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; +export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down-up' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_avatar1' | 'avatar/icn_avatar10' | 'avatar/icn_avatar11' | 'avatar/icn_avatar12' | 'avatar/icn_avatar13' | 'avatar/icn_avatar14' | 'avatar/icn_avatar15' | 'avatar/icn_avatar16' | 'avatar/icn_avatar17' | 'avatar/icn_avatar18' | 'avatar/icn_avatar19' | 'avatar/icn_avatar2' | 'avatar/icn_avatar20' | 'avatar/icn_avatar21' | 'avatar/icn_avatar22' | 'avatar/icn_avatar23' | 'avatar/icn_avatar3' | 'avatar/icn_avatar4' | 'avatar/icn_avatar5' | 'avatar/icn_avatar6' | 'avatar/icn_avatar7' | 'avatar/icn_avatar8' | 'avatar/icn_avatar9' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'battery-charging' | 'battery' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'bookmark' | 'broadcast' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-list' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-left-text' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-check' | 'clipboard-list-check' | 'clock-history' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection-play' | 'collection' | 'color/apple' | 'color/chrome' | 'color/de' | 'color/edge' | 'color/fedora' | 'color/firefox' | 'color/fr' | 'color/gb' | 'color/in' | 'color/microsoft' | 'color/opera' | 'color/safari' | 'color/ubuntu' | 'color/us' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-2-back' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'db-icons/icn-card-clickMap' | 'db-icons/icn-card-errors' | 'db-icons/icn-card-funnel' | 'db-icons/icn-card-funnels' | 'db-icons/icn-card-insights' | 'db-icons/icn-card-library' | 'db-icons/icn-card-mapchart' | 'db-icons/icn-card-pathAnalysis' | 'db-icons/icn-card-performance' | 'db-icons/icn-card-resources' | 'db-icons/icn-card-table' | 'db-icons/icn-card-timeseries' | 'db-icons/icn-card-webVitals' | 'desktop' | 'device' | 'diagram-3' | 'dice-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'emoji-dizzy' | 'enter' | 'envelope-check' | 'envelope-paper' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'exclamation-triangle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-bar-graph' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filetype-js' | 'filetype-pdf' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/tag-element' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'integrations/zustand' | 'journal-code' | 'key' | 'keyboard' | 'layer-group' | 'layers-half' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'low-disc-space' | 'magic' | 'map-marker-alt' | 'memory-ios' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'mouse-pointer-click' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-circle-fill' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle-fill' | 'record-circle' | 'record2' | 'redo-back' | 'redo' | 'redux' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'side_menu_closed' | 'side_menu_open' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'sparkles' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'terminal' | 'text-paragraph' | 'thermometer-sun' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'user-switch' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; interface Props { name: IconNames; @@ -830,6 +844,48 @@ const SVG = (props: Props) => { case 'collection': return ; + // case 'color/apple': + case 'color/apple': return ; + + // case 'color/chrome': + case 'color/chrome': return ; + + // case 'color/de': + case 'color/de': return ; + + // case 'color/edge': + case 'color/edge': return ; + + // case 'color/fedora': + case 'color/fedora': return ; + + // case 'color/firefox': + case 'color/firefox': return ; + + // case 'color/fr': + case 'color/fr': return ; + + // case 'color/gb': + case 'color/gb': return ; + + // case 'color/in': + case 'color/in': return ; + + // case 'color/microsoft': + case 'color/microsoft': return ; + + // case 'color/opera': + case 'color/opera': return ; + + // case 'color/safari': + case 'color/safari': return ; + + // case 'color/ubuntu': + case 'color/ubuntu': return ; + + // case 'color/us': + case 'color/us': return ; + // case 'columns-gap-filled': case 'columns-gap-filled': return ; diff --git a/frontend/app/svg/icons/color/apple.svg b/frontend/app/svg/icons/color/apple.svg new file mode 100644 index 000000000..07cf9df31 --- /dev/null +++ b/frontend/app/svg/icons/color/apple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/app/svg/icons/color/chrome.svg b/frontend/app/svg/icons/color/chrome.svg new file mode 100644 index 000000000..3b4a4f692 --- /dev/null +++ b/frontend/app/svg/icons/color/chrome.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/de.svg b/frontend/app/svg/icons/color/de.svg new file mode 100644 index 000000000..c22cf3eca --- /dev/null +++ b/frontend/app/svg/icons/color/de.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/edge.svg b/frontend/app/svg/icons/color/edge.svg new file mode 100644 index 000000000..dc9be4e87 --- /dev/null +++ b/frontend/app/svg/icons/color/edge.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/fedora.svg b/frontend/app/svg/icons/color/fedora.svg new file mode 100644 index 000000000..222750cf9 --- /dev/null +++ b/frontend/app/svg/icons/color/fedora.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/app/svg/icons/color/firefox.svg b/frontend/app/svg/icons/color/firefox.svg new file mode 100644 index 000000000..768aff4d7 --- /dev/null +++ b/frontend/app/svg/icons/color/firefox.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/fr.svg b/frontend/app/svg/icons/color/fr.svg new file mode 100644 index 000000000..af130683d --- /dev/null +++ b/frontend/app/svg/icons/color/fr.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/gb.svg b/frontend/app/svg/icons/color/gb.svg new file mode 100644 index 000000000..5fe9fa63e --- /dev/null +++ b/frontend/app/svg/icons/color/gb.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/in.svg b/frontend/app/svg/icons/color/in.svg new file mode 100644 index 000000000..1a17c7e3d --- /dev/null +++ b/frontend/app/svg/icons/color/in.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/microsoft.svg b/frontend/app/svg/icons/color/microsoft.svg new file mode 100644 index 000000000..a86e81f4f --- /dev/null +++ b/frontend/app/svg/icons/color/microsoft.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/app/svg/icons/color/opera.svg b/frontend/app/svg/icons/color/opera.svg new file mode 100644 index 000000000..9afe512b6 --- /dev/null +++ b/frontend/app/svg/icons/color/opera.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/safari.svg b/frontend/app/svg/icons/color/safari.svg new file mode 100644 index 000000000..e1c17c729 --- /dev/null +++ b/frontend/app/svg/icons/color/safari.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/color/ubuntu.svg b/frontend/app/svg/icons/color/ubuntu.svg new file mode 100644 index 000000000..7aadbab19 --- /dev/null +++ b/frontend/app/svg/icons/color/ubuntu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/app/svg/icons/color/us.svg b/frontend/app/svg/icons/color/us.svg new file mode 100644 index 000000000..1e6ffa7d8 --- /dev/null +++ b/frontend/app/svg/icons/color/us.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/scripts/icons.js b/frontend/scripts/icons.js index f79387b6f..beecbfe44 100644 --- a/frontend/scripts/icons.js +++ b/frontend/scripts/icons.js @@ -64,10 +64,8 @@ icons.forEach((icon) => { iconPaths.push({ path: `./Icons/${name}`, name, oldName: icon.slice(0, -4), fileName }); const svg = fs.readFileSync(`${ICONS_DIRNAME}/${icon}`, 'utf-8'); const canOptimize = !icon.includes('integrations'); - const { data } = optimize(svg, plugins(canOptimize)); - if (titleCase(fileName) === 'Integrations_slack_bw') { - console.log(data, svg) - } + const keepOriginal = icon.includes('color') + const { data } = keepOriginal ? { data: svg } : optimize(svg, plugins(canOptimize)); fs.writeFileSync(path, ` /* Auto-generated, do not edit */ import React from 'react';