luckberg/familysync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 17: UI Optimization & Polish #24

Merged
luckberg merged 61 commits from gsd/phase-17-ui-optimization-polish into main 2026-06-18 16:24:54 -04:00
Conversation 0 Commits 61 Files Changed 70
+66 -80
7 changed files with 66 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4c99470c1a - Show all commits
apps/pwa/public/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

apps/pwa/public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 861 B

After

Width:  |  Height:  |  Size: 967 B

apps/pwa/public/favicon.svg
+33 -40
View File
@@ -1,51 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
<!-- Background: warm cream rounded square --> <defs>
<rect width="512" height="512" rx="96" fill="#FEF3EC"/> <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#FFEFE0"/>
<stop offset="1" stop-color="#FBD9BE"/>
</linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#EE9A5E"/>
<stop offset="1" stop-color="#E2823F"/>
</linearGradient>
</defs>
<!-- House / home shape — warm amber roof, cream body --> <!-- Warm peach rounded-square background -->
<polygon points="256,90 96,230 416,230" fill="#E8915A"/> <rect width="512" height="512" rx="104" fill="url(#bg)"/>
<rect x="130" y="225" width="252" height="185" rx="8" fill="#FFF8F2"/>
<!-- Door — warm brown centered --> <!-- Soft ground shadow under the house -->
<rect x="220" y="316" width="72" height="94" rx="10" fill="#C97D4A"/> <ellipse cx="256" cy="420" rx="150" ry="16" fill="#E2823F" opacity="0.14"/>
<!-- Left adult figure — warm rose --> <!-- House walls: bold white, rounded, high contrast on peach -->
<!-- Body --> <rect x="150" y="250" width="212" height="166" rx="26" fill="#FFFFFF"/>
<ellipse cx="168" cy="292" rx="28" ry="42" fill="#F25C7A"/>
<!-- Head -->
<circle cx="168" cy="236" r="26" fill="#FFD8B8"/>
<!-- Hair -->
<ellipse cx="168" cy="217" rx="26" ry="13" fill="#C97D4A"/>
<!-- Right adult figure — warm slate blue --> <!-- Roof: amber, overhangs the walls, friendly thick form -->
<!-- Body --> <path d="M256 108 L96 256 a14 14 0 0 0 9.5 24.5 L406.5 280.5 a14 14 0 0 0 9.5 -24.5 Z" fill="url(#roof)"/>
<ellipse cx="344" cy="292" rx="28" ry="42" fill="#4A90D9"/>
<!-- Head -->
<circle cx="344" cy="236" r="26" fill="#FFD8B8"/>
<!-- Hair -->
<ellipse cx="344" cy="217" rx="26" ry="12" fill="#5C4033"/>
<!-- Child figure — warm amber, centered above door --> <!-- Heart finial above the roof peak -->
<!-- Body --> <path d="M256 70 c-9 -16 -34 -12 -34 8 c0 14 18 24 34 38 c16 -14 34 -24 34 -38 c0 -20 -25 -24 -34 -8 Z" fill="#F25C7A"/>
<ellipse cx="256" cy="308" rx="20" ry="30" fill="#E8915A"/>
<!-- Head -->
<circle cx="256" cy="273" r="19" fill="#FFD8B8"/>
<!-- Hair tuft -->
<ellipse cx="256" cy="257" rx="19" ry="9" fill="#C97D4A"/>
<!-- Window left — warm yellow with pane --> <!-- ===== Family of three, clearly spaced inside the home ===== -->
<rect x="148" y="248" width="44" height="40" rx="5" fill="#FFF5C2"/>
<line x1="170" y1="248" x2="170" y2="288" stroke="#E8915A" stroke-width="2"/>
<line x1="148" y1="268" x2="192" y2="268" stroke="#E8915A" stroke-width="2"/>
<!-- Window right --> <!-- Parent (rose) -->
<rect x="320" y="248" width="44" height="40" rx="5" fill="#FFF5C2"/> <path d="M170 408 v-40 a26 26 0 0 1 52 0 v40 Z" fill="#F25C7A"/>
<line x1="342" y1="248" x2="342" y2="288" stroke="#E8915A" stroke-width="2"/> <circle cx="196" cy="332" r="25" fill="#FFD8B8"/>
<line x1="320" y1="268" x2="364" y2="268" stroke="#E8915A" stroke-width="2"/> <path d="M171 330 a25 25 0 0 1 50 0 a40 40 0 0 0 -50 0 Z" fill="#6F4A38"/>
<!-- Door handle --> <!-- Child (warm gold), smaller, centered -->
<circle cx="280" cy="365" r="5" fill="#E8915A"/> <path d="M234 408 v-30 a22 22 0 0 1 44 0 v30 Z" fill="#F2A93C"/>
<circle cx="256" cy="350" r="21" fill="#FFD8B8"/>
<path d="M235 349 a21 21 0 0 1 42 0 a34 34 0 0 0 -42 0 Z" fill="#C97D4A"/>
<!-- Small heart above house peak — warm rose accent --> <!-- Parent (blue) -->
<path d="M256 82 C256 82 248 70 240 72 C232 74 232 86 240 92 L256 106 L272 92 C280 86 280 74 272 72 C264 70 256 82 256 82 Z" fill="#F25C7A"/> <path d="M290 408 v-40 a26 26 0 0 1 52 0 v40 Z" fill="#4A90D9"/>
<circle cx="316" cy="332" r="25" fill="#FFD8B8"/>
<path d="M291 330 a25 25 0 0 1 50 0 a40 40 0 0 0 -50 0 Z" fill="#3A2A22"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

