Move button to side panel and adjust css

Author: gjmooney

src/components/buttons/DownloadCubeButton.tsx

@@ -3,7 +3,6 @@ import React, { ChangeEvent, useEffect, useRef } from 'react';
 
 import { useCubeStore } from '../../store';
 import Modal from './Modal';
-import DownloadCubeButton from '../buttons/DownloadCubeButton';
 
 interface IAddNewModelModalProps {
   isOpen: boolean;
@@ -61,7 +60,6 @@ const DeviceSettingModal = ({ isOpen, onClose }: IAddNewModelModalProps) => {
             updateDeviceOnChange(e.target.value, DeviceType.audioOutput)
           }
         />
-        <DownloadCubeButton />
       </div>
     </Modal>
   );

src/components/modals/DeviceSettingModal.tsx

@@ -1,4 +1,4 @@
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { Button, SidePanel, UseSignal } from '@jupyterlab/ui-components';
@@ -75,6 +75,12 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => {
     handleCloseAddModelModal();
   };
 
+  const handleDownload = () => {
+    const url =
+      'https://raw.githubusercontent.com/QuantStack/jupyterlab-gather/main/resources/ar-cubes/cube1.pdf';
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
   return (
     <div className="jlab-gather-sidebar-container">
       <div className="jlab-gather-sidebar-description">
@@ -97,21 +103,15 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => {
       </div>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <div className="jlab-gather-sidebar-buttons">
-          <Button
-            className="jlab-gather-sidebar-button"
-            onClick={() => handleModelSelectClick(0)}
-          >
+          <Button onClick={() => handleModelSelectClick(0)}>
             Set as first model
           </Button>
-          <Button
-            className="jlab-gather-sidebar-button"
-            onClick={() => handleModelSelectClick(1)}
-          >
+          <Button onClick={() => handleModelSelectClick(1)}>
             Set as second model
           </Button>
         </div>
         <Button
-          className="jlab-gather-sidebar-load-button"
+          className="jlab-gather-sidebar-button"
           onClick={handleOpenAddUrlModal}
           disabled={isDisabled}
         >
@@ -123,7 +123,7 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => {
           onClose={handleCloseAddModelModal}
         />
         <Button
-          className="jlab-gather-sidebar-load-button"
+          className="jlab-gather-sidebar-button"
           onClick={handleOpenAddFileModal}
           disabled={isDisabled}
         >
@@ -135,7 +135,7 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => {
           onClose={handleCloseAddModelModal}
         />
         <Button
-          className="jlab-gather-sidebar-load-button"
+          className="jlab-gather-sidebar-button"
           onClick={handleLoadSecondScene}
           disabled={isDisabled}
         >
@@ -147,6 +147,16 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => {
             'Load Second Model'
           )}
         </Button>
+        <Button
+          className="jlab-gather-sidebar-button jlab-gather-btn-with-icon"
+          onClick={handleDownload}
+        >
+          <FontAwesomeIcon
+            icon={faDownload}
+            className="jlab-gather-icon-small"
+          />
+          Download AR Cube
+        </Button>
       </div>
     </div>
   );

src/widgets/LeftSidebar.tsx

@@ -22,7 +22,7 @@
   border: 2px solid transparent;
   border-radius: var(--gather-border-radius);
   font-family: inherit;
-  color: var(--jp-ui-font-color0);
+  color: var(--jp-ui-font-color1);
 }
 
 .jlab-gather-input::placeholder {
@@ -56,6 +56,11 @@
   color: whitesmoke;
 }
 
+.jlab-gather-btn-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 .jlab-gather-btn-danger {
   background-color: var(--jp-warn-color1) !important;
   color: black !important;
@@ -268,14 +273,9 @@
 }
 
 .jlab-gather-sidebar-button {
-  color: var(--jp-inverse-layout-color4);
-}
-
-.jlab-gather-sidebar-load-button {
   max-width: 313px;
   margin: 0.5rem;
   padding: 0.5rem;
-  color: var(--jp-inverse-layout-color4);
 }
 
 .jlab-gather-presenter-container {
@@ -374,10 +374,6 @@
   color: var(--jp-ui-inverse-font-color1);
 }
 
-.jlab-gather-avatar-grid {
-  /* height: 60%; */
-}
-
 .jlab-gather-avatar-sidepane {
   width: 128px;
   height: 128px;
@@ -447,6 +443,7 @@
 
 .jlab-gather-device-settings-row {
   display: flex;
+  align-items: center;
 }
 
 .jlab-gather-device-title {