Improve visibility of advanced search options

[flodolo]

While the lens icon copies the behavior of the funnel icon (there is no visual indication that it will open a dropdown), part of the feedback during the survey was that the feature is not discoverable.

I see two options to improve the situation.

Move the advanced search options to the main dropdown

This was suggested during implementation, and I still feel like a separate menu is the right approach. The idea is that users should touch these options very rarely, because the defaults cover most of the cases.

Add a visual hint

Looking into Font Awesome, it looks like it supports icon stacking, so we could stack a down arrow with the lens? I did some quick experiments, but it doesn't look amazing.

[flodolo]

Example of stacked icon

diff --git a/translate/src/modules/search/components/SearchPanel.css b/translate/src/modules/search/components/SearchPanel.css
index 7a3b28a9..7d682eec 100644
--- a/translate/src/modules/search/components/SearchPanel.css
+++ b/translate/src/modules/search/components/SearchPanel.css
@@ -15,9 +15,14 @@
 
     .fa {
       font-size: 17px;
-      margin-left: 10px;
+      margin-left: 1px;
       margin-top: 9px;
     }
+
+    .fa-caret-down {
+      font-size: 13px;
+      transform: translate(35%, -25%);
+    }
   }
 
   & .menu {
diff --git a/translate/src/modules/search/components/SearchPanel.tsx b/translate/src/modules/search/components/SearchPanel.tsx
index a837c494..3d7d87c9 100644
--- a/translate/src/modules/search/components/SearchPanel.tsx
+++ b/translate/src/modules/search/components/SearchPanel.tsx
@@ -128,7 +128,10 @@ export function SearchPanel({
   return (
     <div className='search-panel'>
       <div className='visibility-switch' onClick={toggleVisible}>
-        <span className='fa fa-search'></span>
+        <span className="fa-stack">
+          <i className="fa fa-search fa-stack-2x"></i>
+          <i className="fa fa-caret-down fa-stack-1x"></i>
+        </span>
       </div>
       {visible ? (
         <SearchPanelDialog