chore(debt): Move all static style values to classes (#25035)

Co-authored-by: Michael Matloka <[email protected]> Co-authored-by: Michael Matloka <[email protected]> Co-authored-by: Michael Matloka <[email protected]>
PostHog · Sep 23, 2024 · 3d7992d · 3d7992d
1 parent 7b96982
commit 3d7992d
Show file tree

Hide file tree

Showing 34 changed files with 51 additions and 142 deletions.
diff --git a/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png b/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png
diff --git a/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png b/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png
diff --git a/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx b/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx
@@ -159,8 +159,7 @@ export function AddToDashboardModal({
                     This insight is referenced on <strong className="text-text-3000">{currentDashboards.length}</strong>{' '}
                     {pluralize(currentDashboards.length, 'dashboard', 'dashboards', false)}
                 </div>
-                {/* eslint-disable-next-line react/forbid-dom-props */}
-                <div style={{ minHeight: 420 }}>
+                <div className="min-h-[420px]">
                     <AutoSizer>
                         {({ height, width }) => (
                             <List

diff --git a/frontend/src/lib/components/AnimatedCollapsible.tsx b/frontend/src/lib/components/AnimatedCollapsible.tsx
@@ -23,11 +23,10 @@ export function AnimatedCollapsible({
 
     return (
         <div
-            className="collapsible overflow-hidden"
+            className="collapsible overflow-hidden transition-all duration-100 ease-in-out"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 height,
-                transition: 'height 0.1s ease-in-out',
             }}
         >
             <div ref={collapsibleSectionRef}>{children}</div>

diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx b/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
@@ -70,8 +70,7 @@ export const Template: Story = () => {
                     textTile={makeTextTile('showing handles')}
                 />
             </div>
-            {/* eslint-disable-next-line react/forbid-dom-props */}
-            <div className="w-full" style={{ height: '200px' }}>
+            <div className="w-full h-[200px]">
                 <h5>Large Card</h5>
                 <TextCard
                     className="h-full w-full react-grid-item react-draggable cssTransforms react-resizable"

diff --git a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
@@ -216,8 +216,7 @@ const BarChartWithLine: React.FC<{ data: DataPoint[] }> = ({ data }) => {
         }
     }, [data])
 
-    // eslint-disable-next-line react/forbid-dom-props
-    return <canvas ref={canvasRef} style={{ height: '300px', width: '100%' }} />
+    return <canvas ref={canvasRef} className="h-[300px] w-full" />
 }
 
 interface DebugCHQueriesProps {

diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx
@@ -364,8 +364,9 @@ const AutosizeInput = React.forwardRef<HTMLInputElement, AutosizeInputProps>(fun
                 maxLength={maxLength}
                 autoFocus={autoFocus}
                 ref={mergedRefs}
+                className="box-content"
                 /* eslint-disable-next-line react/forbid-dom-props */
-                style={{ boxSizing: 'content-box', width: `${inputWidth}px` }}
+                style={{ width: `${inputWidth}px` }}
             />
             <div ref={sizerRef} className="EditableField__autosize__sizer">
                 {value}

diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
@@ -669,16 +669,13 @@ export class HedgehogActor {
 
         return (
             <div
-                className="border rounded bg-white pointer-events-none"
+                className="border rounded bg-white pointer-events-none fixed z-[1000] origin-top-left"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
-                    position: 'fixed',
                     left: x,
                     bottom: y,
                     width: this.followMouse ? Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2) : 0,
                     height: 3,
-                    zIndex: 1000,
-                    transformOrigin: '0 0',
                     transform: `rotate(${Math.atan2(y - mouseY, mouseX - x)}rad)`,
                 }}
             />
@@ -775,7 +772,7 @@ export class HedgehogActor {
                             ref?.(r)
                         }
                     }}
-                    className="HedgehogBuddy"
+                    className="HedgehogBuddy cursor-pointer m-0"
                     data-content={preloadContent}
                     onTouchStart={this.static ? undefined : () => onTouchOrMouseStart()}
                     onMouseDown={this.static ? undefined : () => onTouchOrMouseStart()}
@@ -788,8 +785,6 @@ export class HedgehogActor {
                         left: this.static ? undefined : this.x,
                         bottom: this.static ? undefined : this.y - SHADOW_HEIGHT * 0.5,
                         transition: !(this.isDragging || this.followMouse) ? `all ${1000 / FPS}ms` : undefined,
-                        cursor: 'pointer',
-                        margin: 0,
                     }}
                 >
                     {this.tooltip && !this.isDragging && (
@@ -816,9 +811,9 @@ export class HedgehogActor {
                     >
                         {this.mainAnimation ? (
                             <div
+                                className="image-rendering-pixelated"
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
-                                    imageRendering: 'pixelated',
                                     width: SPRITE_SIZE,
                                     height: SPRITE_SIZE,
                                     backgroundImage: `url(${spriteUrl(
@@ -837,15 +832,10 @@ export class HedgehogActor {
 
                         {this.accessories().map((accessory, index) => (
                             <div
+                                className={`absolute top-0 left-0 w-[${SPRITE_SIZE}px] h-[${SPRITE_SIZE}px] image-rendering-pixelated`}
                                 key={index}
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    imageRendering: 'pixelated',
-                                    width: SPRITE_SIZE,
-                                    height: SPRITE_SIZE,
                                     backgroundImage: `url(${spriteAccessoryUrl(accessory.img)})`,
                                     transform: accessoryPosition
                                         ? `translate3d(${accessoryPosition[0]}px, ${accessoryPosition[1]}px, 0)`
@@ -856,14 +846,9 @@ export class HedgehogActor {
                         ))}
                         {this.overlayAnimation ? (
                             <div
+                                className={`absolute top-0 left-0 w-[${SPRITE_SIZE}px] h-[${SPRITE_SIZE}px] image-rendering-pixelated`}
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    imageRendering: 'pixelated',
-                                    width: SPRITE_SIZE,
-                                    height: SPRITE_SIZE,
                                     backgroundImage: `url(${spriteOverlayUrl(this.overlayAnimation.spriteInfo.img)})`,
                                     backgroundPosition: `-${
                                         (this.overlayAnimation.frame % X_FRAMES) * SPRITE_SIZE
@@ -886,11 +871,10 @@ export class HedgehogActor {
                                 return (
                                     <div
                                         key={i}
+                                        className="fixed pointer-events-none"
                                         // eslint-disable-next-line react/forbid-dom-props
                                         style={{
                                             outline: '1px solid red',
-                                            position: 'fixed',
-                                            pointerEvents: 'none',
                                             top: window.innerHeight - box.y - box.height,
                                             left: box.x,
                                             width: box.width,

diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyRender.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyRender.tsx
@@ -19,12 +19,11 @@ export function HedgehogBuddyStatic({
 
     return (
         <div
-            className="relative overflow-hidden select-none flex-none"
+            className="relative overflow-hidden select-none flex-none m-[-2px]"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: imgSize,
                 height: imgSize,
-                margin: -2,
             }}
         >
             <div
@@ -63,13 +62,7 @@ export function HedgehogBuddyProfile({ size, ...props }: HedgehogBuddyStaticProp
                 height: size,
             }}
         >
-            <div
-                className="absolute top-0 left-0 w-full h-full"
-                // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    transform: 'translate(-3%, 10%) scale(1.8)',
-                }}
-            >
+            <div className="absolute top-0 left-0 w-full h-full transform translate-x-[-3%] translate-y-[10%] scale-[1.8]">
                 <HedgehogBuddyStatic {...props} size={size} />
             </div>
         </div>

diff --git a/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx b/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
@@ -54,14 +54,10 @@ export function IframedToolbarBrowser({
             <LoadingOverlay />
             <iframe
                 ref={iframeRef}
-                className="w-full h-full"
+                className="w-full h-full bg-white"
                 src={appEditorUrl(browserUrl + '/' + initialPath, {
                     userIntent: userIntent,
                 })}
-                // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    background: '#FFF',
-                }}
                 onLoad={onIframeLoad}
                 // these two sandbox values are necessary so that the site and toolbar can run
                 // this is a very loose sandbox,

diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
@@ -157,8 +157,7 @@ function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Elemen
                     </div>
                     <div className="HalfColumn">
                         <h4 className="secondary uppercase text-muted">Available columns</h4>
-                        {/* eslint-disable-next-line react/forbid-dom-props */}
-                        <div style={{ height: 360 }}>
+                        <div className="h-[360px]">
                             <AutoSizer>
                                 {({ height, width }: { height: number; width: number }) => (
                                     <TaxonomicFilter

diff --git a/frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx b/frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx
@@ -29,9 +29,7 @@ function SkeletonCardOne({ active }: { active: boolean }): JSX.Element {
                 {[100, 66, 33].map((height) => (
                     <div
                         key={height}
-                        className="border border-border-light rounded overflow-hidden flex flex-col justify-end"
-                        // eslint-disable-next-line react/forbid-dom-props
-                        style={{ width: '15%', height: '80%' }}
+                        className="border border-border-light rounded overflow-hidden flex flex-col justify-end w-[15%] h-[80%]"
                     >
                         {/* eslint-disable-next-line react/forbid-dom-props */}
                         <div style={{ height: `${height}%` }}>
@@ -54,10 +52,10 @@ function SkeletonBarsRaw({ active }: { active: boolean }): JSX.Element {
                     return (
                         <div
                             key={index}
+                            className="w-[12.5%]"
                             // eslint-disable-next-line react/forbid-dom-props
                             style={{
                                 height: `${height}%`,
-                                width: '12.5%',
                             }}
                         >
                             <LemonSkeleton active={active} className="h-full w-full" />
@@ -102,14 +100,12 @@ export function EmptyDashboardComponent({ loading, canEdit }: { loading: boolean
                     </div>
                 </div>
             )}
-            {/*  eslint-disable-next-line react/forbid-dom-props */}
-            <div className="flex items-center gap-2" style={{ height: '30rem' }}>
+            <div className="flex items-center gap-2 h-[30rem]">
                 <SkeletonCardOne active={loading} />
                 <SkeletonCardTwo active={loading} />
             </div>
             <div className="EmptyDashboard__fade">
-                {/*  eslint-disable-next-line react/forbid-dom-props */}
-                <div className="flex items-center gap-2" style={{ height: '30rem' }}>
+                <div className="flex items-center gap-2 h-[30rem]">
                     <SkeletonCardOne active={loading} />
                     <SkeletonCardTwo active={loading} />
                 </div>

diff --git a/frontend/src/scenes/data-model/NodeCanvasWithTable.tsx b/frontend/src/scenes/data-model/NodeCanvasWithTable.tsx
@@ -354,9 +354,9 @@ const NodeCanvasWithTable = ({
                 return (
                     <div
                         key={nodeId}
+                        className="absolute"
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            position: 'absolute',
                             left: `${position.x + offset.x}px`,
                             top: `${position.y + offset.y}px`,
                         }}
@@ -374,9 +374,9 @@ const NodeCanvasWithTable = ({
             })}
 
             <div
+                className="absolute"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
-                    position: 'absolute',
                     left: `${tablePosition.x + offset.x}px`,
                     top: `${tablePosition.y + offset.y}px`,
                 }}

diff --git a/frontend/src/scenes/debug/HogDebug.tsx b/frontend/src/scenes/debug/HogDebug.tsx
@@ -44,8 +44,7 @@ export function HogQueryEditor(props: HogQueryEditorProps): JSX.Element {
         <div className="space-y-2">
             <div data-attr="hogql-query-editor" className={clsx('flex flex-col rounded space-y-2 w-full p-2 border')}>
                 <div className="relative flex-1 overflow-hidden">
-                    {/* eslint-disable-next-line react/forbid-dom-props */}
-                    <div className="resize-y overflow-hidden" style={{ height: 222 }}>
+                    <div className="resize-y overflow-hidden h-[222px]">
                         <CodeEditor
                             queryKey={props.queryKey ?? `new/${realKey}`}
                             className="border rounded overflow-hidden h-full"

diff --git a/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx b/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx
@@ -242,14 +242,10 @@ function EmbeddedHeatmapBrowser({
                 <LoadingOverlay />
                 <iframe
                     ref={iframeRef}
-                    className="w-full h-full"
+                    className="w-full h-full bg-white"
                     src={appEditorUrl(browserUrl, {
                         userIntent: 'heatmaps',
                     })}
-                    // eslint-disable-next-line react/forbid-dom-props
-                    style={{
-                        background: '#FFF',
-                    }}
                     onLoad={onIframeLoad}
                     // these two sandbox values are necessary so that the site and toolbar can run
                     // this is a very loose sandbox,

diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
@@ -375,12 +375,11 @@ export function ActionFilterRow({
 
     return (
         <li
-            className="ActionFilterRow"
+            className="ActionFilterRow relative"
             ref={setNodeRef}
             {...attributes}
             // eslint-disable-next-line react/forbid-dom-props
             style={{
-                position: 'relative',
                 zIndex: isDragging ? 1 : undefined,
                 transform: CSS.Translate.toString(transform),
                 transition,

diff --git a/frontend/src/scenes/insights/views/BoldNumber/Textfit.tsx b/frontend/src/scenes/insights/views/BoldNumber/Textfit.tsx
@@ -65,9 +65,9 @@ export const Textfit = ({ min, max, children }: TextfitProps): JSX.Element => {
     return (
         <div
             ref={parentRef}
-            className="w-full h-full flex items-center justify-center"
+            className="w-full h-full flex items-center justify-center leading-none"
             // eslint-disable-next-line react/forbid-dom-props
-            style={{ lineHeight: 1, fontSize: fontSizeRef.current }}
+            style={{ fontSize: fontSizeRef.current }}
         >
             <div ref={childRef} className="whitespace-nowrap">
                 {children}

diff --git a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
@@ -302,8 +302,7 @@ function ErrorDetailsModal({ id }: { id: number | string }): JSX.Element {
             {!errorDetailsModalError || errorDetailsLoading ? (
                 <LemonSkeleton className="h-10" />
             ) : (
-                // eslint-disable-next-line react/forbid-dom-props
-                <div className="flex flex-col space-y-2" style={{ height: '80vh' }}>
+                <div className="flex flex-col space-y-2 h-[80vh]">
                     <div>
                         <span className="font-semibold">When:</span>{' '}
                         <TZLabel time={activeErrorDetails.timestamp} showSeconds />

diff --git a/frontend/src/scenes/pipeline/PipelinePluginImage.tsx b/frontend/src/scenes/pipeline/PipelinePluginImage.tsx
@@ -54,14 +54,12 @@ export function PluginImage({
         />
     ) : (
         <div
-            className="plugin-image shrink-0"
+            className="plugin-image shrink-0 bg-contain bg-no-repeat"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: pixelSize,
                 height: pixelSize,
                 backgroundImage: `url(${state.image})`,
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
             }}
             // eslint-disable-next-line react/no-unknown-property
             onError={() => setState({ ...state, image: imgPluginDefault })}

diff --git a/frontend/src/scenes/pipeline/Transformations.tsx b/frontend/src/scenes/pipeline/Transformations.tsx
@@ -238,10 +238,9 @@ const MinimalAppView = ({ transformation, order }: { transformation: Transformat
     return (
         <div
             ref={setNodeRef}
-            className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light"
+            className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light relative"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
-                position: 'relative',
                 transform: CSS.Transform.toString(transform),
                 transition,
                 zIndex: isDragging ? 999999 : undefined,

diff --git a/frontend/src/scenes/retention/RetentionModal.tsx b/frontend/src/scenes/retention/RetentionModal.tsx
@@ -129,8 +129,7 @@ export function RetentionModal(): JSX.Element | null {
                                 {people.result &&
                                     people.result.map((personAppearances: RetentionTableAppearanceType) => (
                                         <tr key={personAppearances.person.id}>
-                                            {/* eslint-disable-next-line react/forbid-dom-props */}
-                                            <td style={{ minWidth: 200 }}>
+                                            <td className="min-w-[200px]">
                                                 {isGroupType(personAppearances.person) ? (
                                                     <LemonButton
                                                         size="small"

diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -433,8 +433,7 @@ function SavedInsightsGrid(): JSX.Element {
                     )
                 })}
                 {insightsLoading && (
-                    // eslint-disable-next-line react/forbid-dom-props
-                    <div style={{ minHeight: '30rem' }}>
+                    <div className="min-h-[30rem]">
                         <SpinnerOverlay sceneLevel />
                     </div>
                 )}

diff --git a/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
@@ -234,11 +234,9 @@ export function ItemPerformanceEvent({
             >
                 <div className="flex-1 overflow-hidden">
                     <div
-                        className="absolute bg-primary rounded-sm opacity-75"
+                        className="absolute bg-primary rounded-sm opacity-75 h-1 bottom-0.5"
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            height: 4,
-                            bottom: 2,
                             left: `${(startTime / contextLengthMs) * 100}%`,
                             width: `${Math.max((duration / contextLengthMs) * 100, 0.5)}%`,
                         }}