style: improve visuals by changing icons to tabler icons in dashboard…

… and chart (#5071) * fix(client): update icons to tabler icons in chart * fix(client): update icons to tabler icons in dashboard * fix(client): update series search icon with telescope icon * fix(client): update icon button padding to reduce the button size
lightdash · Apr 14, 2023 · bc1e3eb · bc1e3eb
1 parent 505aa8f
commit bc1e3eb
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/packages/frontend/src/components/ExploreFromHereButton/index.tsx b/packages/frontend/src/components/ExploreFromHereButton/index.tsx
@@ -1,4 +1,5 @@
 import { subject } from '@casl/ability';
+import { IconTelescope } from '@tabler/icons-react';
 import { useMemo } from 'react';
 import { getExplorerUrlFromCreateSavedChartVersion } from '../../hooks/useExplorerRoute';
 import { useApp } from '../../providers/AppProvider';
@@ -36,7 +37,7 @@ const ExploreFromHereButton = () => {
         <StyledLinkButton
             intent="primary"
             large
-            icon="series-search"
+            icon={<IconTelescope size={16} />}
             href={exploreFromHereUrl}
         >
             Explore from here

diff --git a/packages/frontend/src/components/Explorer/SavedChartsHeader/index.tsx b/packages/frontend/src/components/Explorer/SavedChartsHeader/index.tsx
@@ -8,7 +8,7 @@ import {
 } from '@blueprintjs/core';
 import { MenuItem2, Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import { subject } from '@casl/ability';
-import { IconPencil } from '@tabler/icons-react';
+import { IconDots, IconPencil } from '@tabler/icons-react';
 import { FC, useEffect, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { useToggle } from 'react-use';
@@ -237,7 +237,7 @@ const SavedChartsHeader: FC = () => {
                         {!isEditMode ? (
                             <>
                                 <Button
-                                    icon="edit"
+                                    icon={<IconPencil size={16} />}
                                     onClick={() =>
                                         history.push({
                                             pathname: `/projects/${savedChart?.projectUuid}/saved/${savedChart?.uuid}/edit`,
@@ -374,7 +374,8 @@ const SavedChartsHeader: FC = () => {
                             }
                         >
                             <Button
-                                icon="more"
+                                style={{ padding: '5px 7px' }}
+                                icon={<IconDots size={16} />}
                                 disabled={!unsavedChartVersion.tableName}
                             />
                         </Popover2>

diff --git a/packages/frontend/src/components/ShareLinkButton/index.tsx b/packages/frontend/src/components/ShareLinkButton/index.tsx
@@ -1,3 +1,4 @@
+import { IconLink } from '@tabler/icons-react';
 import { FC } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import useToaster from '../../hooks/toaster/useToaster';
@@ -15,7 +16,7 @@ const ShareLinkButton: FC<{ url: string }> = ({ url }) => {
                 })
             }
         >
-            <ShareLink icon="link" />
+            <ShareLink icon={<IconLink size={16} />} />
         </CopyToClipboard>
     );
 };

diff --git a/packages/frontend/src/components/common/Dashboard/DashboardHeader.tsx b/packages/frontend/src/components/common/Dashboard/DashboardHeader.tsx
@@ -1,7 +1,7 @@
 import { Button, Classes, Divider, Intent, Menu } from '@blueprintjs/core';
 import { MenuItem2, Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import { Dashboard, Space, UpdatedByUser } from '@lightdash/common';
-import { IconPencil } from '@tabler/icons-react';
+import { IconDots, IconPencil } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { useToggle } from 'react-use';
@@ -188,7 +188,7 @@ const DashboardHeader = ({
             ) : userCanManageDashboard ? (
                 <PageActionsContainer>
                     <Button
-                        icon="edit"
+                        icon={<IconPencil size={16} />}
                         text="Edit dashboard"
                         onClick={() => {
                             history.replace(
@@ -287,7 +287,10 @@ const DashboardHeader = ({
                             </Menu>
                         }
                     >
-                        <Button icon="more" />
+                        <Button
+                            style={{ padding: '5px 7px' }}
+                            icon={<IconDots size={16} />}
+                        />
                     </Popover2>
 
                     {isCreatingNewSpace && (

diff --git a/packages/frontend/src/components/common/ShareShortLinkButton/index.tsx b/packages/frontend/src/components/common/ShareShortLinkButton/index.tsx
@@ -1,3 +1,4 @@
+import { IconLink } from '@tabler/icons-react';
 import copy from 'copy-to-clipboard';
 import React, { FC, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -36,7 +37,7 @@ const ShareShortLinkButton: FC<{ disabled?: boolean }> = ({ disabled }) => {
                 createShareUrl(shareUrl);
             }}
             disabled={isDisabled}
-            icon="link"
+            icon={<IconLink size={16} />}
         />
     );
 };