Use the word 'private' to indicate private projects

Author: hojberg

src/UnisonShare/Project/ProjectListing.elm

@@ -1,7 +1,7 @@
 module UnisonShare.Project.ProjectListing exposing (..)
 
 import Code.ProjectNameListing as ProjectNameListing exposing (ProjectNameListing)
-import Html exposing (Html, div)
+import Html exposing (Html, div, text)
 import Html.Attributes exposing (class)
 import Lib.UserHandle exposing (UserHandle)
 import UI
@@ -125,7 +125,10 @@ view pl =
                     UI.nothing
 
                 Project.Private ->
-                    div [ class "private-icon" ] [ Icon.view Icon.eyeSlash ]
+                    div [ class "private-icon" ]
+                        [ Icon.view Icon.eyeSlash
+                        , text "Private"
+                        ]
     in
     div [ class "project-listing", class colorClass ]
         [ ProjectNameListing.view pl.listing, visibilityIcon ]

src/css/unison-share/project/project-listing.css

@@ -2,18 +2,21 @@
   --c-color_project-name-listing_private-icon: var(
     --u-color_info_icon-on-element_subdued
   );
-  --c-color_project-name-listing_private-icon_background: var(
-    --u-color_info_element_subdued
-  );
+  --c-color_project-name-listing_private-icon_background: var(--color-blue-3);
 
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 0.5rem;
 
   & .private-icon {
-    width: 1.5rem;
-    height: 1.5rem;
+    height: 1.25rem;
+    padding: 0 0.5rem;
+    font-size: var(--font-size-extra-small);
+    gap: 0.25rem;
+    font-weight: bold;
+    line-height: 1;
+    color: var(--c-color_project-name-listing_private-icon);
     border-radius: 0.75rem;
     background: var(--c-color_project-name-listing_private-icon_background);
     display: inline-flex;