refactor: import React types directly instead of namespace

Replace 'import React from "react"' with direct imports of
CSSProperties and ChangeEvent. This eliminates unused imports
and follows modern React patterns where the namespace import
is not required for JSX (React 17+).
This commit is contained in:
counterweight 2025-12-23 12:23:32 +01:00
parent c9c36971d8
commit e8d0ee2eca
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
5 changed files with 11 additions and 14 deletions

View file

@ -1,7 +1,6 @@
"use client";
import React from "react";
import { useEffect, useState, useCallback } from "react";
import { useEffect, useState, useCallback, CSSProperties } from "react";
import { Permission } from "../../auth-context";
import { api } from "../../api";
import { Header } from "../../components/Header";
@ -341,7 +340,7 @@ export default function AdminTradesPage() {
}
// Page-specific styles (trade card styles are shared via tradeCardStyles)
const styles: Record<string, React.CSSProperties> = {
const styles: Record<string, CSSProperties> = {
content: {
flex: 1,
padding: "2rem",

View file

@ -1,4 +1,4 @@
import React from "react";
import { CSSProperties } from "react";
/**
* Format satoshi amount with styled components.
@ -26,7 +26,7 @@ export function SatsDisplay({ sats }: { sats: number }) {
}
// Build the display with subtle leading zeros and prominent digits
const subtleStyle: React.CSSProperties = {
const subtleStyle: CSSProperties = {
opacity: 0.45,
fontWeight: 400,
};

View file

@ -1,7 +1,6 @@
"use client";
import React from "react";
import { useEffect, useState, useCallback, useMemo } from "react";
import { useEffect, useState, useCallback, useMemo, ChangeEvent, CSSProperties } from "react";
import { useRouter } from "next/navigation";
import { Permission } from "../auth-context";
import { api } from "../api";
@ -221,7 +220,7 @@ export default function ExchangePage() {
setEurAmount(clamped);
};
const handleAmountInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleAmountInputChange = (e: ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value.replace(/[^0-9]/g, "");
if (inputValue === "") {
setEurAmount(eurMin * 100);
@ -599,7 +598,7 @@ export default function ExchangePage() {
}
// Page-specific styles
const styles: Record<string, React.CSSProperties> = {
const styles: Record<string, CSSProperties> = {
content: {
flex: 1,
padding: "2rem",

View file

@ -1,4 +1,4 @@
import React from "react";
import { CSSProperties } from "react";
/**
* Design tokens - centralized values for consistency.
@ -54,7 +54,7 @@ const tokens = {
radius3xl: "24px",
} as const;
type StyleRecord = Record<string, React.CSSProperties>;
type StyleRecord = Record<string, CSSProperties>;
// =============================================================================
// Layout Styles

View file

@ -1,7 +1,6 @@
"use client";
import React from "react";
import { useEffect, useState, useCallback } from "react";
import { useEffect, useState, useCallback, CSSProperties } from "react";
import { Permission } from "../auth-context";
import { api } from "../api";
import { Header } from "../components/Header";
@ -258,7 +257,7 @@ export default function TradesPage() {
}
// Page-specific styles (trade card styles are shared via tradeCardStyles)
const styles: Record<string, React.CSSProperties> = {
const styles: Record<string, CSSProperties> = {
content: {
flex: 1,
padding: "2rem",