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

Make light theme borders more contrasting, update sidebar icons (#3883)

Browse Source 
* Make light theme borders more contrasting

* Update icons in sidebar

* fix disabled styles on ActionIcon

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

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

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

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

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

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

* Update src/components/CustomIcon.tsx

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

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

* trigger CI

* fmt

* Update "Make" button test locator to be more specific

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>
Co-authored-by: 49fl <ircsurfer33@gmail.com>
This commit is contained in:
Frank Noirot
2024-09-16 17:12:54 -04:00
committed by GitHub
parent 8d48c17395
commit 61c7d9844d
43 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ModelingSidebar/ModelingPane.module.css
View File

@ -2,7 +2,7 @@
@apply relative z-0 rounded-r max-w-full flex-auto;
display: grid;
grid-template-rows: auto 1fr;
@apply bg-chalkboard-10/50 focus-within:bg-chalkboard-10/90 backdrop-blur-sm border border-chalkboard-20;
@apply bg-chalkboard-10/50 focus-within:bg-chalkboard-10/90 backdrop-blur-sm border border-chalkboard-30;
scroll-margin-block-start: 41px;
}
@ -19,7 +19,7 @@
@apply z-10 relative rounded-tr;
@apply flex h-[41px] items-center justify-between gap-2 px-2;
@apply font-mono text-xs font-bold select-none text-chalkboard-90;
@apply bg-chalkboard-10 border-b border-chalkboard-20;
@apply bg-chalkboard-10 border-b border-chalkboard-30;
}
:global(.dark) .header {

14
src/components/ModelingSidebar/ModelingPanes/index.ts
View File

@ -1,10 +1,4 @@
import {
IconDefinition,
faBugSlash,
faCode,
faCodeCommit,
faSquareRootVariable,
} from '@fortawesome/free-solid-svg-icons'
import { IconDefinition, faBugSlash } from '@fortawesome/free-solid-svg-icons'
import { KclEditorMenu } from 'components/ModelingSidebar/ModelingPanes/KclEditorMenu'
import { CustomIconName } from 'components/CustomIcon'
import { KclEditorPane } from 'components/ModelingSidebar/ModelingPanes/KclEditorPane'
@ -68,7 +62,7 @@ export const sidebarPanes: SidebarPane[] = [
{
id: 'code',
title: 'KCL Code',
icon: faCode,
icon: 'code',
Content: KclEditorPane,
keybinding: 'Shift + C',
Menu: KclEditorMenu,
@ -94,7 +88,7 @@ export const sidebarPanes: SidebarPane[] = [
{
id: 'variables',
title: 'Variables',
icon: faSquareRootVariable,
icon: 'make-variable',
Content: MemoryPane,
Menu: MemoryPaneMenu,
keybinding: 'Shift + V',
@ -102,7 +96,7 @@ export const sidebarPanes: SidebarPane[] = [
{
id: 'logs',
title: 'Logs',
icon: faCodeCommit,
icon: 'logs',
Content: LogsPane,
keybinding: 'Shift + L',
},

18
src/components/ModelingSidebar/ModelingSidebar.tsx
View File

@ -55,7 +55,6 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
id: 'export',
title: 'Export part',
icon: 'floppyDiskArrow',
iconClassName: '!p-0',
keybinding: 'Ctrl + Shift + E',
action: () =>
commandBarSend({
@ -67,7 +66,6 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
id: 'make',
title: 'Make part',
icon: 'printer3d',
iconClassName: '!p-0',
keybinding: 'Ctrl + Shift + M',
// eslint-disable-next-line @typescript-eslint/no-misused-promises
action: async () => {
@ -181,7 +179,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
className={
(context.store?.openPanes.length === 0 ? 'rounded-r ' : '') +
'relative z-[2] pointer-events-auto p-0 col-start-1 col-span-1 h-fit w-fit flex flex-col ' +
'bg-chalkboard-10 border border-solid border-chalkboard-20 dark:bg-chalkboard-90 dark:border-chalkboard-80 group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 '
'bg-chalkboard-10 border border-solid border-chalkboard-30 dark:bg-chalkboard-90 dark:border-chalkboard-80 group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 shadow-sm '
}
>
<ul
@ -204,7 +202,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
</ul>
{filteredActions.length > 0 && (
<>
<hr className="w-full border-chalkboard-20 dark:border-chalkboard-80" />
<hr className="w-full border-chalkboard-30 dark:border-chalkboard-80" />
<ul
id="sidebar-actions"
className="w-fit p-2 flex flex-col gap-2"
@ -292,7 +290,7 @@ function ModelingPaneButton({
return (
<div id={paneConfig.id + '-button-holder'}>
<button
className="pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
className="group pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent disabled:!border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
onClick={onClick}
name={paneConfig.title}
data-testid={paneConfig.id + '-pane-button'}
@ -302,13 +300,9 @@ function ModelingPaneButton({
>
<ActionIcon
icon={paneConfig.icon}
className={'p-1 ' + paneConfig.iconClassName || ''}
size={paneConfig.iconSize || 'sm'}
iconClassName={
paneIsOpen
? ' !text-chalkboard-10'
: '!text-chalkboard-80 dark:!text-chalkboard-30'
}
className={paneConfig.iconClassName || ''}
size={paneConfig.iconSize || 'md'}
iconClassName={paneIsOpen ? ' !text-chalkboard-10' : ''}
bgClassName={
'rounded-sm ' + (paneIsOpen ? '!bg-primary' : '!bg-transparent')
}