From 9307584c259fdb2b326f0a8a1dbdaaffab359142 Mon Sep 17 00:00:00 2001 From: dominic Date: Tue, 10 Sep 2024 10:12:40 +0100 Subject: [PATCH] feat(background-settings): add and wire up default lights out background and selection --- .../messenger/user-profile/settings-panel/index.tsx | 6 ++++++ .../messenger/user-profile/settings-panel/utils.test.ts | 4 ++++ .../messenger/user-profile/settings-panel/utils.ts | 2 ++ src/main.scss | 4 ++++ src/store/background/index.ts | 4 ++-- src/utils.ts | 4 +++- 6 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/messenger/user-profile/settings-panel/index.tsx b/src/components/messenger/user-profile/settings-panel/index.tsx index 9a5509ec0..74754ce74 100644 --- a/src/components/messenger/user-profile/settings-panel/index.tsx +++ b/src/components/messenger/user-profile/settings-panel/index.tsx @@ -55,6 +55,12 @@ export class SettingsPanel extends React.Component { get getMainBackgroundItems() { const mainBackgroundItems = []; + mainBackgroundItems.push({ + id: MainBackground.StaticLightsOut, + label: this.renderSelectInputLabel('Lights Out (Static)'), + onSelect: () => this.setMainBackground(MainBackground.StaticLightsOut), + }); + mainBackgroundItems.push({ id: MainBackground.StaticGreenParticles, label: this.renderSelectInputLabel('Green Particle (Static)'), diff --git a/src/components/messenger/user-profile/settings-panel/utils.test.ts b/src/components/messenger/user-profile/settings-panel/utils.test.ts index 56ab21935..bdd98c1d8 100644 --- a/src/components/messenger/user-profile/settings-panel/utils.test.ts +++ b/src/components/messenger/user-profile/settings-panel/utils.test.ts @@ -2,6 +2,10 @@ import { MainBackground } from '../../../../store/background'; import { translateBackgroundValue } from './utils'; describe('translateBackgroundValue', () => { + it('should return "Lights Out (Static)" for MainBackground.StaticLightsOut', () => { + expect(translateBackgroundValue(MainBackground.StaticLightsOut)).toBe('Lights Out (Static)'); + }); + it('should return "Green Particle (Static)" for MainBackground.StaticGreenParticles', () => { expect(translateBackgroundValue(MainBackground.StaticGreenParticles)).toBe('Green Particle (Static)'); }); diff --git a/src/components/messenger/user-profile/settings-panel/utils.ts b/src/components/messenger/user-profile/settings-panel/utils.ts index 43d6686bb..a8025ffe7 100644 --- a/src/components/messenger/user-profile/settings-panel/utils.ts +++ b/src/components/messenger/user-profile/settings-panel/utils.ts @@ -2,6 +2,8 @@ import { MainBackground } from '../../../../store/background'; export function translateBackgroundValue(value) { switch (value) { + case MainBackground.StaticLightsOut: + return 'Lights Out (Static)'; case MainBackground.StaticGreenParticles: return 'Green Particle (Static)'; case MainBackground.AnimatedGreenParticles: diff --git a/src/main.scss b/src/main.scss index 0112e132c..d4d2e0d44 100644 --- a/src/main.scss +++ b/src/main.scss @@ -62,6 +62,10 @@ $border-color-hover: theme-zui.$color-primary-7; background-image: url(cloudAsset('AbstractBGwithoutShine.jpg')); } + &.static-lights-out { + background: rgba(0, 0, 0, 1); + } + &.animated { position: relative; diff --git a/src/store/background/index.ts b/src/store/background/index.ts index 0f0a88bf6..7336acdcc 100644 --- a/src/store/background/index.ts +++ b/src/store/background/index.ts @@ -5,6 +5,7 @@ export enum SagaActionTypes { } export enum MainBackground { + StaticLightsOut = 'static-lights-out', StaticGreenParticles = 'static-green-particles', AnimatedGreenParticles = 'animated-green-particles', AnimatedBlackParticles = 'animated-black-particles', @@ -20,8 +21,7 @@ export interface BackgroundState { const initialState: BackgroundState = { selectedMainBackground: - (localStorage.getItem('mainBackground:selectedMainBackground') as MainBackground) || - MainBackground.StaticGreenParticles, + (localStorage.getItem('mainBackground:selectedMainBackground') as MainBackground) || MainBackground.StaticLightsOut, }; const slice = createSlice({ diff --git a/src/utils.ts b/src/utils.ts index a2794026c..1c3ea98a0 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -21,8 +21,10 @@ export function getMainBackgroundClass(selectedMainBackground) { case MainBackground.AnimatedBlackParticles: return 'animated'; case MainBackground.StaticGreenParticles: - default: return 'static-green-particles'; + case MainBackground.StaticLightsOut: + default: + return 'static-lights-out'; } }