src/images/icon.css

+.icon-ocs-store {
+    background-image: url(app-icons/pling-store.svg);
+}

src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import StoreContextProvider from './context-provider';
+import App from './components/App';
+import './styles/Index.css';
+
+
+function AppWrapper(){
+  return (
+    <StoreContextProvider>
+      <App/>
+    </StoreContextProvider>
+  )
+}
+
+ReactDOM.render(
+  <AppWrapper />,
+  document.getElementById('root')
+);

src/reducers/appReducer.js

+export const AppReducerInitialState = {
+    loading:true,
+    domains:null,
+    packageJson:null,
+    dialog:{
+        id:'loading',
+        show:true
+    }
+}
+
+function AppReducer(state,action){
+    switch(action.type){
+        case 'SET_LOADING':{
+            return { ...state, loading:action.value}
+        }        
+        case 'SET_DOMAINS': {
+            return { ...state, domains:action.domains}
+        }
+        case 'SET_PACKAGE_JSON': {
+            return { ...state, packageJson:action.packageJson}
+        }
+        case 'SHOW_DIALOG':{
+            const dialog = { show:true, id:action.id}
+            return { ...state, dialog}
+        }
+        case 'HIDE_DIALOG':{
+            const dialog = { ... state.dialog, show:false }
+            return { ...state, dialog:dialog}
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export default AppReducer;
\ No newline at end of file

src/reducers/browserReducer.js

+export const BrowserReducerInitialState = {
+    loading:true,
+    url:null,
+    title:null,
+    canGoBack:false,
+    canGoForward:false,
+    goBack:false,
+    goForward:false,
+    refresh:false
+}
+
+function BrowserReducer(state,action){
+    switch(action.type){
+        case 'SET_PAGE': {
+            return { ...state, url:action.url, title:action.title, canGoBack:action.canGoBack, canGoForward:action.canGoForward }
+        }
+        case 'SET_LOADING': {
+            return { ...state, loading:action.loading }
+        }
+        case 'GO_BACK': {
+            return { ...state, goBack:action.goBack }
+        }
+        case 'GO_FORWARD': {
+            return { ...state, goForward:action.goForward }
+        }
+        case 'GO_HOME': {
+            return { ...state, goHome:action.goHome }
+        }
+        case 'REFRESH': {
+            return { ...state, refresh:action.refresh }
+        }
+        case 'LOAD_URL':{
+            if (action.loadUrl === true){
+                return { ...state, loadUrl:true, newUrl:action.newUrl }
+            } else {
+                return { ...state, loadUrl:false}
+            }
+        }
+        case 'STOP_LOADING':{
+            return { ...state, loadUrl: false, stopLoading:action.stopLoading}
+        }
+        default:{
+            return state;
+        }
+    }
+}
+
+export default BrowserReducer;
\ No newline at end of file

src/reducers/ocsApiReducer.js

+const electron = window.require('electron');
+const ipcRenderer = electron.ipcRenderer;
+
+export const OcsApiReducerInitialState = {
+    loading:true,
+    installTypes:[],
+    installedItems:[],
+    installedItemTypes:[],
+    updateItems:[],
+    downloadItems:[]
+}
+
+function OcsApiReducer(state,action){
+    switch(action.type){
+        case 'SET_API':{
+            return { ...state, ocsManagerApi:action.ocsManagerApi,loading:false}
+        }
+        case 'SET_INSTALL_TYPES':{
+            return { ...state, installTypes:action.installTypes}
+        }
+        case 'SET_INSTALLED_ITEMS':{
+            const installedItems = Object.keys(action.installedItems).map((k) => action.installedItems[k]);
+            let installedItemTypes = [];
+            installedItems.forEach(function(item,index){
+                const installedItemType = item.install_type;
+                if (installedItemTypes.indexOf(installedItemType) === -1) installedItemTypes.push(installedItemType);
+            });
+            return { ...state, installedItems:installedItems, installedItemTypes:installedItemTypes }
+        }
+        case 'SET_DOWNLOAD_ITEM':{
+            const item = { ...action.item,status:'Downloading' }
+            console.log(item);
+            const downloadItems = [ ...state.downloadItems, item ]
+            return { ...state, downloadItems:downloadItems}
+        }
+        case 'UPDATE_ITEM_DOWNLOAD_PROGRESS':{
+            const downloadItemIndex = state.downloadItems.findIndex((item) => item.url === action.itemUrl);
+            const newDownloadItem = { ...state.downloadItems[downloadItemIndex] }
+            if (action.bytesRecieved) newDownloadItem.bytesRecieved = action.bytesRecieved;
+            if (action.bytesTotal) newDownloadItem.bytesTotal = action.bytesTotal
+            if (action.status) newDownloadItem.status = action.status;
+            const downloadItems = [
+                ...state.downloadItems.slice(0,downloadItemIndex),
+                newDownloadItem,
+                ...state.downloadItems.slice(downloadItemIndex + 1, state.downloadItems.length)
+            ];
+            return { ...state, downloadItems:downloadItems }
+        }
+        case 'SET_UPDATE_CHECK':{
+            return { ...state, updateCheckedAt:action.updateCheckedAt,updateCheckAfter:action.updateCheckAfter}
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export default OcsApiReducer;
\ No newline at end of file

src/styles/App.css

+#main {
+  width: 100%;
+  height: 100%;
+  padding-top: 40px;
+  position: relative;
+}
+#main #webview-wrapper {
+  height: 100%;
+  width: 100%;
+}
+#main #webview-container {
+  height: 100%;
+  width: 100%;
+}
+#main #webview-container webview {
+  height: 100%;
+}
+#main #webview-mask {
+  background-color: #fff;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 40px;
+  left: 0;
+}

src/styles/App.less

+#main {
+    width:100%;
+    height: 100%;
+    padding-top:40px;
+    position: relative;
+
+    #webview-wrapper {
+        height:100%;
+        width:100%;
+    }
+
+    #webview-container {
+        height: 100%;
+        width: 100%;
+   
+        webview {
+            height: 100%;
+        }
+    }
+
+    #webview-mask {
+        background-color: #fff;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 40px;
+        left: 0;
+    }
+
+}
\ No newline at end of file

