+
{__("Transaction History")}
- {fetchingTransactions &&
- }
- {!fetchingTransactions &&
- }
+ {fetchingTransactions && !transactions.length
+ ?
+ : ""}
+ {transactions && transactions.length
+ ?
+ : ""}
diff --git a/ui/js/reducers/app.js b/ui/js/reducers/app.js
index 857a5a708..4ca5f888b 100644
--- a/ui/js/reducers/app.js
+++ b/ui/js/reducers/app.js
@@ -8,6 +8,8 @@ const win = remote.BrowserWindow.getFocusedWindow();
const reducers = {};
const defaultState = {
isLoaded: false,
+ modal: null,
+ modalProps: {},
platform: process.platform,
upgradeSkipped: sessionStorage.getItem("upgradeSkipped"),
daemonVersionMatched: null,
@@ -76,14 +78,14 @@ reducers[types.UPDATE_VERSION] = function(state, action) {
reducers[types.OPEN_MODAL] = function(state, action) {
return Object.assign({}, state, {
modal: action.data.modal,
- modalExtraContent: action.data.extraContent,
+ modalProps: action.data.modalProps || {},
});
};
reducers[types.CLOSE_MODAL] = function(state, action) {
return Object.assign({}, state, {
modal: undefined,
- modalExtraContent: undefined,
+ modalProps: {},
});
};
diff --git a/ui/js/reducers/claims.js b/ui/js/reducers/claims.js
index f47f50a02..7f883a4ea 100644
--- a/ui/js/reducers/claims.js
+++ b/ui/js/reducers/claims.js
@@ -1,6 +1,7 @@
import * as types from "constants/action_types";
const reducers = {};
+
const defaultState = {};
reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
@@ -49,21 +50,23 @@ reducers[types.FETCH_CLAIM_LIST_MINE_COMPLETED] = function(state, action) {
.filter(claimId => Object.keys(abandoningById).indexOf(claimId) === -1)
);
- claims.filter(claim => claim.category.match(/claim/)).forEach(claim => {
- byId[claim.claim_id] = claim;
+ claims
+ .filter(claim => claim.category && claim.category.match(/claim/))
+ .forEach(claim => {
+ byId[claim.claim_id] = claim;
- const pending = Object.values(pendingById).find(pendingClaim => {
- return (
- pendingClaim.name == claim.name &&
- pendingClaim.channel_name == claim.channel_name
- );
+ const pending = Object.values(pendingById).find(pendingClaim => {
+ return (
+ pendingClaim.name == claim.name &&
+ pendingClaim.channel_name == claim.channel_name
+ );
+ });
+
+ if (pending) {
+ delete pendingById[pending.claim_id];
+ }
});
- if (pending) {
- delete pendingById[pending.claim_id];
- }
- });
-
// Remove old timed out pending publishes
const old = Object.values(pendingById)
.filter(pendingClaim => Date.now() - pendingClaim.time >= 20 * 60 * 1000)
diff --git a/ui/js/reducers/content.js b/ui/js/reducers/content.js
index 9d8c5867e..8cb2eae2c 100644
--- a/ui/js/reducers/content.js
+++ b/ui/js/reducers/content.js
@@ -2,6 +2,7 @@ import * as types from "constants/action_types";
const reducers = {};
const defaultState = {
+ playingUri: null,
rewardedContentClaimIds: [],
channelPages: {},
};
@@ -58,6 +59,12 @@ reducers[types.RESOLVE_URI_CANCELED] = reducers[
});
};
+reducers[types.SET_PLAYING_URI] = (state, action) => {
+ return Object.assign({}, state, {
+ playingUri: action.data.uri,
+ });
+};
+
// reducers[types.FETCH_CHANNEL_CLAIMS_COMPLETED] = function(state, action) {
// const channelPages = Object.assign({}, state.channelPages);
// const { uri, claims } = action.data;
diff --git a/ui/js/reducers/navigation.js b/ui/js/reducers/navigation.js
index 821db9183..1ebcab2c9 100644
--- a/ui/js/reducers/navigation.js
+++ b/ui/js/reducers/navigation.js
@@ -24,12 +24,6 @@ reducers[types.DAEMON_READY] = function(state, action) {
});
};
-reducers[types.CHANGE_PATH] = function(state, action) {
- return Object.assign({}, state, {
- currentPath: action.data.path,
- });
-};
-
reducers[types.CHANGE_AFTER_AUTH_PATH] = function(state, action) {
return Object.assign({}, state, {
pathAfterAuth: action.data.path,
@@ -38,15 +32,16 @@ reducers[types.CHANGE_AFTER_AUTH_PATH] = function(state, action) {
reducers[types.HISTORY_NAVIGATE] = (state, action) => {
const { stack, index } = state;
-
- let newState = {};
-
const path = action.data.url;
- // Check for duplicated
+ let newState = {
+ currentPath: path,
+ };
+
if (action.data.index >= 0) {
newState.index = action.data.index;
} else if (!stack[index] || stack[index].path !== path) {
+ // ^ Check for duplicated
newState.stack = [...stack.slice(0, index + 1), { path, scrollY: 0 }];
newState.index = newState.stack.length - 1;
}
diff --git a/ui/js/reducers/search.js b/ui/js/reducers/search.js
index be6c3bec7..ed500b987 100644
--- a/ui/js/reducers/search.js
+++ b/ui/js/reducers/search.js
@@ -1,5 +1,4 @@
import * as types from "constants/action_types";
-import lbryuri from "lbryuri";
const reducers = {};
const defaultState = {};
@@ -9,7 +8,6 @@ reducers[types.SEARCH_STARTED] = function(state, action) {
return Object.assign({}, state, {
searching: true,
- query: query,
});
};
@@ -31,7 +29,6 @@ reducers[types.SEARCH_COMPLETED] = function(state, action) {
reducers[types.SEARCH_CANCELLED] = function(state, action) {
return Object.assign({}, state, {
searching: false,
- query: undefined,
});
};
diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js
index 16e53e2da..2656c03fd 100644
--- a/ui/js/reducers/settings.js
+++ b/ui/js/reducers/settings.js
@@ -6,12 +6,15 @@ import lbry from "lbry";
const reducers = {};
const defaultState = {
clientSettings: {
- showNsfw: lbry.getClientSetting("showNsfw"),
+ showNsfw: lbry.getClientSetting(settings.SHOW_NSFW),
+ showUnavailable: lbry.getClientSetting(settings.SHOW_UNAVAILABLE),
welcome_acknowledged: lbry.getClientSetting(settings.NEW_USER_ACKNOWLEDGED),
credit_intro_acknowledged: lbry.getClientSetting(
settings.CREDIT_INTRO_ACKNOWLEDGED
),
language: lbry.getClientSetting(settings.LANGUAGE),
+ theme: lbry.getClientSetting(settings.THEME),
+ themes: lbry.getClientSetting(settings.THEMES),
},
languages: {},
};
diff --git a/ui/js/reducers/wallet.js b/ui/js/reducers/wallet.js
index e704222a6..a4e25b964 100644
--- a/ui/js/reducers/wallet.js
+++ b/ui/js/reducers/wallet.js
@@ -10,11 +10,12 @@ const buildDraftTransaction = () => ({
const defaultState = {
balance: undefined,
blocks: {},
- transactions: [],
+ transactions: {},
fetchingTransactions: false,
receiveAddress: address,
gettingNewAddress: false,
draftTransaction: buildDraftTransaction(),
+ sendingSupport: false,
};
reducers[types.FETCH_TRANSACTIONS_STARTED] = function(state, action) {
@@ -24,20 +25,16 @@ reducers[types.FETCH_TRANSACTIONS_STARTED] = function(state, action) {
};
reducers[types.FETCH_TRANSACTIONS_COMPLETED] = function(state, action) {
- const oldTransactions = Object.assign({}, state.transactions);
- const byId = Object.assign({}, oldTransactions.byId);
+ let byId = Object.assign({}, state.transactions);
+
const { transactions } = action.data;
transactions.forEach(transaction => {
byId[transaction.txid] = transaction;
});
- const newTransactions = Object.assign({}, oldTransactions, {
- byId: byId,
- });
-
return Object.assign({}, state, {
- transactions: newTransactions,
+ transactions: byId,
fetchingTransactions: false,
});
};
@@ -125,6 +122,25 @@ reducers[types.SEND_TRANSACTION_FAILED] = function(state, action) {
});
};
+reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) {
+ return Object.assign({}, state, {
+ sendingSupport: true,
+ });
+};
+
+reducers[types.SUPPORT_TRANSACTION_COMPLETED] = function(state, action) {
+ return Object.assign({}, state, {
+ sendingSupport: false,
+ });
+};
+
+reducers[types.SUPPORT_TRANSACTION_FAILED] = function(state, action) {
+ return Object.assign({}, state, {
+ error: action.data.error,
+ sendingSupport: false,
+ });
+};
+
reducers[types.FETCH_BLOCK_SUCCESS] = (state, action) => {
const { block, block: { height } } = action.data,
blocks = Object.assign({}, state.blocks);
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js
index 3e8e68223..c721916c0 100644
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@@ -71,9 +71,9 @@ export const selectUpgradeDownloadItem = createSelector(
state => state.downloadItem
);
-export const selectModalExtraContent = createSelector(
+export const selectModalProps = createSelector(
_selectState,
- state => state.modalExtraContent
+ state => state.modalProps
);
export const selectDaemonReady = createSelector(
diff --git a/ui/js/selectors/availability.js b/ui/js/selectors/availability.js
index 1200dd904..99bf63ad9 100644
--- a/ui/js/selectors/availability.js
+++ b/ui/js/selectors/availability.js
@@ -7,14 +7,10 @@ export const selectAvailabilityByUri = createSelector(
state => state.byUri || {}
);
-const selectAvailabilityForUri = (state, props) => {
- return selectAvailabilityByUri(state)[props.uri];
-};
-
-export const makeSelectIsAvailableForUri = () => {
+export const makeSelectIsAvailableForUri = uri => {
return createSelector(
- selectAvailabilityForUri,
- availability => (availability === undefined ? undefined : availability > 0)
+ selectAvailabilityByUri,
+ byUri => (!byUri || byUri[uri] === undefined ? undefined : byUri[uri] > 0)
);
};
@@ -23,10 +19,9 @@ export const selectFetchingAvailability = createSelector(
state => state.fetching || {}
);
-const selectFetchingAvailabilityForUri = (state, props) => {
- return selectFetchingAvailability(state)[props.uri];
-};
-
-export const makeSelectFetchingAvailabilityForUri = () => {
- return createSelector(selectFetchingAvailabilityForUri, fetching => fetching);
+export const makeSelectFetchingAvailabilityForUri = uri => {
+ return createSelector(
+ selectFetchingAvailability,
+ byUri => byUri && byUri[uri]
+ );
};
diff --git a/ui/js/selectors/claims.js b/ui/js/selectors/claims.js
index 630e72c3e..61fd5fdc2 100644
--- a/ui/js/selectors/claims.js
+++ b/ui/js/selectors/claims.js
@@ -40,25 +40,24 @@ export const selectAllClaimsByChannel = createSelector(
state => state.claimsByChannel || {}
);
-const selectClaimForUri = (state, props) => {
- const uri = lbryuri.normalize(props.uri);
- return selectClaimsByUri(state)[uri];
+export const makeSelectClaimForUri = uri => {
+ return createSelector(
+ selectClaimsByUri,
+ claims => claims && claims[lbryuri.normalize(uri)]
+ );
};
-export const makeSelectClaimForUri = () => {
- return createSelector(selectClaimForUri, claim => claim);
-};
-
-const selectClaimForUriIsMine = (state, props) => {
- const uri = lbryuri.normalize(props.uri);
- const claim = selectClaimsByUri(state)[uri];
- const myClaims = selectMyClaimsRaw(state);
-
- return myClaims.has(claim.claim_id);
-};
-
-export const makeSelectClaimForUriIsMine = () => {
- return createSelector(selectClaimForUriIsMine, isMine => isMine);
+export const makeSelectClaimIsMine = rawUri => {
+ const uri = lbryuri.normalize(rawUri);
+ return createSelector(
+ selectClaimsByUri,
+ selectMyClaimsRaw,
+ (claims, myClaims) =>
+ claims &&
+ claims[uri] &&
+ claims[uri].claim_id &&
+ myClaims.has(claims[uri].claim_id)
+ );
};
export const selectAllFetchingChannelClaims = createSelector(
@@ -66,86 +65,53 @@ export const selectAllFetchingChannelClaims = createSelector(
state => state.fetchingChannelClaims || {}
);
-const selectFetchingChannelClaims = (state, props) => {
- const allFetchingChannelClaims = selectAllFetchingChannelClaims(state);
-
- return allFetchingChannelClaims[props.uri];
-};
-
-export const makeSelectFetchingChannelClaims = (state, props) => {
- return createSelector(selectFetchingChannelClaims, fetching => fetching);
-};
-
-export const selectClaimsInChannelForUri = (state, props) => {
- const byId = selectClaimsById(state);
- const byChannel = selectAllClaimsByChannel(state)[props.uri] || {};
- const claimIds = byChannel["all"];
-
- if (!claimIds) return claimIds;
-
- const claims = [];
-
- claimIds.forEach(claimId => claims.push(byId[claimId]));
-
- return claims;
-};
-
-export const makeSelectClaimsInChannelForUri = () => {
- return createSelector(selectClaimsInChannelForUri, claims => claims);
-};
-
-export const selectClaimsInChannelForCurrentPage = (state, props) => {
- const byId = selectClaimsById(state);
- const byChannel = selectAllClaimsByChannel(state)[props.uri] || {};
- const params = selectCurrentParams(state);
- const page = params && params.page ? params.page : 1;
- const claimIds = byChannel[page];
-
- if (!claimIds) return claimIds;
-
- const claims = [];
-
- claimIds.forEach(claimId => claims.push(byId[claimId]));
-
- return claims;
-};
-
-export const makeSelectClaimsInChannelForCurrentPage = () => {
- return createSelector(selectClaimsInChannelForCurrentPage, claims => claims);
-};
-
-const selectMetadataForUri = (state, props) => {
- const claim = selectClaimForUri(state, props);
- const metadata =
- claim && claim.value && claim.value.stream && claim.value.stream.metadata;
-
- const value = metadata ? metadata : claim === undefined ? undefined : null;
- return value;
-};
-
-export const makeSelectMetadataForUri = () => {
- return createSelector(selectMetadataForUri, metadata => metadata);
-};
-
-const selectSourceForUri = (state, props) => {
- const claim = selectClaimForUri(state, props);
- const source =
- claim && claim.value && claim.value.stream && claim.value.stream.source;
-
- return source ? source : claim === undefined ? undefined : null;
-};
-
-export const makeSelectSourceForUri = () => {
- return createSelector(selectSourceForUri, source => source);
-};
-
-export const makeSelectContentTypeForUri = () => {
+export const makeSelectFetchingChannelClaims = uri => {
return createSelector(
- selectSourceForUri,
- source => (source ? source.contentType : source)
+ selectAllFetchingChannelClaims,
+ fetching => fetching && fetching[uri]
);
};
+export const makeSelectClaimsInChannelForCurrentPage = (uri, page = 1) => {
+ return createSelector(
+ selectClaimsById,
+ selectAllClaimsByChannel,
+ (byId, allClaims) => {
+ const byChannel = allClaims[uri] || {};
+ const claimIds = byChannel[page];
+
+ if (!claimIds) return claimIds;
+
+ return claimIds.map(claimId => byId[claimId]);
+ }
+ );
+};
+
+export const makeSelectMetadataForUri = uri => {
+ return createSelector(makeSelectClaimForUri(uri), claim => {
+ const metadata =
+ claim && claim.value && claim.value.stream && claim.value.stream.metadata;
+
+ const value = metadata ? metadata : claim === undefined ? undefined : null;
+ return value;
+ });
+};
+
+export const makeSelectTitleForUri = uri => {
+ return createSelector(
+ makeSelectMetadataForUri(uri),
+ metadata => metadata && metadata.title
+ );
+};
+
+export const makeSelectContentTypeForUri = uri => {
+ return createSelector(makeSelectClaimForUri(uri), claim => {
+ const source =
+ claim && claim.value && claim.value.stream && claim.value.stream.source;
+ return source ? source.contentType : undefined;
+ });
+};
+
export const selectIsFetchingClaimListMine = createSelector(
_selectState,
state => !!state.isFetchingClaimListMine
diff --git a/ui/js/selectors/content.js b/ui/js/selectors/content.js
index 3bf6926a6..0818134de 100644
--- a/ui/js/selectors/content.js
+++ b/ui/js/selectors/content.js
@@ -17,12 +17,16 @@ export const selectResolvingUris = createSelector(
state => state.resolvingUris || []
);
-const selectResolvingUri = (state, props) => {
- return selectResolvingUris(state).indexOf(props.uri) != -1;
-};
+export const selectPlayingUri = createSelector(
+ _selectState,
+ state => state.playingUri
+);
-export const makeSelectIsResolvingForUri = () => {
- return createSelector(selectResolvingUri, resolving => resolving);
+export const makeSelectIsUriResolving = uri => {
+ return createSelector(
+ selectResolvingUris,
+ resolvingUris => resolvingUris && resolvingUris.indexOf(uri) != -1
+ );
};
export const selectChannelPages = createSelector(
@@ -30,12 +34,8 @@ export const selectChannelPages = createSelector(
state => state.channelPages || {}
);
-const selectTotalPagesForChannel = (state, props) => {
- return selectChannelPages(state)[props.uri];
-};
-
-export const makeSelectTotalPagesForChannel = () => {
- return createSelector(selectTotalPagesForChannel, totalPages => totalPages);
+export const makeSelectTotalPagesForChannel = uri => {
+ return createSelector(selectChannelPages, byUri => byUri && byUri[uri]);
};
export const selectRewardContentClaimIds = createSelector(
diff --git a/ui/js/selectors/cost_info.js b/ui/js/selectors/cost_info.js
index b40d62d5e..d7c17cefa 100644
--- a/ui/js/selectors/cost_info.js
+++ b/ui/js/selectors/cost_info.js
@@ -8,12 +8,11 @@ export const selectAllCostInfoByUri = createSelector(
state => state.byUri || {}
);
-export const selectCostInfoForUri = (state, props) => {
- return selectAllCostInfoByUri(state)[props.uri];
-};
-
-export const makeSelectCostInfoForUri = () => {
- return createSelector(selectCostInfoForUri, costInfo => costInfo);
+export const makeSelectCostInfoForUri = uri => {
+ return createSelector(
+ selectAllCostInfoByUri,
+ costInfos => costInfos && costInfos[uri]
+ );
};
export const selectCostForCurrentPageUri = createSelector(
@@ -28,10 +27,9 @@ export const selectFetchingCostInfo = createSelector(
state => state.fetching || {}
);
-const selectFetchingCostInfoForUri = (state, props) => {
- return selectFetchingCostInfo(state)[props.uri];
-};
-
-export const makeSelectFetchingCostInfoForUri = () => {
- return createSelector(selectFetchingCostInfoForUri, fetching => !!fetching);
+export const makeSelectFetchingCostInfoForUri = uri => {
+ return createSelector(
+ selectFetchingCostInfo,
+ fetchingByUri => fetchingByUri && fetchingByUri[uri]
+ );
};
diff --git a/ui/js/selectors/file_info.js b/ui/js/selectors/file_info.js
index 1b3dc7982..431454dfc 100644
--- a/ui/js/selectors/file_info.js
+++ b/ui/js/selectors/file_info.js
@@ -26,17 +26,17 @@ export const selectIsFetchingFileListDownloadedOrPublished = createSelector(
isFetchingFileList || isFetchingClaimListMine
);
-export const selectFileInfoForUri = (state, props) => {
- const claims = selectClaimsByUri(state),
- claim = claims[props.uri],
- byOutpoint = selectFileInfosByOutpoint(state),
- outpoint = claim ? `${claim.txid}:${claim.nout}` : undefined;
+export const makeSelectFileInfoForUri = uri => {
+ return createSelector(
+ selectClaimsByUri,
+ selectFileInfosByOutpoint,
+ (claims, byOutpoint) => {
+ const claim = claims[uri],
+ outpoint = claim ? `${claim.txid}:${claim.nout}` : undefined;
- return outpoint ? byOutpoint[outpoint] : undefined;
-};
-
-export const makeSelectFileInfoForUri = () => {
- return createSelector(selectFileInfoForUri, fileInfo => fileInfo);
+ return outpoint ? byOutpoint[outpoint] : undefined;
+ }
+ );
};
export const selectDownloadingByOutpoint = createSelector(
@@ -44,19 +44,14 @@ export const selectDownloadingByOutpoint = createSelector(
state => state.downloadingByOutpoint || {}
);
-const selectDownloadingForUri = (state, props) => {
- const byOutpoint = selectDownloadingByOutpoint(state);
- const fileInfo = selectFileInfoForUri(state, props);
-
- if (!fileInfo) return false;
-
- return byOutpoint[fileInfo.outpoint];
-};
-
-export const makeSelectDownloadingForUri = () => {
+export const makeSelectDownloadingForUri = uri => {
return createSelector(
- selectDownloadingForUri,
- downloadingForUri => !!downloadingForUri
+ selectDownloadingByOutpoint,
+ makeSelectFileInfoForUri(uri),
+ (byOutpoint, fileInfo) => {
+ if (!fileInfo) return false;
+ return byOutpoint[fileInfo.outpoint];
+ }
);
};
@@ -65,13 +60,8 @@ export const selectUrisLoading = createSelector(
state => state.urisLoading || {}
);
-const selectLoadingForUri = (state, props) => {
- const byUri = selectUrisLoading(state);
- return byUri[props.uri];
-};
-
-export const makeSelectLoadingForUri = () => {
- return createSelector(selectLoadingForUri, loading => !!loading);
+export const makeSelectLoadingForUri = uri => {
+ return createSelector(selectUrisLoading, byUri => byUri && byUri[uri]);
};
export const selectFileInfosPendingPublish = createSelector(
diff --git a/ui/js/selectors/navigation.js b/ui/js/selectors/navigation.js
index ca95e259f..b5eb98ade 100644
--- a/ui/js/selectors/navigation.js
+++ b/ui/js/selectors/navigation.js
@@ -10,8 +10,11 @@ export const selectCurrentPath = createSelector(
state => state.currentPath
);
+export const computePageFromPath = path =>
+ path.replace(/^\//, "").split("?")[0];
+
export const selectCurrentPage = createSelector(selectCurrentPath, path => {
- return path.replace(/^\//, "").split("?")[0];
+ return computePageFromPath(path);
});
export const selectCurrentParams = createSelector(selectCurrentPath, path => {
@@ -21,6 +24,13 @@ export const selectCurrentParams = createSelector(selectCurrentPath, path => {
return parseQueryParams(path.split("?")[1]);
});
+export const makeSelectCurrentParam = param => {
+ return createSelector(
+ selectCurrentParams,
+ params => (params ? params[param] : undefined)
+ );
+};
+
export const selectHeaderLinks = createSelector(selectCurrentPage, page => {
// This contains intentional fall throughs
switch (page) {
@@ -80,7 +90,7 @@ export const selectPageTitle = createSelector(
case "start":
return __("Start");
case "publish":
- return __("Publish");
+ return params.id ? __("Edit") : __("Publish");
case "help":
return __("Help");
case "developer":
diff --git a/ui/js/selectors/rewards.js b/ui/js/selectors/rewards.js
index c2a646563..f9fbc4fe4 100644
--- a/ui/js/selectors/rewards.js
+++ b/ui/js/selectors/rewards.js
@@ -19,6 +19,15 @@ export const selectClaimedRewards = createSelector(
byId => Object.values(byId) || []
);
+export const selectClaimedRewardsByTransactionId = createSelector(
+ selectClaimedRewards,
+ rewards =>
+ rewards.reduce((map, reward) => {
+ map[reward.transaction_id] = reward;
+ return map;
+ }, {})
+);
+
export const selectUnclaimedRewards = createSelector(
selectUnclaimedRewardsByType,
byType =>
diff --git a/ui/js/selectors/search.js b/ui/js/selectors/search.js
index e3c6fbb4a..9b967d66e 100644
--- a/ui/js/selectors/search.js
+++ b/ui/js/selectors/search.js
@@ -1,11 +1,16 @@
import { createSelector } from "reselect";
-import { selectPageTitle, selectCurrentPage } from "selectors/navigation";
+import {
+ selectPageTitle,
+ selectCurrentPage,
+ selectCurrentParams,
+} from "selectors/navigation";
export const _selectState = state => state.search || {};
export const selectSearchQuery = createSelector(
- _selectState,
- state => state.query
+ selectCurrentPage,
+ selectCurrentParams,
+ (page, params) => (page === "search" ? params && params.query : null)
);
export const selectIsSearching = createSelector(
@@ -36,45 +41,49 @@ export const selectWunderBarAddress = createSelector(
(page, title, query) => (page != "search" ? title : query ? query : title)
);
-export const selectWunderBarIcon = createSelector(selectCurrentPage, page => {
- switch (page) {
- case "auth":
- return "icon-user";
- case "search":
- return "icon-search";
- case "settings":
- return "icon-gear";
- case "help":
- return "icon-question";
- case "report":
- return "icon-file";
- case "downloaded":
- return "icon-folder";
- case "published":
- return "icon-folder";
- case "history":
- return "icon-history";
- case "send":
- return "icon-send";
- case "rewards":
- return "icon-rocket";
- case "invite":
- return "icon-envelope-open";
- case "address":
- case "receive":
- return "icon-address-book";
- case "wallet":
- case "backup":
- return "icon-bank";
- case "show":
- return "icon-file";
- case "publish":
- return "icon-upload";
- case "developer":
- return "icon-code";
- case "discover":
- return "icon-home";
- default:
- return "icon-file";
+export const selectWunderBarIcon = createSelector(
+ selectCurrentPage,
+ selectCurrentParams,
+ (page, params) => {
+ switch (page) {
+ case "auth":
+ return "icon-user";
+ case "search":
+ return "icon-search";
+ case "settings":
+ return "icon-gear";
+ case "help":
+ return "icon-question";
+ case "report":
+ return "icon-file";
+ case "downloaded":
+ return "icon-folder";
+ case "published":
+ return "icon-folder";
+ case "history":
+ return "icon-history";
+ case "send":
+ return "icon-send";
+ case "rewards":
+ return "icon-rocket";
+ case "invite":
+ return "icon-envelope-open";
+ case "address":
+ case "receive":
+ return "icon-address-book";
+ case "wallet":
+ case "backup":
+ return "icon-bank";
+ case "show":
+ return "icon-file";
+ case "publish":
+ return params.id ? __("icon-pencil") : __("icon-upload");
+ case "developer":
+ return "icon-code";
+ case "discover":
+ return "icon-home";
+ default:
+ return "icon-file";
+ }
}
-});
+);
diff --git a/ui/js/selectors/settings.js b/ui/js/selectors/settings.js
index 10b9191df..5bf7f7f74 100644
--- a/ui/js/selectors/settings.js
+++ b/ui/js/selectors/settings.js
@@ -1,3 +1,4 @@
+import * as settings from "constants/settings";
import { createSelector } from "reselect";
const _selectState = state => state.settings || {};
@@ -24,12 +25,15 @@ export const selectSettingsIsGenerous = createSelector(
settings => settings && settings.is_generous_host
);
-export const selectShowNsfw = createSelector(
- selectClientSettings,
- clientSettings => !!clientSettings.showNsfw
-);
+//refactor me
+export const selectShowNsfw = makeSelectClientSetting(settings.SHOW_NSFW);
export const selectLanguages = createSelector(
_selectState,
state => state.languages || {}
);
+
+export const selectThemePath = createSelector(
+ makeSelectClientSetting(settings.THEME),
+ theme => "themes/" + (theme || "light") + ".css"
+);
diff --git a/ui/js/selectors/wallet.js b/ui/js/selectors/wallet.js
index 54dacbe26..fbf63770f 100644
--- a/ui/js/selectors/wallet.js
+++ b/ui/js/selectors/wallet.js
@@ -7,30 +7,70 @@ export const selectBalance = createSelector(
state => state.balance
);
-export const selectTransactions = createSelector(
- _selectState,
- state => state.transactions || {}
-);
-
export const selectTransactionsById = createSelector(
- selectTransactions,
- transactions => transactions.byId || {}
+ _selectState,
+ state => state.transactions
);
export const selectTransactionItems = createSelector(
selectTransactionsById,
byId => {
- const transactionItems = [];
- const txids = Object.keys(byId);
- txids.forEach(txid => {
+ const items = [];
+
+ Object.keys(byId).forEach(txid => {
const tx = byId[txid];
- transactionItems.push({
- id: txid,
- date: tx.timestamp ? new Date(parseInt(tx.timestamp) * 1000) : null,
- amount: parseFloat(tx.value),
- });
+
+ //ignore dust/fees
+ if (Math.abs(tx.amount) === Math.abs(tx.fee)) {
+ return;
+ }
+
+ let append = [];
+
+ append.push(
+ ...tx.claim_info.map(item =>
+ Object.assign({}, item, {
+ type: item.claim_name[0] === "@" ? "channel" : "publish",
+ })
+ )
+ );
+ append.push(
+ ...tx.support_info.map(item =>
+ Object.assign({}, item, { type: !item.is_tip ? "support" : "tip" })
+ )
+ );
+ append.push(
+ ...tx.update_info.map(item =>
+ Object.assign({}, item, { type: "update" })
+ )
+ );
+
+ if (!append.length) {
+ append.push(
+ Object.assign({}, tx, {
+ type: tx.value < 0 ? "spend" : "receive",
+ })
+ );
+ }
+
+ items.push(
+ ...append.map(item => {
+ const amount = parseFloat(item.value || -1 * item.amount); //it's value on a transaction, amount on an outpoint (which has the sign the opposite way)
+
+ return {
+ txid: txid,
+ date: tx.timestamp ? new Date(parseInt(tx.timestamp) * 1000) : null,
+ amount: amount,
+ fee: amount < 0 ? -1 * tx.fee / append.length : 0,
+ claim_id: item.claim_id,
+ claim_name: item.claim_name,
+ type: item.type || "send",
+ nout: item.nout,
+ };
+ })
+ );
});
- return transactionItems.reverse();
+ return items.reverse();
}
);
@@ -57,6 +97,11 @@ export const selectIsFetchingTransactions = createSelector(
state => state.fetchingTransactions
);
+export const selectIsSendingSupport = createSelector(
+ _selectState,
+ state => state.sendingSupport
+);
+
export const selectReceiveAddress = createSelector(
_selectState,
state => state.receiveAddress
diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss
deleted file mode 100644
index 9a838b2d7..000000000
--- a/ui/scss/_global.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-@charset "UTF-8";
-
-$spacing-vertical: 24px;
-
-$padding-button: $spacing-vertical * 2/3;
-$padding-text-link: 0px;
-
-$color-primary: #155B4A;
-$color-primary-light: saturate(lighten($color-primary, 50%), 20%);
-$color-light-alt: hsl(hue($color-primary), 15, 85);
-$color-text-dark: #000;
-$color-black-transparent: rgba(32,32,32,0.9);
-$color-help: rgba(0,0,0,.6);
-$color-notice: #8a6d3b;
-$color-error: #a94442;
-$color-load-screen-text: #c3c3c3;
-$color-canvas: #f5f5f5;
-$color-bg: #ffffff;
-$color-bg-alt: #D9D9D9;
-$color-money: #216C2A;
-$color-meta-light: #505050;
-$color-form-border: rgba(160,160,160,.5);
-
-$font-size: 16px;
-$font-line-height: 1.3333;
-
-$mobile-width-threshold: 801px;
-$max-content-width: 1000px;
-$max-text-width: 660px;
-
-$width-page-constrained: 800px;
-$width-input-text: 330px;
-
-$height-button: $spacing-vertical * 1.5;
-$height-header: $spacing-vertical * 2.5;
-$height-video-embedded: $width-page-constrained * 9 / 16;
-
-$box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-$box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
-
-$transition-standard: .225s ease;
-
-$blur-intensity-nsfw: 20px;
-
-@mixin clearfix()
-{
- &:before, &:after
- {
- content: " ";
- display: table;
- }
- &:after
- {
- clear: both;
- }
-}
-
-@mixin border-radius($radius)
-{
- -webkit-border-radius: $radius;
- -moz-border-radius: $radius;
- -ms-border-radius: $radius;
- border-radius: $radius;
-}
-
-@mixin placeholder-color($color) {
- /*do not group these it breaks because CSS*/
- &:-moz-placeholder {
- color: $color;
- }
- &::-moz-placeholder {
- color: $color;
- }
- &:-ms-input-placeholder {
- color: $color;
- }
- &::-webkit-input-placeholder {
- color: $color;
- }
-}
-
-@mixin display-flex()
-{
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-}
-
-@mixin flex($columns)
-{
- -webkit-flex: $columns;
- -moz-flex: $columns;
- -ms-flex: $columns;
- flex: $columns;
-}
-
-@mixin flex-flow($flow) {
- -webkit-flex-flow: $flow;
- -moz-flex-flow: $flow;
- -ms-flex-flow: $flow;
- flex-flow: $flow;
-}
-
-@mixin flex-direction($direction) {
- -webkit-flex-direction: $direction;
- -moz-flex-direction: $direction;
- -ms-flex-direction: $direction;
- flex-direction: $direction;
-}
-
-@mixin absolute-center()
-{
- @include display-flex();
- -webkit-box-align: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- -webkit-box-pack: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
-}
-
-@mixin linear-gradient($from-color, $to-color) {
- background-color: $to-color; /* Fallback Color */
- background-image: -webkit-linear-gradient(top, $from-color, $to-color); /* Chrome 10+, Saf5.1+, iOS 5+ */
- background-image: -moz-linear-gradient(top, $from-color, $to-color); /* FF3.6 */
- background-image: -ms-linear-gradient(top, $from-color, $to-color); /* IE10 */
- background-image: linear-gradient(top, $from-color, $to-color);
-}
-
-@mixin box-sizing( $type: border-box ) {
- -webkit-box-sizing: $type;
- -moz-box-sizing: $type;
- -o-box-sizing: $type;
- -ms-box-sizing: $type;
- box-sizing: $type;
-}
-
-@mixin background-size ($size) {
- -webkit-background-size: $size;
- -moz-background-size: $size;
- -o-background-size: $size;
- background-size: $size;
-}
-
-@mixin placeholder {
- &::-webkit-input-placeholder {@content}
- &:-moz-placeholder {@content}
- &:-ms-input-placeholder {@content}
-}
-
-@mixin offscreen() {
- position: absolute;
- left: -9999px;
- top:auto;
- width:1px;
- height:1px;
- overflow:hidden;
-}
-
-@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
- .icon
- {
- &:first-child {
- padding-right: 5px;
- }
- &:last-child:not(:only-child) {
- padding-left: 5px;
- }
- }
-
- &:not(.no-underline) {
- text-decoration: underline;
- .icon {
- text-decoration: none;
- }
- }
- &:hover
- {
- opacity: $hover-opacity;
- transition: opacity $transition-standard;
- text-decoration: underline;
- .icon {
- text-decoration: none;
- }
- }
-
- color: $color;
- cursor: pointer;
-}
\ No newline at end of file
diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss
index 338ccac3c..90b3212bc 100644
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@@ -1,40 +1,42 @@
-@import "global";
-
html
{
height: 100%;
- font-size: $font-size;
+ font-size: var(--font-size);
}
body
{
+ color: var(--text-color);
font-family: 'Source Sans Pro', sans-serif;
- line-height: $font-line-height;
+ line-height: var(--font-line-height);
+}
+
+/* Custom text selection */
+*::selection {
+ background: var(--text-selection-bg);
+ color: var(--text-selection-color);
}
#window
{
min-height: 100vh;
- background: $color-canvas;
+ background: var(--window-bg);
}
-.badge
-{
- background: $color-money;
- display: inline-block;
- padding: 2px;
- color: white;
- border-radius: 2px;
-}
.credit-amount--indicator
{
font-weight: bold;
- color: $color-money;
+ color: var(--color-money);
+}
+.credit-amount--fee
+{
+ font-size: 0.9em;
+ color: var(--color-meta-light);
}
#main-content
{
padding: $spacing-vertical;
- margin-top: $height-header;
+ margin-top: var(--header-height);
display: flex;
flex-direction: column;
main {
@@ -47,7 +49,8 @@ body
width: $width-page-constrained;
}
}
-main.main--refreshing {
+
+.reloading {
&:before {
$width: 30px;
position: absolute;
@@ -87,7 +90,7 @@ sub { top: 0.4em; }
code {
font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace;
- background-color: #eee;
+ background-color: var(--color-bg-alt);
}
p
@@ -136,18 +139,18 @@ p
.help {
font-size: .85em;
- color: $color-help;
+ color: var(--color-help);
}
.meta
{
font-size: 0.9em;
- color: $color-meta-light;
+ color: var(--color-meta-light);
}
.empty
{
- color: $color-meta-light;
+ color:var(--color-meta-light);
font-style: italic;
}
@@ -167,7 +170,7 @@ p
text-align: right;
line-height: 1;
font-size: 0.85em;
- color: $color-help;
+ color: var(--color-help);
}
section.section-spaced {
diff --git a/ui/scss/_icons.scss b/ui/scss/_icons.scss
index 508e927c4..537531e19 100644
--- a/ui/scss/_icons.scss
+++ b/ui/scss/_icons.scss
@@ -1,5 +1,3 @@
-@import "global";
-
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=4.7.0');
diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
new file mode 100644
index 000000000..0a86d1d76
--- /dev/null
+++ b/ui/scss/_vars.scss
@@ -0,0 +1,128 @@
+/*
+Both of these should probably die and become variables as well
+ */
+$spacing-vertical: 24px;
+$width-page-constrained: 800px;
+$text-color: #000;
+
+:root {
+
+ /* Colors */
+ --color-brand: #155B4A;
+ --color-primary: #155B4A;
+ --color-primary-light: saturate(lighten(#155B4A, 50%), 20%);
+ --color-light-alt: hsl(hue(#155B4A), 15, 85);
+ --color-dark-overlay: rgba(32,32,32,0.9);
+ --color-help: rgba(0,0,0,.6);
+ --color-notice: #8a6d3b;
+ --color-error: #a94442;
+ --color-load-screen-text: #c3c3c3;
+ --color-meta-light: #505050;
+ --color-money: #216C2A;
+ --color-download: #444;
+ --color-canvas: #f5f5f5;
+ --color-bg: #ffffff;
+ --color-bg-alt: #D9D9D9;
+
+
+ /* Misc */
+ --content-max-width: 1000px;
+ --nsfw-blur-intensity: 20px;
+ --height-video-embedded: $width-page-constrained * 9 / 16 ;
+
+ /* Font */
+ --font-size: 16px;
+ --font-line-height: 1.3333;
+ --font-size-subtext-multiple: 0.82;
+
+ /* Shadows */
+ --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+ --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
+
+ /* Transition */
+ --transition-duration: .225s;
+ --transition-type: ease;
+
+ /* Text */
+ --text-color: $text-color;
+ --text-help-color: #EEE;
+ --text-max-width: 660px;
+ --text-link-padding: 4px;
+ --text-selection-bg: rgba(saturate(lighten(#155B4A, 20%), 20%), 1); // temp color
+ --text-selection-color: #FFF;
+
+ /* Window */
+ --window-bg: var(--color-canvas);
+
+ /* Input */
+ --input-bg: transparent;
+ --input-active-bg: transparent;
+ --input-width: 330px;
+ --input-color: var(--text-color);
+ --input-border-size: 2px;
+ --input-border-color: rgba(0,0,0,.25);
+
+ /* Select */
+ --select-bg: var(--color-bg-alt);
+ --select-color: var(--text-color);
+
+ /* Button */
+ --button-bg: var(--color-bg-alt);
+ --button-color: #FFF;
+ --button-primary-bg: var(--color-primary);
+ --button-primary-color: #FFF;
+ --button-padding: $spacing-vertical * 2/3;
+ --button-height: $spacing-vertical * 1.5;
+ --button-intra-margin: $spacing-vertical;
+
+ /* Header */
+ --header-bg: var(--color-bg);
+ --header-color: #666;
+ --header-active-color: rgba(0,0,0, 0.85);
+ --header-height: $spacing-vertical * 2.5;
+ --header-button-bg: var(--button-bg);
+
+ /* Header -> search */
+ --search-bg: rgba(255, 255, 255, 0.7);
+ --search-border:1px solid #ccc;
+ --search-color: #666;
+ --search-active-color: var(--header-active-color);
+
+ /* Tabs */
+ --tab-bg: transparent;
+ --tab-color: #666;
+ --tab-active-color: var(--header-active-color);
+ --tab-border-size: 2px;
+ --tab-border: var(--tab-border-size) solid var(--tab-active-color);
+
+ /* Table */
+ --table-border: 1px solid #e2e2e2;
+ --table-item-even: white;
+ --table-item-odd: #f4f4f4;
+
+ /* Card */
+ --card-bg: var(--color-bg);
+ --card-hover-translate: 10px;
+ --card-margin: $spacing-vertical * 2/3;
+ --card-max-width: $width-page-constrained;
+ --card-padding: $spacing-vertical * 2/3;
+ --card-radius: 2px;
+ --card-link-scaling: 1.1;
+ --card-small-width: $spacing-vertical * 10;
+
+ /* Modal */
+ --modal-bg: var(--color-bg);
+ --modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5
+ --modal-border: 1px solid rgb(204, 204, 204);
+
+ /* Menu */
+ --menu-bg: var(--color-bg);
+ --menu-radius: 2px;
+ --menu-item-hover-bg: var(--color-bg-alt);
+
+ /* Tooltip */
+ --tooltip-width: 300px;
+ --tooltip-bg: var(--color-bg);
+ --tooltip-color: var(--text-color);
+ --tooltip-border: 1px solid #aaa;
+}
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index d899566ab..69656fa41 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -1,10 +1,12 @@
+@charset "UTF-8";
@import "_reset";
+@import "_vars";
@import "_icons";
@import "_gui";
@import "component/_table";
@import "component/_button.scss";
@import "component/_card.scss";
-@import "component/_file-actions.scss";
+@import "component/_file-download.scss";
@import "component/_file-selector.scss";
@import "component/_file-tile.scss";
@import "component/_form-field.scss";
@@ -18,6 +20,6 @@
@import "component/_snack-bar.scss";
@import "component/_video.scss";
@import "component/_pagination.scss";
+@import "component/_markdown-editor.scss";
@import "page/_developer.scss";
-@import "page/_reward.scss";
@import "page/_show.scss";
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index cd00b8fe4..28075c123 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -1,4 +1,4 @@
-@import "../global";
+@import "../mixin/link.scss";
$button-focus-shift: 12%;
@@ -8,15 +8,15 @@ $button-focus-shift: 12%;
+ .button-set-item
{
- margin-left: $spacing-vertical;
+ margin-left: var(--button-intra-margin);
}
}
.button-block, .faux-button-block
{
display: inline-block;
- height: $height-button;
- line-height: $height-button;
+ height: var(--button-height);
+ line-height: var(--button-height);
text-decoration: none;
border: 0 none;
text-align: center;
@@ -46,25 +46,26 @@ $button-focus-shift: 12%;
}
.button__content {
- margin: 0 $padding-button;
+ margin: 0 var(--button-padding);
}
.button-primary
{
- $color-button-text: white;
- color: darken($color-button-text, $button-focus-shift * 0.5);
- background-color: $color-primary;
- box-shadow: $box-shadow-layer;
+
+ color: var(--button-primary-color);
+ background-color: var(--button-primary-bg);
+ box-shadow: var(--box-shadow-layer);
+
&:focus {
- color: $color-button-text;
+ //color: var(--button-primary-active-color);
+ //background-color:color: var(--button-primary-active-bg);
//box-shadow: $box-shadow-focus;
- background-color: mix(black, $color-primary, $button-focus-shift)
}
}
.button-alt
{
- background-color: $color-bg-alt;
- box-shadow: $box-shadow-layer;
+ background-color: var(--button-bg);
+ box-shadow: var(--box-shadow-layer);
}
.button-text
@@ -73,15 +74,15 @@ $button-focus-shift: 12%;
display: inline-block;
.button__content {
- margin: 0 $padding-text-link;
+ margin: 0 var(--text-link-padding);
}
}
.button-text-help
{
- @include text-link(#aaa);
+ @include text-link(var(--text-help-color));
font-size: 0.8em;
}
.button--flat
{
box-shadow: none !important;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 81959a4b4..0562b4040 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -1,33 +1,29 @@
-@import "../global";
-
-$padding-card-horizontal: $spacing-vertical * 2/3;
-$translate-card-hover: 10px;
-$width-card-small: $spacing-vertical * 10;
-
.card {
margin-left: auto;
margin-right: auto;
- max-width: $width-page-constrained;
- background: $color-bg;
- box-shadow: $box-shadow-layer;
- border-radius: 2px;
- margin-bottom: $spacing-vertical * 2/3;
+ max-width: var(--card-max-width);
+ background: var(--card-bg);
+ box-shadow: var(--box-shadow-layer);
+ border-radius: var(--card-radius);
+ margin-bottom: var(--card-margin);
overflow: auto;
+
+ //below added to prevent scrollbar on long titles when show page loads, would prefer a cleaner CSS solution
+ overflow-x: hidden;
}
.card--obscured
{
position: relative;
}
.card--obscured .card__inner {
- filter: blur($blur-intensity-nsfw);
+ filter: blur( var(--nsfw-blur-intensity) );
}
.card__title-primary,
.card__title-identity,
.card__content,
.card__subtext,
.card__actions {
- padding-left: $padding-card-horizontal;
- padding-right: $padding-card-horizontal;
+ padding: 0 var(--card-padding);
}
.card--small {
.card__title-primary,
@@ -35,29 +31,48 @@ $width-card-small: $spacing-vertical * 10;
.card__actions,
.card__content,
.card__subtext {
- padding: 0 $padding-card-horizontal / 2;
+ padding: 0 calc(var(--card-padding) / 2);
}
}
.card__title-primary {
- margin-top: $spacing-vertical * 2/3;
- margin-bottom: $spacing-vertical * 2/3;
+ margin-top: var(--card-margin);
+ margin-bottom: var(--card-margin);
+}
+.card__title-primary .meta {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.card__title-identity {
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
}
.card__actions {
- margin-top: $spacing-vertical * 2/3;
- margin-bottom: $spacing-vertical * 2/3;
+ margin-top: var(--card-margin);
+ margin-bottom: var(--card-margin);
+}
+.card__actions--bottom {
+ margin-top: $spacing-vertical * 1/3;
+ margin-bottom: $spacing-vertical * 1/3;
+}
+.card__actions--form-submit {
+ margin-top: $spacing-vertical;
+ margin-bottom: var(--card-margin);
+}
+.card__action--right {
+ float: right;
}
.card__content {
- margin-top: $spacing-vertical * 2/3;
- margin-bottom: $spacing-vertical * 2/3;
+ margin-top: var(--card-margin);
+ margin-bottom: var(--card-margin);
+ table:not(:last-child) {
+ margin-bottom: var(--card-margin);
+ }
}
$font-size-subtext-multiple: 0.82;
.card__subtext {
- color: $color-meta-light;
- font-size: $font-size-subtext-multiple * 1.0em;
+ color: var(--color-meta-light);
+ font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
}
@@ -65,7 +80,7 @@ $font-size-subtext-multiple: 0.82;
white-space: pre-wrap;
}
.card__subtext--two-lines {
- height: $font-size * $font-size-subtext-multiple * $font-line-height * 2; /*this is so one line text still has the proper height*/
+ height: calc( var(--font-size) * var(--font-size-subtext-multiple) * var(--font-line-height) * 2); /*this is so one line text still has the proper height*/
}
.card-overlay {
position: absolute;
@@ -74,16 +89,16 @@ $font-size-subtext-multiple: 0.82;
top: 0px;
bottom: 0px;
padding: 20px;
- background-color: rgba(128, 128, 128, 0.8);
+ background-color: var(--color-dark-overlay);
color: #fff;
display: flex;
align-items: center;
font-weight: 600;
}
-$card-link-scaling: 1.1;
.card__link {
display: block;
+ cursor: pointer;
}
.card--link {
transition: transform 120ms ease-in-out;
@@ -91,14 +106,14 @@ $card-link-scaling: 1.1;
.card--link:hover {
position: relative;
z-index: 1;
- box-shadow: $box-shadow-focus;
- transform: scale($card-link-scaling) translateX($translate-card-hover);
+ box-shadow: var(--box-shadow-focus);
+ transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
transform-origin: 50% 50%;
overflow-x: visible;
overflow-y: visible
}
.card--link:hover ~ .card--link {
- transform: translateX($translate-card-hover * 2);
+ transform: translateX(calc(var(--card-hover-translate) * 2));
}
.card__media {
@@ -152,33 +167,30 @@ $card-link-scaling: 1.1;
position: absolute;
top: 36%
}
-
-
-
.card--small {
- width: $width-card-small;
+ width: var(--card-small-width);
overflow-x: hidden;
white-space: normal;
}
.card--small .card__media {
- height: $width-card-small * 9 / 16;
+ height: calc( var(--card-small-width) * 9 / 16);
}
.card--form {
- width: $width-input-text + $padding-card-horizontal * 2;
+ width: calc( var(--input-width) + var(--card-padding) * 2);
}
.card__subtitle {
- color: $color-help;
+ color: var(--color-help);
font-size: 0.85em;
- line-height: $font-line-height * 1 / 0.85;
+ line-height: calc( var(--font-line-height) * 1 / 0.85);
}
.card-series-submit
{
margin-left: auto;
margin-right: auto;
- max-width: $width-page-constrained;
+ max-width: var(--card-max-width);
padding: $spacing-vertical / 2;
}
@@ -187,8 +199,10 @@ $card-link-scaling: 1.1;
margin-top: $spacing-vertical * 1/3;
}
}
+
$padding-top-card-hover-hack: 20px;
$padding-right-card-hover-hack: 30px;
+
.card-row__items {
width: 100%;
overflow: hidden;
@@ -211,7 +225,7 @@ $padding-right-card-hover-hack: 30px;
overflow: hidden;
white-space: nowrap;
width: 100%;
- min-width: $width-card-small;
+ min-width: var(--card-small-width);
margin-right: $spacing-vertical;
}
.card-row__header {
@@ -226,14 +240,14 @@ $padding-right-card-hover-hack: 30px;
.card-row__nav {
position: absolute;
- padding: 0 $spacing-vertical * 2 / 3;
+ padding: 0 var(--card-margin);
height: 100%;
- top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
+ top: calc( $padding-top-card-hover-hack - var(--card-margin) );
}
.card-row__nav .card-row__scroll-button {
- background: $color-bg;
- color: $color-help;
- box-shadow: $box-shadow-layer;
+ background: var(--card-bg);
+ color: var(--color-help);
+ box-shadow: var(--box-shadow-layer);
padding: $spacing-vertical $spacing-vertical / 2;
position: absolute;
cursor: pointer;
@@ -245,7 +259,7 @@ $padding-right-card-hover-hack: 30px;
&:hover {
opacity: 1.0;
- transform: scale($card-link-scaling * 1.1)
+ transform: scale(calc( var(--card-link-scaling) * 1.1));
}
}
.card-row__nav--left {
@@ -259,7 +273,6 @@ $padding-right-card-hover-hack: 30px;
color: orangered;
}
-
/*
if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
*/
diff --git a/ui/scss/component/_channel-indicator.scss b/ui/scss/component/_channel-indicator.scss
index 52a0baed6..2e80c096e 100644
--- a/ui/scss/component/_channel-indicator.scss
+++ b/ui/scss/component/_channel-indicator.scss
@@ -1,5 +1,4 @@
-@import "../global";
.channel-indicator__icon--invalid {
- color: $color-error;
+ color: var(--color-error);
}
diff --git a/ui/scss/component/_file-actions.scss b/ui/scss/component/_file-actions.scss
deleted file mode 100644
index 4eda16b51..000000000
--- a/ui/scss/component/_file-actions.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "../global";
-
-$color-download: #444;
-
-.file-actions
-{
- line-height: $height-button;
- min-height: $height-button;
-}
-
-.file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
- .button__content {
- margin: 0 $padding-text-link;
- }
-}
-
-.file-actions__download-status-bar
-{
- position: relative;
- color: $color-download;
-}
-.file-actions__download-status-bar-overlay
-{
- background: $color-download;
- color: white;
- position: absolute;
- white-space: nowrap;
- overflow: hidden;
- z-index: 1;
- top: 0px;
- left: 0px;
-}
\ No newline at end of file
diff --git a/ui/scss/component/_file-download.scss b/ui/scss/component/_file-download.scss
new file mode 100644
index 000000000..13ce6e1f3
--- /dev/null
+++ b/ui/scss/component/_file-download.scss
@@ -0,0 +1,32 @@
+.file-download, .file-download__overlay {
+ .button__content {
+ margin: 0 var(--text-link-padding);
+ }
+}
+
+.file-download
+{
+ position: relative;
+ color: var(--color-download);
+}
+.file-download__overlay
+{
+ background: var(--color-download);
+ color: white;
+ position: absolute;
+ white-space: nowrap;
+ overflow: hidden;
+ z-index: 1;
+ top: 0px;
+ left: 0px;
+}
+
+/*
+
+.file-actions
+{
+ line-height: var(--button-height);
+ min-height: var(--button-height);
+}
+
+ */
\ No newline at end of file
diff --git a/ui/scss/component/_file-tile.scss b/ui/scss/component/_file-tile.scss
index 7630f5517..7341cc606 100644
--- a/ui/scss/component/_file-tile.scss
+++ b/ui/scss/component/_file-tile.scss
@@ -1,4 +1,3 @@
-@import "../global";
$height-file-tile: $spacing-vertical * 6;
.file-tile__row {
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 9dee7240b..86cd8cd34 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -1,6 +1,9 @@
-@import "../global";
-$width-input-border: 2px;
+@mixin placeholder {
+ &::-webkit-input-placeholder {@content}
+ &:-moz-placeholder {@content}
+ &:-ms-input-placeholder {@content}
+}
.form-row-submit
{
@@ -15,7 +18,7 @@ $width-input-border: 2px;
margin-top: $spacing-vertical * 5/6;
margin-bottom: $spacing-vertical * 1/6;
line-height: 1;
- font-size: 0.9 * $font-size;
+ font-size:calc( 0.9 * var(--font-size));
}
.form-row__label-row--prefix {
float: left;
@@ -23,15 +26,17 @@ $width-input-border: 2px;
}
input[type="text"].input-copyable {
- border: 1px solid $color-form-border;
+ background: var(--input-bg);
+ border-bottom: var(--input-border-size) solid var(--input-border-color);
+ color: var(--input-color);
line-height: 1;
padding-top: $spacing-vertical * 1/3;
padding-bottom: $spacing-vertical * 1/3;
- width: $width-input-text;
+ width: var(--input-width);
padding-left: 5px;
padding-right: 5px;
width: 100%;
- &:focus { border-color: black; }
+ &:focus { border-color: var(--color-primary); }
}
.form-field {
@@ -43,14 +48,15 @@ input[type="text"].input-copyable {
}
select {
- transition: outline $transition-standard;
- cursor: pointer;
+ transition: outline var(--transition-duration) var(--transition-type);
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
height: $spacing-vertical;
+ background: var(--select-bg);
+ color: var(--select-color);
&:focus {
- outline: $width-input-border solid $color-primary;
+ outline: var(--input-border-size) solid var(--color-primary);
}
}
@@ -62,16 +68,18 @@ input[type="text"].input-copyable {
input[type="search"],
input[type="date"] {
@include placeholder {
- color: lighten($color-text-dark, 60%);
+ color: lighten($text-color, 60%);
}
- transition: all $transition-standard;
+ transition: all var(--transition-duration) var(--transition-type);
cursor: pointer;
padding-left: 1px;
padding-right: 1px;
box-sizing: border-box;
-webkit-appearance: none;
+ background: var(--input-bg);
+ color: var(--input-color);
&[readonly] {
- background-color: #bbb;
+ background-color: var(--input-bg);
}
}
@@ -81,12 +89,13 @@ input[type="text"].input-copyable {
input[type="number"],
input[type="search"],
input[type="date"] {
- border-bottom: $width-input-border solid $color-form-border;
+ border-bottom: var(--input-border-size) solid var(--input-border-color);
line-height: 1;
padding-top: $spacing-vertical * 1/3;
padding-bottom: $spacing-vertical * 1/3;
+
&.form-field__input--error {
- border-color: $color-error;
+ border-color: var(--color-error);
}
&.form-field__input--inline {
padding-top: 0;
@@ -104,12 +113,13 @@ input[type="text"].input-copyable {
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus {
- border-color: $color-primary;
+ border-color: var(--color-primary);
+ background: var(--input-active-bg);
}
textarea {
padding: 2px;
- border: $width-input-border solid $color-form-border;
+ border: var(--input-border-size) solid var(--input-border-color);
}
}
.form-field--SimpleMDE {
@@ -117,18 +127,20 @@ input[type="text"].input-copyable {
}
.form-field__label {
+ color: var(--color-help);
&[for] { cursor: pointer; }
> input[type="checkbox"], input[type="radio"] {
margin-right: 6px;
}
}
-.form-field__label--error {
- color: $color-error;
+.form-row__label-row .form-field__label--error {
+ /*the row restriction is to prevent coloring checkboxes and radio labels*/
+ color: var(--color-error);
}
.form-field__input-text {
- width: $width-input-text;
+ width: var(--input-width);
}
.form-field__prefix {
@@ -153,16 +165,16 @@ input[type="text"].input-copyable {
.form-field__error, .form-field__helper {
margin-top: $spacing-vertical * 1/3;
font-size: 0.8em;
- transition: opacity $transition-standard;
+ transition: opacity var(--transition-duration) var(--transition-type);
}
.form-field__error {
- color: $color-error;
+ color: var(--color-error);
}
.form-field__helper {
- color: $color-help;
+ color:var(--color-help);
}
.form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll {
height: auto;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 5cc51541e..9428298e2 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -1,15 +1,11 @@
-@import "../global";
-
-$color-header: #666;
-$color-header-active: darken($color-header, 20%);
#header
{
- color: $color-header;
- background: #fff;
+ color: var(--header-color);
+ background: var(--header-bg);
display: flex;
position: fixed;
- box-shadow: $box-shadow-layer;
+ box-shadow: var(--box-shadow-layer);
top: 0;
left: 0;
width: 100%;
@@ -21,7 +17,11 @@ $color-header-active: darken($color-header, 20%);
flex: 0 0 content;
padding-left: $spacing-vertical / 4;
padding-right: $spacing-vertical / 4;
+ .button-alt {
+ background: var(--header-button-bg) !important;
+ }
}
+
.header__item--wunderbar {
flex-grow: 1;
}
@@ -36,23 +36,24 @@ $color-header-active: darken($color-header, 20%);
}
}
-.wunderbar--active .icon-search { color: $color-primary; }
+.wunderbar--active .icon-search { color: var(--color-primary); }
.wunderbar__input {
- background: rgba(255, 255, 255, 0.7);
+ background: var(--search-bg);
width: 100%;
- color: $color-header;
+ color: var(--search-color);
height: $spacing-vertical * 1.5;
line-height: $spacing-vertical * 1.5;
padding-left: 38px;
padding-right: 5px;
- border: 1px solid $color-text-dark;
- @include border-radius(2px);
- border: 1px solid #ccc;
+ border-radius: 2px;
+ border: var(--search-border);
+ transition: box-shadow var(--transition-duration) var(--transition-type);
&:focus {
- color: $color-header-active;
- box-shadow: $box-shadow-focus;
- border-color: $color-primary;
+ background: var(--search-active-bg);
+ color: var(--search-active-color);
+ box-shadow: var(--box-shadow-focus);
+ border-color: var(--color-primary);
}
}
@@ -65,12 +66,12 @@ nav.sub-header
margin-right: auto;
> a
{
- $sub-header-selected-underline-height: 2px;
display: inline-block;
margin: 0 15px;
padding: 0 5px;
- line-height: $height-header - $spacing-vertical - $sub-header-selected-underline-height;
- color: $color-header;
+ line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
+ color: var(--tab-color);
+
&:first-child
{
margin-left: 0;
@@ -81,12 +82,12 @@ nav.sub-header
}
&.sub-header-selected
{
- border-bottom: $sub-header-selected-underline-height solid $color-header-active;
- color: $color-header-active;
+ border-bottom: var(--tab-border);
+ color: var(--tab-active-color);
}
&:hover
{
- color: $color-header-active;
+ color: var(--tab-active-color);
}
}
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_load-screen.scss b/ui/scss/component/_load-screen.scss
index 0caa74f65..cfd369c95 100644
--- a/ui/scss/component/_load-screen.scss
+++ b/ui/scss/component/_load-screen.scss
@@ -1,8 +1,7 @@
-@import "../global";
.load-screen {
color: white;
- background: $color-primary;
+ background: var(--color-brand);
background-size: cover;
min-height: 100vh;
min-width: 100vw;
@@ -19,7 +18,7 @@
}
.load-screen__details {
- color: $color-load-screen-text;
+ color: var(--color-load-screen-text);
}
.load-screen__details--warning {
diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss
new file mode 100644
index 000000000..a2b311f5b
--- /dev/null
+++ b/ui/scss/component/_markdown-editor.scss
@@ -0,0 +1,99 @@
+.CodeMirror {
+ background: var(--input-active-bg) !important;
+ border: 1px solid var(--input-border-color) !important;
+ color: var(--text-color) !important;
+}
+
+.CodeMirror-fullscreen {
+ background: var(--input-bg);
+}
+
+.editor-toolbar {
+ border: 1px solid var(--input-border-color) !important;
+ border-bottom: 0 !important;
+}
+
+.editor-toolbar i.separator {
+ border-color: var(--input-border-color) !important;
+}
+
+.editor-toolbar.fullscreen {
+ background: var(--color-bg) !important;
+}
+
+div.editor-toolbar a {
+ color: var(--text-color) !important;
+}
+
+.editor-toolbar a.active,
+.editor-toolbar a:hover {
+ background: var(--button-bg) !important;
+ border-color: transparent !important;
+}
+
+.editor-toolbar.disabled-for-preview a:not(.no-disable) {
+ background: transparent !important;
+ border-color: transparent !important;
+}
+
+.editor-statusbar {
+ color: #959694;
+}
+
+.editor-preview {
+ background: var(--card-bg) !important;
+}
+
+.editor-preview-side {
+ background: var(--color-bg-alt) !important;
+ border: 1px solid var(--input-border-color) !important;
+}
+
+.editor-preview pre,
+.editor-preview-side pre {
+ background: #eee;
+}
+
+.editor-preview table td,
+.editor-preview table th,
+.editor-preview-side table td,
+.editor-preview-side table th {
+ border: 1px solid var(--input-border-color) !important;
+}
+
+.CodeMirror .CodeMirror-code .cm-tag {
+ color: #63a35c;
+}
+
+.CodeMirror .CodeMirror-code .cm-attribute {
+ color: #795da3;
+}
+
+.CodeMirror .CodeMirror-code .cm-string {
+ color: #183691;
+}
+
+.CodeMirror .CodeMirror-selected {
+ background: var(--text-selection-bg) !important;
+ color: var(--text-selection-color) !important;
+}
+
+.CodeMirror .CodeMirror-cursor{
+ border-color: var(--text-color) !important;
+}
+
+.CodeMirror .CodeMirror-code .cm-comment {
+ background: rgba(0, 0, 0, .05);
+}
+
+.CodeMirror .CodeMirror-code .cm-link {
+ color: #7f8c8d;
+}
+
+.CodeMirror .CodeMirror-code .cm-url {
+ color: #aab2b3;
+}
+
+.CodeMirror .CodeMirror-placeholder {
+ opacity: .5;
+}
diff --git a/ui/scss/component/_menu.scss b/ui/scss/component/_menu.scss
index d8e79be28..19af2af66 100644
--- a/ui/scss/component/_menu.scss
+++ b/ui/scss/component/_menu.scss
@@ -1,4 +1,3 @@
-@import "../global";
$border-radius-menu: 2px;
@@ -9,9 +8,9 @@ $border-radius-menu: 2px;
.menu {
position: absolute;
white-space: nowrap;
- background-color: white;
- box-shadow: $box-shadow-layer;
- border-radius: $border-radius-menu;
+ background-color: var(--menu-bg);
+ box-shadow: var(--box-shadow-layer);
+ border-radius: var(--menu-radius);
padding-top: ($spacing-vertical / 5) 0px;
z-index: 1;
}
@@ -20,6 +19,6 @@ $border-radius-menu: 2px;
display: block;
padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
&:hover {
- background: $color-bg-alt;
+ background: var(--menu-item-hover-bg);
}
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss
index 4ebba6799..cb664e4c1 100644
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@@ -1,4 +1,3 @@
-@import "../global";
.modal-overlay, .error-modal-overlay {
position: fixed;
@@ -10,7 +9,7 @@
left: 0px;
right: 0px;
bottom: 0px;
- background-color: rgba(255, 255, 255, 0.74902);
+ background-color: var(--modal-overlay-bg);
z-index: 9999;
}
@@ -24,12 +23,12 @@
justify-content: center;
align-items: center;
- border: 1px solid rgb(204, 204, 204);
- background: rgb(255, 255, 255);
+ border: var(--modal-border);
+ background: var(--modal-bg);
overflow: auto;
border-radius: 4px;
padding: $spacing-vertical;
- box-shadow: $box-shadow-layer;
+ box-shadow: var(--box-shadow-layer);
max-width: 400px;
word-break: break-word;
@@ -52,7 +51,7 @@
}
.error-modal-overlay {
- background: rgba(#000, .88);
+ background: var(--modal-overlay-bg);
}
.error-modal__content {
@@ -74,7 +73,7 @@
width: 400px;
}
.error-modal__error-list { /*shitty hack/temp fix for long errors making modal unusable*/
- border: 1px solid #eee;
+ border: 1px solid var(--input-border-color);
padding: 8px;
list-style: none;
max-height: 400px;
diff --git a/ui/scss/component/_notice.scss b/ui/scss/component/_notice.scss
index b77ba2a5a..112658987 100644
--- a/ui/scss/component/_notice.scss
+++ b/ui/scss/component/_notice.scss
@@ -1,4 +1,3 @@
-@import "../global";
.notice {
padding: 10px 20px;
diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss
index fd5ca528e..4851f366a 100644
--- a/ui/scss/component/_pagination.scss
+++ b/ui/scss/component/_pagination.scss
@@ -1,4 +1,3 @@
-@import "../global";
.pagination {
display: block;
@@ -32,5 +31,5 @@
.pagination__item--selected {
color: white;
- background: $color-primary;
+ background: var(--color-primary);
}
diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss
index c3df3ab92..acc9f98a6 100644
--- a/ui/scss/component/_snack-bar.scss
+++ b/ui/scss/component/_snack-bar.scss
@@ -1,4 +1,3 @@
-@import "../global";
$padding-snack-horizontal: $spacing-vertical;
@@ -16,7 +15,7 @@ $padding-snack-horizontal: $spacing-vertical;
margin-right: auto;
min-width: 300px;
max-width: 500px;
- background: $color-black-transparent;
+ background: var(--color-dark-overlay);
color: #f0f0f0;
display: flex;
@@ -25,7 +24,7 @@ $padding-snack-horizontal: $spacing-vertical;
border-radius: 2px;
- transition: all $transition-standard;
+ transition: all var(--transition-duration) var(--transition-type);
z-index: 10000; /*hack to get it over react modal */
}
@@ -33,7 +32,7 @@ $padding-snack-horizontal: $spacing-vertical;
.snack-bar__action {
display: inline-block;
text-transform: uppercase;
- color: $color-primary-light;
+ color: var(--color-primary-light);
margin: 0px 0px 0px $padding-snack-horizontal;
min-width: min-content;
&:hover {
diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss
index 38893eae5..59edeb480 100644
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@@ -1,4 +1,3 @@
-@import "../global";
table.table-standard {
word-wrap: break-word;
@@ -20,7 +19,7 @@ table.table-standard {
font-size: 0.9em;
padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
text-align: left;
- border-bottom: 1px solid #e2e2e2;
+ border-bottom: var(--table-border);
img {
vertical-align: text-bottom;
}
@@ -29,7 +28,7 @@ table.table-standard {
}
}
tr.thead:not(:first-child) th {
- border-top: 1px solid #e2e2e2;
+ border-top: var(--table-border);
}
tfoot td {
padding: $spacing-vertical / 2 8px;
@@ -38,10 +37,10 @@ table.table-standard {
tbody {
tr {
&:nth-child(even):not(.odd) {
- background-color: #f4f4f4;
+ background-color: var(--table-item-odd);
}
&:nth-child(odd):not(.even) {
- background-color: white;
+ background-color: var(--table-item-even);
}
&.thead {
background: none;
@@ -60,4 +59,12 @@ table.table-standard {
table.table-stretch {
width: 100%;
+}
+
+table.table-transactions {
+ td:nth-of-type(1) { width: 15%; }
+ td:nth-of-type(2) { width: 15%; }
+ td:nth-of-type(3) { width: 15%; }
+ td:nth-of-type(4) { width: 40%; }
+ td:nth-of-type(5) { width: 15%; }
}
\ No newline at end of file
diff --git a/ui/scss/component/_tooltip.scss b/ui/scss/component/_tooltip.scss
index 0be9b1db8..58889f657 100644
--- a/ui/scss/component/_tooltip.scss
+++ b/ui/scss/component/_tooltip.scss
@@ -1,4 +1,4 @@
-@import "../global";
+@import "../mixin/link.scss";
.tooltip {
position: relative;
@@ -9,28 +9,25 @@
}
.tooltip__body {
- $tooltip-body-width: 300px;
-
position: absolute;
z-index: 1;
left: 50%;
- margin-left: $tooltip-body-width * -1 / 2;
+ margin-left: calc(var(--tooltip-width) * -1 / 2);
white-space: normal;
-
box-sizing: border-box;
padding: $spacing-vertical / 2;
- width: $tooltip-body-width;
- border: 1px solid #aaa;
- color: $color-text-dark;
- background-color: $color-bg;
- font-size: $font-size * 7/8;
- line-height: $font-line-height;
- box-shadow: $box-shadow-layer;
+ width: var(--tooltip-width);
+ border: var(--tooltip-border);
+ color: var(--tooltip-color);
+ background-color: var(--tooltip-bg);
+ font-size: calc(var(--font-size) * 7/8);
+ line-height: var(--font-line-height);
+ box-shadow: var(--box-shadow-layer);
}
.tooltip--header .tooltip__link {
@include text-link(#aaa);
- font-size: $font-size * 3/4;
- margin-left: $padding-button;
+ font-size: calc( var(--font-size) * 3/4 );
+ margin-left: var(--button-padding);
vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss
index 61143a2dd..46cd07eee 100644
--- a/ui/scss/component/_video.scss
+++ b/ui/scss/component/_video.scss
@@ -1,4 +1,5 @@
-@import "../global";
+
+$height-video-embedded: $width-page-constrained * 9 / 16;
video {
object-fit: contain;
@@ -37,7 +38,7 @@ video {
.video--obscured .video__cover
{
position: relative;
- filter: blur($blur-intensity-nsfw);
+ filter: blur(var(--nsfw-blur-intensity));
}
@@ -108,7 +109,11 @@ video {
background-position: center center;
background-repeat: no-repeat;
position: relative;
- .video__play-button { @include absolute-center(); }
+ .video__play-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
.video__play-button {
@@ -120,12 +125,12 @@ video {
font-size: $spacing-vertical * 3;
color: white;
z-index: 1;
- background: $color-black-transparent;
+ background: var(--color-dark-overlay);
opacity: 0.6;
left: 0;
top: 0;
&:hover {
opacity: 1;
- transition: opacity $transition-standard;
+ transition: opacity var(--transition-duration) var(--transition-type);
}
}
diff --git a/ui/scss/mixin/link.scss b/ui/scss/mixin/link.scss
new file mode 100644
index 000000000..ae6e752da
--- /dev/null
+++ b/ui/scss/mixin/link.scss
@@ -0,0 +1,30 @@
+@mixin text-link($color: var(--color-primary), $hover-opacity: 0.70) {
+ .icon
+ {
+ &:first-child {
+ padding-right: 5px;
+ }
+ &:last-child:not(:only-child) {
+ padding-left: 5px;
+ }
+ }
+
+ &:not(.no-underline) {
+ text-decoration: underline;
+ .icon {
+ text-decoration: none;
+ }
+ }
+ &:hover
+ {
+ opacity: $hover-opacity;
+ transition: opacity var(--transition-duration) var(--transition-type);
+ text-decoration: underline;
+ .icon {
+ text-decoration: none;
+ }
+ }
+
+ color: $color;
+ cursor: pointer;
+}
diff --git a/ui/scss/page/_reward.scss b/ui/scss/page/_reward.scss
deleted file mode 100644
index a550c01c3..000000000
--- a/ui/scss/page/_reward.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "../global";
-
-.reward-page__details {
- background-color: lighten($color-canvas, 1.5%);
-}
\ No newline at end of file
diff --git a/ui/scss/page/_show.scss b/ui/scss/page/_show.scss
index 0dbfea2e0..d52f28381 100644
--- a/ui/scss/page/_show.scss
+++ b/ui/scss/page/_show.scss
@@ -1,5 +1,3 @@
-@import "../global";
-
.show-page-media {
text-align: center;
margin-bottom: $spacing-vertical;
diff --git a/ui/watch.sh b/ui/watch.sh
index 4ea14c42b..6a60eb10c 100755
--- a/ui/watch.sh
+++ b/ui/watch.sh
@@ -22,4 +22,4 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none --watch $DIR/scss/ &
node_modules/.bin/webpack --config webpack.dev.config.js --progress --colors --watch
-)
\ No newline at end of file
+)