UI/UX refinements on top of v0.14.0-beta, all validated on the test server: - Logo: new theme-aware compass iconmark (light/dark SVGs swapped via the dark class), sized to 45px; favicon updated to match. Wordmark casing corrected to "MikroTik Manager" (font size unchanged). - Navigation icons enlarged 15 -> 17px. - Dashboard: "Connected clients" line chart converted to a bar chart with a category axis + light downsampling so bars stay readably thick across ranges. - Clients: sorting is now server-side across the whole dataset (was sorting only the current page, so Type/others appeared to do nothing on a uniform page); table uses a fixed column layout + keepPreviousData so columns no longer jump or blank out when sorting/paging. Backend clients route gains whitelisted sort/dir params (safe numeric IP sort, deterministic tiebreaker). - Connections tab: surfaces the live /ip/firewall/connection/tracking state (on/auto/off pill) and clearer empty-state copy explaining auto-mode. Lint/typecheck/build/jest green in both workspaces; npm audit --audit-level=high clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
50 lines
3.7 KiB
XML
50 lines
3.7 KiB
XML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" role="img" aria-labelledby="title desc" version="1.1" id="svg24" xmlns="http://www.w3.org/2000/svg">
|
|
<title id="title">MikroTik Manager Config Compass Icon - Light Mode</title>
|
|
<desc id="desc">A light-mode SVG app icon showing a network compass with a central manager node and four directional service nodes.</desc>
|
|
<defs id="defs13">
|
|
<linearGradient id="bgLight" x1="96" y1="80" x2="928" y2="944" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FFFFFF" id="stop1" />
|
|
<stop offset="1" stop-color="#EAF2FF" id="stop2" />
|
|
</linearGradient>
|
|
<linearGradient id="ringLight" x1="236" y1="244" x2="788" y2="780" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#6757F5" id="stop3" />
|
|
<stop offset="0.48" stop-color="#0777D8" id="stop4" />
|
|
<stop offset="1" stop-color="#00A98F" id="stop5" />
|
|
</linearGradient>
|
|
<linearGradient id="northLight" x1="512" y1="136" x2="512" y2="318" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#00BFB3" id="stop6" />
|
|
<stop offset="1" stop-color="#0877D8" id="stop7" />
|
|
</linearGradient>
|
|
<linearGradient id="eastLight" x1="702" y1="512" x2="900" y2="512" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#0877D8" id="stop8" />
|
|
<stop offset="1" stop-color="#00BFB3" id="stop9" />
|
|
</linearGradient>
|
|
<linearGradient id="southLight" x1="512" y1="708" x2="512" y2="900" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#79C900" id="stop10" />
|
|
<stop offset="1" stop-color="#1CB85E" id="stop11" />
|
|
</linearGradient>
|
|
<linearGradient id="westLight" x1="320" y1="512" x2="126" y2="512" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#6757F5" id="stop12" />
|
|
<stop offset="1" stop-color="#914AF8" id="stop13" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="64" y="64" width="896" height="896" rx="208" fill="url(#bgLight)" id="rect13" />
|
|
<rect x="76" y="76" width="872" height="872" rx="196" stroke="#D5E2F2" stroke-width="20" id="rect14" />
|
|
<circle cx="512" cy="512" r="262" stroke="url(#ringLight)" stroke-width="32" stroke-linecap="round" stroke-dasharray="360 70 360 70" id="circle14" />
|
|
<circle cx="512" cy="512" r="116" stroke="#152238" stroke-width="28" id="circle15" />
|
|
<path d="M512 194 L552 306 H472 L512 194Z" fill="url(#northLight)" id="path15" />
|
|
<path d="M830 512 L718 552 V472 L830 512Z" fill="url(#eastLight)" id="path16" />
|
|
<path d="M512 830 L472 718 H552 L512 830Z" fill="url(#southLight)" id="path17" />
|
|
<path d="M194 512 L306 472 V552 L194 512Z" fill="url(#westLight)" id="path18" />
|
|
<line x1="512" y1="300" x2="512" y2="396" stroke="#152238" stroke-width="28" stroke-linecap="round" id="line18" />
|
|
<line x1="628" y1="512" x2="724" y2="512" stroke="#152238" stroke-width="28" stroke-linecap="round" id="line19" />
|
|
<line x1="512" y1="628" x2="512" y2="724" stroke="#152238" stroke-width="28" stroke-linecap="round" id="line20" />
|
|
<line x1="300" y1="512" x2="396" y2="512" stroke="#152238" stroke-width="28" stroke-linecap="round" id="line21" />
|
|
<circle cx="512" cy="294" r="46" fill="#FFFFFF" stroke="url(#northLight)" stroke-width="28" id="circle21" />
|
|
<circle cx="730" cy="512" r="46" fill="#FFFFFF" stroke="url(#eastLight)" stroke-width="28" id="circle22" />
|
|
<circle cx="512" cy="730" r="46" fill="#FFFFFF" stroke="url(#southLight)" stroke-width="28" id="circle23" />
|
|
<circle cx="294" cy="512" r="46" fill="#FFFFFF" stroke="url(#westLight)" stroke-width="28" id="circle24" />
|
|
<path d="M 454.87456,567.20426 V 458.79529 L 512,535.88611 569.12545,458.79529 v 108.40897" stroke="#152238" stroke-width="38" stroke-linecap="round" stroke-linejoin="round" id="path24" />
|
|
</svg>
|