src/styles/AppDialogs.css

+div#dialog-overlay-background {
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+div#dialog-overlay {
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+div#dialog-overlay.inactive {
+  display: none;
+}
+article.dialog {
+  display: flex;
+  flex-flow: column nowrap;
+  min-width: auto;
+  max-width: auto;
+  min-height: auto;
+  max-height: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  box-shadow: 0 0 20px 10px var(--color-shadow);
+  background-color: var(--color-content);
+  z-index: 1001;
+}
+article.dialog header {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--color-border);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+article.dialog header div.header-content {
+  flex: 1 1 auto;
+}
+article.dialog header div.header-control {
+  flex: 0 0 auto;
+}
+article.dialog header div.header-control button {
+  height: 30px;
+  width: 30px;
+}
+article.dialog header div.header-control button i {
+  height: 24px;
+}
+article.dialog header.inactive {
+  display: none;
+}
+article.dialog article.content {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+}
+article.dialog article.content .inner-content {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  padding: 1em;
+}
+article.dialog article.content .inner-content h4,
+article.dialog article.content .inner-content p {
+  margin: 0.5em 0;
+  text-align: center;
+  color: #444444;
+}
+article.dialog article.content figure {
+  display: inline-block;
+  width: 128px;
+  height: 128px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 128px 128px;
+  text-align: center;
+}
+article.dialog article.content figure img {
+  width: auto;
+  height: 100%;
+  margin: 0 auto;
+}
+article.dialog article.content h3 {
+  margin: 1em;
+}
+article.dialog footer {
+  flex: 0 0 auto;
+  padding: 5px 10px;
+  border-top: 1px solid var(--color-border);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+article.dialog footer.inactive {
+  display: none;
+}
+article.dialog#loading-dialog {
+  width: 400px;
+  height: 300px;
+}
+article.dialog#about-dialog {
+  width: 500px;
+  height: auto;
+}
+article.dialog#collections-dialog {
+  width: 80%;
+  height: 80%;
+}

