fix(profile): improve dropdown button styling and visual cues (#250)

## Description
<!-- Please add PR description (don't leave blank) - example: This PR
[adds/removes/fixes/replaces] the [feature/bug/etc] -->

This pull request updates the `Profile` component to improve the visual
behavior and accessibility of the profile button and its dropdown
indicator. The most notable changes focus on the button's styling and
the dynamic display of open/close icons.

**UI/UX improvements to profile button:**

* The profile button's ring color and background have been adjusted for
better contrast and consistency, now using a conditional ring color and
a lighter background. (`src/components/islands/profile.jsx`)
* The dropdown indicator now always displays a visual cue: when closed,
a "hamburger" menu icon is shown, and when open, a "close" icon is
shown, improving clarity for users.
(`src/components/islands/profile.jsx`)
[[1]](diffhunk://#diff-6e8de8baae1c72ffb2bc7c8b736f1c8d029da6b9d6aeaf181d89dc09c1ef7498L56-R57)
[[2]](diffhunk://#diff-6e8de8baae1c72ffb2bc7c8b736f1c8d029da6b9d6aeaf181d89dc09c1ef7498L74-R90)

## Related Issue
<!-- Please prefix the issue number with Fixes/Resolves - example: Fixes
#123 or Resolves #123 -->

Follow-up to #247

## Screenshots/Screencasts
<!-- Please provide screenshots or video recording that demos your
changes (especially if it's a visual change) -->


[screen-capture.webm](https://github.com/user-attachments/assets/03d091d8-3f50-4522-aeda-379bde1b536e)

## Notes to Reviewer
<!-- Please state here if you added a new npm packages, or any extra
information that can help reviewer better review you changes -->

NA

Author: babblebey

src/components/islands/profile.jsx

@@ -49,7 +49,7 @@ export default function Profile({ isAuthed, userData, authUrl }) {
     <div className="relative">
       {/* Profile */}
       <button
-        className={`${isDropdownOpen && "ring-4"} relative bg-gray-200 flex items-center justify-center size-10 hover:ring-4 ring-gray-200 overflow-hidden rounded-full transition-colors duration-700 cursor-pointer focus-visible:outline-none`}
+        className={`${isDropdownOpen ? "ring-gray-200" : "ring-gray-100"} relative bg-gray-100 ring-4 flex items-center justify-center hover:ring-gray-200 overflow-hidden rounded-full transition-colors duration-700 cursor-pointer focus-visible:outline-none`}
         onClick={() => setIsDropdownOpen((prev) => !prev)}
       >
         {/* User Avatar */}
@@ -61,8 +61,8 @@ export default function Profile({ isAuthed, userData, authUrl }) {
         />
 
         {/* Display Close Visual Cue */}
-        {isDropdownOpen && (
-          <div className="absolute flex items-center justify-center text-white backdrop-blur-sm size-full rounded-full">
+        <div className="size-10 flex items-center justify-center backdrop-blur-sm rounded-full">
+          {isDropdownOpen ? (
             <svg
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
@@ -79,8 +79,23 @@ export default function Profile({ isAuthed, userData, authUrl }) {
                 d="M6 18 17.94 6M18 18 6.06 6"
               />
             </svg>
-          </div>
-        )}
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth="2"
+              stroke="currentColor"
+              className="size-6"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.75 9h16.5m-16.5 6.75h16.5"
+              />
+            </svg>
+          )}
+        </div>
       </button>
 
       {/* Dropdown */}