Merge pull request #4066 from overleaf/ae-symbol-search-input

Use FormControl for symbol palette search input

GitOrigin-RevId: c6f0c7f53797cab417c6bc15f1b30f20761b9fac

services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
+import { FormControl } from 'react-bootstrap'
 import useDebounce from '../../../shared/hooks/use-debounce'
 
 export default function SymbolPaletteSearch({ setInput, inputRef }) {
@@ -15,11 +16,18 @@ export default function SymbolPaletteSearch({ setInput, inputRef }) {
 
   const { t } = useTranslation()
 
+  const inputRefCallback = useCallback(
+    element => {
+      inputRef.current = element
+    },
+    [inputRef]
+  )
+
   return (
-    <input
+    <FormControl
       className="symbol-palette-search"
       type="search"
-      ref={inputRef}
+      inputRef={inputRefCallback}
       id="symbol-palette-input"
       aria-label="Search"
       value={localInput}

services/web/frontend/js/features/symbol-palette/components/symbol-palette-tabs.js

@@ -4,9 +4,13 @@ import PropTypes from 'prop-types'
 
 export default function SymbolPaletteTabs({ categories, disabled }) {
   return (
-    <TabList aria-label="Symbol Categories">
+    <TabList aria-label="Symbol Categories" className="symbol-palette-tab-list">
       {categories.map(category => (
-        <Tab key={category.id} disabled={disabled}>
+        <Tab
+          key={category.id}
+          disabled={disabled}
+          className="symbol-palette-tab"
+        >
           {category.label}
         </Tab>
       ))}

services/web/frontend/stylesheets/app/editor/symbol-palette.less

@@ -21,12 +21,15 @@
   background: @symbol-palette-header-background;
 }
 
-.symbol-palette-header [data-reach-tab] {
+.symbol-palette-tab-list[data-reach-tab-list] {
+  background: none;
   border-bottom: none;
 }
 
-.symbol-palette-header [data-reach-tab][data-selected] {
+.symbol-palette-tab[data-reach-tab][data-selected] {
   background: @symbol-palette-selected-tab-bg;
+  color: @symbol-palette-selected-tab-color;
+  border-bottom-color: transparent;
 }
 
 .symbol-palette-body {
@@ -37,7 +40,7 @@
 .symbol-palette-items {
   display: flex;
   flex-wrap: wrap;
-  padding: 5px;
+  padding: @padding-xs;
 }
 
 .symbol-palette-item {
@@ -46,11 +49,11 @@
   line-height: 42px;
   height: 42px;
   width: 42px;
-  margin: 5px;
+  margin: @margin-xs;
   color: @symbol-palette-item-color;
   background: @symbol-palette-item-bg;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: @border-radius-base;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -62,21 +65,20 @@
 }
 
 .symbol-palette-item-notes {
-  margin-top: 5px;
+  margin-top: @margin-xs;
 }
 
 .symbol-palette-empty {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px;
+  padding: @padding-sm;
 }
 
 .symbol-palette-search {
-  color: @symbol-palette-search-color;
-  border-radius: 21px;
-  border: none;
-  padding: 2px 10px;
-  margin: 5px;
+  padding: 2px @padding-sm;
+  margin: @margin-xs;
   line-height: 1;
+  height: auto;
+  width: auto;
 }

services/web/frontend/stylesheets/core/ol-light-variables.less

@@ -131,8 +131,8 @@
 // Symbol Palette
 @symbol-palette-bg: #fff;
 @symbol-palette-color: @ol-blue-gray-3;
-@symbol-palette-header-background: #fff;
-@symbol-palette-item-bg: @gray-lighter;
-@symbol-palette-item-color: @ol-blue-gray-5;
-@symbol-palette-search-color: @ol-blue-gray-4;
-@symbol-palette-selected-tab-bg: @gray-lighter;
+@symbol-palette-header-background: @ol-blue-gray-1;
+@symbol-palette-item-bg: @ol-blue-gray-1;
+@symbol-palette-item-color: @ol-blue-gray-3;
+@symbol-palette-selected-tab-bg: #fff;
+@symbol-palette-selected-tab-color: @ol-blue;

services/web/frontend/stylesheets/core/variables.less

@@ -1119,5 +1119,5 @@
 @symbol-palette-header-background: @ol-blue-gray-5;
 @symbol-palette-item-bg: @ol-blue-gray-5;
 @symbol-palette-item-color: #fff;
-@symbol-palette-search-color: @ol-blue-gray-4;
 @symbol-palette-selected-tab-bg: @ol-blue-gray-4;
+@symbol-palette-selected-tab-color: #fff;