aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-18 14:24:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add pwa.svg illustration to PWA settings section

Browse Source
This commit is contained in:
Gigi
2025-10-15 18:44:18 +02:00
parent 38eb6716f8
commit 05348fbfeb
2 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/pwa.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

37
src/components/Settings/PWASettings.tsx
View File

@@ -37,22 +37,29 @@ const PWASettings: React.FC = () => {
return (
<div className="settings-section">
<h3 className="section-title">Progressive Web App</h3>
<div className="setting-group">
<div className="setting-info">
<FontAwesomeIcon icon={faMobileAlt} style={{ marginRight: '8px' }} />
<span>Install Boris as an app</span>
<div className="setting-group" style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
<div style={{ flex: 1 }}>
<div className="setting-info">
<FontAwesomeIcon icon={faMobileAlt} style={{ marginRight: '8px' }} />
<span>Install Boris as an app</span>
</div>
<p className="setting-description" style={{ marginTop: '0.5rem', marginBottom: '1rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
Install Boris on your device for a native app experience with offline support.
</p>
<button
onClick={handleInstall}
className="zap-preset-btn"
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
>
<FontAwesomeIcon icon={faDownload} />
Install App
</button>
</div>
<p className="setting-description" style={{ marginTop: '0.5rem', marginBottom: '1rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
Install Boris on your device for a native app experience with offline support.
</p>
<button
onClick={handleInstall}
className="zap-preset-btn"
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
>
<FontAwesomeIcon icon={faDownload} />
Install App
</button>
<img
src="/pwa.svg"
alt="Progressive Web App"
style={{ width: '120px', height: 'auto', flexShrink: 0, opacity: 0.8 }}
/>
</div>
</div>
)