style: Fix style inconsistencies (#1536)

pulpdrew · web-flow · commit e78960f3bbee · 2025-12-30T17:02:35.000Z
# Summary This PR fixes various minor style issues and inconsistencies throughout the app. ## Changes | Consistent ... Button Size in DBEditTimeChart | | | ----------- | ------ | | Before | <img width="708" height="74" alt="Screenshot 2025-12-30 at 8 23 01 AM" src="https://github.com/user-attachments/assets/6d6a967d-d5d6-474c-8ff8-4983b0560c5a" /> | | After | <img width="708" height="88" alt="Screenshot 2025-12-30 at 8 19 09 AM" src="https://github.com/user-attachments/assets/78cc0ca6-ab2e-4ac3-8c9e-5cd7bbd1bb58" /> | | Add gap between DBEditTimeChart buttons | | | ----------- | ------ | | Before | <img width="415" height="63" alt="Screenshot 2025-12-30 at 8 25 54 AM" src="https://github.com/user-attachments/assets/10ee3481-5753-438d-8685-dc7174afc00c" /> | | After | <img width="443" height="58" alt="Screenshot 2025-12-30 at 8 25 23 AM" src="https://github.com/user-attachments/assets/6fe6321f-1dc6-4655-9945-495864847881" />| | Replace spinner-border with working loading indicators | | | ----------- | ------ | | Before (loading indicators missing) | <img width="455" height="324" alt="Screenshot 2025-12-30 at 8 32 34 AM" src="https://github.com/user-attachments/assets/9556cd76-dc2c-40cb-8115-2f0ac21ce120" /> | | After | <img width="448" height="242" alt="Screenshot 2025-12-30 at 8 32 46 AM" src="https://github.com/user-attachments/assets/e496abe8-81b6-4d9c-b2f5-c6b4346c3966" /> <img width="236" height="51" alt="Screenshot 2025-12-30 at 8 43 25 AM" src="https://github.com/user-attachments/assets/cbaccd4a-53df-4cd4-a9a6-80a77cdd4e98" /> <img width="206" height="68" alt="Screenshot 2025-12-30 at 8 43 30 AM" src="https://github.com/user-attachments/assets/9db4bb86-52e8-4dc5-ac08-a2efb941a5e5" /> | | Make histogram display switch consistent with other charts | | | ----------- | ------ | | Before | <img width="755" height="474" alt="Screenshot 2025-12-30 at 8 54 57 AM" src="https://github.com/user-attachments/assets/ccb739b3-45c4-4310-8599-79596c05ae6f" /> | | After | <img width="377" height="224" alt="Screenshot 2025-12-30 at 8 54 24 AM" src="https://github.com/user-attachments/assets/b767801c-d8cd-4dbf-86db-ba5d97cde7ba" /> | | Make dashboard toolbar gaps consistent | | | ----------- | ------ | | Before | <img width="889" height="63" alt="Screenshot 2025-12-30 at 9 00 22 AM" src="https://github.com/user-attachments/assets/2c210a00-18cf-41d3-8ded-61d061e1be93" /> | | After | <img width="884" height="56" alt="Screenshot 2025-12-30 at 8 59 16 AM" src="https://github.com/user-attachments/assets/0d90238e-74b9-4692-8a8e-ac8bbdd3d8d9" /> | | Make DBEditTimeChart play button margin consistent | | | ----------- | ------ | | Before | <img width="670" height="146" alt="Screenshot 2025-12-30 at 9 04 44 AM" src="https://github.com/user-attachments/assets/4705083b-8308-41d0-987d-9d2fa6eefc80" /> | | After | <img width="671" height="173" alt="Screenshot 2025-12-30 at 9 03 31 AM" src="https://github.com/user-attachments/assets/10da8177-480f-4bb5-b54d-1f4e69e89a47" /> |
diff --git a/.changeset/silver-dragons-drive.md b/.changeset/silver-dragons-drive.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+style: Fix style inconsistencies
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
@@ -1095,7 +1095,6 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         >
           <Button
             onClick={() => setIsLive(prev => !prev)}
-            mr={6}
             size="sm"
             variant={isLive ? 'filled' : 'default'}
             title={isLive ? 'Disable auto-refresh' : 'Enable auto-refresh'}
@@ -1108,7 +1107,6 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             onClick={refresh}
             loading={manualRefreshCooloff}
             disabled={manualRefreshCooloff}
-            mr={6}
             variant="default"
             title="Refresh dashboard"
             px="xs"
@@ -1121,7 +1119,6 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             <Button
               variant="default"
               px="xs"
-              mr={6}
               onClick={() => setShowFiltersModal(true)}
             >
               <IconFilterEdit strokeWidth={1} />
diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
@@ -3,14 +3,15 @@ import cx from 'classnames';
 import throttle from 'lodash/throttle';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Replayer } from 'rrweb';
