azom.dev / PrivacyPin
Self-hosted, federated location sharing app and server that prioritizes user privacy and security
end-to-end-encryption location-sharing privacy self-hosted federated
fork atom

Redesign settings ui and remove alternate style svgs

kishka.cc d2eb1675 c1c595fa

+119 -119
unified split
-4
app/src/assets/pin.svg
··· 1 - <?xml version="1.0" encoding="utf-8"?> 2 - <svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 3 - <path fill-rule="evenodd" clip-rule="evenodd" d="M3.37892 10.2236L8 16L12.6211 10.2236C13.5137 9.10788 14 7.72154 14 6.29266V6C14 2.68629 11.3137 0 8 0C4.68629 0 2 2.68629 2 6V6.29266C2 7.72154 2.4863 9.10788 3.37892 10.2236ZM8 8C9.10457 8 10 7.10457 10 6C10 4.89543 9.10457 4 8 4C6.89543 4 6 4.89543 6 6C6 7.10457 6.89543 8 8 8Z" fill="#000000"/> 4 - </svg>
-13
app/src/assets/qr.svg
··· 1 - <?xml version="1.0" encoding="utf-8"?> 2 - 3 - <svg fill="#000000" width="800px" height="800px" viewBox="0 -0.09 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 122.88 122.7" xml:space="preserve"> 4 - 5 - <style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style> 6 - 7 - <g> 8 - 9 - <path class="st0" d="M0.18,0h44.63v44.45H0.18V0L0.18,0z M111.5,111.5h11.38v11.2H111.5V111.5L111.5,111.5z M89.63,111.48h11.38 v10.67H89.63h-0.01H78.25v-21.82h11.02V89.27h11.21V67.22h11.38v10.84h10.84v11.2h-10.84v11.2h-11.21h-0.17H89.63V111.48 L89.63,111.48z M55.84,89.09h11.02v-11.2H56.2v-11.2h10.66v-11.2H56.02v11.2H44.63v-11.2h11.2V22.23h11.38v33.25h11.02v11.2h10.84 v-11.2h11.38v11.2H89.63v11.2H78.25v22.05H67.22v22.23H55.84V89.09L55.84,89.09z M111.31,55.48h11.38v11.2h-11.38V55.48 L111.31,55.48z M22.41,55.48h11.38v11.2H22.41V55.48L22.41,55.48z M0.18,55.48h11.38v11.2H0.18V55.48L0.18,55.48z M55.84,0h11.38 v11.2H55.84V0L55.84,0z M0,78.06h44.63v44.45H0V78.06L0,78.06z M10.84,88.86h22.95v22.86H10.84V88.86L10.84,88.86z M78.06,0h44.63 v44.45H78.06V0L78.06,0z M88.91,10.8h22.95v22.86H88.91V10.8L88.91,10.8z M11.02,10.8h22.95v22.86H11.02V10.8L11.02,10.8z"/> 10 - 11 - </g> 12 - 13 - </svg>
+4
app/src/assets/scan-qr.svg
··· 1 + <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> 2 + <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 3 + <path d="M7.55556 4H5C4.44771 4 4 4.44772 4 5V7.55556M16.4444 4H19C19.5523 4 20 4.44772 20 5V7.55556M20 16.4444V19C20 19.5523 19.5523 20 19 20H16.4444M7.55556 20H5C4.44771 20 4 19.5523 4 19V16.4444M5.77778 12.8889H6.66667M8.44444 12.8889H9.33333M5.77778 11H10.1111C10.6634 11 11.1111 10.5523 11.1111 10V5.77778M12.8889 5.77778V11.1111M16.4444 11H18.2222M14.6667 11H15.1111M13.7778 12.8889H15.1111M17 12.8889H18.2222M18.2222 15H15.5556M15.5556 16.8889V18.2222M13.7778 15V18.2222M12 18.2222V12.8889H11.1111M10.2222 14.6667V18.2222M18.2222 17.7778V17.7778C18.2222 17.5323 18.0232 17.3333 17.7778 17.3333V17.3333C17.5323 17.3333 17.3333 17.5323 17.3333 17.7778V17.7778C17.3333 18.0232 17.5323 18.2222 17.7778 18.2222V18.2222C18.0232 18.2222 18.2222 18.0232 18.2222 17.7778ZM18.2222 6.77778V8.33333C18.2222 8.88562 17.7745 9.33333 17.2222 9.33333H15.6667C15.1144 9.33333 14.6667 8.88562 14.6667 8.33333V6.77778C14.6667 6.22549 15.1144 5.77778 15.6667 5.77778H17.2222C17.7745 5.77778 18.2222 6.22549 18.2222 6.77778ZM6.77778 9.33333H8.33333C8.88562 9.33333 9.33333 8.88562 9.33333 8.33333V6.77778C9.33333 6.22549 8.88562 5.77778 8.33333 5.77778H6.77778C6.22549 5.77778 5.77778 6.22549 5.77778 6.77778V8.33333C5.77778 8.88562 6.22549 9.33333 6.77778 9.33333ZM7.44444 18.2222H6.77778C6.22549 18.2222 5.77778 17.7745 5.77778 17.2222V15.6667C5.77778 15.1144 6.22549 14.6667 6.77778 14.6667H7.44444C7.99673 14.6667 8.44444 15.1144 8.44444 15.6667V17.2222C8.44444 17.7745 7.99673 18.2222 7.44444 18.2222Z" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/> 4 + </svg>
-6
app/src/assets/three-dots.svg
··· 1 - <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> 2 - <svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 3 - <path d="M8 12C9.10457 12 10 12.8954 10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12Z" fill="#000000"/> 4 - <path d="M8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6Z" fill="#000000"/> 5 - <path d="M10 2C10 0.89543 9.10457 -4.82823e-08 8 0C6.89543 4.82823e-08 6 0.895431 6 2C6 3.10457 6.89543 4 8 4C9.10457 4 10 3.10457 10 2Z" fill="#000000"/> 6 - </svg>
+4
app/src/assets/undo.svg
··· 1 + <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> 2 + <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 3 + <path d="M9 17H15C17.2091 17 19 15.2091 19 13V13C19 10.7909 17.2091 9 15 9H5M5 9L7 11M5 9L7 7" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/> 4 + </svg>
+68 -76
app/src/settings-page/settings.css
··· 1 1 body { 2 - font-family: system-ui, sans-serif; 2 + font-family: sans-serif; 3 3 background: #f9fafb; 4 + margin: 0; 4 5 display: flex; 5 - align-items: center; 6 6 justify-content: center; 7 - height: 100vh; 8 - margin: 0; 9 7 } 10 8 11 - .card { 12 - max-width: 90%; 13 - background: white; 14 - border: 1px solid #d1d5db; 15 - border-radius: 8px; 16 - padding: 1.5rem; 17 - box-sizing: border-box; 9 + .container { 10 + display: flex; 18 11 } 19 12 20 - .header { 13 + .container div { 14 + flex: 1; 21 15 text-align: center; 22 - margin-bottom: 1.5rem; 16 + margin: auto; 23 17 } 24 18 25 - .icon-circle { 26 - width: 64px; 27 - height: 64px; 28 - background: #dbeafe; 29 - border-radius: 50%; 30 - display: flex; 31 - align-items: center; 32 - justify-content: center; 33 - margin: 0 auto 1rem; 19 + .contentHeader { 20 + text-align: center; 21 + border-bottom: 1px solid #e5e7eb; 22 + padding-bottom: 10px; 34 23 } 35 24 36 - .icon-circle img { 37 - width: 32px; 38 - height: 32px; 25 + .icon-btn { 26 + border: none; 27 + background: none; 28 + cursor: pointer; 29 + padding: 0.4rem; 30 + font-size: 1rem; 39 31 } 40 32 41 - h1 { 42 - font-size: 1.5rem; 33 + .svg-icon { 34 + width: 25px; 35 + height: 25px; 36 + margin: auto; 43 37 } 44 38 45 - p { 46 - font-size: 0.9rem; 47 - color: #6b7280; 39 + .app { 40 + width: 100%; 41 + background: #f9fafb; 42 + min-height: 100vh; 48 43 } 49 44 50 - .actions { 45 + header { 46 + background: #fff; 47 + border-bottom: 1px solid #e5e7eb; 48 + padding: 0.75rem 1rem; 51 49 display: flex; 52 - flex-direction: column; 50 + justify-content: space-between; 51 + align-items: center; 52 + } 53 + 54 + .content { 55 + padding: 1rem; 56 + display: grid; 57 + gap: 0.75rem; 58 + } 59 + 60 + .card { 61 + background: #fff; 62 + border: 1px solid #e5e7eb; 63 + border-radius: 8px; 64 + padding: 1rem; 65 + } 66 + 67 + .row { 68 + display: flex; 69 + justify-content: space-between; 53 70 gap: 1rem; 71 + align-items: center; 54 72 } 55 73 56 74 label { 57 75 display: block; 58 - font-size: 0.85rem; 59 - font-weight: 600; 76 + margin-top: 0.5rem; 60 77 margin-bottom: 0.25rem; 78 + font-size: 0.9rem; 79 + color: #374151; 61 80 } 62 81 63 82 input { 64 83 width: 100%; 65 - padding: 0.5rem 0.75rem; 66 - border: 1px solid #d1d5db; 67 - border-radius: 4px; 68 - font-size: 0.95rem; 69 84 box-sizing: border-box; 85 + padding: 0.55rem 0.6rem; 86 + border-radius: 8px; 87 + border: 1px solid #d1d5db; 88 + outline: none; 70 89 } 71 90 72 91 input:focus { 73 - outline: none; 74 - border-color: #2563eb; 92 + border-color: #3b82f6; 75 93 } 76 94 77 - button { 95 + button.primary { 96 + margin-top: 0.75rem; 78 97 width: 100%; 79 - padding: 0.6rem; 80 - font-size: 0.95rem; 81 - border-radius: 4px; 98 + padding: 0.6rem 0.75rem; 99 + border: none; 100 + border-radius: 8px; 101 + background: #3b82f6; 102 + color: white; 82 103 cursor: pointer; 83 - /*transition: background 0.2s ease;*/ 84 - display: flex; 85 - align-items: center; 86 - justify-content: center; 87 104 } 88 105 89 - .btn-primary { 106 + button.primary:hover { 90 107 background: #2563eb; 91 - color: white; 92 - border: none; 93 - } 94 - 95 - .btn-primary:hover { 96 - background: #1d4ed8; 97 - } 98 - 99 - .btn-secondary { 100 - background: white; 101 - gap: 0.5rem; 102 - border: 1px solid #d1d5db; 103 - } 104 - 105 - .btn-secondary:hover { 106 - background: #f3f4f6; 107 - } 108 - 109 - .btn-secondary img { 110 - width: 16px; 111 - height: 16px; 112 - } 113 - 114 - .hint { 115 - font-size: 0.75rem; 116 108 } 117 109 118 110 .switch { ··· 155 147 } 156 148 157 149 input:checked + .slider { 158 - background-color: #2563eb; 150 + background-color: #3b82f6; 159 151 } 160 152 161 153 input:focus + .slider { 162 - box-shadow: 0 0 1px #2563eb; 154 + box-shadow: 0 0 1px #3b82f6; 163 155 } 164 156 165 157 input:checked + .slider:before {
+43 -20
app/src/settings-page/settings.html
··· 7 7 </head> 8 8 9 9 <body> 10 - <div class="card"> 11 - <div class="actions" x-data="settingsPageState"> 12 - <h3>Settings</h3> 13 - 14 - <div> 15 - Location Sharing 16 - 17 - <label class="switch round"> 18 - <input 19 - type="checkbox" 20 - x-model.boolean="location_on" 21 - @click="toggleLocation()" 10 + <div class="app" x-data="settingsPageState"> 11 + <header class="container"> 12 + <div style="text-align: left"> 13 + <button class="icon-btn" @click="goto('home')"> 14 + <img 15 + class="svg-icon" 16 + src="/src/assets/undo.svg" 17 + alt="Go Back Icon" 22 18 /> 23 - <span class="slider round"></span> 24 - </label> 19 + </button> 25 20 </div> 21 + <div style="text-align: center"> 22 + <strong>Settings</strong> 23 + </div> 24 + <div style="text-align: right"></div> 25 + </header> 26 26 27 - <button class="btn-primary" @click="goto('home')"> 28 - Back to Home 29 - </button> 27 + <div class="content"> 28 + <div class="card"> 29 + <div class="contentHeader"> 30 + <strong>General</strong> 31 + </div> 32 + <div class="container"> 33 + <div style="text-align: left"> 34 + <p>Sharing Location</p> 35 + </div> 36 + <div style="text-align: right"> 37 + <label class="switch round"> 38 + <input 39 + type="checkbox" 40 + x-model.boolean="location_on" 41 + @click="toggleLocation()" 42 + /> 43 + <span class="slider round"></span> 44 + </label> 45 + </div> 46 + </div> 47 + </div> 30 48 31 - <button class="btn-secondary" @click="await debugLogout()"> 32 - Signout 33 - </button> 49 + <div class="card"> 50 + <div class="contentHeader"> 51 + <strong>Dangerous</strong> 52 + </div> 53 + <button class="button primary" @click="await debugLogout()"> 54 + Signout 55 + </button> 56 + </div> 34 57 </div> 35 58 </div> 36 59 </body>