diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts index d248b1e7f9..3e40499981 100644 --- a/frontend/renderer/plugins/vuetify.ts +++ b/frontend/renderer/plugins/vuetify.ts @@ -25,6 +25,7 @@ function makeThemeFromCssModule(theme: CSSModuleClasses, isDark: boolean): Theme error: theme.errorColor, font: theme.fontColor, icon: theme.iconColor, + 'dropdown-background': theme.dropdownBackgroundColor, }, variables: { 'border-color': theme.borderColor, diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts index 6ce054e21d..ad2dcfd3b5 100644 --- a/frontend/src/assets/icons/index.ts +++ b/frontend/src/assets/icons/index.ts @@ -2,6 +2,7 @@ import Bell from './bell.svg?component' import Camera from './camera.svg?component' import Cockpit from './cockpit.svg?component' import Ellipsis from './ellipsis.svg?component' +import Logout from './logout.svg?component' import Mall from './mall.svg?component' import Message from './message.svg?component' import WorldCafe from './worldCafe.svg?component' @@ -13,6 +14,7 @@ const aliases: Partial = { camera: Camera, cockpit: Cockpit, ellipsis: Ellipsis, + logout: Logout, mall: Mall, message: Message, 'world-cafe': WorldCafe, diff --git a/frontend/src/assets/icons/logout.svg b/frontend/src/assets/icons/logout.svg new file mode 100644 index 0000000000..c6e2b6d625 --- /dev/null +++ b/frontend/src/assets/icons/logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/scss/dark.module.scss b/frontend/src/assets/scss/dark.module.scss index 599cb3c90a..bcf23c2130 100644 --- a/frontend/src/assets/scss/dark.module.scss +++ b/frontend/src/assets/scss/dark.module.scss @@ -7,12 +7,13 @@ $info-color: #2196f3; $success-color: #4caf50; $warning-color: #ffeb3b; $border-color: #d6dfe9; -$border-opacity: 0.1; +$border-opacity: 0.4; $font-color: #222; $icon-color: #F5F5F5; $icon-background: rgb(61 71 83 / 85%); $bottom-menu-background: rgb(78 91 107 / 60%); $sidebar-background: rgb(61 71 83 / 60%); +$dropdown-background-color: #3D4753; :export { backgroundColor: $background-color; @@ -30,4 +31,5 @@ $sidebar-background: rgb(61 71 83 / 60%); iconBackground: $icon-background; bottomMenuBackground: $bottom-menu-background; sidebarBackground: $sidebar-background; + dropdownBackgroundColor: $dropdown-background-color; } diff --git a/frontend/src/assets/scss/light.module.scss b/frontend/src/assets/scss/light.module.scss index f936a033b3..9097074397 100644 --- a/frontend/src/assets/scss/light.module.scss +++ b/frontend/src/assets/scss/light.module.scss @@ -13,6 +13,7 @@ $icon-color: #3D4753; $icon-background: rgb(255 255 255); $bottom-menu-background: rgb(225 230 237 / 60%); $sidebar-background: rgb(225 230 237); +$dropdown-background-color: #fff; :export { backgroundColor: $background-color; @@ -30,5 +31,6 @@ $sidebar-background: rgb(225 230 237); iconBackground: $icon-background; bottomMenuBackground: $bottom-menu-background; sidebarBackground: $sidebar-background; + dropdownBackgroundColor: $dropdown-background-color; } diff --git a/frontend/src/components/menu/BottomMenu.vue b/frontend/src/components/menu/BottomMenu.vue index b8807605e6..c2f844aa85 100644 --- a/frontend/src/components/menu/BottomMenu.vue +++ b/frontend/src/components/menu/BottomMenu.vue @@ -9,12 +9,10 @@
- - - - + +
@@ -26,8 +24,6 @@ import CreateButtonMobile from '#components/buttons/CreateButtonMobile.vue' import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue' import Circle from './CircleElement.vue' -import MessageIndicator from './MessageIndicator.vue' -import NewsIndicator from './NewsIndicator.vue' import UserInfo from './UserInfo.vue' const drawer = ref(false) diff --git a/frontend/src/components/menu/MessageIndicator.test.ts b/frontend/src/components/menu/MessageIndicator.test.ts new file mode 100644 index 0000000000..c50b5e3511 --- /dev/null +++ b/frontend/src/components/menu/MessageIndicator.test.ts @@ -0,0 +1,31 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect, beforeEach, afterEach } from 'vitest' + +import MessageIndicator from './MessageIndicator.vue' + +describe('LogoImage', () => { + const Wrapper = () => { + return mount(MessageIndicator) + } + + let wrapper: ReturnType + + beforeEach(() => { + wrapper = Wrapper() + }) + + afterEach(() => { + wrapper.unmount() + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) + + it('displays the number of messages', async () => { + await wrapper.setProps({ numberOfMessages: 1 }) + expect(wrapper.text()).toContain('1') + await wrapper.setProps({ numberOfMessages: 5 }) + expect(wrapper.text()).toContain('5') + }) +}) diff --git a/frontend/src/components/menu/NewsIndicator.test.ts b/frontend/src/components/menu/NewsIndicator.test.ts new file mode 100644 index 0000000000..ceca37748c --- /dev/null +++ b/frontend/src/components/menu/NewsIndicator.test.ts @@ -0,0 +1,24 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect, beforeEach, afterEach } from 'vitest' + +import NewsIndicator from './NewsIndicator.vue' + +describe('LogoImage', () => { + const Wrapper = () => { + return mount(NewsIndicator) + } + + let wrapper: ReturnType + + beforeEach(() => { + wrapper = Wrapper() + }) + + afterEach(() => { + wrapper.unmount() + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/frontend/src/components/menu/TopMenu.vue b/frontend/src/components/menu/TopMenu.vue index e64e45ae23..7911e5b232 100644 --- a/frontend/src/components/menu/TopMenu.vue +++ b/frontend/src/components/menu/TopMenu.vue @@ -3,7 +3,9 @@ - + @@ -17,7 +19,6 @@ - @@ -31,14 +32,13 @@ + + diff --git a/frontend/src/components/menu/UserInfo.vue b/frontend/src/components/menu/UserInfo.vue index 6047afb18e..2cf9e64739 100644 --- a/frontend/src/components/menu/UserInfo.vue +++ b/frontend/src/components/menu/UserInfo.vue @@ -1,5 +1,5 @@ -m diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap index 1cc5eaebb9..981a619ee1 100644 --- a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap +++ b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap @@ -134,80 +134,30 @@ exports[`BottomMenu > renders BottomMenu 1`] = ` data-v-96a196cc="" >
-
- - - -
-
- 3 -
-
-
- -
+ + + +
renders BottomMenu 1`] = `
-
- - - -