-import { ActionIcon, CopyButton, HoverCard } from '@mantine/core';
+import { ActionIcon, CopyButton, Group, HoverCard } from '@mantine/core';
 import {
   IconArrowsMaximize,
   IconCheck,
   IconCopy,
   IconGlobe,
   IconLink,
   IconList,
+  IconRefresh,
 } from '@tabler/icons-react';
 
 import { useRRWebEventStream } from '@/sessions';
@@ -507,12 +508,10 @@ export default function DOMPlayer({
 
       <div className={styles.playerContainer}>
         {isLoading || isBuffering ? (
-          <div className="text-center">
-            <div className="spinner-border" role="status" />
-            <div className="mt-2">
-              {isBuffering ? 'Buffering to time...' : 'Loading replay...'}
-            </div>
-          </div>
+          <Group align="center" justify="center" gap="xs">
+            <IconRefresh className="spin-animate" size={14} />
+            {isBuffering ? 'Buffering to time...' : 'Loading replay...'}
+          </Group>
         ) : isReplayFullyLoaded && replayer.current == null ? (
           <div className="text-center">
             No replay available for this session, most likely due to this
diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import dynamic from 'next/dynamic';
+import cx from 'classnames';
 import { pick } from 'lodash';
 import {
   parseAsString,
@@ -21,6 +22,7 @@ import {
   TSource,
 } from '@hyperdx/common-utils/dist/types';
 import {
+  ActionIcon,
   Box,
   Button,
   Grid,
@@ -216,29 +218,34 @@ export function EndpointLatencyChart({
     <ChartBox style={{ height: 350 }}>
       <Group justify="space-between" align="center" mb="sm">
         <Text size="sm">Request Latency</Text>
-        <Box>
-          <Button.Group>
-            <Button
-              variant="subtle"
-              color={latencyChartType === 'line' ? 'green' : 'gray'}
+        <div className="bg-muted px-2 py-1 rounded fs-8">
+          <Tooltip label="Display as Line Chart">
+            <ActionIcon
               size="xs"
-              title="Line Chart"
+              me={2}
+              className={cx({
+                'text-success': latencyChartType === 'line',
+                'text-muted-hover': latencyChartType !== 'line',
+              })}
               onClick={() => setLatencyChartType('line')}
             >
-              <IconChartLine size={14} />
-            </Button>
+              <IconChartLine />
+            </ActionIcon>
+          </Tooltip>
 
-            <Button
-              variant="subtle"
-              color={latencyChartType === 'histogram' ? 'green' : 'gray'}
+          <Tooltip label="Display as Histogram">
+            <ActionIcon
               size="xs"
-              title="Histogram"
+              className={cx({
+                'text-success': latencyChartType === 'histogram',
+                'text-muted-hover': latencyChartType !== 'histogram',
+              })}
               onClick={() => setLatencyChartType('histogram')}
             >
-              <IconChartHistogram size={14} />
-            </Button>
-          </Button.Group>
-        </Box>
+              <IconChartHistogram />
+            </ActionIcon>
+          </Tooltip>
+        </div>
       </Group>
       {source &&
         expressions &&
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
@@ -1,51 +1,36 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Head from 'next/head';
 import { sub } from 'date-fns';
-import {
-  parseAsString,
-  parseAsStringEnum,
-  useQueryState,
-  useQueryStates,
-} from 'nuqs';
+import { parseAsString, parseAsStringEnum, useQueryStates } from 'nuqs';
 import { useForm, useWatch } from 'react-hook-form';
 import { NumberParam } from 'serialize-query-params';
-import {
-  StringParam,
-  useQueryParam,
-  useQueryParams,
-  withDefault,
-} from 'use-query-params';
+import { StringParam, useQueryParams, withDefault } from 'use-query-params';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
 import {
-  DateRange,
   SearchCondition,
   SearchConditionLanguage,
   SourceKind,
-  TSource,
 } from '@hyperdx/common-utils/dist/types';
 import {
   Alert,
   Box,
   Button,
+  Center,
   Flex,
-  Grid,
   Group,
-  SegmentedControl,
   Stack,
-  Tabs,
   Text,
 } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
 import {
   IconDeviceLaptop,
   IconInfoCircleFilled,
   IconPlayerPlay,
+  IconRefresh,
 } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { SourceSelectControlled } from '@/components/SourceSelect';
 import { TimePicker } from '@/components/TimePicker';
-import { getMetadata } from '@/metadata';
 import { parseTimeQuery, useNewTimeQuery } from '@/timeQuery';
 
 import { SQLInlineEditorControlled } from './components/SQLInlineEditor';
@@ -137,14 +122,10 @@ function SessionCardList({
   return (
     <>
       {isSessionLoading === true && (
-        <div className="text-center mt-8">
-          <div
-            className="spinner-border me-2"
-            role="status"
-            style={{ width: 14, height: 14 }}
-          />
+        <Group mt="md" align="center" justify="center" gap="xs">
+          <IconRefresh className="spin-animate" size={14} />
           Searching sessions...
-        </div>
+        </Group>
       )}
       {!isSessionLoading && sessions.length === 0 && (
         <div className="text-center align-items-center justify-content-center my-3">
@@ -503,14 +484,10 @@ export default function SessionsPage() {
         </form>
 
         {isSessionsLoading || isSessionSourceLoading ? (
-          <div className="text-center mt-8">
-            <div
-              className="spinner-border me-2"
-              role="status"
-              style={{ width: 14, height: 14 }}
-            />
+          <Group mt="md" align="center" justify="center" gap="xs">
+            <IconRefresh className="spin-animate" size={14} />
             {isSessionSourceLoading ? 'Loading...' : 'Searching sessions...'}
-          </div>
+          </Group>
         ) : (
           <>
             {sessionSource && sessionSource.kind !== SourceKind.Session && (
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -919,7 +919,7 @@ export default function EditTimeChartForm({
               )}
               <Divider mt="md" mb="sm" />
               <Flex mt={4} align="center" justify="space-between">
-                <Group gap={0}>
+                <Group gap="xs">
                   {displayType !== DisplayType.Number && (
                     <Button
                       variant="subtle"
@@ -1105,7 +1105,7 @@ export default function EditTimeChartForm({
             </Button>
           )}
         </Flex>
-        <Flex gap="sm" my="sm" align="center" justify="end">
+        <Flex gap="sm" mb="sm" align="center" justify="end">
           {activeTab === 'table' && (
             <div style={{ minWidth: 300 }}>
               <SQLInlineEditorControlled
@@ -1152,7 +1152,7 @@ export default function EditTimeChartForm({
           {!IS_LOCAL_MODE && !dashboardId && (
             <Menu width={250}>
               <Menu.Target>
-                <Button variant="outline" color="gray" px="xs" size="xs">
+                <Button variant="outline" color="gray" px="xs" size="sm">
                   <IconDotsVertical size={14} />
                 </Button>
               </Menu.Target>
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -630,7 +630,9 @@ export const FilterGroup = ({
                       role="checkbox"
                     >
                       {isFetchingDistribution ? (
-                        <span className="spinner-border spinner-border-sm" />
+                        <Center>
+                          <IconRefresh className="spin-animate" size={12} />
+                        </Center>
                       ) : showDistributions ? (
                         <IconChartBarOff size={14} />
                       ) : (

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@hyperdx/app": patch
 +---
++
 +style: Fix style inconsistencies