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

* 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>

e2e/playwright/machines.spec.ts

@@ -38,7 +38,7 @@ test(
     await expect(page.getByText(notFoundText).first()).not.toBeVisible()
 
     // Find the make button
-    const makeButton = page.getByRole('button', { name: 'Make' })
+    const makeButton = page.getByRole('button', { name: 'Make part' })
     // Make sure the button is visible but disabled
     await expect(makeButton).toBeVisible()
     await expect(makeButton).toBeDisabled()

src/Toolbar.tsx

@@ -124,7 +124,7 @@ export function Toolbar({
   }, [currentMode, disableAllButtons, configCallbackProps])
 
   return (
-    <menu className="max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-20 dark:border-chalkboard-80 border-t-0 shadow-sm">
+    <menu className="max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm">
       <ul
         {...props}
         ref={toolbarButtonsRef}

src/components/ActionIcon.tsx

@@ -29,8 +29,8 @@ export const ActionIcon = ({
   size = 'md',
   children,
 }: ActionIconProps) => {
-  const computedIconClassName = `h-auto text-inherit dark:text-current !group-disabled:text-chalkboard-60 !group-disabled:text-chalkboard-60 ${iconClassName}`
+  const computedIconClassName = `h-auto text-inherit dark:text-current group-disabled:text-chalkboard-60 group-disabled:text-chalkboard-60 ${iconClassName}`
-  const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
+  const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 group-disabled:bg-chalkboard-30 dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
 
   return (
     <div

src/components/CustomIcon.tsx

@@ -681,6 +681,21 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  logs: (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="logs"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.5 15C6.5 14.1716 5.82843 13.5 5 13.5C4.17157 13.5 3.5 14.1716 3.5 15C3.5 15.8284 4.17157 16.5 5 16.5C5.82843 16.5 6.5 15.8284 6.5 15ZM6.5 10C6.5 9.17157 5.82843 8.5 5 8.5C4.17157 8.5 3.5 9.17157 3.5 10C3.5 10.8284 4.17157 11.5 5 11.5C5.82843 11.5 6.5 10.8284 6.5 10ZM5 3.5C5.82843 3.5 6.5 4.17157 6.5 5C6.5 5.82843 5.82843 6.5 5 6.5C4.17157 6.5 3.5 5.82843 3.5 5C3.5 4.17157 4.17157 3.5 5 3.5ZM8.5 5.5H16.5V4.5H8.5V5.5ZM8.5 10.5H16.5V9.5H8.5V10.5ZM16.5 15.5H8.5V14.5H16.5V15.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   'make-variable': (
     <svg
       viewBox="0 0 20 20"

src/components/ModelingSidebar/ModelingPane.module.css

@@ -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 {

src/components/ModelingSidebar/ModelingPanes/index.ts

@@ -1,10 +1,4 @@
-import {
+import { IconDefinition, faBugSlash } from '@fortawesome/free-solid-svg-icons'
-  IconDefinition,
-  faBugSlash,
-  faCode,
-  faCodeCommit,
-  faSquareRootVariable,
-} 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',
   },

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -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 || ''}
+          className={paneConfig.iconClassName || ''}
-          size={paneConfig.iconSize || 'sm'}
+          size={paneConfig.iconSize || 'md'}
-          iconClassName={
+          iconClassName={paneIsOpen ? ' !text-chalkboard-10' : ''}
-            paneIsOpen
-              ? ' !text-chalkboard-10'
-              : '!text-chalkboard-80 dark:!text-chalkboard-30'
-          }
           bgClassName={
             'rounded-sm ' + (paneIsOpen ? '!bg-primary' : '!bg-transparent')
           }