Make advanced search options more discoverable (#3510)

mozilla · Jan 7, 2025 · cf74554 · cf74554
1 parent 5efb934
commit cf74554
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/translate/src/modules/search/components/SearchBox.css b/translate/src/modules/search/components/SearchBox.css
@@ -12,7 +12,7 @@
   font-size: 14px;
   font-weight: 300;
   line-height: 23px;
-  padding: 5px 33px 5px 37px;
+  padding: 5px 36px 5px 37px;
   width: 100%;
 }
 

diff --git a/translate/src/modules/search/components/SearchPanel.css b/translate/src/modules/search/components/SearchPanel.css
@@ -9,15 +9,20 @@
     position: absolute;
     width: 43px;
 
-    &:hover::before {
+    &:hover {
       color: var(--white-1);
     }
 
     .fas {
       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
@@ -128,7 +128,10 @@ export function SearchPanel({
   return (
     <div className='search-panel'>
       <div className='visibility-switch' onClick={toggleVisible}>
-        <span className='fas fa-search'></span>
+        <span className='fa-stack'>
+          <i className='fas fa-search fa-stack-2x'></i>
+          <i className='fas fa-caret-down fa-stack-1x'></i>
+        </span>
       </div>
       {visible ? (
         <SearchPanelDialog