src/styles/AppDialogs.less

+div#dialog-overlay-background {
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;    
+}
+
+div#dialog-overlay {
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    &.inactive {
+        display: none;
+    }
+}
+
+article.dialog {
+    display: flex;
+    flex-flow: column nowrap;
+    min-width: auto;
+    max-width: auto;
+    min-height:auto;
+    max-height:auto;
+    border: 1px solid var(--color-border);
+    border-radius: 5px;
+    box-shadow: 0 0 20px 10px var(--color-shadow);
+    background-color: var(--color-content);
+    z-index: 1001;
+
+    header {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 0 0 auto;
+        align-items: center;
+        padding: 5px 10px;
+        border-bottom: 1px solid var(--color-border);
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+
+        div.header-content {
+            flex: 1 1 auto;
+        }
+        
+        div.header-control {
+            flex: 0 0 auto;
+
+            button {
+                height: 30px;
+                width: 30px;
+                
+                i {
+                    height: 24px;
+                }
+            }
+        }
+    }
+    
+    header.inactive {
+        display: none;
+    }
+    
+    article.content {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+
+        .inner-content {
+            display: flex;
+            flex-flow: column nowrap;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: center;
+            padding:1em;
+
+            h4, p {
+                margin: 0.5em 0;
+                text-align: center;
+                color:#444444;
+            }
+        }
+
+        figure {
+            display: inline-block;
+            width: 128px;
+            height: 128px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: 128px 128px;
+            text-align: center;
+
+            img {
+                width: auto;
+                height:100%;
+                margin: 0 auto;
+            }
+        }
+        
+        h3 {
+            margin: 1em;
+        }
+    }
+    
+    footer {
+        flex: 0 0 auto;
+        padding: 5px 10px;
+        border-top: 1px solid var(--color-border);
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+    
+    footer.inactive {
+        display: none;
+    }
+
+    &#loading-dialog {
+        width:400px;
+        height:300px;
+    }
+
+    &#about-dialog {
+        width:500px;
+        height:auto;
+    }
+
+    &#collections-dialog {
+        width:80%;
+        height:80%;
+    }
+}
\ No newline at end of file

src/styles/Collections.css

+/*---------------------------------------------------
+    LESS Elements 0.9
+  ---------------------------------------------------
+    A set of useful LESS mixins
+    More info at: http://lesselements.com
+  ---------------------------------------------------*/
+/* MIXINS */
+/* /MIXINS */
+/* COLORS */
+/* /COLORS */
+#collections-container {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  position: relative;
+  padding-left: 200px;
+}
+#collections-container aside {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  border-right: 1px solid var(--color-border);
+  background-color: var(--color-widget);
+  overflow: auto;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: 100%;
+}
+#collections-container aside h4 {
+  padding: 0.5em 1em;
+}
+#collections-container aside ul.task {
+  border-bottom: 1px solid var(--color-border);
+}
+#collections-container aside ul li a {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  padding: 0.5em 1em;
+  background-color: transparent;
+  color: var(--color-text);
+  cursor: pointer;
+}
+#collections-container aside ul li a.selected {
+  background-color: var(--color-active);
+}
+#collections-container aside ul li a span.name {
+  flex: 1 1 auto;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1;
+  text-transform: capitalize;
+}
+#collections-container aside ul li a span.app-badge {
+  flex: 0 0 auto;
+}
+#collections-container #collections-switch-view {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+#collections-container #collections-switch-view ul {
+  list-style: none;
+}
+#collections-container #collections-switch-view ul li {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 1em;
+  padding: 1em 2em;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+#collections-container #collections-switch-view ul li:hover {
+  border-color: rgba(0, 0, 0, 0.3);
+}
+#collections-container #collections-switch-view ul + ul li:first-of-type {
+  margin-top: 0;
+}
+#collections-container #collections-switch-view figure {
+  flex: 0 0 auto;
+  width: 64px;
+  height: 64px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+#collections-container #collections-switch-view figure i .MuiSvgIcon-root {
+  font-size: inherit;
+}
+#collections-container #collections-switch-view div.item-main {
+  flex: 1 1 auto;
+  padding: 0 1em;
+}
+#collections-container #collections-switch-view nav.actions {
+  flex: 0 0 auto;
+}
+#collections-container #collections-switch-view nav.actions button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-block;
+  width: inherit;
+  height: inherit;
+  padding: 0.5em 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  background-color: var(--color-content);
+  outline: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+#collections-container #collections-switch-view nav.actions button:enabled {
+  cursor: pointer;
+}
+#collections-container #collections-switch-view nav.actions button:enabled:hover {
+  background-color: var(--color-active);
+}
+#collections-container #collections-switch-view nav.actions button:checked,
+#collections-container #collections-switch-view nav.actions button:checked:hover {
+  background-color: var(--color-information-secondary);
+}
+#collections-container #collections-switch-view nav.actions button + button {
+  margin-left: 3px;
+}
+#collections-container #collections-switch-view .progress-bar-container {
+  display: inline-block;
+  width: 100%;
+  margin: 0.5em 0;
+}
+#collections-container #collections-switch-view .progress-bar-container progress {
+  width: 100%;
+}

