@taruvi/navkit 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {

package/src/App.styles.ts

@@ -73,6 +73,7 @@ export const getAppStyles = (mode: ThemeMode) => {
     },
     toolbar: {
       backgroundColor: colors.bg.white,
+      boxShadow: ' 0px 0px 10px 2px rgba(0, 0, 0, 0.3)',
     },
     leftSection: {
       display: 'flex',

package/src/App.tsx

@@ -7,7 +7,8 @@ import { AppLauncher, Profile, ProfileMenu, Shortcuts, ShortcutsMenu, Mattermost
 import { Box, Modal, Card } from "@mui/material"
 import { getAppStyles } from "./App.styles"
 import { NavkitProvider, useNavigation } from "./NavkitContext"
-import defaultLogo from "./assets/taruvi-logo.png"
+import blackLogo from "./assets/taruvi-logo-white.png"
+import whiteLogo from "./assets/taruvi-logo-black.png"
 import type { Client } from "@taruvi/sdk"
 
 const NavkitContent = () => {
@@ -40,7 +41,7 @@ const NavkitContent = () => {
             }
             <img
               style={(siteSettings?.logo && siteSettings.logo !== '') ? styles.logo : styles.defaultLogo}
-              src={(siteSettings?.logo && siteSettings.logo !== '') ? siteSettings.logo : defaultLogo}
+              src={(siteSettings?.logo && siteSettings.logo !== '') ? siteSettings.logo : (themeMode === 'light' ? whiteLogo : blackLogo)}
               onClick={() => window.location.href = siteSettings.frontendUrl || '/desk'}
             />
           </Box>

package/src/components/AppLauncher/AppLauncher.styles.ts

@@ -1,4 +1,4 @@
-import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
 import type { ThemeMode } from '../../styles/variables'
 
 export const appLauncherStyles = {
@@ -61,6 +61,7 @@ export const appLauncherStyles = {
 
 export const getAppLauncherStyles = (mode: ThemeMode) => {
   const colors = getColors(mode)
+  const themeShadows = getShadows(mode)
   return {
     container: {
       position: 'absolute' as const,
@@ -70,7 +71,7 @@ export const getAppLauncherStyles = (mode: ThemeMode) => {
       maxWidth: '800px',
       maxHeight: { xs: 'calc(100vh - 80px)', md: '335px' },
       borderRadius: borderRadius.default,
-      boxShadow: shadows.dropdown,
+      boxShadow: themeShadows.dropdown,
       p: spacing.lg,
       backgroundColor: colors.bg.white,
       zIndex: zIndex.overlay,

package/src/components/Profile/Profile.styles.ts

@@ -1,4 +1,4 @@
-import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
 import type { ThemeMode } from '../../styles/variables'
 
 export const profileStyles = {
@@ -61,6 +61,7 @@ export const profileStyles = {
 
 export const getProfileStyles = (mode: ThemeMode) => {
   const colors = getColors(mode)
+  const themeShadows = getShadows(mode)
   return {
     container: {
       position: 'relative' as const,
@@ -93,7 +94,7 @@ export const getProfileStyles = (mode: ThemeMode) => {
       right: 0,
       width: 200,
       borderRadius: borderRadius.default,
-      boxShadow: shadows.dropdown,
+      boxShadow: themeShadows.dropdown,
       backgroundColor: colors.bg.white,
       zIndex: zIndex.overlay,
       py: 1,

package/src/components/Shortucts/ShortcutsMenu.styles.ts

@@ -1,4 +1,4 @@
-import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors } from '../../styles/variables'
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
 import type { ThemeMode } from '../../styles/variables'
 
 export const shortcutsMenuStyles = {
@@ -36,6 +36,7 @@ export const shortcutsMenuStyles = {
 
 export const getShortcutsMenuStyles = (mode: ThemeMode) => {
   const colors = getColors(mode)
+  const themeShadows = getShadows(mode)
   return {
     menu: {
       position: 'absolute' as const,
@@ -43,7 +44,7 @@ export const getShortcutsMenuStyles = (mode: ThemeMode) => {
       right: 0,
       width: 200,
       borderRadius: borderRadius.default,
-      boxShadow: shadows.dropdown,
+      boxShadow: themeShadows.dropdown,
       backgroundColor: colors.bg.white,
       zIndex: zIndex.overlay,
       py: 1,

package/src/styles/variables.ts

@@ -25,7 +25,7 @@ export const darkColors = {
     tertiary: '#9e9e9e',
   },
   bg: {
-    white: '#1e1e1e',
+    white: '#111827',
     light: '#2d2d2d',
     avatar: '#424242',
   },
@@ -50,6 +50,12 @@ export const shadows = {
   dropdown: '0 4px 20px rgba(0,0,0,0.1)',
 }
 
+export const getShadows = (mode: ThemeMode) => ({
+  dropdown: mode === 'dark'
+    ? '0 4px 20px rgba(255,255,255,0.1)'
+    : '0 4px 20px rgba(0,0,0,0.1)',
+})
+
 export const borderRadius = {
   default: 2,
 }