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 displayName = turtle.label || `Turtle ${turtle.turtleID}`;
const modeColors = { const modeColors = {
mining: '#4ade80', mining: '#55ff55',
exploring: '#60a5fa', exploring: '#55ffff',
returning: '#f59e0b', returning: '#ffaa00',
goHome: '#f59e0b', goHome: '#ffaa00',
idle: '#9ca3af', idle: '#aaaaaa',
manual: '#a78bfa', manual: '#ff55ff',
refueling: '#ef4444', refueling: '#ff5555',
farming: '#22c55e', farming: '#55ff55',
dumpInventory: '#a855f7', dumpInventory: '#aa00aa',
dumping: '#a855f7', dumping: '#aa00aa',
moving: '#06b6d4', moving: '#55ffff',
scan: '#8b5cf6', scan: '#5555ff',
extraction: '#f97316', extraction: '#ffaa00',
building: '#14b8a6', building: '#00aaaa',
autocraft: '#ec4899', autocraft: '#ff55ff',
unknown: '#6b7280' unknown: '#555555'
}; };
return ( return (
@@ -132,7 +132,7 @@ function TurtleDetails({ turtle }) {
return ( return (
<div className="turtle-details"> <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 */} {/* Rename + Config bar */}
<div className="detail-section" style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}> <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()} onKeyDown={(e) => e.key === 'Enter' && handleRename()}
placeholder="Rename turtle..." placeholder="Rename turtle..."
className="rename-input" 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={handleRename} className="command-btn" style={{ padding: '4px 12px' }}>📝 Rename</button>
<button onClick={() => setShowConfig(!showConfig)} className="command-btn" style={{ padding: '4px 12px' }}>⚙️ Config</button> <button onClick={() => setShowConfig(!showConfig)} className="command-btn" style={{ padding: '4px 12px' }}>⚙️ Config</button>
@@ -153,12 +153,12 @@ function TurtleDetails({ turtle }) {
{/* Config Modal */} {/* Config Modal */}
{showConfig && ( {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> <h3>⚙️ Configuration</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px' }}>
<label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>Max Distance:</span> <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>
<label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>Auto Refuel:</span> <span>Auto Refuel:</span>