Add cube download (#31)

* Add cube download button to settings

* Move button to side panel and adjust css

* Lint

Author: gjmooney

src/widgets/LeftSidebar.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>
   );

style/base.css

@@ -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,12 @@
   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 +274,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 +375,6 @@
   color: var(--jp-ui-inverse-font-color1);
 }
 
-.jlab-gather-avatar-grid {
-  /* height: 60%; */
-}
-
 .jlab-gather-avatar-sidepane {
   width: 128px;
   height: 128px;
@@ -447,6 +444,7 @@
 
 .jlab-gather-device-settings-row {
   display: flex;
+  align-items: center;
 }
 
 .jlab-gather-device-title {