fahed/hihala-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Position download button in corner + better Arabic font

Browse Source 
- Move export button outside header-actions to enable absolute positioning
- Button now positioned at top-right (LTR) / top-left (RTL)
- Switch from Tajawal to IBM Plex Sans Arabic (slicker, more technical)
- Add RTL-specific font-family in CSS
This commit is contained in:
fahed
2026-02-03 15:49:31 +03:00
parent 12f548fc78
commit 60eda25fe3
3 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ChartExport.js
View File

@@ -46,23 +46,22 @@ export function ExportableChart({ children, filename = 'chart', title = '', clas
return (
<div className="exportable-chart-wrapper">
{/* Download button - positioned absolutely in corner */}
<button
className="chart-export-btn visible"
onClick={exportAsPNG}
title="Download as PNG"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
{title && (
<div className="chart-header-with-export">
<h2>{title}</h2>
<div className="chart-header-actions">
{controls}
<button
className="chart-export-btn visible"
onClick={exportAsPNG}
title="Download as PNG"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
</div>
{controls && <div className="chart-header-actions">{controls}</div>}
</div>
)}
{!title && controls && <div className="chart-controls">{controls}</div>}