fix: add styles for focus state of searchbar (solana-foundation#558)

## Description

Add styles for focused state for SearchBar.

## Type of change

-   [x] Bug fix

## Screenshots

<img width="899" alt="image"
src="https://github.com/user-attachments/assets/13802f7c-eaff-42b5-a6bc-ba8324599ca8"
/>


## Checklist

-   [x] My code follows the project's style guidelines
-   [x] I have added tests that prove my fix/feature works
-   [x] All tests pass locally and in CI
-   [x] I have updated documentation as needed
-   [x] CI/CD checks pass
<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Add focus styles to `.search-bar__control` and normalize color codes
in `_solana.scss`.
> 
>   - **Styles**:
> - Add focus styles to `.search-bar__control` in `_solana.scss`,
including a red outline and box-shadow.
> - Normalize color codes to lowercase in `.search-indicator`,
`.key-indicator`, and `.clear-indicator`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=solana-foundation%2Fexplorer&utm_source=github&utm_medium=referral)<sup>
for d0829d6. It will automatically
update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

Author: rogaldh

app/scss/_solana.scss

@@ -191,7 +191,6 @@ h4.slot-pill {
     line-height: 1.5rem;
 }
 
-
 .search-bar__control {
     border-radius: $border-radius !important;
     padding: 2px 16px;
@@ -208,13 +207,13 @@ h4.slot-pill {
         width: 16px;
         height: 16px;
         padding: 4px;
-        color: #C9C9C9;
+        color: #c9c9c9;
         display: flex;
         transition: color 150ms;
         box-sizing: content-box;
         border-radius: 3px;
         border: 1px solid #111312;
-        background: #282D2C;
+        background: #282d2c;
         text-align: center;
         align-items: center;
         justify-content: center;
@@ -228,13 +227,13 @@ h4.slot-pill {
         width: 16px;
         height: 16px;
         padding: 4px;
-        color: #C9C9C9;
+        color: #c9c9c9;
         display: flex;
         transition: color 150ms;
         box-sizing: content-box;
         border-radius: 3px;
         border: 1px solid #111312;
-        background: #282D2C;
+        background: #282d2c;
         text-align: center;
         align-items: center;
         justify-content: center;
@@ -249,13 +248,13 @@ h4.slot-pill {
         width: 16px;
         height: 16px;
         padding: 4px;
-        color: #C9C9C9;
+        color: #c9c9c9;
         display: flex;
         transition: color 150ms;
         box-sizing: content-box;
         border-radius: 3px;
         border: 1px solid #111312;
-        background: #282D2C;
+        background: #282d2c;
         text-align: center;
         align-items: center;
         justify-content: center;
@@ -286,6 +285,13 @@ h4.slot-pill {
     }
 }
 
+/* duplicate class to increase priority for it above !important at other parts of styles */
+.search-bar__control:focus,
+.search-bar__control--is-focused.search-bar__control--is-focused {
+    box-shadow: 0 0rem 0.4rem $primary !important;
+    transition: box-shadow ease;
+}
+
 .search-bar__menu {
     border-radius: $border-radius !important;
 }