Feature/add theme (#70)

tenstorrent · Aug 30, 2024 · 8f6d5e2 · 8f6d5e2
2 parents d788651 + 565c33c
commit 8f6d5e2
Show file tree

Hide file tree

Showing 31 changed files with 782 additions and 358 deletions.
diff --git a/favicon.ico b/favicon.ico
diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
diff --git a/public/favicon/favicon.svg b/public/favicon/favicon.svg
diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx
@@ -19,7 +19,7 @@ import { useOperationsList } from '../hooks/useAPI';
 import ROUTES from '../definitions/routes';
 import { expandedOperationsAtom } from '../store/app';
 import MicroOperations from './MicroOperations';
-import { OperationDescription } from "../model/APIData";
+import { OperationDescription } from '../model/APIData';
 
 const PLACEHOLDER_ARRAY_SIZE = 10;
 const OPERATION_EL_HEIGHT = 39; // Height in px of each list item
@@ -296,7 +296,7 @@ const OperationList = () => {
                                         >
                                             <div className='arguments-wrapper'>
                                                 <p className='monospace'>
-                                                    Python execution time: {operation.duration} s
+                                                    Python execution time: {operation.duration}s
                                                 </p>
 
                                                 {operation.arguments && (

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -1,22 +1,19 @@
-import { ProgressBar as BlueprintProgressBar, Intent } from '@blueprintjs/core';
+import { ProgressBar as BlueprintProgressBar } from '@blueprintjs/core';
 import 'styles/components/ProgressBar.scss';
 import { UploadProgress } from '../hooks/useLocal';
 
 function ProgressBar({ progress, estimated }: UploadProgress) {
     return (
         <div className='progress-bar'>
-            {progress && estimated && (
+            {progress && estimated ? (
                 <span className='status'>
                     {progress > 0 ? `${Math.round(progress * 100)}%` : `100%`}
                     {` - `}
                     {estimated > 0 ? `${Math.round(estimated)}s left` : '0s left'}
                 </span>
-            )}
+            ) : null}
 
-            <BlueprintProgressBar
-                value={progress}
-                intent={Intent.SUCCESS}
-            />
+            <BlueprintProgressBar value={progress} />
         </div>
     );
 }

diff --git a/src/components/operation-details/OperationDetailsComponent.tsx b/src/components/operation-details/OperationDetailsComponent.tsx
@@ -361,12 +361,18 @@ const OperationDetailsComponent: React.FC<OperationDetailsProps> = ({ operationI
                                         key={op.id}
                                         className='operation-link'
                                     >
-                                        <Link
-                                            to={`${ROUTES.OPERATIONS}/${op.id}`}
-                                            className={classNames('', { current: operationId === op.id })}
-                                        >
-                                            {op.id} {op.name}
-                                        </Link>
+                                        {operationId === op.id ? (
+                                            <span className='selected-tensor'>
+                                                {op.id} {op.name}
+                                            </span>
+                                        ) : (
+                                            <Link
+                                                to={`${ROUTES.OPERATIONS}/${op.id}`}
+                                                className={classNames('', { current: operationId === op.id })}
+                                            >
+                                                {op.id} {op.name}
+                                            </Link>
+                                        )}
                                     </div>
                                 ))}
 
@@ -388,12 +394,18 @@ const OperationDetailsComponent: React.FC<OperationDetailsProps> = ({ operationI
                                         key={op.id}
                                         className='operation-link'
                                     >
-                                        <Link
-                                            to={`${ROUTES.OPERATIONS}/${op.id}`}
-                                            className={classNames('', { current: operationId === op.id })}
-                                        >
-                                            {op.id} {op.name}
-                                        </Link>
+                                        {operationId === op.id ? (
+                                            <span className='selected-tensor'>
+                                                {op.id} {op.name}
+                                            </span>
+                                        ) : (
+                                            <Link
+                                                to={`${ROUTES.OPERATIONS}/${op.id}`}
+                                                className={classNames('', { current: operationId === op.id })}
+                                            >
+                                                {op.id} {op.name}
+                                            </Link>
+                                        )}
                                     </div>
                                 ))}
                             </div>

diff --git a/src/components/report-selection/ConnectionTestMessage.tsx b/src/components/report-selection/ConnectionTestMessage.tsx
@@ -27,7 +27,7 @@ const INTENT_MAP: Record<ConnectionTestStates, Intent> = {
 
 function ConnectionTestMessage({ status, message }: ConnectionTestMessageProps) {
     return (
-        <div className={`verify-connection-item status-${ConnectionTestStates[status]}`}>
+        <div className={`verify-connection-item status-${ConnectionTestStates[status].toLowerCase()}`}>
             <Icon
                 className='connection-status-icon'
                 icon={ICON_MAP[status]}

diff --git a/src/components/report-selection/RemoteConnectionDialog.tsx b/src/components/report-selection/RemoteConnectionDialog.tsx
@@ -167,6 +167,7 @@ const RemoteConnectionDialog: FC<RemoteConnectionDialogProps> = ({
                     />
                 </fieldset>
             </DialogBody>
+
             <DialogFooter
                 minimal
                 actions={

diff --git a/src/definitions/routes.ts b/src/definitions/routes.ts
@@ -5,6 +5,7 @@
 const ROUTES = Object.freeze({
     HOME: '/',
     OPERATIONS: '/operations',
+    STYLEGUIDE: '/styleguide',
 });
 
 export default ROUTES;
diff --git a/src/main.tsx b/src/main.tsx
@@ -14,6 +14,7 @@ import Layout from './components/Layout';
 import Home from './routes/Home';
 import Operations from './routes/Operations';
 import OperationDetails from './routes/OperationDetails';
+import Styleguide from './routes/Styleguide';
 import ROUTES from './definitions/routes';
 
 const router = createBrowserRouter([
@@ -34,6 +35,10 @@ const router = createBrowserRouter([
                 path: 'operations/:operationId',
                 element: <OperationDetails />,
             },
+            {
+                path: 'styleguide',
+                element: <Styleguide />,
+            },
         ],
     },
 ]);

diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
@@ -6,7 +6,7 @@ import { Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import LocalFolderSelector from '../components/report-selection/LocalFolderSelector';
 import RemoteSyncConfigurator from '../components/report-selection/RemoteSyncConfigurator';
-import 'styles/components/Home.scss';
+import 'styles/routes/Home.scss';
 
 function Home() {
     return (

diff --git a/src/routes/Operations.tsx b/src/routes/Operations.tsx
@@ -23,7 +23,7 @@ export default function Operations() {
     return (
         <>
             <Helmet title='Operations' />
-            <OperationList />;
+            <OperationList />
         </>
     );
 }