Merge pull request #1605 from hypothesis/tag-editor-touch-input

Use mobile-friendly font size for all input fields

src/sidebar/components/markdown-editor.js

@@ -283,7 +283,7 @@ function MarkdownEditor({ onEditText = () => {}, text = '' }) {
         />
       ) : (
         <textarea
-          className="markdown-editor__input form-input form-textarea"
+          className="markdown-editor__input"
           ref={input}
           onClick={e => e.stopPropagation()}
           onKeydown={handleKeyDown}

src/styles/forms.scss

@@ -5,15 +5,4 @@
   @include forms.form-input;
   width: 100%;
   display: block;
-
-  &:focus,
-  &.js-focus {
-    @include forms.form-input-focus;
-  }
-}
-
-.form-textarea {
-  min-height: 8em;
-  max-width: 100%;
-  resize: vertical;
 }

src/styles/mixins/forms.scss

@@ -28,6 +28,16 @@
     0px 0px 5px var.$color-focus-shadow;
 }
 
+@mixin form-input-focus {
+  outline: none;
+  background-color: var.$white;
+
+  @include focus-outline;
+  @include placeholder {
+    color: var.$grey-5;
+  }
+}
+
 @mixin form-input {
   @include var.font-normal;
   border: 1px solid var.$grey-3;
@@ -36,15 +46,13 @@
   font-weight: normal;
   color: var.$grey-5;
   background-color: var.$grey-0;
-}
 
-@mixin form-input-focus {
-  outline: none;
-  background-color: var.$white;
+  &:focus {
+    @include form-input-focus;
+  }
 
-  @include focus-outline;
-  @include placeholder {
-    color: var.$grey-5;
+  @media (pointer: coarse) {
+    font-size: var.$touch-input-font-size;
   }
 }
 

src/styles/sidebar/components/markdown-editor.scss

+@use "../../mixins/forms";
 @use "../../variables" as var;
 
 $toolbar-border: 0.1em solid var.$grey-3;
@@ -62,11 +63,15 @@ $toolbar-border: 0.1em solid var.$grey-3;
   margin-bottom: 2px; // Tweak to align help icon better with adjacent buttons
 }
 
-@media (pointer: coarse) {
-  .markdown-editor__input {
-    font-size: var.$touch-input-font-size;
-  }
+.markdown-editor__input {
+  @include forms.form-input;
+
+  min-height: 8em;
+  resize: vertical;
+  width: 100%;
+}
 
+@media (pointer: coarse) {
   .markdown-editor__toolbar {
     // Remove the padding to avoid the toolbar taking up too much space as we
     // make the buttons larger.

src/styles/sidebar/components/search-input.scss

-@use "../../mixins/focus";
+@use "../../mixins/forms";
 @use "../../variables" as var;
 
 .search-input__form {
@@ -14,17 +14,16 @@
 }
 
 .search-input__input {
-  @include focus.outline-on-keyboard-focus;
+  @include forms.form-input;
 
   flex-grow: 1;
   order: 1;
 
-  color: var.$text-color;
-
   // Disable default browser styling for the input.
+  &:not(:focus) {
     border: none;
     padding: 0px;
-  width: 100%;
+  }
 
   // The search box expands when focused, via a change in the
   // `max-width` property.
@@ -45,9 +44,3 @@
     padding-left: 6px;
   }
 }
-
-@media (pointer: coarse) {
-  .search-input__input {
-    font-size: var.$touch-input-font-size;
-  }
-}

src/styles/sidebar/components/tag-editor.scss

@@ -6,9 +6,6 @@
   &__input {
     @include forms.form-input;
     width: 100%;
-    &:focus {
-      @include forms.form-input-focus;
-    }
   }
 
   &__tag-list {