feat: add anchors and coloring consistency

Signed-off-by: Oliver Baehler <oliver@sudo-i.net>

Author: oliverbaehler

src/components/common/ConditionsAndEvents.tsx

@@ -3,8 +3,8 @@ import type { KubeObject } from '@kinvolk/headlamp-plugin/lib/k8s/cluster';
 import Event from '@kinvolk/headlamp-plugin/lib/k8s/event';
 import { Box, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { ConditionStatusChip } from './ConditionStatusChip';
 import { AnchoredSectionBox as SectionBox } from './AnchoredSectionBox';
+import { ConditionStatusChip } from './ConditionStatusChip';
 
 export interface ConditionsAndEventsProps {
   resource?: KubeObject | null;

src/components/common/ManagedResources.tsx

@@ -26,9 +26,9 @@ import {
   getPlural,
   type ReplicationDependency,
 } from '../../resources/tenantResources';
+import { AnchoredSectionBox as SectionBox } from './AnchoredSectionBox';
 import { ManagedResourceFlow, managedResourceKey } from './ManagedResourceFlow';
 import { anchoredResourceListHeaderProps, AnchoredSubheading } from './SectionAnchor';
-import { AnchoredSectionBox as SectionBox } from './AnchoredSectionBox';
 import {
   buildSSAFieldLines,
   type ManagedFieldSelection,

src/components/common/QuotaAggregationView.tsx

@@ -12,6 +12,7 @@ import {
 import { useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { usageChipColor } from '../../utils/quantity';
+import { AnchoredSectionBox as SectionBox } from './AnchoredSectionBox';
 import {
   ALL_QUOTA_RESOURCES,
   compareQuotaUtilizationDescending,
@@ -23,7 +24,6 @@ import {
 } from './quotaAggregation';
 import { QuotaConsumptionFlow } from './QuotaConsumptionFlow';
 import { QuotaUsage } from './QuotaUsage';
-import { AnchoredSectionBox as SectionBox } from './AnchoredSectionBox';
 
 export function QuotaAggregationView({
   cluster,

src/components/common/ReplicationDependencies.tsx

@@ -5,8 +5,8 @@ import {
   getReplicationDependencies,
   type ReplicationDependency,
 } from '../../resources/tenantResources';
-import { CapsuleResourceLink } from './CapsuleResourceLink';
 import { AnchoredSectionBox as SectionBox } from './AnchoredSectionBox';
+import { CapsuleResourceLink } from './CapsuleResourceLink';
 
 function DependencyLink({ dependency }: { dependency: ReplicationDependency }) {
   return (

src/components/configuration/CapsuleConfigurationDetail.tsx

@@ -5,10 +5,10 @@ import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { CapsuleConfiguration } from '../../resources/capsuleConfigurations';
 import { CAPSULE_CRDS } from '../../resources/capsuleCustomResources';
+import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { CapsuleResourceLink } from '../common/CapsuleResourceLink';
 import { ConditionsAndEvents } from '../common/ConditionsAndEvents';
 import { DetailsSectionStack } from '../common/DetailsSectionStack';
-import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import {
   type CapsuleConfigurationIdentityRow,
   capsuleConfigurationIdentityRows,

src/components/configuration/CapsuleConfigurationList.tsx

@@ -3,8 +3,8 @@ import { Alert, Chip, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { CapsuleConfiguration } from '../../resources/capsuleConfigurations';
 import { CAPSULE_CRDS } from '../../resources/capsuleCustomResources';
-import { CapsuleResourceLink } from '../common/CapsuleResourceLink';
 import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
+import { CapsuleResourceLink } from '../common/CapsuleResourceLink';
 import { anchoredResourceListHeaderProps } from '../common/SectionAnchor';
 import { StatCard } from '../common/StatCard';
 import { SummaryCardGrid } from '../common/SummaryCardGrid';

src/components/namespaces/NamespaceQuotaSystems.tsx

@@ -28,14 +28,14 @@ import { CustomQuota, GlobalCustomQuota } from '../../resources/customQuotas';
 import { GlobalResourceQuota } from '../../resources/globalResourceQuotas';
 import { ResourcePool } from '../../resources/resourcePools';
 import { usageChipColor } from '../../utils/quantity';
+import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { CapsuleResourceLink } from '../common/CapsuleResourceLink';
 import {
   ALL_QUOTA_RESOURCES,
   quotaResourceFromSearch,
   quotaResourceSearch,
 } from '../common/quotaAggregation';
 import { QuotaUsage } from '../common/QuotaUsage';
-import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { AnchoredSubheading } from '../common/SectionAnchor';
 import {
   type EffectiveNamespaceQuotaRow,

src/components/proxy/GlobalProxySettingsDetail.tsx

@@ -4,10 +4,10 @@ import { Alert, Box, Chip, Stack, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { GlobalProxySettings } from '../../resources/globalProxySettings';
+import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { ConditionsAndEvents } from '../common/ConditionsAndEvents';
 import { ConditionStatusChip } from '../common/ConditionStatusChip';
 import { DetailsSectionStack } from '../common/DetailsSectionStack';
-import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import {
   globalProxyClusterResourceCount,
   globalProxyReadyCondition,

src/components/proxy/GlobalProxySettingsList.tsx

@@ -3,9 +3,9 @@ import { Alert, Chip, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { CAPSULE_CRDS } from '../../resources/capsuleCustomResources';
 import { GlobalProxySettings } from '../../resources/globalProxySettings';
+import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { CapsuleResourceLink } from '../common/CapsuleResourceLink';
 import { ConditionStatusChip } from '../common/ConditionStatusChip';
-import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { anchoredResourceListHeaderProps } from '../common/SectionAnchor';
 import { StatCard } from '../common/StatCard';
 import { SummaryCardGrid } from '../common/SummaryCardGrid';

src/components/quotas/CustomQuotaDetail.tsx

@@ -4,11 +4,11 @@ import { useParams } from 'react-router-dom';
 import { Cell, Pie, PieChart } from 'recharts';
 import { CustomQuota } from '../../resources/customQuotas';
 import { parseKubernetesQuantity, usageHex } from '../../utils/quantity';
+import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { ConditionsAndEvents } from '../common/ConditionsAndEvents';
 import { DetailsSectionStack } from '../common/DetailsSectionStack';
 import { QuotaAggregationView } from '../common/QuotaAggregationView';
 import { QuotaClaims } from '../common/QuotaClaims';
-import { AnchoredSectionBox as SectionBox } from '../common/AnchoredSectionBox';
 import { customQuotaAggregation } from './customQuotaAggregationHelpers';
 
 export interface CustomQuotaDetailProps {