Hover to see version

nukeop · Mar 16, 2024 · 065490b · 065490b
1 parent cb07c40
commit 065490b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 29 deletions.
diff --git a/.env b/.env
@@ -9,4 +9,5 @@ LAST_FM_API_SECRET=2ee49e35f08b837d43b2824198171fc8
 SOUNDCLOUD_API_KEY=22e8f71d7ca75e156d6b2f0e0a5172b3
 NUCLEAR_SERVICES_URL=https://qjrujsisccsvyvjnqtnq.supabase.co
 NUCLEAR_SERVICES_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFqcnVqc2lzY2Nzdnl2am5xdG5xIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTY1OTY0NjEsImV4cCI6MTk3MjE3MjQ2MX0.WQWcwBAQFNE259f2o8ruFln_UMLTFEn5aUD7KHrs9Aw
-NUCLEAR_VERIFICATION_SERVICE_URL=https://nuclear-verification-service.fly.dev
+NUCLEAR_VERIFICATION_SERVICE_URL=https://nuclear-verification-service.fly.dev
+NUCLEAR_VERSION="0.6.30"
diff --git a/packages/app/app/App.js b/packages/app/app/App.js
@@ -24,8 +24,6 @@ import './app.global.scss';
 import styles from './styles.scss';
 import compact from './compact.scss';
 
-import logoIcon from '../resources/media/512x512.png';
-
 import Navbar from './components/Navbar';
 import VerticalPanel from './components/VerticalPanel';
 import Spacer from './components/Spacer';
@@ -48,6 +46,7 @@ import WindowControls from './components/WindowControls';
 import SidebarMenuContainer from './containers/SidebarMenuContainer';
 import { CommandPaletteContainer } from './containers/CommandPaletteContainer';
 import { hot } from 'react-hot-loader';
+import SidebarBrand from './components/SidebarBrand';
 
 @withTranslation('app')
 class App extends React.PureComponent {
@@ -132,9 +131,7 @@ class App extends React.PureComponent {
         <div className={styles.app_container}>
           <MiniPlayerContainer />
           <Navbar>
-            <div className={styles.sidebar_brand}>
-              <img src={logoIcon} />
-            </div>
+            <SidebarBrand />
             <NavButtons />
             <SearchBoxContainer />
             <Spacer className={styles.navbar_spacer} />

diff --git a/packages/app/app/compact.scss b/packages/app/app/compact.scss
@@ -1,12 +1,8 @@
-@import './vars';
+@import "./vars";
 
 .compact_panel {
   width: 3rem;
 
-  .sidebar_brand {
-    padding: 1rem 0;
-  }
-
   .sidebar_menu_item_container {
     display: flex;
     justify-content: center;
@@ -21,5 +17,4 @@
   span {
     margin: 0 !important;
   }
-
 }
diff --git a/packages/app/app/components/SidebarBrand/index.tsx b/packages/app/app/components/SidebarBrand/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './styles.scss';
+
+import logoIcon from '../../../resources/media/512x512.png';
+import { Tooltip } from '@nuclear/ui';
+
+const SidebarBrand = () => <div className={styles.sidebar_brand}>
+  <Tooltip 
+    content={process.env.NUCLEAR_VERSION}trigger={
+      <img src={logoIcon} />
+    } />
+</div>;
+
+export default SidebarBrand;
diff --git a/packages/app/app/components/SidebarBrand/styles.scss b/packages/app/app/components/SidebarBrand/styles.scss
@@ -0,0 +1,11 @@
+.sidebar_brand {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin-left: 1em;
+
+    img {
+        width: 30px;
+        height: 30px;
+    }
+}
diff --git a/packages/app/app/styles.scss b/packages/app/app/styles.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@import "vars";
 
 .app_container {
   position: absolute;
@@ -44,7 +44,8 @@
   height: 50px;
 
   background-color: $background;
-  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    0px 5px 5px 0px rgba(0, 0, 0, 0.18),
     0px 5px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -64,7 +65,8 @@
   width: 300px;
 
   background-color: $background;
-  box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    5px 0px 5px 0px rgba(0, 0, 0, 0.18),
     5px 0px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -85,7 +87,8 @@
   width: 300px;
 
   background-color: $background;
-  box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    -5px 0px 5px 0px rgba(0, 0, 0, 0.18),
     -5px 0px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -101,7 +104,8 @@
   max-width: 100%;
 
   background-color: $background3;
-  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    0px -5px 5px 0px rgba(0, 0, 0, 0.18),
     0px -10px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -141,18 +145,6 @@
   height: 0;
 }
 
-.sidebar_brand {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  margin-left: 1em;
-
-  img {
-    width: 30px;
-    height: 30px;
-  }
-}
-
 .sidebar_footer {
   display: flex;
   flex-flow: row;