WIP(shops): style fixes

website/client/src/assets/scss/item.scss

@@ -1,5 +1,11 @@
 // TODO move to item component?
 
+.item, .item-wrapper, .item > div > div {
+  &:focus-visible {
+    outline: none;
+  }
+}
+
 .items > div {
   display: inline-block;
   margin-right: 24px;
@@ -9,6 +15,15 @@
   position: relative;
   display: inline-block;
   margin-bottom: 12px;
+
+  &:focus {
+    outline: 2px solid $purple-400;
+    border-radius: 2px;
+  }
+
+  &:hover {
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+  }
 }
 
 .items-one-line .item-wrapper {
@@ -56,11 +71,6 @@
     background: $purple-500;
   }
 
-  &:hover {
-    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
-    border-color: $purple-400;
-  }
-
   &.highlight {
     box-shadow: 0 0 8px 8px rgba($black, 0.16), 0 5px 10px 0 rgba($black, 0.12) !important;
   }

website/client/src/components/ui/showMoreButton.vue

@@ -38,5 +38,9 @@ export default {
         color: $purple-300;
       }
     }
+
+    &:focus {
+      outline: 2px solid $purple-400;
+    }
   }
 </style>

website/common/locales/en/character.json

@@ -2,7 +2,7 @@
   "communityGuidelinesWarning": "Please keep in mind that your Display Name, profile photo, and blurb must comply with the <a href='https://habitica.com/static/community-guidelines' target='_blank'>Community Guidelines</a> (e.g. no profanity, no adult topics, no insults, etc). If you have any questions about whether or not something is appropriate, feel free to email <%= hrefBlankCommunityManagerEmail %>!",
   "profile": "Profile",
   "avatar": "Customize Avatar",
-  "editAvatar": "Edit Avatar",
+  "editAvatar": "Customize Avatar",
   "noDescription": "This Habitican hasn't added a description.",
   "noPhoto": "This Habitican hasn't added a photo.",
   "other": "Other",