diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css index 13ac1f178..2e0304726 100644 --- a/web/sidebar/left-layout-aside.css +++ b/web/sidebar/left-layout-aside.css @@ -1,65 +1,64 @@ .container { grid-area: sBar; background: var(--bg); - border-right: 1px solid var(--border-color); display: flex; - width: 560px; + width: 400px; } .navigationPanelContainer { width: 160px; margin-top: 12px; } .navigationPanelTab { display: flex; flex-direction: row; padding: 12px 0 12px 28px; cursor: pointer; } .navigationPanelTab svg { padding-right: 12px; color: var(--color-disabled); stroke: var(--color-disabled); fill: var(--color-disabled); } .navigationPanelTab p { color: var(--color-disabled); } .navigationPanelTab:hover p, .navigationPanelTab:hover svg, div.current_tab p, div.current_tab svg { color: var(--fg); stroke: var(--fg); fill: var(--fg); } .container p { display: flex; align-content: center; } .chatIconWrapper { position: relative; } span.chatBadge { position: absolute; top: -4px; left: 13px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--fg); background: var(--unread-bg); border-radius: 13px; font-size: 8px; line-height: 1.25; } diff --git a/web/sidebar/left-layout-aside.react.js b/web/sidebar/left-layout-aside.react.js index 6054c390c..6b3f59aa0 100644 --- a/web/sidebar/left-layout-aside.react.js +++ b/web/sidebar/left-layout-aside.react.js @@ -1,31 +1,20 @@ // @flow import * as React from 'react'; import CommunityPicker from './community-picker.react.js'; import css from './left-layout-aside.css'; -import SettingsSwitcher from './settings-switcher.react.js'; -import { useSelector } from '../redux/redux-utils.js'; -import AppSwitcher from '../topbar/app-switcher.react.js'; function LeftLayoutAside(): React.Node { - const navInfo = useSelector(state => state.navInfo); - const navigationPanel = React.useMemo(() => { - if (navInfo.tab === 'settings') { - return ; - } - return ; - }, [navInfo.tab]); return ( ); } const MemoizedLeftLayoutAside: React.ComponentType<{}> = React.memo<{}>( LeftLayoutAside, ); export default MemoizedLeftLayoutAside; diff --git a/web/style.css b/web/style.css index 4047d2c1f..35187733f 100644 --- a/web/style.css +++ b/web/style.css @@ -1,218 +1,218 @@ *, *:before, *:after { padding: 0; margin: 0; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { height: 100%; font-size: 62.5%; } body { font-family: var(--font-stack); background: var(--bg); height: 100%; overflow: hidden; font-size: 1.6rem; } a { text-decoration: none; color: #2a5db0; cursor: pointer; } button { cursor: pointer; } img, iframe { display: block; } input[type='text'], input[type='password'], textarea { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0; border: 1px solid #dddddd; border-radius: 1px; font-family: var(--font-stack); } button svg { vertical-align: top; } :global(#react-root) { display: flex; flex-direction: column; height: 100%; } div.layout { height: 100vh; display: grid; - grid-template-columns: 560px repeat(12, 1fr); + grid-template-columns: 400px repeat(12, 1fr); grid-template-rows: 65px calc(100vh - 65px); grid-template-areas: 'nav nav nav nav nav nav nav nav nav nav nav nav nav' 'sBar app app app app app app app app app app app app'; } header.header { background: var(--bg); z-index: 1; grid-area: nav; } div.main-header { height: 64px; background: var(--bg); display: flex; align-items: center; border-bottom: 1px solid var(--border-color); } div.main-header > .wordmark { color: var(--fg); padding-left: 92px; font-family: var(--font-logo); line-height: var(--line-height-text); font-weight: var(--semi-bold); font-size: var(--logo-font-22); margin-right: 40px; } .wordmark > a { color: inherit; } .electron-draggable { -webkit-app-region: drag; } .electron-non-draggable { -webkit-app-region: no-drag; } div.main-content-container { position: relative; grid-area: app; display: flex; overflow: hidden; } div.main-content { display: flex; flex: 1; overflow: hidden; } div.upper-right { position: absolute; top: 0; right: 0; padding: 15px 16px; } span.loading-indicator-loading { display: inline-block; } @keyframes loading-indicator-loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } span.loading-indicator-loading-medium:after { content: ' '; display: block; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-loading-large:after { content: ' '; display: block; width: 25px; height: 25px; border-radius: 50%; border: 3px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-loading-small:after { content: ' '; display: block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-black:after { border-color: #000 transparent #000 transparent; } span.loading-indicator-error { font-weight: bold; color: white; line-height: 0; } span.loading-indicator-error-black { font-weight: bold; color: red; line-height: 0; } .hidden { display: none; } .italic { font-style: italic; } span.page-loading { margin-top: 5px; margin-right: 12px; float: left; } span.page-error { margin: 15px; font-size: 42px; float: left; color: red; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 320dpi), only screen and (min-resolution: 2dppx) { header.header, header.main-header, div.splash-header-container, div.splash-top-container, div.splash-bottom, div.calendar-filters-container { background: var(--bg); } } @media (hover: none) { div.splash-header-container, div.splash-top-container, div.splash-bottom { background-attachment: initial; } }