refactor(web): make all button and input focus:outline-none by default

Author: SilentDepth

web/src/assets/base.scss

@@ -5,6 +5,12 @@ html {
   font-size: 16px;
 }
 
+button, input {
+  &:focus {
+    @apply outline-none;
+  }
+}
+
 svg {
   @apply fill-current;
 }
@@ -23,7 +29,6 @@ svg {
     @apply w-page px-0 mx-auto;
   }
 }
-
 /*! purgecss end ignore */
 
 @tailwind utilities;

web/src/components/AppMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full relative" :data-prevent-clickaway="visible">
-    <button class="h-full w-header -mr-offset relative z-10 focus:outline-none flex" @click="visible = !visible">
+    <button class="h-full w-header -mr-offset relative z-10 flex" @click="visible = !visible">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="m-auto w-6 h-6">
         <transition
           enter-class="translate-y-full"

web/src/components/PlayerAdvancementPanel.vue

@@ -3,7 +3,7 @@
     <header class="border-b border-gray-300 bg-gray-100 md:rounded-t-md flex flex-col">
       <div class="px-page xl:px-5 flex items-center">
         <h2 class="py-3 xl:py-4 text-cool-gray-700 text-lg xl:text-xl font-medium uppercase tracking-wide">{{ t('nyaa.player_advancements.section_title') }}</h2>
-        <button class="ml-auto p-1 -mr-1 focus:outline-none flex" @click="showConfig = !showConfig">
+        <button class="ml-auto p-1 -mr-1 flex" @click="showConfig = !showConfig">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :class="['w-6 h-6', showConfig ? 'fill-black' : 'fill-gray-500']">
             <path d="M8 7a5 5 0 1 0 0 10h8a5 5 0 0 0 0-10H8zm0-2h8a7 7 0 0 1 0 14H8A7 7 0 0 1 8 5zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
           </svg>

web/src/components/PlayerList.vue

@@ -28,7 +28,7 @@
       </li>
     </ul>
     <div class="-mx-3">
-      <button v-show="restCount > 0" class="flex w-full h-14 px-3 py-2 hover:bg-cool-gray-100 focus:outline-none rounded-md text-gray-600 text-left transition duration-100 ease-linear" @click="cursor += 50">
+      <button v-show="restCount > 0" class="flex w-full h-14 px-3 py-2 hover:bg-cool-gray-100 rounded-md text-gray-600 text-left transition duration-100 ease-linear" @click="cursor += 50">
         <span class="ml-14">{{ t('nyaa.player_list.load_more_button_label') }}</span>
       </button>
     </div>

web/src/components/PlayerStatisticPanel.vue

@@ -3,7 +3,7 @@
     <header class="border-b border-gray-300 bg-gray-100 md:rounded-t-md flex flex-col">
       <div class="px-page xl:px-5 flex items-center">
         <h2 class="py-3 xl:py-4 text-cool-gray-700 text-lg xl:text-xl font-medium uppercase tracking-wide">{{ t('nyaa.player_statistics.section_title') }}</h2>
-        <button class="ml-auto p-1 -mr-1 focus:outline-none flex" @click="showConfig = !showConfig">
+        <button class="ml-auto p-1 -mr-1 flex" @click="showConfig = !showConfig">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :class="['w-6 h-6', showConfig ? 'fill-black' : 'fill-gray-500']">
             <path d="M8 7a5 5 0 1 0 0 10h8a5 5 0 0 0 0-10H8zm0-2h8a7 7 0 0 1 0 14H8A7 7 0 0 1 8 5zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
           </svg>

web/src/components/SearchBox.vue

@@ -9,7 +9,7 @@
     @click="isFocused = true"
   >
     <div class="xl:w-page xl:mx-auto flex">
-      <button ref="button" class="flex-none focus:outline-none flex items-center" @click="() => {keyword && setKeyword(''); $refs.input.focus()}">
+      <button ref="button" class="flex-none flex items-center" @click="() => {keyword && setKeyword(''); $refs.input.focus()}">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 fill-current">
           <path v-if="!keyword" d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" />
           <path v-else d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
@@ -20,7 +20,7 @@
         :value="keyword"
         type="text"
         :placeholder="t('nyaa.general.search_placeholder')"
-        class="flex-1 pl-2 pr-5 py-3 bg-transparent placeholder-gray-600 focus:outline-none cursor-pointer focus:cursor-text"
+        class="flex-1 pl-2 pr-5 py-3 bg-transparent placeholder-gray-600 cursor-pointer focus:cursor-text"
         @blur="$event.relatedTarget !== $refs.button && (isFocused = false)"
         @input="setKeyword($event.target.value)"
       >