src/styles/Collections.less

+@import "elements.less";
+
+#collections-container {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1 1 auto;
+    position: relative;
+    padding-left: 200px;
+
+    aside {
+        display: flex;
+        flex-flow: column nowrap;
+        width: 200px;
+        flex: 1 1 auto;
+        border-right: 1px solid var(--color-border);
+        background-color: var(--color-widget);
+        overflow: auto;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 200px;
+        height: 100%;
+    
+        h4 {
+            padding: 0.5em 1em;
+        }
+    
+        ul.task {
+            border-bottom: 1px solid var(--color-border);
+        }
+    
+        ul li a {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            width: 100%;
+            padding: 0.5em 1em;
+            background-color: transparent;
+            color: var(--color-text);
+            cursor: pointer;
+    
+            &.selected {
+                background-color: var(--color-active);
+            }
+    
+            span.name {
+                flex: 1 1 auto;
+                display: inline-block;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                line-height: 1;
+                text-transform:capitalize;
+            }
+    
+            span.app-badge {
+                flex: 0 0 auto;
+            }
+        }
+    }
+
+    #collections-switch-view {
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+        overflow: auto;
+
+        ul {
+            list-style: none;
+
+            li {
+                display: flex;
+                flex-flow: row nowrap;
+                align-items: center;
+                margin: 1em;
+                padding: 1em 2em;
+                border: 1px solid var(--color-border);
+                border-radius: 5px;
+                .transition();
+
+                &:hover {
+                    border-color: rgba(0,0,0,0.3);
+                }
+            }
+        }
+
+        ul + ul {
+            li:first-of-type {
+                margin-top:0;
+            }
+        }
+
+        figure {
+            flex: 0 0 auto;
+            width: 64px;
+            height: 64px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: contain;
+
+            i {
+                .MuiSvgIcon-root {
+                    font-size:inherit;
+                }
+            }
+        }
+
+        div.item-main {
+            flex: 1 1 auto;
+            padding: 0 1em;
+        }
+
+        nav.actions {
+            flex: 0 0 auto;
+
+            button {
+                -webkit-appearance: none;
+                appearance: none;
+                display: inline-block;
+                width: inherit;
+                height: inherit;
+                padding: 0.5em 1em;
+                border: 1px solid var(--color-border);
+                border-radius: 3px;
+                background-color: var(--color-content);
+                outline: none;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+                &:enabled {
+                    cursor: pointer;
+            
+                    &:hover {
+                        background-color: var(--color-active);
+                    }
+                }
+            
+                &:checked, &:checked:hover {
+                    background-color: var(--color-information-secondary);
+                }
+            }
+
+            button + button {
+                margin-left:3px;
+            }
+        
+        }
+        
+        .progress-bar-container {
+            display: inline-block;
+            width: 100%;
+            margin: 0.5em 0;
+
+            progress {
+                width:100%;
+            }
+        }
+    }
+}
\ No newline at end of file

src/styles/Index.css

+@import url('default/color.css');
+@import url('default/component.css');
+@import url('default/global.css');
+@import url('default/reset.css');
+#root {
+  height: 100%;
+  width: 100%;
+}
+button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: inherit;
+  height: inherit;
+  border: 0;
+  border-radius: 3px;
+  background-color: transparent;
+  outline: none;
+  transition: background-color 0.2s ease-out;
+}
+button:enabled {
+  cursor: pointer;
+}
+button:enabled:hover {
+  background-color: var(--color-active);
+}
+button:checked,
+button:checked:hover {
+  background-color: var(--color-information-secondary);
+}
+span.app-badge {
+  display: inline-block;
+  padding: 3px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  line-height: 1;
+}
+span.app-badge.low-emphasis {
+  background-color: var(--color-active-secondary);
+  color: var(--color-text);
+}
+span.app-badge.medium-emphasis {
+  background-color: var(--color-information);
+  color: var(--color-content);
+}
+span.app-badge.high-emphasis {
+  background-color: var(--color-important);
+  color: var(--color-content);
+}

src/styles/Index.less

+@import url('./default/color.css');
+@import url('./default/component.css');
+@import url('./default/global.css');
+@import url('./default/reset.css');
+
+#root {
+    height:100%;
+    width:100%;
+}
+
+button {
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    height: inherit;
+    border: 0;
+    border-radius: 3px;
+    background-color: transparent;
+    outline: none;
+    transition: background-color 0.2s ease-out;
+
+    &:enabled {
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--color-active);
+        }
+    }
+
+    &:checked, &:checked:hover {
+        background-color: var(--color-information-secondary);
+    }
+}
+
+span.app-badge {
+    display: inline-block;
+    padding: 3px 6px;
+    border-radius: 10px;
+    font-size: 11px;
+    line-height: 1;
+
+    &.low-emphasis {
+        background-color: var(--color-active-secondary);
+        color: var(--color-text);
+    }
+
+    &.medium-emphasis {
+        background-color: var(--color-information);
+        color: var(--color-content);
+    }
+
+    &.high-emphasis {
+        background-color: var(--color-important);
+        color: var(--color-content);
+    }
+}

src/styles/MenuBar.css

+/*---------------------------------------------------
+    LESS Elements 0.9
+  ---------------------------------------------------
+    A set of useful LESS mixins
+    More info at: http://lesselements.com
+  ---------------------------------------------------*/
+/* MIXINS */
+/* /MIXINS */
+/* COLORS */
+/* /COLORS */
+div.background-overlay {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/** MENU BAR **/
+nav#menu-bar {
+  top: 0;
+  left: 0;
+  position: absolute;
+  height: 40px;
+  width: 100%;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-widget);
+}
+nav#menu-bar #main-menu {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  height: inherit;
+  margin: 0 4px;
+}
+nav#menu-bar #main-menu > li {
+  flex: 0 0 auto;
+  height: 30px;
+  margin: 0 2px;
+  width: 30px;
+}
+nav#menu-bar #main-menu > li > button {
+  height: 30px;
+  width: 30px;
+}
+nav#menu-bar #main-menu > li > button i {
+  height: 24px;
+  position: relative;
+}
+nav#menu-bar #main-menu > li span.app-badge {
+  display: inline-block;
+  padding: 3px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  line-height: 1;
+  z-index: 1;
+  position: absolute;
+  top: -5px;
+  right: -12px;
+  font-style: initial;
+}
+nav#menu-bar #main-menu > li span.app-badge.low-emphasis {
+  background-color: var(--color-active-secondary);
+  color: var(--color-text);
+}
+nav#menu-bar #main-menu > li span.app-badge.medium-emphasis {
+  background-color: var(--color-information);
+  color: var(--color-content);
+}
+nav#menu-bar #main-menu > li span.app-badge.high-emphasis {
+  background-color: var(--color-important);
+  color: var(--color-content);
+}
+nav#menu-bar #main-menu > li#omnibox-menu {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+nav#menu-bar #main-menu > li #user-menu-container button {
+  padding-top: 3px;
+  height: 30px;
+}
+nav#menu-bar #main-menu > li ul#user-menu {
+  z-index: 1000;
+  position: relative;
+  top: 0;
+  left: -220px;
+  width: 250px;
+  min-width: auto;
+  max-width: auto;
+  height: auto;
+  min-height: auto;
+  max-height: auto;
+  padding: 3px 0;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  box-shadow: 0 5px 20px 0 var(--color-shadow);
+  background-color: var(--color-content);
+}
+nav#menu-bar #main-menu > li ul#user-menu li {
+  width: 100%;
+  height: 30px;
+  margin: 0;
+}
+nav#menu-bar #main-menu > li ul#user-menu li a {
+  display: block;
+  padding: 0.5em 1em;
+  background-color: transparent;
+  color: var(--color-text);
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+nav#menu-bar #main-menu > li ul#user-menu li a:hover {
+  background-color: var(--color-active);
+  color: var(--color-text);
+}
+@media (min-width: 900px) {
+  nav#menu-bar ul li#omnibox-menu {
+    margin-right: calc(128px);
+  }
+}
+/** OMNI BOX **/
+div#omnibox-container {
+  max-width: 500px;
+  width: 100%;
+  height: 30px;
+}
+div#omnibox-container div#omnibox {
+  position: relative;
+  width: inherit;
+  height: inherit;
+}
+div#omnibox-container div#omnibox.active::after {
+  background-color: var(--color-important);
+}
+div#omnibox-container div#omnibox.download-active::after {
+  background: linear-gradient(90deg, transparent, var(--color-information) 50%, transparent);
+  background-size: 300% 300%;
+  animation: gradient 2s ease-in-out infinite alternate;
+  position: absolute;
+  width: 101%;
+  height: 36px;
+  left: -2.5px;
+}
+div#omnibox-container div#omnibox div#omnibox-wrapper {
+  z-index: 10;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  background-color: var(--color-widget);
+  overflow: hidden;
+}
+div#omnibox-container div#omnibox #progress-bar-container {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  z-index: 11;
+  overflow: hidden;
+  border-radius: 0 3px 3px 0;
+}
+div#omnibox-container div#omnibox::after {
+  display: block;
+  content: '';
+  z-index: 9;
+  position: absolute;
+  top: calc(-3px);
+  width: calc(106%);
+  height: calc(106%);
+  border-radius: calc(6px);
+}
+div#omnibox-container div#omnibox-content {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-active-secondary);
+  line-height: 1;
+  transition: background-color 0.2s ease-out;
+}
+div#omnibox-container div#omnibox-content #open-in-browser-container i .MuiSvgIcon-root {
+  font-size: inherit;
+}
+div#omnibox-container div#omnibox-content:hover {
+  background-color: var(--color-active);
+}
+div#omnibox-container div#omnibox-content h3 {
+  flex: 1 1 auto;
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+div#omnibox-container div#omnibox-content div {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+}
+div#omnibox-container div#omnibox-palette {
+  z-index: 1000;
+  position: relative;
+  top: 0;
+  left: 0;
+  width: inherit;
+  padding: 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  box-shadow: 0 5px 20px 0 var(--color-shadow);
+  background-color: var(--color-content);
+}
+div#omnibox-container div#omnibox-palette.inactive {
+  display: none;
+}
+div#omnibox-container div#omnibox-palette div.palette-content {
+  padding: 1em;
+  border-bottom: 1px solid var(--color-border);
+}
+div#omnibox-container div#omnibox-palette div.palette-content:last-child {
+  border-bottom: 0;
+}
+div#omnibox-container div#omnibox-palette div.palette-content h4 {
+  margin: 1em 0;
+  text-align: center;
+}
+div#omnibox-container div#omnibox-palette div.palette-content h4 i {
+  position: relative;
+  top: 3px;
+}
+div#omnibox-container div#omnibox-palette div.palette-content p {
+  text-align: center;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li {
+  width: 50%;
+  padding: 5px;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li button {
+  padding: 5px;
+  width: 100%;
+  border: 1px solid #ccc;
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li button:hover {
+  background-color: white;
+  border-color: #999999;
+}
+div#omnibox-container div#omnibox-palette div.palette-content nav ul li button.active {
+  border-color: #4949f3;
+}
+@keyframes gradient {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 0%;
+  }
+}

src/styles/MenuBar.less

+@import "elements.less";
+
+div.background-overlay {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/** MENU BAR **/
+nav#menu-bar {
+  top: 0;
+  left: 0;
+  position: absolute;
+  height: 40px;
+  width: 100%;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-widget);
+
+    #main-menu {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        height: inherit;
+        margin: 0 4px;
+
+        > li {
+            flex: 0 0 auto;
+            height: 30px;
+            margin: 0 2px;
+            width: 30px;
+
+            > button {
+                height: 30px;
+                width: 30px;
+                
+                i {
+                    height: 24px;
+                    position: relative;
+                }
+            }
+
+            span.app-badge {
+              display: inline-block;
+              padding: 3px 6px;
+              border-radius: 10px;
+              font-size: 11px;
+              line-height: 1;
+              z-index: 1;
+              position: absolute;
+              top: -5px;
+              right: -12px;
+              font-style: initial;
+          
+              &.low-emphasis {
+                  background-color: var(--color-active-secondary);
+                  color: var(--color-text);
+              }
+          
+              &.medium-emphasis {
+                  background-color: var(--color-information);
+                  color: var(--color-content);
+              }
+          
+              &.high-emphasis {
+                  background-color: var(--color-important);
+                  color: var(--color-content);
+              }
+          }
+          
+            &#omnibox-menu {
+                display: flex;
+                flex-flow: row nowrap;
+                flex: 1 1 auto;
+                justify-content: center;
+            }
+
+            #user-menu-container {
+              button {
+                padding-top: 3px;
+                height: 30px;
+              }
+            }
+
+            ul#user-menu {
+                z-index: 1000;
+                position: relative;
+                top: 0;
+                left: -220px;
+                width: 250px;
+                min-width: auto;
+                max-width: auto;
+                height: auto;
+                min-height: auto;
+                max-height: auto;
+                padding: 3px 0;
+                border: 1px solid var(--color-border);
+                border-radius: 5px;
+                box-shadow: 0 5px 20px 0 var(--color-shadow);
+                background-color: var(--color-content);
+
+                li {
+                    width: 100%;
+                    height: 30px;
+                    margin: 0;
+
+                    a {
+                        display: block;
+                        padding: 0.5em 1em;
+                        background-color: transparent;
+                        color: var(--color-text);
+                        line-height: 1;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        cursor: pointer;
+
+                        &:hover {
+                            background-color: var(--color-active);
+                            color: var(--color-text);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 900px) {
+  nav#menu-bar ul li#omnibox-menu {
+    margin-right: calc(128px);
+  }
+}
+
+/** OMNI BOX **/
+
+div#omnibox-container {
+    max-width: 500px;
+    width: 100%;
+    height: 30px;
+
+    div#omnibox {
+        position: relative;
+        width: inherit;
+        height: inherit;
+    
+        &.active::after {
+            background-color: var(--color-important);
+        }
+
+        &.download-active::after {
+            background: linear-gradient(90deg, transparent, var(--color-information) 50%, transparent);
+            background-size: 300% 300%;
+            animation: gradient 2s ease-in-out infinite alternate;
+            position: absolute;
+            width: 101%;
+            height: 36px;
+            left: -2.5px;
+        }
+    
+        div#omnibox-wrapper {
+            z-index: 10;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 3px;
+            background-color: var(--color-widget);
+            overflow: hidden;
+        }
+
+        #progress-bar-container {
+            width: 100%;
+            height: 2px;
+            position: absolute;
+            bottom: 0px;
+            left: 0;
+            z-index: 11;
+            overflow: hidden;
+            border-radius: 0 3px 3px 0;
+        }    
+    }
+
+    div#omnibox::after {
+        display: block;
+        content: '';
+        z-index: 9;
+        position: absolute;
+        top: calc(-3px);
+        width: calc(106%);
+        height: calc(106%);
+        border-radius: calc(6px);
+    }
+
+    div#omnibox-content {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background-color: var(--color-active-secondary);
+      line-height: 1;
+      transition: background-color 0.2s ease-out;
+
+      #open-in-browser-container {
+        i {
+          .MuiSvgIcon-root {
+              font-size:inherit;
+          }
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-active);
+      }
+    
+      h3 {
+        flex: 1 1 auto;
+        border-right: 1px solid var(--color-border);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 24px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      div {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+      }
+    }
+
+    div#omnibox-palette {
+      z-index: 1000;
+      position: relative;
+      top: 0;
+      left: 0;
+      width: inherit;
+      padding: 1em;
+      border: 1px solid var(--color-border);
+      border-radius: 5px;
+      box-shadow: 0 5px 20px 0 var(--color-shadow);
+      background-color: var(--color-content);
+    
+      &.inactive {
+        display: none;
+      }
+
+      div.palette-content {
+        padding: 1em;
+        border-bottom: 1px solid var(--color-border);
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        h4 {
+          margin: 1em 0;
+          text-align: center;
+
+          i {
+            position: relative;
+            top: 3px;
+          }  
+        }
+
+        p {
+          text-align: center;
+        }
+
+        nav ul {
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: center;
+
+          li {
+            width: 50%;
+            padding: 5px;
+
+            button {
+              padding:5px;
+              width: 100%;
+              border: 1px solid #ccc;
+              .transition();
+
+              &:hover {
+                background-color: white;
+                border-color: darken(#ccc,20%);
+              }
+
+              &.active {
+                border-color:rgb(73, 73, 243)
+              }
+            }
+          }
+        }
+      }
+    }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 0%;
+  }
+}

src/styles/default/color.css

+:root,
+:host {
+    --color-text: #444444;
+    --color-text-secondary: #666666;
+    --color-content: #ffffff;
+    --color-widget: #f5f5f5;
+    --color-border: rgba(0,0,0,0.15);
+    --color-shadow: rgba(0,0,0,0.2);
+
+    --color-active: rgba(0,0,0,0.1);
+    --color-active-secondary: rgba(100,100,100,0.1);
+
+    --color-information: #4496d3;
+    --color-information-secondary: #68a4d9;
+    --color-help: var(--color-information);
+    --color-help-secondary: var(--color-information-secondary);
+    --color-important: #f3981d;
+    --color-important-secondary: #ed6d35;
+    --color-accept: #37a34a;
+    --color-accept-secondary: #79c06e;
+    --color-error: #ea5549;
+    --color-error-secondary: #d83473;
+    --color-warning: var(--color-error);
+    --color-warning-secondary: var(--color-error-secondary);
+}

src/styles/default/component.css

+:host {
+    color: var(--color-text);
+}
+a {
+    color: var(--color-information);
+}
+a:hover {
+    color: var(--color-information-secondary);
+}
+
+.fade-in,
+.fade-out {
+    animation: fade 0.2s;
+}
+.fade-out {
+    animation-direction: reverse;
+    animation-fill-mode: forwards;
+}
+@keyframes fade {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1.0;
+    }
+}