From 9cdea6a91825c4e1b075d7bfa4ef7480724801f3 Mon Sep 17 00:00:00 2001
From: Aditya Mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Mon, 3 Jun 2024 09:16:36 +0530
Subject: [PATCH] cleanup unused imports and fix styling in panel layout
 (#10291)

* replace inline style with tailwind

* remove unused imports in panel

---------

Co-authored-by: Andy Chen <andychen5671@gmail.com>
---
 .../ui/src/components/editor/layout/Panel.tsx | 84 +++----------------
 .../panels/Properties/material/index.tsx      |  4 +-
 2 files changed, 12 insertions(+), 76 deletions(-)

diff --git a/packages/ui/src/components/editor/layout/Panel.tsx b/packages/ui/src/components/editor/layout/Panel.tsx
index 04dbd6926f..d36f46a517 100755
--- a/packages/ui/src/components/editor/layout/Panel.tsx
+++ b/packages/ui/src/components/editor/layout/Panel.tsx
@@ -26,47 +26,8 @@ Ethereal Engine. All Rights Reserved.
 import React, { ReactNode } from 'react'
 import Text from '../../../primitives/tailwind/Text'
 
-const panelIconStyles = {
-  color: 'var(--textColor)',
-  marginRight: '6px',
-  width: '18px'
-}
-
-const panelCheckboxStyles = {
-  color: 'var(--textColor)',
-  position: 'relative',
-  padding: '0px'
-}
-
-const panelContainerStyles = {
-  position: 'relative',
-  display: 'flex',
-  flex: 1,
-  flexDirection: 'column',
-  borderRadius: '4px',
-  backgroundColor: 'var(--dockBackground)',
-  overflow: 'hidden',
-  userSelect: 'none'
-}
-
-const panelToolbarStyles = {
-  display: 'flex',
-  padding: '4px',
-  height: '24px',
-  alignItems: 'center',
-  borderBottom: '1px solid rgba(0, 0, 0, 0.2)'
-}
-
-const panelContentStyles = {
-  display: 'flex',
-  flex: 1,
-  flexDirection: 'column',
-  position: 'relative',
-  overflow: 'hidden'
-}
-
-export const PanelIcon = ({ as: IconComponent, size = 12 }) => {
-  return <IconComponent style={panelIconStyles} size={size} />
+const PanelIcon = ({ as: IconComponent, size = 12 }) => {
+  return <IconComponent className="mr-[6px] w-[18px] text-[var(--textColor)]" size={size} />
 }
 
 export const PanelTitle = ({ children }) => {
@@ -77,33 +38,8 @@ export const PanelTitle = ({ children }) => {
   )
 }
 
-export const PanelCheckbox = ({ children }) => {
-  return <div style={panelCheckboxStyles as React.CSSProperties}>{children}</div>
-}
-
 export const PanelDragContainer = ({ children }) => {
-  // .dock-tab styled in Editor2Container.css
-  return <div className={`flex h-[30px] cursor-pointer rounded-t-md px-4 py-2`}>{children}</div>
-}
-
-export const PanelContainer = ({ children, ...rest }) => {
-  return (
-    <div style={panelContainerStyles as React.CSSProperties} {...rest}>
-      {children}
-    </div>
-  )
-}
-
-export const PanelToolbar = ({ children }) => {
-  return (
-    <div className="toolbar" style={panelToolbarStyles}>
-      {children}
-    </div>
-  )
-}
-
-export const PanelContent = ({ children }) => {
-  return <div style={panelContentStyles as React.CSSProperties}>{children}</div>
+  return <div className="flex h-[30px] cursor-pointer rounded-t-md px-4 py-2">{children}</div>
 }
 
 interface PanelProps {
@@ -111,19 +47,21 @@ interface PanelProps {
   title: string
   toolbarContent?: React.ReactNode
   children?: ReactNode
-  // Add any other props you want to accept
 }
 
 const Panel: React.FC<PanelProps> = ({ icon, title, children, toolbarContent, ...rest }) => {
   return (
-    <PanelContainer {...rest}>
-      <PanelToolbar>
+    <div
+      className="relative flex flex-1 select-none flex-col overflow-hidden rounded bg-[var(--dockBackground)]"
+      {...rest}
+    >
+      <div className="toolbar flex h-6 items-center border-b border-black border-opacity-20 p-1">
         {icon && <PanelIcon as={icon} size={12} />}
         <PanelTitle>{title}</PanelTitle>
         {toolbarContent}
-      </PanelToolbar>
-      <PanelContent>{children}</PanelContent>
-    </PanelContainer>
+      </div>
+      <div className="relative flex flex-1 flex-col overflow-hidden">{children}</div>
+    </div>
   )
 }
 
diff --git a/packages/ui/src/components/editor/panels/Properties/material/index.tsx b/packages/ui/src/components/editor/panels/Properties/material/index.tsx
index 040af9bd76..d96d280e61 100644
--- a/packages/ui/src/components/editor/panels/Properties/material/index.tsx
+++ b/packages/ui/src/components/editor/panels/Properties/material/index.tsx
@@ -23,7 +23,6 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import MaterialLibraryIcon from '@mui/icons-material/Yard'
 import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Texture, Uniform } from 'three'
@@ -58,7 +57,7 @@ import Button from '../../../../../primitives/tailwind/Button'
 import InputGroup from '../../../input/Group'
 import SelectInput from '../../../input/Select'
 import StringInput from '../../../input/String'
-import { PanelDragContainer, PanelIcon, PanelTitle } from '../../../layout/Panel'
+import { PanelDragContainer, PanelTitle } from '../../../layout/Panel'
 import { InfoTooltip } from '../../../layout/Tooltip'
 import ParameterInput from '../../../properties/parameter'
 
@@ -304,7 +303,6 @@ export const MaterialPropertyTitle = () => {
   return (
     <div className={styles.dockableTab}>
       <PanelDragContainer>
-        <PanelIcon as={MaterialLibraryIcon} size={12} />
         <PanelTitle>
           <InfoTooltip title={t('editor:properties.mesh.materialProperties.info')}>
             <span>{t('editor:properties.mesh.materialProperties.title')}</span>