update New Tier form inputs and text

Author: AnthonyMarin

src/components/allowed-users/components/TierEditor/TierEditor.tsx

@@ -1,14 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Select, Checkbox, Space, Typography, Alert } from 'antd';
-import { 
-  TierDisplayFormat, 
-  DataUnit, 
-  validateTierFormat, 
+import { Select, Checkbox, Space, Typography, Alert } from 'antd';
+import {
+  TierDisplayFormat,
+  DataUnit,
+  validateTierFormat,
   displayToFriendlyString,
   bytesToDisplayFormat,
-  TIER_VALIDATION
+  TIER_VALIDATION,
 } from '@app/utils/tierConversion.utils';
 import { AllowedUsersTier } from '@app/types/allowedUsers.types';
+import { StyledInput } from '@app/styles/themes/reusableComponentStyles';
+import styled from 'styled-components';
 
 const { Text } = Typography;
 const { Option } = Select;
@@ -21,12 +23,21 @@ interface TierEditorProps {
   showPrice?: boolean;
 }
 
+const PreviewTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  .ant-typography {
+    color: var(--text-main-color);
+  }
+`;
+
 export const TierEditor: React.FC<TierEditorProps> = ({
   tier,
   onTierChange,
   disabled = false,
   showName = true,
-  showPrice = true
+  showPrice = true,
 }) => {
   // Convert backend format to display format for editing
   const [displayFormat, setDisplayFormat] = useState<TierDisplayFormat>(() => {
@@ -49,34 +60,39 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       const updatedTier: AllowedUsersTier = {
         name,
         price_sats: priceSats,
-        monthly_limit_bytes: displayFormat.unlimited ? 0 : 
-          Math.round(displayFormat.value * getUnitMultiplier(displayFormat.unit)),
-        unlimited: displayFormat.unlimited
+        monthly_limit_bytes: displayFormat.unlimited
+          ? 0
+          : Math.round(displayFormat.value * getUnitMultiplier(displayFormat.unit)),
+        unlimited: displayFormat.unlimited,
       };
       onTierChange(updatedTier);
     }
   }, [displayFormat, name, priceSats, isValid, onTierChange]);
 
   const getUnitMultiplier = (unit: DataUnit): number => {
     switch (unit) {
-      case 'MB': return 1048576;      // 1024 * 1024
-      case 'GB': return 1073741824;   // 1024 * 1024 * 1024
-      case 'TB': return 1099511627776; // 1024 * 1024 * 1024 * 1024
-      default: return 1048576;
+      case 'MB':
+        return 1048576; // 1024 * 1024
+      case 'GB':
+        return 1073741824; // 1024 * 1024 * 1024
+      case 'TB':
+        return 1099511627776; // 1024 * 1024 * 1024 * 1024
+      default:
+        return 1048576;
     }
   };
 
   const handleValueChange = (value: string) => {
     const numericValue = parseFloat(value) || 0;
-    setDisplayFormat(prev => ({ ...prev, value: numericValue }));
+    setDisplayFormat((prev) => ({ ...prev, value: numericValue }));
   };
 
   const handleUnitChange = (unit: DataUnit) => {
-    setDisplayFormat(prev => ({ ...prev, unit }));
+    setDisplayFormat((prev) => ({ ...prev, unit }));
   };
 
   const handleUnlimitedChange = (unlimited: boolean) => {
-    setDisplayFormat(prev => ({ ...prev, unlimited }));
+    setDisplayFormat((prev) => ({ ...prev, unlimited }));
   };
 
   const handleNameChange = (value: string) => {
@@ -94,7 +110,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       {showName && (
         <div>
           <Text strong>Tier Name</Text>
-          <Input
+          <StyledInput
             value={name}
             onChange={(e) => handleNameChange(e.target.value)}
             placeholder="Enter tier name"
@@ -108,7 +124,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       {showPrice && (
         <div>
           <Text strong>Price (sats)</Text>
-          <Input
+          <StyledInput
             type="number"
             value={priceSats}
             onChange={(e) => handlePriceChange(e.target.value)}
@@ -123,7 +139,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
       {/* Data Limit */}
       <div>
         <Text strong>Monthly Data Limit</Text>
-        
+
         {/* Unlimited Checkbox */}
         <div style={{ marginTop: 8, marginBottom: 8 }}>
           <Checkbox
@@ -138,7 +154,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
         {/* Value and Unit Inputs */}
         {!displayFormat.unlimited && (
           <Space.Compact style={{ width: '100%' }}>
-            <Input
+            <StyledInput
               type="number"
               value={displayFormat.value || ''}
               onChange={(e) => handleValueChange(e.target.value)}
@@ -147,12 +163,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
               min={TIER_VALIDATION.MIN_VALUE}
               style={{ flex: 1 }}
             />
-            <Select
-              value={displayFormat.unit}
-              onChange={handleUnitChange}
-              disabled={disabled}
-              style={{ width: 80 }}
-            >
+            <Select value={displayFormat.unit} onChange={handleUnitChange} disabled={disabled} style={{ width: 80 }}>
               <Option value="MB">MB</Option>
               <Option value="GB">GB</Option>
               <Option value="TB">TB</Option>
@@ -161,29 +172,28 @@ export const TierEditor: React.FC<TierEditorProps> = ({
         )}
 
         {/* Preview */}
-        <div style={{ marginTop: 8 }}>
-          <Text type="secondary">
-            Preview: {displayToFriendlyString(displayFormat)}
-          </Text>
-        </div>
+        <PreviewTextWrapper>
+          <div style={{ marginTop: 8 }}>
+            <Text color="" type="secondary">
+              Preview: {displayToFriendlyString(displayFormat)}
+            </Text>
+          </div>
+        </PreviewTextWrapper>
 
         {/* Validation Error */}
         {!isValid && validation.error && (
-          <Alert
-            message={validation.error}
-            type="error"
-            style={{ marginTop: 8 }}
-            showIcon
-          />
+          <Alert message={validation.error} type="error" style={{ marginTop: 8 }} showIcon />
         )}
       </div>
 
       {/* Helpful Information */}
-      <div style={{ marginTop: 8 }}>
-        <Text type="secondary" style={{ fontSize: '12px' }}>
-          Valid range: 1 MB to 1 TB
-        </Text>
-      </div>
+      <PreviewTextWrapper>
+        <div style={{ marginTop: 8 }}>
+          <Text type="secondary" style={{ fontSize: '12px' }}>
+            Valid range: 1 MB to 1 TB
+          </Text>
+        </div>
+      </PreviewTextWrapper>
     </Space>
   );
 };

src/styles/themes/reusableComponentStyles.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { Input } from "antd";
+
+export const StyledInput = styled(Input)`
+  background-color: var(--layout-sider-bg-color) !important;
+`;