ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swap out primary UI color for Zoo brand blue, add theme color setting to control its hue (#2017)

Browse Source 
* Add a setting for themeColor

* Add primary-color to Tailwind, driven by themeColor setting

* Get rid of most uses of "energy" colors

* Change out the rest of the energy colors

* Tweak NetworkHealthIndicator light mode checkmarks

* Handful of other CSS tweaks while I'm here:
- remove the AppHeader bg and border
- pane margins
- better dark mode button styles

* Make Zoo logomark a badge

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI post-snapshots

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Retrigger CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
2024-04-05 00:59:02 -04:00
committed by GitHub
parent 233f81a879
commit d85781ef99
44 changed files with 203 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/FileTree.tsx
View File

@ -192,8 +192,8 @@ const FileTreeItem = ({
{fileOrDir.children === undefined ? (
<li
className={
'group m-0 p-0 border-solid border-0 text-energy-100 hover:text-energy-70 hover:bg-energy-10/50 dark:text-energy-30 dark:hover:!text-energy-20 dark:hover:bg-energy-90/50 focus-within:bg-energy-10/80 dark:focus-within:bg-energy-80/50 hover:focus-within:bg-energy-10/80 dark:hover:focus-within:bg-energy-80/50 ' +
(isCurrentFile ? 'bg-energy-10/50 dark:bg-energy-90/50' : '')
'group m-0 p-0 border-solid border-0 hover:text-primary hover:bg-primary/5 focus-within:bg-primary/5 ' +
(isCurrentFile ? '!bg-primary/10 !text-primary' : '')
}
>
{!isRenaming ? (
@ -206,12 +206,7 @@ const FileTreeItem = ({
>
<CustomIcon
name={fileOrDir.name?.endsWith(FILE_EXT) ? 'kcl' : 'file'}
className={
'inline-block w-3 ' +
(isCurrentFile
? 'text-energy-90 dark:text-energy-10'
: 'text-energy-50 dark:text-energy-50')
}
className="inline-block w-3 text-current"
/>
{fileOrDir.name}
</button>
@ -230,9 +225,9 @@ const FileTreeItem = ({
{!isRenaming ? (
<Disclosure.Button
className={
' group border-none text-sm rounded-none p-0 m-0 flex items-center justify-start w-full py-0.5 text-chalkboard-70 dark:text-chalkboard-30 hover:bg-energy-10/50 dark:hover:bg-energy-90/50' +
' group border-none text-sm rounded-none p-0 m-0 flex items-center justify-start w-full py-0.5 hover:text-primary hover:bg-primary/5' +
(context.selectedDirectory.path.includes(fileOrDir.path)
? ' group-focus-within:bg-chalkboard-20/50 dark:group-focus-within:bg-chalkboard-80/20 hover:group-focus-within:bg-chalkboard-20 dark:hover:group-focus-within:bg-chalkboard-80/20 group-active:bg-chalkboard-20/50 dark:group-active:bg-chalkboard-80/20 hover:group-active:bg-chalkboard-20/50 dark:hover:group-active:bg-chalkboard-80/20'
? ' ui-open:text-primary'
: '')
}
style={{ paddingInlineStart: getIndentationCSS(level) }}
@ -353,17 +348,16 @@ export const FileTree = ({
return (
<div className={className}>
<div className="flex items-center gap-1 px-4 py-1 bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-b border-b-chalkboard-30 dark:border-b-chalkboard-80">
<div className="flex items-center gap-1 px-4 py-1 bg-chalkboard-20/40 dark:bg-chalkboard-80/50 border-b border-b-chalkboard-30 dark:border-b-chalkboard-80">
<h2 className="flex-1 m-0 p-0 text-sm mono">Files</h2>
<ActionButton
Element="button"
icon={{
icon: 'filePlus',
iconClassName: '!text-energy-80 dark:!text-energy-20',
bgClassName:
'bg-chalkboard-20/50 hover:bg-energy-10/50 dark:hover:bg-transparent',
iconClassName: '!text-current',
bgClassName: 'bg-transparent',
}}
className="!p-0 bg-transparent !outline-none"
className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
onClick={createFile}
>
<Tooltip position="inlineStart" delay={750}>
@ -375,11 +369,10 @@ export const FileTree = ({
Element="button"
icon={{
icon: 'folderPlus',
iconClassName: '!text-energy-80 dark:!text-energy-20',
bgClassName:
'bg-chalkboard-20/50 hover:bg-energy-10/50 dark:hover:bg-transparent',
iconClassName: '!text-current',
bgClassName: 'bg-transparent',
}}
className="!p-0 bg-transparent !outline-none"
className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
onClick={createFolder}
>
<Tooltip position="inlineStart" delay={750}>