mula
/
cosmo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve FocusInfo layout alignment and terminal modal text color

main
mula.liu 2025-11-30 23:44:54 +08:00
parent fc81a4d8dc
commit a91dc00b13
1 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/FocusInfo.tsx
View File

@ -65,6 +65,9 @@ export function FocusInfo({ body, onClose }: FocusInfoProps) {
.terminal-modal .ant-modal-close:hover { .terminal-modal .ant-modal-close:hover {
background-color: rgba(35, 134, 54, 0.2) !important; background-color: rgba(35, 134, 54, 0.2) !important;
} }
.terminal-modal .ant-modal-body .animate-in {
color: #2ea043 !important; /* Ensure content text is green */
}
@keyframes spin-slow { @keyframes spin-slow {
from { transform: rotate(0deg); } from { transform: rotate(0deg); }
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
@ -113,8 +116,9 @@ export function FocusInfo({ body, onClose }: FocusInfoProps) {
</div> </div>
</div> </div>
{/* Stats Grid */} {/* Stats and Actions Grid */}
<div className="grid grid-cols-2 gap-2 mb-2"> <div className="grid grid-cols-2 gap-2 mb-2">
{/* Column 1: Heliocentric Distance Card */}
<div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5"> <div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
<div className="p-1.5 rounded-full bg-blue-500/20 text-blue-400"> <div className="p-1.5 rounded-full bg-blue-500/20 text-blue-400">
<Ruler size={14} /> <Ruler size={14} />
@ -125,7 +129,22 @@ export function FocusInfo({ body, onClose }: FocusInfoProps) {
</div> </div>
</div> </div>
{/* Column 2: JPL Horizons Button */}
<div className="flex items-center justify-end">
<button
onClick={fetchNasaData}
className="px-3 py-1.5 rounded-lg bg-cyan-950/30 text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/10 hover:border-cyan-500/50 transition-all flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest group/btn w-full justify-end"
title="连接 JPL Horizons System"
>
<Radar size={12} className="group-hover/btn:animate-spin-slow" />
<span>JPL Horizons</span>
</button>
</div>
</div>
{/* Conditional Probe Status Card (if isProbe is true, this goes in a new row) */}
{isProbe && ( {isProbe && (
<div className="grid grid-cols-1 mb-2">
<div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5"> <div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
<div className={`p-1.5 rounded-full ${isActive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}> <div className={`p-1.5 rounded-full ${isActive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
<Activity size={14} /> <Activity size={14} />
@ -137,22 +156,10 @@ export function FocusInfo({ body, onClose }: FocusInfoProps) {
</div> </div>
</div> </div>
</div> </div>
</div>
)} )}
</div> </div>
{/* Actions Row */}
<div className="flex justify-end">
<button
onClick={fetchNasaData}
className="px-3 py-1.5 rounded-lg bg-cyan-950/30 text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/10 hover:border-cyan-500/50 transition-all flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest group/btn"
title="连接 JPL Horizons System"
>
<Radar size={12} className="group-hover/btn:animate-spin-slow" />
<span>JPL Horizons</span>
</button>
</div>
</div>
{/* Connecting Line/Triangle pointing down to the body */} {/* Connecting Line/Triangle pointing down to the body */}
<div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-black/80 backdrop-blur-xl mt-[-1px]"></div> <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-black/80 backdrop-blur-xl mt-[-1px]"></div>