Improve sidebar and UI - #5
Conversation
| <h1 className="text-xl font-bold text-gray-700">Connections</h1> | ||
| <button | ||
| onClick={() => setShowConnectionForm(!showConnectionForm)} | ||
| className="bg-[#6883fe] text-white px-2 rounded text-sm font-light py-1 cursor-pointer" |
There was a problem hiding this comment.
maybe worth creating a class or a variable or some sort of less hardcoded way to indicate bg-brand-accent or however we want to call it
There was a problem hiding this comment.
Since there are primary colors from Shadcn, I added a tw before the names of tailwindcss colors.
| )} | ||
| {/* Connected DBs */} | ||
| <div className="border-t-1 mt-8"> | ||
| <table className=" min-w-full table-auto divide-y divide-gray-200"> |
There was a problem hiding this comment.
Cleared the space
| <td> | ||
| <button | ||
| onClick={() => navigate("/dashboard")} | ||
| className="text-blue-600 hover:text-blue-800 underline cursor-pointer" |
There was a problem hiding this comment.
no need to change anything but this will have to be changed later once we add a dark theme, which we'll have to add
There was a problem hiding this comment.
also, it seems, indigo is closer to our brand colour #6883fe than blue — the blue hue is 216, the indigo hue is 240 and our brand colour's hue is 229
There was a problem hiding this comment.
Will adjust as we build dark mode.
| } | ||
| const isActive = (path: string) => { | ||
| return location.pathname === path | ||
| ? "bg-[#6883fe] text-white border border-white rounded" |
There was a problem hiding this comment.
same as above wrt a less hardcoded way
There was a problem hiding this comment.
resolved using tw-primary color
| </Sidebar> | ||
| ) | ||
| } | ||
| const isActive = (path: string) => { |
There was a problem hiding this comment.
naming is a bit unconventional — isX is expected to return a boolean, while here it returns classes conditionally — whether it's active or not
There was a problem hiding this comment.
replace with proper naming - getNavItemClasses
| {isConnected && ( | ||
| <button | ||
| onClick={handleDisconnect} | ||
| className="cursor-pointer p-1 rounded bg-[#6883fe] text-white hover:text-gray-200" |
There was a problem hiding this comment.
resolved using tw-primary colour globally available
2 participants
Uh oh!
There was an error while loading. Please reload this page.