General style and component refactor #96
Conversation
| 'text-white bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500 dark:bg-yellow-400 dark:hover:bg-yellow-500' + | ||
| ' shadow-md hover:shadow-lg', | ||
| gray: | ||
| 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100' + |
There was a problem hiding this comment.
Can we remove the bg-gray here? I think leaving it blank does look cleaner?
There was a problem hiding this comment.
yes, I add "bg-transparent" here, but other 'gray' button, I keep it as it should be "gray" theme. Or we can use 'light' button instead. new look like this
| <button | ||
| type='button' | ||
| onClick={() => setIsOpen(false)} | ||
| className='rounded-lg bg-gray-50 p-1.5 text-gray-400 ring-1 ring-gray-200 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 dark:bg-gray-700 dark:ring-gray-600 dark:hover:bg-gray-600 dark:hover:text-gray-300' |
There was a problem hiding this comment.
Thinking of always showing instead only "on hover" so this doesn't go unoticable
There was a problem hiding this comment.
yes, remove "group on-hover"...
| @@ -26,60 +29,109 @@ const ModuleNavbar: FC<ModuleNavbarProps> = ({ navigation, footer }) => { | |||
| return ( | |||
| <div | |||
| className={classNames( | |||
| 'relative flex grow-0 flex-col gap-y-5 overflow-y-auto', | |||
| isOpen ? 'bg-magpie-light-25 min-w-40' : 'bg-gray-50 min-w-14' | |||
| 'group relative flex h-full flex-col border-r border-gray-200 bg-white transition-all duration-300 dark:border-gray-700 dark:bg-gray-800', | |||
There was a problem hiding this comment.
I am wondering if we should make this a non-white background so it distinct between the navBar and the main page itself.
There was a problem hiding this comment.
yes, add 'bg-gray-50' light gray for this now
|
Like the theme change and some new icons on the navbar! |
|
Also, I am thinking of having the big copy button back here. Most probably people would not want to read the token anyway.
Minor title layout/centre icon in the dialog. |
sure, style upgrade in dev |
for the new close navbar |
|
Updates look good!
I suppose we could try this. At a glance, it feels like random letters are thrown on the navbar but perhaps this is more useful than a repetitive workflow icon. |
general style upgrade
also close: #103, #78
preview at DEV: https://orcaui.dev.umccr.org/