apps/pwa/public/icon-192.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

apps/pwa/public/icon-512.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 12 KiB

apps/pwa/public/icon-maskable-512.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

apps/pwa/public/logo.svg
+33 -40
View File
@@ -1,51 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
<!-- Background: warm cream rounded square --> <defs>
<rect width="512" height="512" rx="96" fill="#FEF3EC"/> <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#FFEFE0"/>
<stop offset="1" stop-color="#FBD9BE"/>
</linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#EE9A5E"/>
<stop offset="1" stop-color="#E2823F"/>
</linearGradient>
</defs>
<!-- House / home shape — warm amber roof, cream body --> <!-- Warm peach rounded-square background -->
<polygon points="256,90 96,230 416,230" fill="#E8915A"/> <rect width="512" height="512" rx="104" fill="url(#bg)"/>
<rect x="130" y="225" width="252" height="185" rx="8" fill="#FFF8F2"/>
<!-- Door — warm brown centered --> <!-- Soft ground shadow under the house -->
<rect x="220" y="316" width="72" height="94" rx="10" fill="#C97D4A"/> <ellipse cx="256" cy="420" rx="150" ry="16" fill="#E2823F" opacity="0.14"/>
<!-- Left adult figure — warm rose --> <!-- House walls: bold white, rounded, high contrast on peach -->
<!-- Body --> <rect x="150" y="250" width="212" height="166" rx="26" fill="#FFFFFF"/>
<ellipse cx="168" cy="292" rx="28" ry="42" fill="#F25C7A"/>
<!-- Head -->
<circle cx="168" cy="236" r="26" fill="#FFD8B8"/>
<!-- Hair -->
<ellipse cx="168" cy="217" rx="26" ry="13" fill="#C97D4A"/>
<!-- Right adult figure — warm slate blue --> <!-- Roof: amber, overhangs the walls, friendly thick form -->
<!-- Body --> <path d="M256 108 L96 256 a14 14 0 0 0 9.5 24.5 L406.5 280.5 a14 14 0 0 0 9.5 -24.5 Z" fill="url(#roof)"/>
<ellipse cx="344" cy="292" rx="28" ry="42" fill="#4A90D9"/>
<!-- Head -->
<circle cx="344" cy="236" r="26" fill="#FFD8B8"/>
<!-- Hair -->
<ellipse cx="344" cy="217" rx="26" ry="12" fill="#5C4033"/>
<!-- Child figure — warm amber, centered above door --> <!-- Heart finial above the roof peak -->
<!-- Body --> <path d="M256 70 c-9 -16 -34 -12 -34 8 c0 14 18 24 34 38 c16 -14 34 -24 34 -38 c0 -20 -25 -24 -34 -8 Z" fill="#F25C7A"/>
<ellipse cx="256" cy="308" rx="20" ry="30" fill="#E8915A"/>
<!-- Head -->
<circle cx="256" cy="273" r="19" fill="#FFD8B8"/>
<!-- Hair tuft -->
<ellipse cx="256" cy="257" rx="19" ry="9" fill="#C97D4A"/>
<!-- Window left — warm yellow with pane --> <!-- ===== Family of three, clearly spaced inside the home ===== -->
<rect x="148" y="248" width="44" height="40" rx="5" fill="#FFF5C2"/>
<line x1="170" y1="248" x2="170" y2="288" stroke="#E8915A" stroke-width="2"/>
<line x1="148" y1="268" x2="192" y2="268" stroke="#E8915A" stroke-width="2"/>
<!-- Window right --> <!-- Parent (rose) -->
<rect x="320" y="248" width="44" height="40" rx="5" fill="#FFF5C2"/> <path d="M170 408 v-40 a26 26 0 0 1 52 0 v40 Z" fill="#F25C7A"/>
<line x1="342" y1="248" x2="342" y2="288" stroke="#E8915A" stroke-width="2"/> <circle cx="196" cy="332" r="25" fill="#FFD8B8"/>
<line x1="320" y1="268" x2="364" y2="268" stroke="#E8915A" stroke-width="2"/> <path d="M171 330 a25 25 0 0 1 50 0 a40 40 0 0 0 -50 0 Z" fill="#6F4A38"/>
<!-- Door handle --> <!-- Child (warm gold), smaller, centered -->
<circle cx="280" cy="365" r="5" fill="#E8915A"/> <path d="M234 408 v-30 a22 22 0 0 1 44 0 v30 Z" fill="#F2A93C"/>
<circle cx="256" cy="350" r="21" fill="#FFD8B8"/>
<path d="M235 349 a21 21 0 0 1 42 0 a34 34 0 0 0 -42 0 Z" fill="#C97D4A"/>
<!-- Small heart above house peak — warm rose accent --> <!-- Parent (blue) -->
<path d="M256 82 C256 82 248 70 240 72 C232 74 232 86 240 92 L256 106 L272 92 C280 86 280 74 272 72 C264 70 256 82 256 82 Z" fill="#F25C7A"/> <path d="M290 408 v-40 a26 26 0 0 1 52 0 v40 Z" fill="#4A90D9"/>
<circle cx="316" cy="332" r="25" fill="#FFD8B8"/>
<path d="M291 330 a25 25 0 0 1 50 0 a40 40 0 0 0 -50 0 Z" fill="#3A2A22"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB