@mxtommy/kip 1.3.0 → 2.0.1

package/src/app/app-settings.service.ts

@@ -1,478 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { Router } from '@angular/router';
-
-import { IDataSet } from './data-set.service';
-import { ISplitSet } from './layout-splits.service';
-import { IWidget } from './widget-manager.service';
-import { IUnitDefaults } from './units.service';
-
-import { DefaultAppConfig, DefaultWidgetConfig, DefaultLayoutConfig, DefaultThemeConfig } from './config.blank.const';
-import { DefaultUnitsConfig } from './config.blank.units.const'
-import { DefaultNotificationConfig } from './config.blank.notification.const';
-import { DemoAppConfig, DemoWidgetConfig, DemoLayoutConfig, DemoThemeConfig } from './config.demo.const';
-import { isNumber } from 'util';
-
-const defaultSignalKUrl: SignalKUrl = { url: 'http://demo.signalk.org/signalk', new: true };
-const defaultTheme = 'modern-dark';
-const configVersion = 6; // used to invalidate old configs.
-
-export interface IAppConfig {
-  configVersion: number;
-  kipUUID: string; 
-  signalKUrl: string;
-  signalKToken: string;
-  dataSets: IDataSet[];
-  unitDefaults: IUnitDefaults;
-  notificationConfig: INotificationConfig;
-}
-
-export interface IThemeConfig {
-  themeName: string;
-}
-
-export interface IWidgetConfig {
-  widgets: Array<IWidget>;
-}
-
-export interface ILayoutConfig {
-  splitSets: ISplitSet[];
-  rootSplits: string[];
-}
-
-export interface INotificationConfig {
-  disableNotifications: boolean;
-  menuGrouping: boolean;
-  security: {
-    disableSecurity: boolean;
-  },
-  devices: {
-    disableDevices: boolean;
-    showNormalState: boolean;
-  },
-  sound: {
-    disableSound: boolean;
-    muteNormal: boolean;
-    muteWarning: boolean;
-    muteAlert: boolean;
-    muteAlarm: boolean;
-    muteEmergency: boolean;
-  },
-}
-
-export enum ZoneState {
-  normal = 0,
-  warning = 1,
-  alarm = 2,
-}
-export interface IZone {
-  uuid: string;
-  path: string;
-  unit: string;
-  upper: number;
-  lower: number;
-  state: ZoneState;
-}
-export interface IZonesConfig {
-  zones: Array<IZone>;
-}
-
-export interface SignalKUrl {
-  url: string;
-  new: boolean;
-}
-
-export interface SignalKToken {
-  token: string;
-  new: boolean;
-}
-
-
-@Injectable()
-export class AppSettingsService {
-  signalKUrl: BehaviorSubject<SignalKUrl> = new BehaviorSubject<SignalKUrl>(defaultSignalKUrl); // this should be overwritten right away when loading settings, but you need to give something...
-  unlockStatus: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  unitDefaults: BehaviorSubject<IUnitDefaults> = new BehaviorSubject<IUnitDefaults>({});
-  themeName: BehaviorSubject<string> = new BehaviorSubject<string>(defaultTheme);
-  signalKToken: BehaviorSubject<SignalKToken>;
-  kipKNotificationConfig: BehaviorSubject<INotificationConfig>;
-  kipUUID: string;
-
-  widgets: Array<IWidget>;
-  splitSets: ISplitSet[] = [];
-  rootSplits: string[] = [];
-  dataSets: IDataSet[] = [];
-  zones: BehaviorSubject<Array<IZone>> = new BehaviorSubject<Array<IZone>>([]);
-  root
-
-  constructor(private router: Router) {
-    let appConfig: IAppConfig;
-    let widgetConfig: IWidgetConfig;
-    let layoutConfig: ILayoutConfig;
-    let themeConfig: IThemeConfig;
-    let zonesConfig: IZonesConfig;
-
-    if (window.localStorage) {
-      // localStorage supported
-
-      appConfig = JSON.parse(localStorage.getItem("appConfig"));
-
-      if (appConfig == null) {
-        console.log("Error loading App config. resetting and loading all default.");
-        localStorage.clear();
-        appConfig = this.getDefaultAppConfig();
-        widgetConfig = this.getDefaultWidgetConfig();
-        layoutConfig = this.getDefaultLayoutConfig();
-        themeConfig = this.getDefaultThemeConfig();
-        zonesConfig = { zones: [] };
-      }
-
-      if (!isNumber(appConfig.configVersion) || (appConfig.configVersion != configVersion)) {
-        console.error("Invalid config version, resetting and loading all default.");
-        localStorage.clear();
-        appConfig = this.getDefaultAppConfig();
-        widgetConfig = this.getDefaultWidgetConfig();
-        layoutConfig = this.getDefaultLayoutConfig();
-        themeConfig = this.getDefaultThemeConfig();
-        zonesConfig = { zones: [] };
-      } else {
-        widgetConfig = this.loadLocalStorageConfig("widgetConfig");
-        layoutConfig = this.loadLocalStorageConfig("layoutConfig");
-        themeConfig = this.loadLocalStorageConfig("themeConfig");
-        zonesConfig = this.loadLocalStorageConfig("zonesConfig");
-      }
-
-      this.pushSettings(appConfig, widgetConfig, layoutConfig, themeConfig, zonesConfig);
-    } else {
-      console.log("***** LocalStorage NOT SUPPORTED by browser *****\nThis is required by Kip...");
-    }
-  }
-
-  loadLocalStorageConfig(type: string) {
-    // we don't support AppConfig here. It needs a version check and full config invalidation.
-    let config;
-    config = JSON.parse(localStorage.getItem(type));
-
-    if (config == null) {
-      console.log("Error loading " + type +  " config. Force loading " + type + " defaults.");
-      switch (type) {
-        case "widgetConfig":
-          config = this.getDefaultWidgetConfig();
-          break;
-
-        case "layoutConfig":
-          config = this.getDefaultLayoutConfig();
-          break;
-
-        case "themeConfig":
-          config = this.getDefaultThemeConfig();
-          break;
-
-        case "zonesConfig":
-            config = { zones: [] };
-            break;
-      }
-    }
-    return config;
-  }
-
-  private pushSettings(appConfig: IAppConfig, widgetConfig: IWidgetConfig, layoutConfig: ILayoutConfig, themeConfig: IThemeConfig, zonesConfig: IZonesConfig) {
-    this.themeName.next(themeConfig['themeName']);
-
-    let skUrl: SignalKUrl = {url: appConfig.signalKUrl, new: false};
-    let skToken: SignalKToken = {token: appConfig.signalKToken, new: false};
-    this.signalKUrl.next(skUrl);
-    this.signalKToken = new BehaviorSubject<SignalKToken>(skToken);
-    this.dataSets = appConfig.dataSets;
-    this.unitDefaults.next(appConfig.unitDefaults);
-    this.kipKNotificationConfig = new BehaviorSubject<INotificationConfig>(appConfig.notificationConfig);
-    this.kipUUID = appConfig.kipUUID;
-    this.widgets = widgetConfig.widgets;
-    this.zones.next(zonesConfig.zones);
-
-    this.splitSets = layoutConfig.splitSets;
-    this.rootSplits = layoutConfig.rootSplits;
-  }
-
-  //UnitDefaults
-  public getDefaultUnitsAsO() {
-    return this.unitDefaults.asObservable();
-  }
-  public getDefaultUnits() {
-    return this.unitDefaults.getValue();
-  }
-  public setDefaultUnits(newDefaults: IUnitDefaults) {
-    this.unitDefaults.next(newDefaults);
-    this.saveAppConfigToLocalStorage();
-  }
-
-  // App config - use by Settings Config Component
-  public getAppConfig(): IAppConfig {
-    return this.buildAppStorageObject();
-  }
-
-  public getWidgetConfig(): IWidgetConfig {
-    return this.buildWidgetStorageObject();
-  }
-
-  public getLayoutConfig(): ILayoutConfig {
-    return this.buildLayoutStorageObject();
-  }
-
-  public getThemeConfig(): IThemeConfig {
-    return this.buildThemeStorageObject();
-  }
-  public getZonesConfig(): IZonesConfig {
-    return this.buildZonesStorageObject()
-  }
-
-  public getKipUUID() {
-    return this.kipUUID;
-  }
-
-  // SignalKURL
-  public getSignalKURLAsO() {
-    return this.signalKUrl.asObservable();
-  }
-  public getSignalKURL() {
-    return this.signalKUrl.getValue();
-  }
-  public setSignalKURL(value: SignalKUrl) {
-    this.signalKUrl.next(value);
-    this.saveAppConfigToLocalStorage();
-  }
-
-  // SignalKToken
-  public getSignalKTokenAsO() {
-    return this.signalKToken.asObservable();
-  }
-  public getSignalKToken() {
-    return this.signalKToken.getValue();
-  }
-  public setSignalKToken(value: SignalKToken) {
-    this.signalKToken.next(value);
-    this.saveAppConfigToLocalStorage();
-  }
-
-  // UnlockStatus
-  public getUnlockStatusAsO() {
-    return this.unlockStatus.asObservable();
-  }
-  public setUnlockStatus(value) {
-    this.unlockStatus.next(value);
-  }
-
-  // Themes
-  public getThemeNameAsO() {
-    return this.themeName.asObservable();
-  }
-  public setThemName(newTheme: string) {
-    this.themeName.next(newTheme);
-    if (newTheme != "nightMode") { // don't save NightMode, only temporary
-      this.saveThemeConfigToLocalStorage();
-    }
-  }
-  public getThemeName(): string {
-    let config: IThemeConfig = JSON.parse(localStorage.getItem('themeConfig'));;
-    return config.themeName;
-  }
-
-  // Widgets
-  public getWidgets() {
-    return this.widgets;
-  }
-  public saveWidgets(widgets: Array<IWidget>) {
-    this.widgets = widgets;
-    this.saveWidgetConfigToLocalStorage();
-  }
-
-  // Layout SplitSets
-  public getSplitSets() {
-    return this.splitSets;
-  }
-  public getRootSplits() {
-    return this.rootSplits;
-  }
-  public saveSplitSets(splitSets) {
-    this.splitSets = splitSets;
-    this.saveLayoutConfigToLocalStorage();
-  }
-  public saveRootUUIDs(rootUUIDs) {
-    this.rootSplits = rootUUIDs;
-    this.saveLayoutConfigToLocalStorage();
-  }
-
-  // DataSets
-  public saveDataSets(dataSets) {
-    this.dataSets = dataSets;
-    this.saveAppConfigToLocalStorage();
-  }
-  public getDataSets() {
-    return this.dataSets;
-  }
-
-  // Zones
-  public saveZones(zones: Array<IZone>) {
-    this.zones.next(zones);
-    this.saveZonesConfigToLocalStorage();
-  }
-  public getZonesAsO() {
-    return this.zones.asObservable();
-  }
-  public getZones() {
-    return this.zones.getValue();
-  }
-
-  // Notification Service Setting
-  public getNotificationConfigService() {
-    return this.kipKNotificationConfig.asObservable();
-  }
-  public getNotificationConfig(): INotificationConfig {
-    return this.kipKNotificationConfig.getValue();
-  }
-  public setNotificationConfig(notificationConfig: INotificationConfig) {
-    this.kipKNotificationConfig.next(notificationConfig);
-    this.saveAppConfigToLocalStorage();
-  }
-
-  //Config manipulation: RAW and SignalK server - used by Settings Config Component
-  public resetSettings() {
-    localStorage.clear();
-    this.reloadApp();
-  }
-
-  /**
-   * Updates keys of localStorage config and reloads apps if required to apply new config. IMPORTANT NOTE: Kip does not apply config unless app is reloaded
-   * @param configType String of either appConfig, widgetConfig, layoutConfig or themeConfig.
-   * @param newConfig Object containing config. Of type IAppConfig, IWidgetConfig, ILayoutConfig or IThemeConfig
-   * @param reloadApp Optional Boolean. If True reloads the app, else does nothing. Defaults to False.
-   */
-  public replaceConfig(configType: string, newConfig: string, reloadApp?: boolean) {
-    localStorage.setItem(configType, newConfig);
-    if (reloadApp) {
-      this.reloadApp();
-    }
-  }
-
-  public loadDemoConfig() {
-    localStorage.clear();
-    this.replaceConfig("appConfig", JSON.stringify(DemoAppConfig));
-    this.replaceConfig("widgetConfig", JSON.stringify(DemoWidgetConfig));
-    this.replaceConfig("layoutConfig", JSON.stringify(DemoLayoutConfig));
-    this.replaceConfig("themeConfig", JSON.stringify(DemoThemeConfig), true);
-  }
-
-  public reloadApp() {
-    this.router.navigate(['/']);
-    setTimeout(()=>{ location.reload() }, 200);
-  }
-
-  //// Storage Objects
-  // building from running data
-  private buildAppStorageObject() {
-    let storageObject: IAppConfig = {
-      configVersion: configVersion,
-      kipUUID: this.kipUUID,
-      signalKUrl: this.signalKUrl.getValue().url,
-      signalKToken: this.signalKToken.getValue().token,
-      dataSets: this.dataSets,
-      unitDefaults: this.unitDefaults.getValue(),
-      notificationConfig: this.kipKNotificationConfig.getValue(),
-    }
-    return storageObject;
-  }
-
-  private buildWidgetStorageObject() {
-    let storageObject: IWidgetConfig = {
-      widgets: this.widgets,
-      }
-    return storageObject;
-  }
-
-  private buildLayoutStorageObject() {
-    let storageObject: ILayoutConfig = {
-      splitSets: this.splitSets,
-      rootSplits: this.rootSplits,
-      }
-    return storageObject;
-  }
-
-  private buildThemeStorageObject() {
-    let storageObject: IThemeConfig = {
-      themeName: this.themeName.getValue()
-      }
-    return storageObject;
-  }
-
-  private buildZonesStorageObject() {
-    let storageObject: IZonesConfig = {
-      zones: this.zones.getValue()
-      }
-    return storageObject;
-  }
-
-  //Saving to Storage
-  private saveAppConfigToLocalStorage() {
-    console.log("Saving App config to LocalStorage");
-    localStorage.setItem('appConfig', JSON.stringify(this.buildAppStorageObject()));
-  }
-
-  private saveWidgetConfigToLocalStorage() {
-    console.log("Saving Widgets config to LocalStorage");
-    localStorage.setItem('widgetConfig', JSON.stringify(this.buildWidgetStorageObject()));
-  }
-
-  private saveLayoutConfigToLocalStorage() {
-    console.log("Saving Layouts config to LocalStorage");
-    localStorage.setItem('layoutConfig', JSON.stringify(this.buildLayoutStorageObject()));
-  }
-
-  private saveThemeConfigToLocalStorage() {
-    console.log("Saving Theme config to LocalStorage");
-    localStorage.setItem('themeConfig', JSON.stringify(this.buildThemeStorageObject()));
-  }
-
-  private saveZonesConfigToLocalStorage() {
-    console.log("Saving Zones config to LocalStorage");
-    localStorage.setItem('zonesConfig', JSON.stringify(this.buildZonesStorageObject()));
-  }
-
-  // Private Defaults Loading functions
-  private getDefaultAppConfig(): IAppConfig {
-    let config: IAppConfig = DefaultAppConfig;
-    config.notificationConfig = DefaultNotificationConfig;
-    config.unitDefaults = DefaultUnitsConfig;
-    config.signalKUrl = window.location.origin;
-    config['configVersion'] = configVersion;
-    config.kipUUID = this.newUuid();
-    localStorage.setItem('appConfig', JSON.stringify(config));
-    return config;
-  }
-
-  private getDefaultWidgetConfig(): IWidgetConfig {
-    let config: IWidgetConfig = DefaultWidgetConfig;
-    localStorage.setItem("widgetConfig", JSON.stringify(config));
-    return config;
-  }
-
-  private getDefaultLayoutConfig(): ILayoutConfig {
-    let config: ILayoutConfig = DefaultLayoutConfig;
-    localStorage.setItem("layoutConfig", JSON.stringify(config));
-    return config;
-  }
-
-  private getDefaultThemeConfig(): IThemeConfig {
-    let config: IThemeConfig = DefaultThemeConfig;
-    localStorage.setItem("themeConfig", JSON.stringify(config));
-    return config;
-  }
-
-
-  private newUuid() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-        return v.toString(16);
-    });
-  }
-
-}

package/src/app/app.component.css

@@ -1,39 +0,0 @@
-.fullheight {
-  height: 100%;
-}
-
-
-
-.mainContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-}
-
-.mainWindow {
- /* width: 100%; */
-  flex: 30;
-  /*
-  top: 0px;
-  bottom: 60px;
-  position: absolute;
-  */
-}
-
-.menuBar {
-  /*width: 100%;
-   height: 60px; */
-  flex: 1;
- /*   bottom: 0px;
-      position: absolute;
-  background-color:  rgb(100,100,100);;
-  */
-}
-
-.menuBarContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-

package/src/app/app.component.html

@@ -1,93 +0,0 @@
-<div [class]="themeClass">
-  <div class="mainContainer app-defaults" >
-    <div class="mainWindow">
-        <router-outlet></router-outlet>
-    </div>
-    <div class="menuBar">
-      <div class="menuBarContainer theme-menu">
-        <div class="menuBarButtonGroups">
-          <app-alarm-menu></app-alarm-menu>
-        </div>
-        <div class="menuBarButtonGroups">
-          <button color="accent"mat-flat-button class="menuBarNavButtons" (click)="pageDown()">
-            <i class="fa-solid fa-chevron-left fa-2x" aria-hidden="true"></i>
-          </button>
-        </div>
-        <div class="menuBarButtonGroups">
-          <button color="accent" mat-flat-button class="menuBarNavButtons" (click)="pageUp()">
-            <i class="fa-solid fa-chevron-right fa-2x" aria-hidden="true"></i>
-          </button>
-        </div>
-        <div class="menuBarButtonGroups">
-            <button color="accent" mat-flat-button class="menuBarSettingsButton" [matMenuTriggerFor]="settingsMenu" >
-              <i class="fa-solid fa-bars fa-2x" aria-hidden="true"></i>
-            </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<mat-menu #settingsMenu="matMenu">
-  <button mat-menu-item routerLink="/help">
-    <span><i class="fa-solid fa-question-circle" aria-hidden="true"></i> Help</span>
-  </button>
-  <button mat-menu-item [matMenuTriggerFor]="configMenu">
-    <span><i class="fa-solid fa-cog" aria-hidden="true"></i> Configuration</span>
-  </button>
-  <button mat-menu-item routerLink="/data">
-    <span><i class="fa-solid fa-info" aria-hidden="true"></i> Data Browser</span>
-  </button>
-  <button mat-menu-item (click)="setNightMode(isNightMode ? false : true)">
-    <span *ngIf="!isNightMode"><i class="fa-solid fa-moon-o" aria-hidden="true"></i> Night Mode</span>
-    <span *ngIf="isNightMode"><i class="fa-solid fa-sun-o" aria-hidden="true"></i> Day Mode</span>
-  </button>
-  <button mat-menu-item (click)="toggleFullScreen()">
-    <span *ngIf="!fullscreenStatus"><i class="fa-solid fa-window-maximize" aria-hidden="true"></i> Fullscreen</span>
-    <span *ngIf="fullscreenStatus"><i class="fa-solid fa-window-restore" aria-hidden="true"></i> Exit Fullscreen</span>
-  </button>
-</mat-menu>
-
-<mat-menu #configMenu="matMenu">
-  <button mat-menu-item routerLink="/settings">
-    <span><i class="fa-solid fa-sliders" aria-hidden="true"></i> Settings</span>
-  </button>
-  <button mat-menu-item [disabled]="isNightMode" [matMenuTriggerFor]="themesMenu">
-    <span><i class="fa-solid fa-paint-brush"></i> Themes</span>
-  </button>
-  <button mat-menu-item [disabled]="!unlockStatus" (click)="newPage()">
-    <span><i class="fa-solid fa-plus-square" aria-hidden="true"></i> Add Page</span>
-  </button>
-  <button mat-menu-item (click)="unlockPage()">
-    <span *ngIf="!unlockStatus"><i class="fa-solid fa-columns" aria-hidden="true"></i> Edit Layout</span>
-    <span *ngIf="unlockStatus"><i class="fa-solid fa-lock" aria-hidden="true"></i> Lock Layout</span>
-  </button>
-</mat-menu>
-
-
-<mat-menu #themesMenu="matMenu" xPosition="before">
-  <button mat-menu-item (click)="setTheme('default-light')">
-    <span><i *ngIf="themeName == 'default-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Light Blue</span>
-      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('signalk-light')">
-    <span><i *ngIf="themeName == 'signalk-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Signal K</span>
-      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('high-contrast-light')">
-    <span><i *ngIf="themeName == 'high-contrast-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> High Contrast</span>
-      <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('platypus-light')">
-    <span><i *ngIf="themeName == 'platypus-light' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Platypus</span>
-    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('darkBlue-dark')">
-    <span><i *ngIf="themeName == 'darkBlue-dark' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Dark Blue</span>
-    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-  <button mat-menu-item (click)="setTheme('modern-dark')">
-    <span><i *ngIf="themeName == 'modern-dark' else elseBlock" class="fa-solid fa-circle" aria-hidden="true"></i> Modern Dark</span>
-    <ng-template #elseBlock><i class="fa-solid fa-circle-o" aria-hidden="true"></i></ng-template>
-  </button>
-</mat-menu>

package/src/app/app.component.scss

@@ -1,79 +0,0 @@
-@use '~@angular/material' as mat;
-
-@mixin app-theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .app-defaults {
-    background-color: mat.get-color-from-palette($background, background);
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .theme-menu {
-    background-color: mat.get-color-from-palette($accent, A200);
-  }
-
-  .menuBarButtonGroup {
-    background-color: mat.get-color-from-palette($foreground, divider);
-  }
-
- }
-
-.fullheight {
-  height: 100%;
-}
-
-.mainContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-}
-
-.mainWindow {
-  flex: 30;
- }
-
-.menuBar {
-  flex: 1;
-}
-
-.menuBarContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-}
-
-.menuBarContainer .menuBarButtonGroups {
-  flex-grow: 1;
-}
-
-.menuBarContainer .menuBarButtonGroups:first-child {
-  text-align: left;
-  margin-left: 2px;
-}
-
-.menuBarContainer .menuBarButtonGroups {
-  text-align: center;
-}
-
-.menuBarContainer .menuBarButtonGroups:last-child {
-  text-align: right;
-  margin-right: 2px;
-}
-
-.menuBarButtonGroups .menuBarNavButtons {
-  width: 99%;
-}
-
-.menuBarButtonGroups .menuBarAlarmsButton {
-  width: 25%;
-}
-
-.menuBarButtonGroups .menuBarSettingsButton {
-  width: 25%;
-}