Merge pull request #95 from ThePangel/main

renamed callsignSize to headerSize, which now also affects the clocks

src/components/Header.jsx

@@ -37,8 +37,8 @@ export const Header = ({
       <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexShrink: 0 }}>
         <span
           style={{
-            fontSize: config.callsignSize > 0.1 && config.callsignSize <= 2
-              ? `${22 * config.callsignSize}px`
+            fontSize: config.headerSize > 0.1 && config.headerSize <= 2
+              ? `${22 * config.headerSize}px`
               : "22px", fontWeight: '900', color: 'var(--accent-amber)', cursor: 'pointer', fontFamily: 'Orbitron, monospace', whiteSpace: 'nowrap'
           }}
           onClick={onSettingsClick}
@@ -53,7 +53,9 @@ export const Header = ({
       <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexShrink: 0 }}>
         <span style={{ fontSize: '13px', color: 'var(--accent-cyan)', fontWeight: '600' }}>UTC</span>
         <span style={{
-          fontSize: '24px',
+          fontSize: config.headerSize > 0.1 && config.headerSize <= 2
+              ? `${24 * config.headerSize}px`
+              : "24px",
           fontWeight: '700',
           color: 'var(--accent-cyan)',
           fontFamily: 'JetBrains Mono, Consolas, monospace',
@@ -70,7 +72,9 @@ export const Header = ({
       >
         <span style={{ fontSize: '13px', color: 'var(--accent-amber)', fontWeight: '600' }}>LOCAL</span>
         <span style={{
-          fontSize: '24px',
+          fontSize: config.headerSize > 0.1 && config.headerSize <= 2
+              ? `${24 * config.headerSize}px`
+              : "24px",
           fontWeight: '700',
           color: 'var(--accent-amber)',
           fontFamily: 'JetBrains Mono, Consolas, monospace',
@@ -90,8 +94,18 @@ export const Header = ({
           const windLabel = localWeather.data.windUnit || 'mph';
           return (
             <div title={`${localWeather.data.description} • Wind: ${localWeather.data.windSpeed} ${windLabel}`}>
-              <span style={{ marginRight: '3px' }}>{localWeather.data.icon}</span>
-              <span style={{ color: 'var(--accent-cyan)', fontWeight: '600' }}>
+              <span style={{ marginRight: '3px', 
+                fontSize: config.headerSize > 0.1 && config.headerSize <= 2
+                  ? `${12 * config.headerSize}px`
+                  : "12px",
+               }}>
+                {localWeather.data.icon}
+              </span>
+              <span style={{ color: 'var(--accent-cyan)', fontWeight: '600',
+                fontSize: config.headerSize > 0.1 && config.headerSize <= 2
+                  ? `${12 * config.headerSize}px`
+                  : "12px",
+               }}>
                 {tempF}°F/{tempC}°C
               </span>
             </div>

src/components/SettingsPanel.jsx

@@ -9,7 +9,7 @@ import { LANGUAGES } from '../lang/i18n.js';
 
 export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
   const [callsign, setCallsign] = useState(config?.callsign || '');
-  const [callsignSize, setCallsignSize] = useState(config?.callsignSize || 1.0);
+  const [headerSize, setheaderSize] = useState(config?.headerSize || 1.0);
   const [gridSquare, setGridSquare] = useState('');
   const [lat, setLat] = useState(config?.location?.lat || 0);
   const [lon, setLon] = useState(config?.location?.lon || 0);
@@ -26,7 +26,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
   useEffect(() => {
     if (config) {
       setCallsign(config.callsign || '');
-      setCallsignSize(config.callsignSize || 1.0)
+      setheaderSize(config.headerSize || 1.0)
       setLat(config.location?.lat || 0);
       setLon(config.location?.lon || 0);
       setTheme(config.theme || 'dark');
@@ -149,7 +149,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
     onSave({
       ...config,
       callsign: callsign.toUpperCase(),
-      callsignSize: callsignSize,
+      headerSize: headerSize,
       location: { lat: parseFloat(lat), lon: parseFloat(lon) },
       theme,
       layout,
@@ -309,15 +309,15 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
             <div style={{ marginBottom: '20px'}}>
               <div>
                 <label style={{ display: 'block', marginBottom: '6px', color: 'var(--text-muted)', fontSize: '11px', textTransform: 'uppercase' }}>
-                  {t('station.settings.callsignSize')}
+                  {t('station.settings.headerSize')}
                 </label>
                 <input
                   type="number"
                   step="0.1"
-                  value={isNaN(lat) ? '' : callsignSize}
+                  value={isNaN(lat) ? '' : headerSize}
                   onChange={(e) => {
                     if (e.target.value >= 0.1 && e.target.value <= 2.0) {
-                      setCallsignSize(e.target.value)
+                      setheaderSize(e.target.value)
                     }}}
                   style={{
                     width: '100%',

src/lang/en.json

@@ -15,7 +15,7 @@
   "station.settings.button.save": "Save Settings",
   "station.settings.button.save.confirm": "Settings saved to your browser",
   "station.settings.callsign": "Your Callsign",
-  "station.settings.callsignSize": "Your Callsign's size",
+  "station.settings.headerSize": "Your Callsign's size",
   "station.settings.describe": "Enter your callsign and grid square to get started. Settings are saved in your browser.",
   "station.settings.dx.describe": "→ Real-time DX Spider feed via our dedicated proxy service",
   "station.settings.dx.option1": "⭐ DX Spider Proxy (Recommended)",

src/lang/es.json

@@ -15,7 +15,7 @@
   "station.settings.button.save": "Guardar Configuración",
   "station.settings.button.save.confirm": "La configuración se guarda en tu navegador",
   "station.settings.callsign": "Tu Indicativo",
-  "station.settings.callsignSize": "El tamaño de tu Indicativo",
+  "station.settings.headerSize": "El tamaño de tu Indicativo",
   "station.settings.describe": "Ingresa tu indicativo y cuadrícula para comenzar. Tu configuración se guardará en el navegador.",
   "station.settings.dx.describe": "→ Feed en tiempo real de DX Spider a través de nuestro servicio proxy dedicado",
   "station.settings.dx.option1": "⭐ Proxy DX Spider (Recomendado)",

src/utils/config.js

@@ -10,7 +10,7 @@
 
 export const DEFAULT_CONFIG = {
   callsign: 'N0CALL',
-  callsignSize: 1.0, // Float multiplies base px size (0.1 to 2.0)
+  headerSize: 1.0, // Float multiplies base px size (0.1 to 2.0)
   locator: '',
   location: { lat: 40.0150, lon: -105.2705 }, // Boulder, CO (default)
   defaultDX: { lat: 35.6762, lon: 139.6503 }, // Tokyo