uibee 2.17.4 → 3.0.0

package/src/components/footer/footer.tsx

@@ -0,0 +1,124 @@
+import type { ReactNode } from 'react'
+import VersionTag from '@components/version/version'
+
+export type Lang = 'no' | 'en'
+export type BilingualString = string | { no: string; en: string }
+
+export type FooterColumn = {
+    heading: BilingualString
+    items: { label: BilingualString; href?: string }[]
+}
+
+export type FooterSocialLink = {
+    title: string
+    href: string
+    icon: ReactNode
+    hoverClass?: string
+}
+
+export type FooterProps = {
+    logo: ReactNode
+    sponsor?: { node: ReactNode; label?: BilingualString }
+    columns?: FooterColumn[]
+    socialLinks?: FooterSocialLink[]
+    copyright: BilingualString
+    version?: { tag: string; href: string }
+    lang?: Lang
+    className?: string
+}
+
+function t(s: BilingualString, lang: Lang): string {
+    return typeof s === 'string' ? s : s[lang]
+}
+
+export default function Footer({
+    logo,
+    sponsor,
+    columns,
+    socialLinks,
+    copyright,
+    version,
+    lang = 'no',
+    className,
+}: FooterProps) {
+    const year = new Date().getFullYear()
+    const hasRight = (columns && columns.length > 0) || (socialLinks && socialLinks.length > 0)
+
+    return (
+        <div className={`mt-24 bg-login-950 md:mt-40 ${className || ''}`}>
+            <div className={`
+                mx-auto w-full px-4 pt-16 pb-24 md:max-w-304 md:px-12 md:pt-20 md:pb-4
+                ${hasRight ? 'md:grid md:grid-cols-[18rem_1fr] md:gap-x-12' : ''}
+            `}>
+                <div className='mx-auto grid w-full max-w-60 gap-16 md:row-span-2 md:max-w-72 md:gap-20'>
+                    <div className='block w-full'>{logo}</div>
+                    {sponsor && (
+                        <div>
+                            <div className='block w-full'>{sponsor.node}</div>
+                            {sponsor.label && (
+                                <p className='pt-8 text-center text-login-100'>{t(sponsor.label, lang)}</p>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                {columns && columns.length > 0 && (
+                    <div className={`
+                        mt-12 grid w-full max-w-60 gap-8
+                        sm:max-w-88 sm:justify-items-end sm:justify-self-end
+                        md:col-start-2 md:row-start-1 md:mt-0 md:max-w-136 md:gap-0 md:justify-self-end
+                        ${columns.length > 1 ? 'sm:grid-cols-2' : ''}
+                    `}>
+                        {columns.map((col, i) => (
+                            <div key={i} className='sm:justify-self-center md:justify-self-end'>
+                                <h4 className='pb-2 text-sm font-medium tracking-widest text-login-100'>
+                                    {t(col.heading, lang)}
+                                </h4>
+                                {col.items.map((item, j) =>
+                                    item.href ? (
+                                        <a key={j} className='link--underscore-hover block' href={item.href}>
+                                            {t(item.label, lang)}
+                                        </a>
+                                    ) : (
+                                        <p key={j}>{t(item.label, lang)}</p>
+                                    )
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {socialLinks && socialLinks.length > 0 && (
+                    <div className='md:col-start-2 md:row-start-2 md:justify-self-end'>
+                        <div className='mx-auto mt-20 mb-12 flex w-fit flex-wrap justify-center gap-6'>
+                            {socialLinks.map((link, i) => (
+                                <a
+                                    key={i}
+                                    className={`block size-8 text-login-100 transition-all duration-200 group
+                                        ${link.hoverClass ?? 'hover:text-login-50'}`}
+                                    title={link.title}
+                                    href={link.href}
+                                    target='_blank'
+                                    rel='noreferrer'
+                                >
+                                    {link.icon}
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                <div className='mt-16 flex flex-col items-start gap-4 md:col-span-2 md:row-start-3 md:mt-24 md:grid
+                    md:grid-cols-[auto_min-content] md:items-end md:gap-8'
+                >
+                    <p className='text-xs wrap-break-word text-login-100'>
+                        Copyright © {year} {t(copyright, lang)}
+                    </p>
+                    {version && (
+                        <VersionTag version={version.tag} url={version.href} />
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/footer/loginContent.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Discord, Facebook, Linkedin, Github, Wikijs } from '../../icons/icons'
+import type { LogfontIconProps } from '../../icons/icons'
+import type { FooterColumn, FooterSocialLink } from './footer'
+
+export type { FooterSocialLink as LoginSocialLinkData }
+
+// eslint-disable-next-line @stylistic/max-len
+const INSTAGRAM_PATH = 'M512 960Q408 960 375.0 959.5Q342 959 301 957Q260 955 230.5 949.0Q201 943 177 933Q151 923 129.0 909.0Q107 895 86 874Q65 853 51.0 831.0Q37 809 27 783Q17 759 11.0 729.5Q5 700 3 659Q1 618 0.5 585.0Q0 552 0 448Q0 344 0.5 311.0Q1 278 3 237Q5 196 11.0 166.5Q17 137 27 113Q37 87 51.0 65.0Q65 43 86 22Q107 1 129.0 -13.0Q151 -27 177 -37Q201 -47 230.5 -53.0Q260 -59 301 -61Q342 -63 375.0 -63.5Q408 -64 512 -64Q616 -64 649.0 -63.5Q682 -63 723 -61Q764 -59 793.5 -53.0Q823 -47 847 -37Q873 -27 895.0 -13.0Q917 1 938 22Q959 43 973.0 65.0Q987 87 997 113Q1007 137 1013.0 166.5Q1019 196 1021 237Q1023 278 1023.5 311.0Q1024 344 1024 448Q1024 552 1023.5 585.0Q1023 618 1021 659Q1019 700 1013.0 729.5Q1007 759 997 783Q987 809 973.0 831.0Q959 853 938 874Q917 895 895.0 909.0Q873 923 847 933Q823 943 793.5 949.0Q764 955 723 957Q682 959 649.0 959.5Q616 960 512 960ZM512 868Q614 868 646.0 867.5Q678 867 719 865Q756 863 778.0 857.5Q800 852 814 847Q832 840 845.5 831.0Q859 822 873 809Q886 795 895.0 781.5Q904 768 911 750Q916 736 921.5 714.0Q927 692 929 655Q931 614 931.5 582.5Q932 551 932 448Q932 345 931.0 313.5Q930 282 929 241Q927 204 921.5 182.0Q916 160 911 146Q903 128 894.5 114.5Q886 101 872 87Q859 74 845.0 65.0Q831 56 813 49Q800 44 777.5 38.5Q755 33 718 31Q677 29 645.0 28.5Q613 28 511 28Q408 28 376.0 29.0Q344 30 303 31Q266 33 243.5 38.5Q221 44 208 49Q190 57 176.5 65.5Q163 74 149 88Q136 101 126.5 115.0Q117 129 111 147Q105 160 100.0 182.5Q95 205 93 242Q91 282 90.5 314.0Q90 346 90 449Q90 551 90.5 583.0Q91 615 93 656Q95 693 100.0 715.5Q105 738 111 751Q117 770 126.5 783.5Q136 797 149 810Q163 824 176.5 833.0Q190 842 208 849Q221 854 243.0 859.5Q265 865 303 867Q344 868 375.5 868.5Q407 869 510 869ZM512 711Q458 711 410 690Q362 670 326.0 634.0Q290 598 270 550Q249 502 249 448Q249 394 270 346Q290 298 326.0 262.0Q362 226 410 206Q458 185 512 185Q566 185 614 206Q662 226 698.0 262.0Q734 298 754 346Q775 394 775 448Q775 502 754 550Q734 598 698.0 634.0Q662 670 614 690Q566 711 512 711ZM512 277Q441 277 391.0 327.0Q341 377 341 448Q341 519 391.0 569.0Q441 619 512 619Q583 619 633.0 569.0Q683 519 683 448Q683 377 633.0 327.0Q583 277 512 277ZM847 721Q847 696 829.0 678.0Q811 660 785 660Q760 660 742.0 678.0Q724 696 724 721Q724 747 742.0 765.0Q760 783 785 783Q811 783 829.0 765.0Q847 747 847 721Z'
+
+function InstagramIcon({ size = 24 }: LogfontIconProps) {
+    return (
+        <span className='relative block' style={{ width: size, height: size }}>
+            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'
+                width={size} height={size} aria-hidden='true'
+                className='absolute inset-0 transition-opacity duration-200 opacity-100 group-hover:opacity-0'>
+                <g transform='translate(0 960) scale(1 -1)'>
+                    <path fill='currentColor' d={INSTAGRAM_PATH} />
+                </g>
+            </svg>
+            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'
+                width={size} height={size} aria-hidden='true'
+                className='absolute inset-0 transition-opacity duration-200 opacity-0 group-hover:opacity-100'>
+                <defs>
+                    <linearGradient id='ig-grad' x1='0%' y1='100%' x2='100%' y2='0%'>
+                        <stop offset='0%' stopColor='#fff695' />
+                        <stop offset='45%' stopColor='#ff5445' />
+                        <stop offset='60%' stopColor='#ff37c0' />
+                        <stop offset='90%' stopColor='#3d6dff' />
+                    </linearGradient>
+                </defs>
+                <g transform='translate(0 960) scale(1 -1)'>
+                    <path fill='url(#ig-grad)' d={INSTAGRAM_PATH} />
+                </g>
+            </svg>
+        </span>
+    )
+}
+
+export const loginAddress: FooterColumn = {
+    heading: { no: 'Adresse', en: 'Address' },
+    items: [
+        { label: 'Teknologivegen 22' },
+        { label: { no: 'Bygg A, rom 155', en: 'Building A, room 155' } },
+        { label: '2815 GJØVIK' },
+    ],
+}
+
+export const loginEmail = (email: string): FooterColumn => ({
+    heading: { no: 'E-post', en: 'Email' },
+    items: [{ label: email, href: `mailto:${email}` }],
+})
+
+export const loginCopyright = {
+    no: 'Login - Linjeforeningen for IT, NO 811 940 372',
+    en: 'Login - Association for IT, NO 811 940 372',
+} as const
+
+export const loginSponsor = {
+    label: { no: 'Hovedsamarbeidspartner', en: 'Main partner' },
+} as const
+
+export const loginSocialLinks: FooterSocialLink[] = [
+    { title: 'Discord',   href: 'https://discord.gg/login-ntnu',                                       icon: <Discord size={24} />,           hoverClass: 'hover:text-[#6571fd]'                  },
+    { title: 'Instagram', href: 'https://www.instagram.com/login_linjeforening/',                       icon: <InstagramIcon size={24} />,                                                           },
+    { title: 'Facebook',  href: 'https://facebook.com/LogNTNU',                                         icon: <Facebook size={24} />,          hoverClass: 'hover:text-[#2c87ff]'                  },
+    { title: 'LinkedIn',  href: 'https://www.linkedin.com/company/linjeforeningen-login/about',         icon: <Linkedin size={24} />,          hoverClass: 'hover:text-[#1a7bdd]'                  },
+    { title: 'GitHub',    href: 'https://github.com/login-linjeforeningen-for-it',                     icon: <Github size={24} />,            hoverClass: 'hover:text-white'                       },
+    { title: 'Wiki',      href: 'https://outline.login.no/s/doc',                                      icon: <Wikijs size={24} />,            hoverClass: 'hover:text-login-50'                   },
+]

package/src/components/index.ts

@@ -1,3 +1,4 @@
+'use client'
 // Input components
 export { default as Input } from './inputs/input'
 export { default as SearchInput } from './inputs/searchInput'
@@ -5,6 +6,7 @@ export { default as Textarea } from './inputs/textarea'
 export { default as Checkbox } from './inputs/checkbox'
 export { default as Select } from './inputs/select'
 export { default as TagInput } from './inputs/tagInput'
+export { default as MultiSelect } from './inputs/multiSelect'
 export { default as Switch } from './inputs/switch'
 export { default as Radio } from './inputs/radio'
 export { default as Range } from './inputs/range'
@@ -22,9 +24,22 @@ export { default as Navbar } from './navbar/navbar'
 export { default as NavItem } from './navbar/navbarItem'
 export { default as NavDropdown } from './navbar/navbarDropdown'
 
+// Footer
+export { default as Footer } from './footer/footer'
+export type { FooterColumn, FooterSocialLink, FooterProps, Lang, BilingualString } from './footer/footer'
+export { loginAddress, loginEmail, loginCopyright, loginSponsor, loginSocialLinks } from './footer/loginContent'
+export type { LoginSocialLinkData } from './footer/loginContent'
+
 // Containers
 export { default as PageContainer} from './container/page'
 export { default as Highlight } from './container/highlight'
+export { default as LeftBarPanel } from './container/leftBarPanel'
+export { default as GlassCard } from './container/glassCard'
+export { default as IconBubble } from './container/iconBubble'
+export { default as StatCard } from './container/statCard'
+export { Tabs, TabPanel } from './container/tabs'
+export { default as Accordion, AccordionGroup } from './container/accordion'
+export { default as PulseDot } from './container/pulseDot'
 
 // Login
 export { default as VersionTag } from './version/version'

package/src/components/inputs/checkbox.tsx

@@ -87,11 +87,11 @@ function CheckboxItem(props: CheckboxItemProps) {
                     className={`
                         peer appearance-none rounded border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
-                        focus:outline-none focus:ring-2 focus:ring-login/50
-                        disabled:opacity-50 disabled:cursor-not-allowed
-                        cursor-pointer transition-all duration-200
+                        focus:outline-none focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        cursor-pointer transition-all duration-150
                         w-5 h-5 absolute inset-0
-                        ${error ? 'border-red-500' : ''}
+                        ${error ? 'border-red-500/70' : ''}
                     `}
                 />
                 <Check

package/src/components/inputs/input.tsx

@@ -24,7 +24,8 @@ export default function Input(props: InputProps) {
     const id = useId()
     const anchorName = `--input-${id.replace(/:/g, '')}`
 
-    const containerRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
+    const containerRef = useRef<HTMLDivElement>(null)
+    useClickOutside(containerRef, () => setIsOpen(false))
 
     const isDateType = ['date', 'datetime-local', 'time'].includes(type as string)
     const isColorType = type === 'color'
@@ -38,11 +39,12 @@ export default function Input(props: InputProps) {
         }
     }
 
+    function pad(n: number) { return n.toString().padStart(2, '0') }
+
     function handleDateChange(date: Date) {
         const onChange = inputProps.onChange
         if (!onChange) return
 
-        const pad = (n: number) => n.toString().padStart(2, '0')
         const yyyy = date.getFullYear()
         const MM = pad(date.getMonth() + 1)
         const dd = pad(date.getDate())
@@ -110,10 +112,6 @@ export default function Input(props: InputProps) {
         const date = getDateValue()
         if (!date) return value as string
 
-        function pad(n: number) {
-            return n.toString().padStart(2, '0')
-        }
-
         const yyyy = date.getFullYear()
         const MM = pad(date.getMonth() + 1)
         const dd = pad(date.getDate())
@@ -162,14 +160,14 @@ export default function Input(props: InputProps) {
                     aria-describedby={error ? `${name}-error` : undefined}
                     style={{ anchorName } as any}
                     className={`
-                        w-full rounded-md bg-login-500/50 border border-login-500 
-                        text-login-text placeholder-login-200
-                        focus:outline-none focus:border-login focus:ring-1 focus:ring-login
-                        disabled:opacity-50 disabled:cursor-not-allowed
-                        h-10.5 py-2 ${displayIcon ? 'pl-10 pr-3' : 'px-3'}
-                        transition-all duration-200
+                        w-full rounded-md bg-login-500/50 border border-login-500
+                        text-login-text placeholder-login-200 text-sm
+                        focus:outline-none focus:border-login/60 focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        h-10 py-2 ${displayIcon ? 'pl-10 pr-3' : 'px-3'}
+                        transition-all duration-150
                         input-reset
-                        ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
+                        ${error ? 'border-red-500/70 focus:border-red-500/70 focus:ring-red-500/30' : ''}
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
                     `}
                 />

package/src/components/inputs/multiSelect.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import { X, ChevronDown, Check } from 'lucide-react'
+import { FieldWrapper } from './shared'
+import useClickOutside from '../../hooks/useClickOutside'
+
+type Option = {
+    label: string
+    value: string
+}
+
+export type MultiSelectProps = {
+    label?: string
+    name: string
+    options: Option[]
+    value?: string[]
+    onChange?: (value: string[]) => void
+    placeholder?: string
+    error?: string
+    className?: string
+    disabled?: boolean
+    required?: boolean
+    info?: string
+    description?: string
+    textSize?: 'sm' | 'md'
+}
+
+export default function MultiSelect({
+    label,
+    name,
+    options,
+    value = [],
+    onChange,
+    placeholder = 'Select…',
+    error,
+    className,
+    disabled,
+    required,
+    info,
+    description,
+    textSize = 'sm',
+}: MultiSelectProps) {
+    const [open, setOpen] = useState(false)
+    const containerRef = useRef<HTMLDivElement>(null)
+    useClickOutside(containerRef, () => setOpen(false))
+
+    function toggleOption(optionValue: string) {
+        if (!onChange) return
+        if (value.includes(optionValue)) {
+            onChange(value.filter((v) => v !== optionValue))
+        } else {
+            onChange([...value, optionValue])
+        }
+    }
+
+    function removeOption(optionValue: string) {
+        if (!onChange) return
+        onChange(value.filter((v) => v !== optionValue))
+    }
+
+
+    return (
+        <FieldWrapper
+            label={label}
+            name={name}
+            required={required}
+            info={info}
+            description={description}
+            error={error}
+            className={className}
+            textSize={textSize}
+        >
+            <div ref={containerRef} className='relative w-full'>
+                <div
+                    onClick={() => !disabled && setOpen((o) => !o)}
+                    className={`
+                        flex min-h-10 cursor-pointer items-center justify-between gap-2
+                        rounded-md bg-login-500/50 border border-login-500 px-3 py-1.5
+                        transition-all duration-150 select-none
+                        ${open ? 'border-login/60 ring-1 ring-login/30' : ''}
+                        ${error ? 'border-red-500/70' : ''}
+                        ${disabled ? 'opacity-40 cursor-not-allowed' : ''}
+                    `}
+                >
+                    <div className='flex flex-wrap gap-1.5'>
+                        {value.length === 0 && (
+                            <span className='text-sm text-login-200'>{placeholder}</span>
+                        )}
+                        {value.map((val) => {
+                            const option = options.find((o) => o.value === val)
+                            if (!option) return null
+                            return (
+                                <span
+                                    key={val}
+                                    className='flex items-center gap-1 px-2 py-0.5 bg-login-600 text-login-100 border border-login-500 rounded text-sm'
+                                >
+                                    {option.label}
+                                    {!disabled && (
+                                        <button
+                                            type='button'
+                                            onClick={(e) => { e.stopPropagation(); removeOption(val) }}
+                                            className='hover:text-red-300 transition-colors'
+                                        >
+                                            <X size={13} />
+                                        </button>
+                                    )}
+                                </span>
+                            )
+                        })}
+                    </div>
+                    <ChevronDown
+                        size={16}
+                        className={`shrink-0 text-login-200 transition-transform duration-150 ${open ? 'rotate-180' : ''}`}
+                    />
+                </div>
+
+                {open && options.length > 0 && (
+                    <div className='absolute z-50 mt-1 w-full max-h-60 overflow-auto rounded-md bg-login-800 border border-login-500/50 shadow-lg'>
+                        {options.map((option) => {
+                            const selected = value.includes(option.value)
+                            return (
+                                <div
+                                    key={option.value}
+                                    onClick={() => toggleOption(option.value)}
+                                    className={`
+                                        flex cursor-pointer items-center justify-between px-3 py-2 text-sm
+                                        hover:bg-login-700 transition-colors select-none
+                                        ${selected ? 'text-login-50' : 'text-login-100'}
+                                    `}
+                                >
+                                    <span>{option.label}</span>
+                                    {selected && <Check size={14} className='text-login shrink-0' />}
+                                </div>
+                            )
+                        })}
+                    </div>
+                )}
+
+                <input type='hidden' name={name} value={value.join(',')} />
+            </div>
+        </FieldWrapper>
+    )
+}

package/src/components/inputs/radio.tsx

@@ -78,11 +78,11 @@ function RadioItem(props: RadioItemProps) {
                     className={`
                         peer appearance-none rounded-full border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
-                        focus:outline-none focus:ring-2 focus:ring-login/50
-                        disabled:opacity-50 disabled:cursor-not-allowed
-                        cursor-pointer transition-all duration-200
+                        focus:outline-none focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        cursor-pointer transition-all duration-150
                         w-5 h-5 absolute inset-0
-                        ${error ? 'border-red-500' : ''}
+                        ${error ? 'border-red-500/70' : ''}
                     `}
                 />
                 <div className={`

package/src/components/inputs/range.tsx

@@ -13,13 +13,14 @@ export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
 
 export default function Range(props: RangeProps) {
     const { name, label, error, className, info, description, showValue = true, textSize = 'sm', ...inputProps } = props
-    const { min = 0, max = 100, step = 1, value = 0 } = inputProps
+    const { min = 0, max = 100, step = 1, value, defaultValue, onChange, ...restInputProps } = inputProps
+    const displayValue = value ?? defaultValue ?? 0
 
     return (
         <FieldWrapper
             label={label}
             name={name}
-            required={inputProps.required}
+            required={restInputProps.required}
             info={info}
             description={description}
             error={error}
@@ -28,14 +29,14 @@ export default function Range(props: RangeProps) {
         >
             <div className='flex items-center gap-4'>
                 <input
-                    {...inputProps}
+                    {...restInputProps}
                     id={name}
                     name={name}
                     type='range'
                     min={min}
                     max={max}
                     step={step}
-                    value={value}
+                    {...(onChange ? { value, onChange } : { defaultValue: value ?? defaultValue ?? 0 })}
                     title={label}
                     aria-invalid={!!error}
                     aria-describedby={error ? `${name}-error` : undefined}
@@ -58,7 +59,7 @@ export default function Range(props: RangeProps) {
                 />
                 {showValue && (
                     <span className='text-login-text text-sm font-medium min-w-10 text-right'>
-                        {value}
+                        {displayValue}
                     </span>
                 )}
             </div>

package/src/components/inputs/searchInput.tsx

@@ -59,7 +59,7 @@ export default function SearchInput({ placeholder = 'Search...', variant = 'defa
             </div>
         )
     } else {
-        <Input
+        return <Input
             name='search'
             icon={<Search className='w-5 h-5' />}
             value={searchValue}

package/src/components/inputs/select.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import Image from 'next/image'
-import { useClickOutside } from '../../hooks'
+import useClickOutside from '../../hooks/useClickOutside'
 import { ChevronDown, X, Search } from 'lucide-react'
 import { FieldWrapper } from './shared'
 
@@ -63,7 +63,8 @@ export default function Select({
         setSelectedOption(options.find(opt => opt.value === value))
     }, [value, options])
 
-    const containerRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
+    const containerRef = useRef<HTMLDivElement>(null)
+    useClickOutside(containerRef, () => setIsOpen(false))
 
     function handleSelect(option: Option) {
         if (disabled) return
@@ -107,14 +108,14 @@ export default function Select({
                     aria-expanded={isOpen}
                     aria-labelledby={label ? undefined : name}
                     className={`
-                        w-full rounded-md bg-login-500/50 border border-login-500 
-                        text-login-text text-left
-                        focus:outline-none focus:border-login focus:ring-1 focus:ring-login
-                        disabled:opacity-50 disabled:cursor-not-allowed
-                        h-10.5 py-2 pl-3 pr-10
-                        transition-all duration-200
+                        w-full rounded-md bg-login-500/50 border border-login-500
+                        text-login-text text-left text-sm
+                        focus:outline-none focus:border-login/60 focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        h-10 py-2 pl-3 pr-10
+                        transition-all duration-150
                         flex items-center justify-between
-                        ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
+                        ${error ? 'border-red-500/70 focus:border-red-500/70 focus:ring-red-500/30' : ''}
                         ${!selectedOption ? 'text-login-200' : ''}
                     `}
                     title={label}
@@ -159,11 +160,11 @@ export default function Select({
 
                 {isOpen && (
                     <div className={`
-                        absolute z-50 w-full mt-1 bg-login-600 border border-login-500
-                        rounded-md shadow-lg max-h-60 overflow-hidden flex flex-col
+                        absolute z-50 w-full mt-1 bg-login-700 border border-login-500/50
+                        rounded-md shadow-xl max-h-60 overflow-hidden flex flex-col
                     `}>
                         {searchable && (
-                            <div className='p-2 sticky top-0 bg-login-600 border-b border-login-500 z-10'>
+                            <div className='p-2 sticky top-0 bg-login-700 border-b border-login-500/20 z-10'>
                                 <div className='relative'>
                                     <Search className='absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-login-200' />
                                     <input
@@ -173,9 +174,9 @@ export default function Select({
                                         placeholder='Search...'
                                         autoFocus
                                         className={`
-                                            w-full bg-login-500/50 border border-login-500 rounded-md 
-                                            py-1.5 pl-9 pr-3 text-sm text-login-text 
-                                            focus:outline-none focus:border-login focus:ring-1 focus:ring-login
+                                            w-full bg-login-600 border border-login-500/50 rounded-md
+                                            py-1.5 pl-9 pr-3 text-sm text-login-text
+                                            focus:outline-none focus:border-login/60 focus:ring-1 focus:ring-login/30
                                         `}
                                     />
                                 </div>
@@ -191,9 +192,9 @@ export default function Select({
                                                 onClick={() => handleSelect(option)}
                                                 className={`
                                                     w-full text-left px-3 py-2 text-sm
-                                                    hover:bg-login-500 transition-colors duration-150
+                                                    hover:bg-login-600 transition-colors duration-150
                                                     flex items-center gap-2
-                                                    ${selectedOption?.value === option.value ? 'bg-login-500 text-login': 'text-login-text'}
+                                                    ${selectedOption?.value === option.value ? 'bg-login/15 text-login' : 'text-login-text'}
                                                 `}
                                             >
                                                 {option.image && (

package/src/components/inputs/shared/colorPickerPopup.tsx

@@ -193,7 +193,7 @@ export default function ColorPickerPopup({ value, onChange, onClose, anchorName
 
     return (
         <div 
-            className='fixed z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none anchor-popup'
+            className='fixed z-50 bg-login-700 border border-login-500/50 rounded-md shadow-xl p-3 w-64 select-none anchor-popup'
             style={{
                 positionAnchor: anchorName,
                 positionArea: 'bottom span-right',
@@ -212,19 +212,19 @@ export default function ColorPickerPopup({ value, onChange, onClose, anchorName
                     value={hexInput}
                     onChange={manualHexChange}
                     className={`
-                        flex-1 min-w-0 bg-login-500 border border-login-500 rounded
+                        flex-1 min-w-0 bg-login-600 border border-login-500/50 rounded
                         px-2 py-1 text-sm text-login-text focus:outline-none
-                        focus:border-login focus:ring-1 focus:ring-login
+                        focus:border-login/60 focus:ring-1 focus:ring-login/30
                     `}
                     spellCheck={false}
                 />
                 <div
-                    className='w-8 h-8 rounded border border-login-500 shrink-0'
+                    className='w-8 h-8 rounded border border-login-500/50 shrink-0'
                     style={{ backgroundColor: hexInput }}
                 />
             </div>
 
-            <div className='grid grid-cols-8 gap-1.5 pt-3 border-t border-login-500'>
+            <div className='grid grid-cols-8 gap-1.5 pt-3 border-t border-login-500/25'>
                 {PRESET_COLORS.map(color => (
                     <button
                         key={color}