style(repos): use tabler lock icon for private repos

src/views/RepoList.vue

@@ -246,8 +246,26 @@ const isStarred = (repo: RepoBase) => favoriteCheckboxes.value.includes(repo.id)
                 class="tile-lock"
                 aria-label="Private"
                 title="Private repo"
-                >🔒</span
               >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="22"
+                  height="22"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"
+                  />
+                  <path d="M11 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                  <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
+                </svg>
+              </span>
             </router-link>
           </div>
         </section>
@@ -297,8 +315,26 @@ const isStarred = (repo: RepoBase) => favoriteCheckboxes.value.includes(repo.id)
                     class="row-lock"
                     aria-label="Private"
                     title="Private repo"
-                    >🔒</span
                   >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="22"
+                      height="22"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path
+                        d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"
+                      />
+                      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+                      <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
+                    </svg>
+                  </span>
                 </li>
               </ul>
             </div>
@@ -783,8 +819,10 @@ main {
   position: absolute;
   bottom: 0.55rem;
   right: 0.7rem;
-  font-size: 0.85rem;
+  display: inline-flex;
-  opacity: 0.7;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.75;
   user-select: none;
 }
 
@@ -959,8 +997,10 @@ main {
 
 .row-lock {
   flex-shrink: 0;
-  font-size: 0.85rem;
+  display: inline-flex;
-  opacity: 0.65;
+  align-items: center;
+  justify-content: center;
+  color: var(--hw-ink-faint);
   user-select: none;
 }