nicolium: style migrations

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/dropdown-menu/dropdown-menu.tsx

@@ -453,6 +453,7 @@ const DropdownMenu: React.FC<IDropdownMenu> = (props) => {
                 items={items}
                 component={component}
                 width={width}
+                className={className}
               />
 
               {/* Arrow */}

packages/nicolium/src/components/navigation/profile-dropdown.tsx

@@ -114,9 +114,9 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   }, [account, otherAccountIds.length, features]);
 
   return (
-    <DropdownMenu component={ProfileDropdownMenu}>
+    <DropdownMenu component={ProfileDropdownMenu} className='⁂-profile-dropdown'>
       <button
-        className='w-full rounded-lg focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500'
+        className='⁂-profile-dropdown__toggle'
         type='button'
         title={intl.formatMessage(messages.openDropdown)}
         aria-label={intl.formatMessage(messages.openDropdown)}
@@ -147,9 +147,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ className, menuItem }) => {
       </label>
     );
   } else if (!menuItem.text) {
-    return (
-      <hr className='mx-2 my-1 border-t-2 border-gray-100 black:border-t dark:border-gray-800' />
-    );
+    return <hr />;
   } else if (menuItem.action) {
     return (
       <button type='button' onClick={menuItem.action} className={baseClassName}>

packages/nicolium/src/features/ui/components/theme-selector.tsx

@@ -37,20 +37,12 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ id, value, onChange }) => {
   };
 
   return (
-    <div className='relative rounded-md shadow-sm'>
-      <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
-        {themeIconSrc ? (
-          <Icon
-            src={themeIconSrc}
-            className='size-4 text-gray-600 dark:text-gray-700'
-            aria-hidden
-          />
-        ) : (
-          <div className='size-4' aria-hidden />
-        )}
+    <div className='⁂-theme-selector'>
+      <div className='⁂-theme-selector__overlay'>
+        {themeIconSrc ? <Icon src={themeIconSrc} aria-hidden /> : <div aria-hidden />}
       </div>
 
-      <Select key={value} id={id} onChange={handleChange} defaultValue={value} className='!pl-10'>
+      <Select key={value} id={id} onChange={handleChange} defaultValue={value}>
         <option value='system'>
           <FormattedMessage id='theme_toggle.system' defaultMessage='System' />
         </option>
@@ -65,8 +57,8 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ id, value, onChange }) => {
         </option>
       </Select>
 
-      <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-        <Icon src={iconCaretDown} className='size-4 text-gray-600 dark:text-gray-700' />
+      <div className='⁂-theme-selector__arrow'>
+        <Icon src={iconCaretDown} />
       </div>
     </div>
   );

packages/nicolium/src/styles/new/layout.scss

@@ -551,6 +551,40 @@ body {
   }
 }
 
+.⁂-profile-dropdown {
+  &__toggle {
+    width: 100%;
+    border-radius: 0.5rem;
+
+    &:focus {
+      outline: 2px solid rgb(var(--color-primary-500));
+      outline-offset: 2px;
+    }
+
+    .dark & {
+      outline-color: rgb(var(--color-gray-800));
+      outline-offset: 0;
+    }
+
+    .dark &:focus {
+      outline-color: rgb(var(--color-primary-500));
+    }
+  }
+
+  hr {
+    margin: 0.25rem 0.5rem;
+    border-top: 2px solid rgb(var(--color-gray-100));
+
+    .dark & {
+      border-color: rgb(var(--color-gray-800));
+    }
+
+    .dark.black & {
+      border-top-width: 1px;
+    }
+  }
+}
+
 .⁂-modal-root {
   opacity: 0;
 

packages/nicolium/src/styles/new/settings.scss

@@ -97,3 +97,66 @@
     }
   }
 }
+
+.⁂-theme-selector {
+  position: relative;
+  border-radius: 0.375rem;
+  box-shadow: var(--shadow-sm);
+
+  &__overlay {
+    pointer-events: none;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    align-items: center;
+
+    padding-left: 0.75rem;
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      color: rgb(var(--color-gray-600));
+
+      .dark & {
+        color: rgb(var(--color-gray-700));
+      }
+    }
+
+    > div {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  select {
+    padding-left: 2.5rem !important;
+  }
+
+  &__arrow {
+    pointer-events: none;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+    align-items: center;
+
+    padding-right: 0.75rem;
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      color: rgb(var(--color-gray-600));
+
+      .dark & {
+        color: rgb(var(--color-gray-700));
+      }
+    }
+  }
+}

packages/nicolium/src/styles/new/variables.scss

@@ -4,6 +4,7 @@ $breakpoint-lg: 976px;
 $breakpoint-xl: 1280px;
 
 :root {
+  --shadow-sm: 0 1px 2px 0 #0001;
   --shadow-lg: 0 10px 15px -3px #0001, 0 4px 6px -4px #0001;
   --ease-default: cubic-bezier(0.4, 0, 0.2, 1);