From f3654700ddd99f3245a07027b1adb627ed241761 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 5 Apr 2026 18:46:43 +0000
Subject: [PATCH] nicolium: commited unfinished changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../navigation/profile-dropdown.tsx           | 14 +---
 packages/nicolium/src/styles/new/layout.scss  | 64 +++++++++++++++++++
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/packages/nicolium/src/components/navigation/profile-dropdown.tsx b/packages/nicolium/src/components/navigation/profile-dropdown.tsx
index 63fd70acf..825967db7 100644
--- a/packages/nicolium/src/components/navigation/profile-dropdown.tsx
+++ b/packages/nicolium/src/components/navigation/profile-dropdown.tsx
@@ -1,7 +1,6 @@
 import iconPlus from '@phosphor-icons/core/regular/plus.svg';
 import iconSignOut from '@phosphor-icons/core/regular/sign-out.svg';
 import { Link, type LinkOptions } from '@tanstack/react-router';
-import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -133,14 +132,9 @@ interface MenuItemProps {
 }
 
 const MenuItem: React.FC<MenuItemProps> = ({ className, menuItem }) => {
-  const baseClassName = clsx(
-    className,
-    'block w-full cursor-pointer truncate px-4 py-2.5 text-left text-sm text-gray-700 outline-none hover:bg-gray-100 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:ring-offset-0 rtl:text-right',
-  );
-
   if (menuItem.toggle) {
     return (
-      <label className='flex flex-row items-center justify-between space-x-4 px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
+      <label>
         <span>{menuItem.text}</span>
 
         {menuItem.toggle}
@@ -150,18 +144,16 @@ const MenuItem: React.FC<MenuItemProps> = ({ className, menuItem }) => {
     return <hr />;
   } else if (menuItem.action) {
     return (
-      <button type='button' onClick={menuItem.action} className={baseClassName}>
+      <button type='button' onClick={menuItem.action} className={className}>
         {menuItem.text}
       </button>
     );
   } else if (menuItem.linkOptions) {
     return (
-      <Link {...menuItem.linkOptions} className={baseClassName}>
+      <Link {...menuItem.linkOptions} className={className}>
         {menuItem.text}
       </Link>
     );
-  } else {
-    throw menuItem;
   }
 };
 
diff --git a/packages/nicolium/src/styles/new/layout.scss b/packages/nicolium/src/styles/new/layout.scss
index e5f9c7972..4ebf8f2a4 100644
--- a/packages/nicolium/src/styles/new/layout.scss
+++ b/packages/nicolium/src/styles/new/layout.scss
@@ -583,6 +583,70 @@ body {
       border-top-width: 1px;
     }
   }
+
+  label {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 0.25rem 1rem;
+
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: rgb(var(--color-gray-700));
+
+    .dark & {
+      color: rgb(var(--color-gray-400));
+    }
+  }
+
+  button,
+  a {
+    cursor: pointer;
+
+    overflow: hidden;
+    display: block;
+
+    width: 100%;
+    padding: 0.625rem 1rem;
+
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: rgb(var(--color-gray-700));
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    outline: none;
+
+    [dir='rtl'] & {
+      text-align: right;
+    }
+
+    &:hover {
+      background-color: rgb(var(--color-gray-100));
+    }
+
+    &:focus {
+      background-color: rgb(var(--color-gray-100));
+      outline: 2px solid rgb(var(--color-primary-500));
+      outline-offset: 2px;
+    }
+
+    .dark & {
+      color: rgb(var(--color-gray-500));
+    }
+
+    .dark &:hover {
+      background-color: rgb(var(--color-gray-800));
+    }
+
+    .dark &:focus {
+      outline-offset: 0;
+    }
+  }
 }
 
 .⁂-modal-root {