MayaTheShy/remoteturtle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Update TurtleCard and TurtleDetails components for improved UI consistency

Browse Source
This commit is contained in:
MayaTheShy
2026-02-20 02:44:14 -05:00
parent 32677ecac5
commit fa8b45b74a
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/ControlPanel.jsx
View File

@@ -9,22 +9,22 @@ function TurtleCard({ turtle, isSelected, onSelect }) {
const displayName = turtle.label || `Turtle ${turtle.turtleID}`;
const modeColors = {
mining: '#4ade80',
exploring: '#60a5fa',
returning: '#f59e0b',
goHome: '#f59e0b',
idle: '#9ca3af',
manual: '#a78bfa',
refueling: '#ef4444',
farming: '#22c55e',
dumpInventory: '#a855f7',
dumping: '#a855f7',
moving: '#06b6d4',
scan: '#8b5cf6',
extraction: '#f97316',
building: '#14b8a6',
autocraft: '#ec4899',
unknown: '#6b7280'
mining: '#55ff55',
exploring: '#55ffff',
returning: '#ffaa00',
goHome: '#ffaa00',
idle: '#aaaaaa',
manual: '#ff55ff',
refueling: '#ff5555',
farming: '#55ff55',
dumpInventory: '#aa00aa',
dumping: '#aa00aa',
moving: '#55ffff',
scan: '#5555ff',
extraction: '#ffaa00',
building: '#00aaaa',
autocraft: '#ff55ff',
unknown: '#555555'
};
return (
@@ -132,7 +132,7 @@ function TurtleDetails({ turtle }) {
return (
<div className="turtle-details">
<h2>{displayName} <span style={{color: '#6b7280', fontSize: '0.8em'}}>#{turtle.turtleID}</span></h2>
<h2>{displayName} <span style={{color: '#aaaaaa', fontSize: '0.8em'}}>#{turtle.turtleID}</span></h2>
{/* Rename + Config bar */}
<div className="detail-section" style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
@@ -143,7 +143,7 @@ function TurtleDetails({ turtle }) {
onKeyDown={(e) => e.key === 'Enter' && handleRename()}
placeholder="Rename turtle..."
className="rename-input"
style={{ flex: 1, minWidth: '120px', padding: '4px 8px', borderRadius: '4px', border: '1px solid #4b5563', background: '#1f2937', color: '#fff' }}
style={{ flex: 1, minWidth: '120px', padding: '4px 8px', border: '2px solid #333', background: '#1a1a1a', color: '#e0e0e0' }}
/>
<button onClick={handleRename} className="command-btn" style={{ padding: '4px 12px' }}>📝 Rename</button>
<button onClick={() => setShowConfig(!showConfig)} className="command-btn" style={{ padding: '4px 12px' }}>⚙️ Config</button>
@@ -153,12 +153,12 @@ function TurtleDetails({ turtle }) {
{/* Config Modal */}
{showConfig && (
<div className="detail-section" style={{ background: '#1e293b', padding: '12px', borderRadius: '8px', border: '1px solid #334155' }}>
<div className="detail-section" style={{ background: '#2c2c2c', padding: '12px', border: '3px solid #1a1a1a' }}>
<h3>⚙️ Configuration</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px' }}>
<label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>Max Distance:</span>
<input type="number" value={configValues.maxDistance} onChange={(e) => setConfigValues({...configValues, maxDistance: parseInt(e.target.value)})} style={{ width: '80px', padding: '2px 6px', borderRadius: '4px', border: '1px solid #4b5563', background: '#0f172a', color: '#fff' }} />
<input type="number" value={configValues.maxDistance} onChange={(e) => setConfigValues({...configValues, maxDistance: parseInt(e.target.value)})} style={{ width: '80px', padding: '2px 6px', border: '2px solid #333', background: '#1a1a1a', color: '#e0e0e0' }} />
</label>
<label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>Auto Refuel:</span>