)}
);
- };
+ }, [caretLeft, caretWidth]);
- const getStaticCaret = () => {
+ const getStaticCaret = useCallback(() => {
const style = {
left: caretLeft,
width: caretWidth
};
return (
-
-
+
);
- };
+ }, [caretLeft, caretWidth]);
const tabLinks = useMemo(
() =>
- tabs.map((t) => (
+ tabs.map(({ path, link, className, activeClassName }) => (
nodes.current.set(t.path, ref)}>
-
- {t.link}
+ className={classNames(styles.tab, className)}
+ key={path}
+ ref={(ref) => nodes.current.set(path, ref)}>
+
+ {link}
)),
- [tabs]
+ [tabs, nodes]
);
- const localCaret = uiAnimations ? getAnimatedCaret() : getStaticCaret();
-
- const updateCaretPosition = useCallback(() => {
- const selectedTab = location.pathname;
- const tabForRoute = nodes.current.get(selectedTab);
- if (!tabForRoute) return null;
- const tabRect = tabForRoute.getBoundingClientRect();
- const caretLeft = tabForRoute.offsetLeft;
- const caretWidth = tabRect.width;
- setCaretLeft(caretLeft);
- setCaretWidth(caretWidth);
- setSelectedTab(selectedTab);
- }, [location]);
-
- useEffect(() => {
- setLocalSidebarOnBottom(sidebarOnBottom);
- updateCaretPosition();
- }, [sidebarOnBottom, updateCaretPosition]);
-
- useEffect(() => {
- if (
- selectedTab != location.pathname ||
- localSidebarOnBottom != sidebarOnBottom
- ) {
- updateCaretPosition();
- }
- }, [
- location,
- selectedTab,
- sidebarOnBottom,
- localSidebarOnBottom,
- updateCaretPosition
- ]);
+ const localCaret = useMemo(
+ () => (uiAnimations ? getAnimatedCaret() : getStaticCaret()),
+ [uiAnimations, getAnimatedCaret, getStaticCaret]
+ );
return (
-
+
{tabLinks}
{caret ? caret : localCaret}
diff --git a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css
new file mode 100644
index 0000000000..6dd4798205
--- /dev/null
+++ b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css
@@ -0,0 +1,58 @@
+.tabs {
+ position: absolute;
+ bottom: 0;
+ left: 100px;
+ white-space: nowrap;
+}
+
+.tab {
+ line-height: 35px;
+ margin-right: 55px;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.tab a {
+ margin: 0 5px 0 5px;
+ color: var(--tab-text);
+ text-decoration: none;
+}
+
+.tab a:hover,
+.tab a.active {
+ color: var(--tab-text-active-hover);
+}
+
+.tab:last-of-type {
+ margin-right: 0;
+}
+
+.tabCaret {
+ position: absolute;
+ bottom: 0;
+ height: 5px;
+}
+
+.tabCaret .active {
+ background-color: var(--accent-color);
+ position: absolute;
+ height: 5px;
+}
+
+@media screen and (max-width: 1179px) {
+ .tabs {
+ left: 55px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .tabs {
+ font-size: 13px;
+ left: 25px;
+ right: 20px;
+ }
+
+ .tab {
+ margin-right: 45px;
+ }
+}
diff --git a/app/components/shared/RoutedTabsHeader/hooks.js b/app/components/shared/RoutedTabsHeader/hooks.js
index 29ff6f4f4b..a17c7532d3 100644
--- a/app/components/shared/RoutedTabsHeader/hooks.js
+++ b/app/components/shared/RoutedTabsHeader/hooks.js
@@ -1,14 +1,45 @@
+import { useEffect, useCallback, useState, useRef } from "react";
import { useSelector } from "react-redux";
import * as sel from "selectors";
export function useRoutedTabsHeader() {
- const location = useSelector(sel.location);
+ const nodes = useRef(new Map());
+ const [caretLeft, setCaretLeft] = useState(null);
+ const [caretWidth, setCaretWidth] = useState(null);
+ const [selectedTab, setSelectedTab] = useState(null);
+ const [localSidebarOnBottom, setLocalSidebarOnBottom] = useState(null);
+ const { pathname } = useSelector(sel.location);
const sidebarOnBottom = useSelector(sel.sidebarOnBottom);
const uiAnimations = useSelector(sel.uiAnimations);
- return {
- location,
+ const updateCaretPosition = useCallback(() => {
+ const selectedTab = pathname;
+ const tabForRoute = nodes.current.get(selectedTab);
+ if (!tabForRoute) return null;
+ const tabRect = tabForRoute.getBoundingClientRect();
+ const caretLeft = tabForRoute.offsetLeft;
+ const caretWidth = tabRect.width;
+ setCaretLeft(caretLeft);
+ setCaretWidth(caretWidth);
+ setSelectedTab(selectedTab);
+ }, [pathname]);
+
+ useEffect(() => {
+ setLocalSidebarOnBottom(sidebarOnBottom);
+ updateCaretPosition();
+ }, [sidebarOnBottom, updateCaretPosition]);
+
+ useEffect(() => {
+ if (selectedTab != pathname || localSidebarOnBottom != sidebarOnBottom) {
+ updateCaretPosition();
+ }
+ }, [
+ pathname,
+ selectedTab,
sidebarOnBottom,
- uiAnimations
- };
+ localSidebarOnBottom,
+ updateCaretPosition
+ ]);
+
+ return { uiAnimations, caretLeft, caretWidth, nodes };
}
diff --git a/app/components/views/FatalErrorPage/FatalErrorPage.js b/app/components/views/FatalErrorPage/FatalErrorPage.jsx
similarity index 88%
rename from app/components/views/FatalErrorPage/FatalErrorPage.js
rename to app/components/views/FatalErrorPage/FatalErrorPage.jsx
index 154121c86f..c1d457d3d8 100644
--- a/app/components/views/FatalErrorPage/FatalErrorPage.js
+++ b/app/components/views/FatalErrorPage/FatalErrorPage.jsx
@@ -4,7 +4,7 @@ import { CopyToClipboard, ExternalLink } from "shared";
import { DIFF_CONNECTION_ERROR } from "constants";
import { getAppDataDirectory } from "main_dev/paths.js";
import { useFatalErrorPage } from "./hooks";
-import "style/Layout.less";
+import styles from "./FatalErrorPage.module.css";
// right now we need to add logs by hand. It would be good having a better way
// of recognizing errors.
@@ -51,14 +51,14 @@ function FatalErrorPage() {
daemonError.indexOf(checkSumError) !== -1:
errorMessage = (
<>
-
+
}
@@ -98,16 +98,16 @@ function FatalErrorPage() {
};
return (
-
-
-
+
+
+
:
-
-
+
+
{daemonError && (
<>
-
+
@@ -116,7 +116,7 @@ function FatalErrorPage() {
)}
{walletError && (
<>
-
+
@@ -125,26 +125,26 @@ function FatalErrorPage() {
)}
-
+
:
-
+
{daemonError && getErrorAction()}
-
+
{isAdvancedDaemon && (
-
+
)}
-
+
diff --git a/app/components/views/FatalErrorPage/FatalErrorPage.module.css b/app/components/views/FatalErrorPage/FatalErrorPage.module.css
new file mode 100644
index 0000000000..07d7fea499
--- /dev/null
+++ b/app/components/views/FatalErrorPage/FatalErrorPage.module.css
@@ -0,0 +1,51 @@
+.pageBody {
+ display: flex;
+ height: 100vh;
+ overflow-x: hidden;
+}
+
+.errorPage {
+ margin: 138px 50px 0 50px;
+}
+
+.title {
+ margin-top: 30px;
+ font-size: 20px;
+}
+
+.error {
+ font-family: var(--font-family-regular);
+ font-size: 13px;
+}
+
+.suggestion {
+ font-size: 13px;
+ margin: 10px 20px;
+ padding: 10px;
+ border: 1px solid var(--title-text-and-button-background);
+ border-radius: 3px;
+}
+
+.toolbar {
+ margin-top: 30px;
+ text-align: right;
+}
+
+.button {
+ margin-left: 10px;
+}
+
+.removeButton {
+ float: left;
+}
+
+.reset {
+ float: left;
+ margin-bottom: 10px;
+}
+
+@media screen and (max-width: 768px) {
+ .pageBody {
+ flex-direction: column-reverse;
+ }
+}
diff --git a/app/components/views/GovernancePage/GovernancePage.jsx b/app/components/views/GovernancePage/GovernancePage.jsx
index b92a5b90dc..7135afb0c7 100644
--- a/app/components/views/GovernancePage/GovernancePage.jsx
+++ b/app/components/views/GovernancePage/GovernancePage.jsx
@@ -5,6 +5,7 @@ import ProposalsTab from "./Proposals/ProposalsTab";
import VotingPrefsTab from "./Blockchain/Blockchain";
import TabHeader from "./TabHeader/TabHeader";
import { GOVERNANCE_ICON } from "constants";
+import styles from "./GovernancePage.module.css";
const PageHeader = () => (
(
);
export default () => (
- }>
+ }
+ tabContentClassName={styles.tabContent}>
{
return (
}
+ className={styles.tabsBody}
header={
- }>
+ }
+ headerClassName={styles.tabsHeader}
+ tabsClassName={styles.tabs}
+ tabContentClassName={styles.tabContent}>
@@ -90,6 +96,8 @@ const ProposalsTab = () => {
path="/governance/proposals/activevote"
component={h(ProposalsList, { tab })}
key="activevote"
+ className={styles.tab}
+ activeClassName={styles.activeTab}
link={
@@ -100,12 +108,16 @@ const ProposalsTab = () => {
path="/governance/proposals/voted"
component={h(ProposalsList, { finishedVote: true, tab })}
key="activevote"
+ className={styles.tab}
+ activeClassName={styles.activeTab}
link={}
/>
}
/>
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css b/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css
index 8efa80feb8..ec76a4bc6f 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css
+++ b/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css
@@ -17,6 +17,47 @@
padding-bottom: 15px;
}
+.tabsHeader {
+ padding: 0;
+ height: 133px;
+}
+
+.tabs {
+ position: relative;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ padding-left: 103px;
+ margin-bottom: 9px;
+ background-color: var(--tabbed-page-header-bg);
+}
+
+.tabsBody {
+ top: 170px;
+}
+
+.tab {
+ margin-right: 20px;
+}
+
+.tab a {
+ margin: 0;
+ border-radius: 5px;
+}
+
+.tab a span {
+ color: var(--tabbed-page-header-text);
+}
+
+.activeTab {
+ background-color: var(--tabbed-page-header-active-bg);
+ padding: 3px 10px 3px 10px;
+}
+
+.tabContent {
+ padding: 0;
+}
+
.title {
font-size: 21px;
line-height: 27px;
@@ -83,6 +124,10 @@
}
@media screen and (max-width: 1179px) {
+ .tabs {
+ padding-left: 35px;
+ }
+
.politeiaDisabled {
padding-left: 20px;
}
diff --git a/app/components/views/GovernancePage/TabHeader/TabHeader.jsx b/app/components/views/GovernancePage/TabHeader/TabHeader.jsx
index 74085be026..4a1f59c7b5 100644
--- a/app/components/views/GovernancePage/TabHeader/TabHeader.jsx
+++ b/app/components/views/GovernancePage/TabHeader/TabHeader.jsx
@@ -12,6 +12,7 @@ const TabHeader = () => {
description={
}
+ className={styles.descriptionHeader}
/>
{treasuryBalance && (
{
}}
/>
}
+ className={styles.descriptionHeader}
/>
)}
diff --git a/app/components/views/GovernancePage/TabHeader/TabHeader.module.css b/app/components/views/GovernancePage/TabHeader/TabHeader.module.css
index 48d43e5304..8e9385792b 100644
--- a/app/components/views/GovernancePage/TabHeader/TabHeader.module.css
+++ b/app/components/views/GovernancePage/TabHeader/TabHeader.module.css
@@ -10,3 +10,9 @@
margin-right: 5px;
border-radius: 3px;
}
+
+@media screen and (max-width: 768px) {
+ .descriptionHeader {
+ display: none;
+ }
+}
diff --git a/app/connectors/index.js b/app/connectors/index.js
index 16de007306..e4422797ca 100644
--- a/app/connectors/index.js
+++ b/app/connectors/index.js
@@ -1,5 +1 @@
-export { default as send } from "./send";
-export { default as ticketsList } from "./ticketsList";
-export { default as ticketsOverview } from "./ticketsOverview";
-export { default as modalVisible } from "./modalVisible";
export { default as lnPage } from "./lnPage";
diff --git a/app/connectors/modalVisible.js b/app/connectors/modalVisible.js
deleted file mode 100644
index 9030bf8f2f..0000000000
--- a/app/connectors/modalVisible.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { connect } from "react-redux";
-import { selectorMap } from "../fp";
-import * as sel from "../selectors";
-
-const mapStateToProps = selectorMap({
- modalVisible: sel.modalVisible
-});
-
-export default connect(mapStateToProps);
diff --git a/app/connectors/send.js b/app/connectors/send.js
deleted file mode 100644
index 547194d9f6..0000000000
--- a/app/connectors/send.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
-import { selectorMap } from "../fp";
-import * as sel from "../selectors";
-import * as ca from "../actions/ControlActions";
-import * as tza from "../actions/TrezorActions";
-
-const mapStateToProps = selectorMap({
- defaultSpendingAccount: sel.defaultSpendingAccount,
- estimatedSignedSize: sel.estimatedSignedSize,
- unsignedTransaction: sel.unsignedTransaction,
- estimatedFee: sel.estimatedFee,
- totalSpent: sel.totalSpent,
- isSendingTransaction: sel.isSendingTransaction,
- isConstructingTransaction: sel.isConstructingTransaction,
- nextAddress: sel.nextAddress,
- nextAddressAccount: sel.nextAddressAccount,
- unitDivisor: sel.unitDivisor,
- constructTxLowBalance: sel.constructTxLowBalance,
- isTransactionsSendTabDisabled: sel.isTransactionsSendTabDisabled,
- constructTxResponse: sel.constructTxResponse,
- isTrezor: sel.isTrezor,
- unsignedRawTx: sel.unsignedRawTx,
- isWatchingOnly: sel.isWatchingOnly,
- publishTxResponse: sel.publishTxResponse,
- notMixedAccounts: sel.getNotMixedAccounts
-});
-
-const mapDispatchToProps = (dispatch) =>
- bindActionCreators(
- {
- onAttemptConstructTransaction: ca.constructTransactionAttempt,
- onAttemptSignTransaction: ca.signTransactionAttempt,
- onClearTransaction: ca.clearTransaction,
- getNextAddressAttempt: ca.getNextAddressAttempt,
- validateAddress: ca.validateAddress,
- onAttemptSignTransactionTrezor: tza.signTransactionAttemptTrezor
- },
- dispatch
- );
-
-export default connect(mapStateToProps, mapDispatchToProps);
diff --git a/app/connectors/tabbedHeader.js b/app/connectors/tabbedHeader.js
deleted file mode 100644
index 35194283a6..0000000000
--- a/app/connectors/tabbedHeader.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from "react-redux";
-import * as sel from "../selectors";
-import { selectorMap } from "../fp";
-
-const mapStateToProps = selectorMap({
- isTestNet: sel.isTestNet,
- totalBalance: sel.totalBalance,
- ticketPrice: sel.ticketPrice
-});
-
-export default connect(mapStateToProps);
diff --git a/app/connectors/ticketsList.js b/app/connectors/ticketsList.js
deleted file mode 100644
index 38abced073..0000000000
--- a/app/connectors/ticketsList.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { connect } from "react-redux";
-import { selectorMap } from "fp";
-import { bindActionCreators } from "redux";
-import * as sel from "selectors";
-import * as ca from "actions/ClientActions";
-import * as ta from "actions/TransactionActions";
-
-const mapStateToProps = selectorMap({
- tickets: sel.filteredStakeTxs,
- tsDate: sel.tsDate,
- noMoreTickets: sel.noMoreStakeTxs,
- ticketsFilter: sel.ticketsFilter,
- window: sel.mainWindow
-});
-
-const mapDispatchToProps = (dispatch) =>
- bindActionCreators(
- {
- goBackHistory: ca.goBackHistory,
- getTickets: ta.getTransactions,
- changeTicketsFilter: ta.changeTicketsFilter
- },
- dispatch
- );
-
-export default connect(mapStateToProps, mapDispatchToProps);
diff --git a/app/connectors/ticketsOverview.js b/app/connectors/ticketsOverview.js
deleted file mode 100644
index 8f4cab4e9b..0000000000
--- a/app/connectors/ticketsOverview.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { bindActionCreators } from "redux";
-import { connect } from "react-redux";
-import { selectorMap } from "../fp";
-import * as ca from "../actions/ClientActions";
-
-const mapStateToProps = selectorMap({});
-
-const mapDispatchToProps = (dispatch) =>
- bindActionCreators(
- {
- showTicketList: ca.showTicketList
- },
- dispatch
- );
-
-export default connect(mapStateToProps, mapDispatchToProps);
diff --git a/app/containers/App.jsx b/app/containers/App/App.jsx
similarity index 95%
rename from app/containers/App.jsx
rename to app/containers/App/App.jsx
index f2f388907b..fcbb34eac4 100644
--- a/app/containers/App.jsx
+++ b/app/containers/App/App.jsx
@@ -3,20 +3,20 @@ import { IntlProvider } from "react-intl";
import { defaultFormats } from "i18n/locales";
import { Redirect, Route, Switch } from "react-router-dom";
import { StaticSwitch } from "shared";
-import GetStartedContainer from "./GetStarted";
-import WalletContainer from "./Wallet";
+import GetStartedContainer from "../GetStarted";
+import WalletContainer from "../Wallet";
import ShutdownPage from "components/views/ShutdownPage/ShutdownPage";
import FatalErrorPage from "components/views/FatalErrorPage/FatalErrorPage";
import Snackbar from "components/Snackbar";
import AboutModal from "components/modals/AboutModal/AboutModal";
import { log } from "wallet";
import TrezorModals from "components/modals/TrezorModals/TrezorModals";
-import "style/Layout.less";
import { ipcRenderer } from "electron";
import { hot } from "react-hot-loader/root";
import { CantCloseModals } from "modals";
import { useMountEffect } from "hooks";
-import { useApp } from "./hooks";
+import { useApp } from "../hooks";
+import styles from "./App.module.css";
// minimum size to reduce the sidebar in px.
const MINIMUM_SIZE_TO_REDUCE_SIDEBAR = 1179;
@@ -126,7 +126,7 @@ const App = () => {
-
+
diff --git a/app/containers/App/App.module.css b/app/containers/App/App.module.css
new file mode 100644
index 0000000000..4a274e74a2
--- /dev/null
+++ b/app/containers/App/App.module.css
@@ -0,0 +1,9 @@
+.appContainer,
+.appContainer > div {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+
diff --git a/app/containers/App/index.js b/app/containers/App/index.js
new file mode 100644
index 0000000000..8ce017e646
--- /dev/null
+++ b/app/containers/App/index.js
@@ -0,0 +1 @@
+export { default } from "./App";
diff --git a/app/containers/GetStarted.js b/app/containers/GetStarted/GetStarted.jsx
similarity index 89%
rename from app/containers/GetStarted.js
rename to app/containers/GetStarted/GetStarted.jsx
index cbeb336163..3b06af891e 100644
--- a/app/containers/GetStarted.js
+++ b/app/containers/GetStarted/GetStarted.jsx
@@ -7,9 +7,10 @@ import SpvChoicePage from "components/views/GetStartedPage/SpvChoicePage/SpvChoi
import CreateWalletPage from "components/views/GetStartedPage/CreateWalletPage/CreateWalletPage";
import { BlurableContainer } from "layout";
import { Route, Switch } from "react-router-dom";
+import styles from "./GetStarted.module.css";
-export default () => (
-
+const GetStarted = () => (
+
(
);
+
+export default GetStarted;
diff --git a/app/containers/GetStarted/GetStarted.module.css b/app/containers/GetStarted/GetStarted.module.css
new file mode 100644
index 0000000000..c2c70ce2a6
--- /dev/null
+++ b/app/containers/GetStarted/GetStarted.module.css
@@ -0,0 +1,5 @@
+.getStartedBody {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+}
diff --git a/app/containers/GetStarted/index.js b/app/containers/GetStarted/index.js
new file mode 100644
index 0000000000..9ca9ac2a4e
--- /dev/null
+++ b/app/containers/GetStarted/index.js
@@ -0,0 +1 @@
+export { default } from "./GetStarted";
diff --git a/app/containers/Wallet.jsx b/app/containers/Wallet/Wallet.jsx
similarity index 92%
rename from app/containers/Wallet.jsx
rename to app/containers/Wallet/Wallet.jsx
index e1109e9668..dfe2584005 100644
--- a/app/containers/Wallet.jsx
+++ b/app/containers/Wallet/Wallet.jsx
@@ -19,8 +19,9 @@ import LNPage from "components/views/LNPage";
import SideBar from "components/SideBar/SideBar";
import ListUtxo from "components/views/ListUtxo/ListUtxo";
import { BlurableContainer } from "layout";
-import { useWallet } from "./hooks";
+import { useWallet } from "../hooks";
import { useMountEffect } from "hooks";
+import styles from "./Wallet.module.css";
const Wallet = ({ setInterval }) => {
const { getPeerInfo, expandSideBar } = useWallet();
@@ -28,8 +29,7 @@ const Wallet = ({ setInterval }) => {
// Notice that we return a cleanup logic function in useEffect/useMountEffect
// which will run on unmount.
useMountEffect(() => {
- // Get peer info every 10 seconds, so we can no if there are no available
- // peers.
+ // Fetch peers info every 10 seconds.
const peerInfoInterval = setInterval(() => getPeerInfo(), 10000);
// Cleanup interval on unmount.
@@ -39,10 +39,10 @@ const Wallet = ({ setInterval }) => {
});
return (
-
+
+ className={expandSideBar ? styles.pageView : styles.reducedBar}>
diff --git a/app/containers/Wallet/Wallet.module.css b/app/containers/Wallet/Wallet.module.css
new file mode 100644
index 0000000000..99bfc8e2eb
--- /dev/null
+++ b/app/containers/Wallet/Wallet.module.css
@@ -0,0 +1,37 @@
+.pageBody {
+ display: flex;
+ height: 100vh;
+ overflow-x: hidden;
+}
+
+.pageView {
+ height: 100%;
+ width: calc(100% - var(--sidebar-width));
+ position: absolute;
+ right: 0px;
+ background-color: var(--background-container);
+ overflow-x: hidden;
+}
+
+.reducedBar {
+ height: 100%;
+ width: calc(100% - var(--sidebar-width-reduced));
+ position: absolute;
+ right: 0px;
+ background-color: var(--background-container);
+ overflow-x: hidden;
+}
+
+@media screen and (max-width: 768px) {
+ .pageBody {
+ flex-direction: column-reverse;
+ }
+
+ .pageView {
+ width: 100%;
+ }
+
+ .reducedBar {
+ width: 100%;
+ }
+}
diff --git a/app/containers/Wallet/index.js b/app/containers/Wallet/index.js
new file mode 100644
index 0000000000..e94433f5ca
--- /dev/null
+++ b/app/containers/Wallet/index.js
@@ -0,0 +1 @@
+export { default } from "./Wallet";
diff --git a/app/style/Layout.less b/app/style/Layout.less
deleted file mode 100644
index e802009825..0000000000
--- a/app/style/Layout.less
+++ /dev/null
@@ -1,432 +0,0 @@
-// Classes for laying out the pages
-
-@import (reference) "./main.less";
-
-.getstarted-page-body {
- height: 100%;
- width: 100%;
- position: absolute;
-}
-
-.page-body {
- display: flex;
- height: 100vh;
- overflow-x: hidden;
-}
-
-.page-view {
- height: 100%;
- width: calc(100% - var(--sidebar-width));
- position: absolute;
- right: 0px;
- background-color: var(--background-container);
- overflow-x: hidden;
-}
-
-.page-view-reduced-bar {
- height: 100%;
- width: calc(100% - var(--sidebar-width-reduced));
- position: absolute;
- right: 0px;
- background-color: var(--background-container);
- overflow-x: hidden;
-}
-
-.page-view.blur,
-.page-view-reduced-bar.blur,
-.getstarted-page-body.blur,
-.pseudo-modal-wrapper.blur {
- filter: blur(5px);
-}
-
-.react-draggable-transparent-selection {
- .page-view.blur,
- .page-view-reduced-bar.blur,
- .getstarted-page-body.blur,
- .pseudo-modal-wrapper.blur {
- filter: initial;
- }
-}
-
-// Base definition for the "page client area" (area where main content is
-// displayed")
-.page-content-mixin {
- position: relative;
- padding: 54px 60px 0px 80px;
- background-color: var(--background-container);
- overflow-y: scroll;
- height: calc(100% - 214px);
-}
-
-// Main content that allows scrolling
-.page-content {
- .page-content-mixin;
-
- overflow-y: auto;
- overflow-x: hidden;
-}
-
-// Main content that *does not* allow scrolling
-.page-content-fixed {
- overflow: visible;
-}
-
-// Main content that has been blured by something positioned on top of it
-.page-content-blur {
- .page-content-mixin;
-
- filter: blur(6px);
-}
-
-.tab-content:not(.visible)::-webkit-scrollbar {
- width: 5px;
- background-color: transparent;
-}
-
-.tab-content:not(.visible)::-webkit-scrollbar-thumb {
- background-color: transparent;
-}
-
-.standalone-page {
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- left: 0px;
-}
-
-.tabbed-page-header,
-.standalone-page-header {
- background-color: var(--background-back-color);
- padding: 43px 60px 0px 63px;
- position: absolute;
- top: 0px;
- right: 0px;
- left: 0px;
- height: 114px;
-}
-
-.tabbed-page-body {
- overflow: hidden;
- position: absolute;
- right: 0px;
- top: 163px;
- bottom: 0px;
- left: 0px;
- background-color: var(--background-container);
-}
-
-.standalone-page-body {
- overflow-x: hidden;
- overflow-y: scroll;
- position: absolute;
- right: 0px;
- top: 157px;
- bottom: 0px;
- left: 0px;
- padding: 38px 60px 30px 63px;
- background-color: var(--background-container);
-}
-
-.tabbed-page-header > .description-header,
-.standalone-page-header > .description-header {
- white-space: pre-wrap;
- color: var(--header-desc-lighter-color);
- font-size: 13px;
- float: left;
- width: 100%;
- margin-left: 40px;
-}
-
-.description-header > .description-header-action-button {
- position: absolute;
- right: 80px;
-}
-
-.description-header > .description-header-action-button > .button {
- min-width: 76px;
-}
-
-.tabbed-page-body.governance {
- top: 157px;
-
- .tab-content {
- padding: 0;
- }
-
- .tabbed-page-body {
- top: 174px;
-
- .tab-content {
- padding: 0;
- }
- }
-
- .tabbed-page-header {
- padding: 0;
- height: 133px;
- .tabs {
- position: relative;
- left: 0;
- width: 100%;
- height: 40px;
- padding-left: 103px;
- margin-bottom: 9px;
- background-color: var(--tabbed-page-header-bg);
-
- .tab {
- margin-right: 20px;
- a {
- margin: 0;
- border-radius: 5px;
- span
- {
- color:var(--tabbed-page-header-text);
- }
- &.active {
- background-color: var(--tabbed-page-header-active-bg);
- padding: 3px 10px 3px 10px;
- }
- }
- }
- }
- }
-}
-
-.tab-content .proposal-list {
- margin-bottom: 60px;
-}
-
-.tabbed-page-header > .tabs {
- position: absolute;
- bottom: 0px;
- left: 100px;
- white-space: nowrap;
-}
-
-.tabbed-page-header > .tabs > .tab {
- line-height: 35px;
- margin-right: 55px;
- text-align: center;
- vertical-align: middle;
-}
-
-.tabbed-page-header > .tabs > .tab:last-of-type {
- margin-right: 0;
-}
-
-.tabbed-page-header > .tabs > .tabs-caret > {
- position: absolute;
- bottom: 0px;
- height: 5px;
-}
-
-.tabbed-page-header > .tabs > .tabs-caret > .active {
- background-color: var(--accent-color);
- position: absolute;
- height: 5px;
-}
-
-.tabbed-page-header .tabs > .tab > a {
- margin: 0px 5px 0px 5px;
- color: var(--tab-text);
- text-decoration: none;
-}
-
-.tabbed-page-header .tabs > .tab > a:hover,
-.tabbed-page-header .tabs > .tab > a.active {
- color: var(--tab-text-active-hover);
-}
-
-.tabbed-page-body.governance>.tab-content {
- height: 100%;
-}
-
-.tabbed-page .tab-content {
- position: absolute;
- overflow-x: hidden;
- right: 0px;
- top: 0px;
- bottom: 0px;
- left: 0px;
- padding: 38px 80px 30px 63px;
- background-color: var(--background-container);
-}
-
-.tabbed-page-subtitle {
- color: var(--stroke-color-hovered);
- font-size: 20px;
- line-height: 25px;
- margin-bottom: 17px;
- margin-left: 0;
- width: 740px;
-}
-
-.tabbed-page-subtitle.export {
- margin-top: -20px;
-}
-
-.component-tab-content {
- position: absolute;
- width: 100%;
-}
-
-.top-level-container,
-.top-level-container > div {
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-
-.shutdown-page {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
-}
-
-.scrollbar-overlay {
- position: absolute;
- right: 0px;
- top: 0px;
- bottom: 0px;
- width: 20px;
- background-color: var(--background-container);
-}
-
-.fatal-error-page {
- margin: 138px 50px 0px 50px;
-}
-
-.fatal-error-area {
- margin: 10px 10% 10px 10%;
- padding: 10px;
- border: 1px solid var(--title-text-and-button-background);
- border-radius: 3px;
-}
-
-.fatal-error-toolbar {
- margin-top: 30px;
- text-align: right;
-
- .button {
- margin-left: 10px;
- }
-}
-
-.fatal-error-title {
- margin-top: 30px;
- font-size: 20px;
-}
-
-.fatal-error-suggestion {
- font-size: 13px;
- margin: 10px 20px;
- padding: 10px;
- border: 1px solid var(--title-text-and-button-background);
- border-radius: 3px;
-}
-
-.fatal-error {
- font-family: var(--font-family-regular);
- font-size: 13px;
-}
-
-.fatal-remove-button {
- float: left;
-}
-
-.fatal-error-reset-blockchain {
- float: left;
- margin-bottom: 10px;
-}
-
-@media screen and (max-width: 1179px) {
- .tabbed-page .tab-content {
- padding: 38px 20px 30px 20px;
- }
- .tabbed-page-header > .tabs{
- left: 55px;
- }
- .tabbed-page-body.governance .tabbed-page-header > .tabs {
- padding-left: 35px;
- }
- .tabbed-page-header,
- .standalone-page-header,
- .standalone-page-body {
- padding-left: 20px;
- }
- .tabbed-page-subtitle {
- margin-left: 0;
- width: 630px;
- }
-}
-
-@media screen and (max-width: 768px) {
- .standalone-page-body {
- top:113px;
- }
-
- .page-body {
- flex-direction: column-reverse;
- }
-
- .tabbed-page-subtitle {
- width: 355px;
- margin-left: 0;
- }
-
- .page-view {
- width: 100%;
- }
-
- .page-view-reduced-bar {
- width: 100%;
- }
-
- .tabbed-page-body{
- top: 133px;
- }
- .tabbed-page .tab-content
- {
- padding: 0 10px 80px 10px;
- }
- .description-header{
- display: none;
- }
- .tabbed-page-header > .tabs{
- font-size: 13px;
- left: 25px;
- right: 20px;
- .tab{
- margin-right:45px;
- }
- }
- .tabbed-page-header {
- height: 82px;
- padding-top:30px;
- }
-
- .tabbed-page-header > .standalone-page-header {
- padding: 0;
- }
-
- .standalone-page-header {
- height: initial;
- display: flex;
- flex-direction: column;
- width: 100%;
- position: relative;
- padding-bottom: 48px;
- padding-top: 30px;
- }
-
- .tabbed-page-body.governance {
- top: 112px;
- .tabbed-page-body {
- top: 250px;
- }
- }
-}
diff --git a/app/style/MyTickets.less b/app/style/MyTickets.less
deleted file mode 100644
index b6e1c8ce06..0000000000
--- a/app/style/MyTickets.less
+++ /dev/null
@@ -1,44 +0,0 @@
-@import (reference) "./main.less";
-
-.tickets-buttons-area {
- text-align: right;
- margin-right: 20px;
- margin-left: auto;
-}
-
-.vote-choice {
- padding: 4px;
- background-color: rgba(105, 211, 245, 0.3);
-}
-
-.vote-choice-agenda-id {
- font-weight: bold;
- margin-right: 0.5em;
-}
-
-.loading-more-tickets {
- height: 50px;
- color: var(--title-text-and-button-background);
-}
-
-.loading-more-tickets-icon {
- background-image: var(--tickets-loading-more-icon);
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: 32px;
- width: 50px;
- height: 50px;
-}
-
-.loading-more-tickets-info {
- flex: 1;
- align-items: center;
- justify-content: center;
-}
-
-.my-tickets-table-header {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr;
- padding: 16px 20px;
- background-color: var(--sidebar-color);
-}