blog: align lock/unlock icons with text; shrink Unlock to a pill button

Author: one-kash

blog/2026-07-01-curtain-for-your-calendar.md

@@ -49,28 +49,26 @@ KashCal now has **App lock**. Turn it on, and opening the app throws up a curtai
       <img src="/img/icon-transparent.png" alt="KashCal app icon" width="72" height="72" />
     </div>
     <div style={{fontWeight: 600, fontSize: '1.25rem', marginTop: '1.1rem'}}>KashCal</div>
-    <div style={{display: 'flex', alignItems: 'center', gap: '0.3rem', opacity: 0.62, fontSize: '0.85rem', lineHeight: 1, marginTop: '0.5rem'}}>
-      <svg viewBox="0 -960 960 960" width="13" height="13" fill="currentColor" style={{display: 'block', flexShrink: 0}} aria-hidden="true">
+    <div style={{display: 'flex', alignItems: 'center', gap: '0.35rem', opacity: 0.62, fontSize: '0.85rem', marginTop: '0.5rem'}}>
+      <svg viewBox="0 -960 960 960" width="14" height="14" fill="currentColor" style={{display: 'block', flexShrink: 0, marginBottom: '2px'}} aria-hidden="true">
         <path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm240-200q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z" />
       </svg>
-      Locked
+      <span>Locked</span>
     </div>
     <div style={{flex: 1}}></div>
     <div style={{
-      display: 'flex',
+      display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       gap: '0.5rem',
-      width: '100%',
-      padding: '0.85rem 0',
-      borderRadius: '25px',
+      padding: '0.6rem 1.8rem',
+      borderRadius: '999px',
       background: '#3a4a63',
       color: '#eef3f1',
       fontWeight: 600,
-      fontSize: '0.95rem',
-      lineHeight: 1,
+      fontSize: '0.9rem',
     }}>
-      <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{display: 'block', flexShrink: 0}} aria-hidden="true">
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{display: 'block', flexShrink: 0, marginBottom: '1px'}} aria-hidden="true">
         <path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4" />
         <path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2" />
         <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
@@ -81,7 +79,7 @@ KashCal now has **App lock**. Turn it on, and opening the app throws up a curtai
         <path d="M21.8 16c.2-2 .131-5.354 0-6" />
         <path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2" />
       </svg>
-      Unlock
+      <span>Unlock</span>
     </div>
   </div>
 </div>