Add search icon and use in search input, darken border, update shortcut to use modifier key

Author: gcamacho079

docs/.vuepress/config.js

@@ -48,7 +48,7 @@ module.exports = {
     docsDir: "docs",
     docsBranch: "main",
     baseUrl: "https://craftcms.com/docs",
-    searchPlaceholder: "Search all documentation (Press “/” to focus)",
+    searchPlaceholder: "Search all documentation (Press Ctrl/⌘ + ”/” to focus)",
     editLinks: true,
     nextLinks: true,
     prevLinks: true,

docs/.vuepress/sets/craft-cloud.js

@@ -4,7 +4,7 @@ module.exports = {
   icon: "/docs/icons/icon-cloud.svg",
   baseDir: "cloud",
   abandoned: false,
-  searchPlaceholder: "Search Cloud docs (Press “/” to focus)",
+  searchPlaceholder: "Search Cloud docs (Press Ctrl/⌘ + ”/” to focus)",
   primarySet: true,
   globalVars: {
     supportEmail: 'support@craft.cloud',

docs/.vuepress/sets/craft-cms.js

@@ -12,7 +12,7 @@ module.exports = {
   ],
   defaultVersion: "5.x",
   abandoned: false,
-  searchPlaceholder: "Search the Craft docs (Press “/” to focus)",
+  searchPlaceholder: "Search the Craft docs (Press Ctrl/⌘ + ”/” to focus)",
   primarySet: true,
   sidebar: {
     "5.x": {

docs/.vuepress/sets/craft-commerce.js

@@ -13,7 +13,7 @@ module.exports = {
   ],
   defaultVersion: "5.x",
   abandoned: false,
-  searchPlaceholder: "Search the Commerce docs (Press “/” to focus)",
+  searchPlaceholder: "Search the Commerce docs (Press Ctrl/⌘ + ”/” to focus)",
   primarySet: true,
   sidebar: {
     "5.x": {

docs/.vuepress/sets/craft-nitro.js

@@ -11,7 +11,7 @@ module.exports = {
   defaultVersion: "2.x",
   abandoned: true,
   deprecationMessage: "Nitro is no longer supported. Please see our <a href=\"https://craftcms.com/blog/retiring-craft-nitro\">announcement</a> and <a href=\"https://craftcms.com/knowledge-base/migrating-from-craft-nitro-to-ddev\">DDEV migration guide</a>.",
-  searchPlaceholder: "Search the Nitro docs (Press “/” to focus)",
+  searchPlaceholder: "Search the Nitro docs (Press Ctrl/⌘ + ”/” to focus)",
   primarySet: false,
   sidebar: {
     "2.x": {

docs/.vuepress/sets/getting-started-tutorial.js

@@ -4,7 +4,7 @@ module.exports = {
   icon: "/docs/icons/tutorial.svg",
   baseDir: "getting-started-tutorial",
   abandoned: false,
-  searchPlaceholder: "Search the tutorial (Press “/” to focus)",
+  searchPlaceholder: "Search the tutorial (Press Ctrl/⌘ + ”/” to focus)",
   primarySet: false,
   sidebar: {
     "/": [

docs/.vuepress/theme/components/SearchBox.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="search-box relative w-full">
+    <SearchIcon />
     <input
       ref="input"
       aria-label="Search"
       :value="query"
       :class="{ focused: focused }"
       :placeholder="placeholder"
-      class="rounded-md w-full px-5 py-2 text-sm"
+      class="rounded-md w-full text-sm"
       autocomplete="off"
       spellcheck="false"
       @input="query = $event.target.value"
@@ -83,9 +84,13 @@
 
 <script>
 import searchService from "../util/flexsearch-service";
+import SearchIcon from "../icons/SearchIcon.vue";
 
 export default {
   name: "SearchBox",
+  components: {
+    SearchIcon,
+  },
   data() {
     return {
       query: "",
@@ -182,9 +187,11 @@ export default {
     },
     onHotkey(event) {
       // take us to the search input if it doesn’t have focus
+      // Require Command (metaKey) or Control (ctrlKey) plus '/'
       if (
         event.srcElement !== this.$refs.input &&
-        this.hotkeys.includes(event.key)
+        this.hotkeys.includes(event.key) &&
+        (event.ctrlKey || event.metaKey)
       ) {
         this.$refs.input.focus();
         event.preventDefault();

docs/.vuepress/theme/icons/SearchIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg" 
+    width="23"
+    height="23"
+    viewBox="0 0 23 23"
+    aria-hidden="true">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(0 -3)">
+      <circle cx="14" cy="12" r="8" transform="rotate(45 14 12)"/><path d="m8.536 17.464-7.072 7.072"/>
+    </g>
+  </svg>
+</template>

docs/.vuepress/theme/styles/base.pcss

@@ -102,6 +102,33 @@ a {
   left: .5em;
 }
 
+.search-box {
+  --input-padding-x: 1.25rem;
+  --input-padding-y: 0.5rem;
+  --icon-size: 1rem;
+  --icon-padding-x: 0.7rem;
+  --placeholder-color: #5C7194;
+
+  input {
+    border: 1px solid var(--ui-component-color);
+    padding: var(--input-padding-y) var(--input-padding-x) var(--input-padding-y) calc((var(--icon-padding-x) * 1.5) + var(--icon-size));
+  
+    &::placeholder {
+      color: var(--placeholder-color);
+    }
+  }
+
+  & > svg {
+    @apply block absolute;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    top: 50%;
+    left: var(--icon-padding-x);
+    transform: translateY(-50%);
+    color: var(--placeholder-color);
+  }
+}
+
 img {
   @apply max-w-full;
 }

docs/.vuepress/theme/styles/color-mode.pcss

@@ -42,6 +42,10 @@
     --code-color-orange: #E96E3A;
     --code-color-olive: #778A00;
     --code-color-gray: #7C8F00;
+
+    .search-box {
+      --placeholder-color: #91A1BB;
+    }
   }
 }
 
@@ -103,6 +107,8 @@
   }
 
   .search-box {
+    --placeholder-color: #91A1BB;
+
     .suggestions {
       @apply bg-gray-900;