m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
Code
e49430f3d9
metamask-extension/ui/components/app/wallet-overview/index.scss

139 lines
2.0 KiB
SCSS
Raw Normal View History

Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
.wallet-overview {
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
Add MetaMask Swaps (#9482)
2020-10-06 20:28:38 +02:00
min-height: 209px;
Fix account display width for large currency values
2018-10-21 13:12:40 +02:00
min-width: 0;
Implement asset page (#8696) A new page has been created for viewing assets. This replaces the old `selectedToken` state, which previously would augment the home page to show token-specific information. The new asset page shows the standard token overview as seen previously on the home page, plus a history filtered to show just transactions relevant to that token. The actions that were available in the old token list menu have been moved to a "Token Options" menu that mirrors the "Account Options" menu. The `selectedTokenAddress` state has been removed, as it is no longer being used for anything. `getMetaMetricState` has been renamed to `getBackgroundMetaMetricState` because its sole purpose is extracting data from the background state to send metrics from the background. It's not really a selector, but it was convenient for it to use the same selectors the UI uses to extract background data, so I left it there for now. A new Redux store has been added to track state related to browser history. The most recent "overview" page (i.e. the home page or the asset page) is currently being tracked, so that actions taken from the asset page can return the user back to the asset page when the action has finished.
2020-06-01 19:54:32 +02:00
padding-top: 10px;
Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
2020-05-27 22:28:33 +02:00
flex-direction: column;
width: 100%;
Fix rounding issue when sending max tokens (#5695) * Fix rounding issue when sending max tokens * Ensure amount row shows exact amount of max tokens on send screen (#2) * Fix tests * Change stored redux value from BigNumber to hex string. Fix TokenInput default value
2018-11-20 01:06:34 +01:00
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
&__balance {
flex: 1;
display: flex;
Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
2020-05-27 22:28:33 +02:00
flex-direction: column;
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
align-items: center;
Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
2020-05-27 22:28:33 +02:00
width: 100%;
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
}
&__buttons {
display: flex;
flex-direction: row;
Add MetaMask Swaps (#9482)
2020-10-06 20:28:38 +02:00
height: 68px;
Implement asset page (#8696) A new page has been created for viewing assets. This replaces the old `selectedToken` state, which previously would augment the home page to show token-specific information. The new asset page shows the standard token overview as seen previously on the home page, plus a history filtered to show just transactions relevant to that token. The actions that were available in the old token list menu have been moved to a "Token Options" menu that mirrors the "Account Options" menu. The `selectedTokenAddress` state has been removed, as it is no longer being used for anything. `getMetaMetricState` has been renamed to `getBackgroundMetaMetricState` because its sole purpose is extracting data from the background state to send metrics from the background. It's not really a selector, but it was convenient for it to use the same selectors the UI uses to extract background data, so I left it there for now. A new Redux store has been added to track state related to browser history. The most recent "overview" page (i.e. the home page or the asset page) is currently being tracked, so that actions taken from the asset page can return the user back to the asset page when the action has finished.
2020-06-01 19:54:32 +02:00
margin-bottom: 24px;
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
}
}
update button styling on home/asset page (#8800)
2020-06-15 19:02:38 +02:00
%asset-buttons {
min-width: initial;
width: 100px;
&:not(:last-child) {
margin-right: 12px;
}
Uncomment and fix all auto-fixable stylelint rules (#8989) All stylelint rules that can be automatically fixed have been uncommented. The rules are: * `at-rule-empty-line-before` * `block-closing-brace-empty-line-before` * `block-closing-brace-newline-before` * `block-opening-brace-space-before` * `color-hex-case` * `color-hex-length` * `comment-empty-line-before` * `declaration-block-semicolon-newline-after` * `declaration-block-semicolon-space-after` * `declaration-block-trailing-semicolon` * `declaration-colon-space-after` * `declaration-empty-line-before` * `function-comma-space-after` * `function-comma-space-before` * `indentation` * `length-zero-no-unit` * `no-eol-whitespace` * `no-missing-end-of-source-newline` * `number-leading-zero` * `number-no-trailing-zeros` * `rule-empty-line-before` * `selector-list-comma-newline-after` * `selector-pseudo-element-colon-notation`
2020-07-15 15:13:40 +02:00
update button styling on home/asset page (#8800)
2020-06-15 19:02:38 +02:00
text-transform: uppercase;
normalize app component font styles (#9695)
2020-10-29 16:03:29 +01:00
font-weight: 500;
update button styling on home/asset page (#8800)
2020-06-15 19:02:38 +02:00
}
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
.eth-overview {
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
&__balance {
display: flex;
flex-direction: column;
Fix account display width for large currency values
2018-10-21 13:12:40 +02:00
min-width: 0;
Add visual indicator when displaying a cached balance (#5854)
2019-01-30 13:16:12 +01:00
position: relative;
Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
2020-05-27 22:28:33 +02:00
align-items: center;
margin: 16px 0;
padding: 0 16px;
max-width: 100%;
Add retry button to TransactionListItem
2018-08-03 05:20:15 +02:00
}
Add visual indicator when displaying a cached balance (#5854)
2019-01-30 13:16:12 +01:00
&__primary-container {
display: flex;
}
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
&__primary-balance {
normalize app component font styles (#9695)
2020-10-29 16:03:29 +01:00
@include H2;
Dark Mode Part 1: Switch to Using CSS Variables (#13147)
2022-01-06 18:35:49 +01:00
color: var(--black);
Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
2020-05-27 22:28:33 +02:00
width: 100%;
justify-content: center;
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
}
Add visual indicator when displaying a cached balance (#5854)
2019-01-30 13:16:12 +01:00
&__cached-star {
margin-left: 4px;
}
Uncomment and fix all auto-fixable stylelint rules (#8989) All stylelint rules that can be automatically fixed have been uncommented. The rules are: * `at-rule-empty-line-before` * `block-closing-brace-empty-line-before` * `block-closing-brace-newline-before` * `block-opening-brace-space-before` * `color-hex-case` * `color-hex-length` * `comment-empty-line-before` * `declaration-block-semicolon-newline-after` * `declaration-block-semicolon-space-after` * `declaration-block-trailing-semicolon` * `declaration-colon-space-after` * `declaration-empty-line-before` * `function-comma-space-after` * `function-comma-space-before` * `indentation` * `length-zero-no-unit` * `no-eol-whitespace` * `no-missing-end-of-source-newline` * `number-leading-zero` * `number-no-trailing-zeros` * `rule-empty-line-before` * `selector-list-comma-newline-after` * `selector-pseudo-element-colon-notation`
2020-07-15 15:13:40 +02:00
&__cached-balance,
&__cached-star {
Dark Mode Part 1: Switch to Using CSS Variables (#13147)
2022-01-06 18:35:49 +01:00
color: var(--web-orange);
Add visual indicator when displaying a cached balance (#5854)
2019-01-30 13:16:12 +01:00
}
&__cached-secondary-balance {
normalize app component font styles (#9695)
2020-10-29 16:03:29 +01:00
@include Paragraph;
Add visual indicator when displaying a cached balance (#5854)
2019-01-30 13:16:12 +01:00
color: rgba(220, 153, 18, 0.6901960784313725);
}
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
&__secondary-balance {
normalize app component font styles (#9695)
2020-10-29 16:03:29 +01:00
@include Paragraph;
Dark Mode Part 1: Switch to Using CSS Variables (#13147)
2022-01-06 18:35:49 +01:00
color: var(--Grey-400);
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
}
Add MetaMask Swaps (#9482)
2020-10-06 20:28:38 +02:00
&__button {
margin-right: 24px;
}
&__button:last-of-type {
margin-right: 0;
}
&__circle {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
width: 36px;
background: #037dd6;
border-radius: 18px;
margin-top: 6px;
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
}
}
.token-overview {
&__balance {
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
display: flex;
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
flex-direction: column;
Fix account display width for large currency values
2018-10-21 13:12:40 +02:00
min-width: 0;
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
position: relative;
Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
2020-05-27 22:28:33 +02:00
align-items: center;
margin: 16px 0;
padding: 0 16px;
max-width: 100%;
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
}
Split `TransactionViewBalance` component (#8637) The `TransactionViewBalance` component has been split into three separate components. This was done primarily to make the asset page easier to implement. Also the name `TransactionViewBalance` didn't describe this component very well anymore. Instead of the Ethereum and token-specific logic being in the same component, the two cases were split into the `EthOverview` and `TokenOverview` components respectively. They both use the `WalletOverview` component, which has the structure shared by both cases.
2020-05-21 19:33:48 +02:00
&__primary-balance {
normalize app component font styles (#9695)
2020-10-29 16:03:29 +01:00
@include H2;
Dark Mode Part 1: Switch to Using CSS Variables (#13147)
2022-01-06 18:35:49 +01:00
color: var(--black);
Implement new fullscreen design (#8657) The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
2020-05-27 22:28:33 +02:00
width: 100%;
justify-content: center;
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
}
Show fiat balance on token page (#8791) The token page overview now shows the balance in fiat.
2020-06-12 20:47:39 +02:00
&__secondary-balance {
normalize app component font styles (#9695)
2020-10-29 16:03:29 +01:00
@include H5;
Dark Mode Part 1: Switch to Using CSS Variables (#13147)
2022-01-06 18:35:49 +01:00
color: var(--Grey-400);
Show fiat balance on token page (#8791) The token page overview now shows the balance in fiat.
2020-06-12 20:47:39 +02:00
}
Add MetaMask Swaps (#9482)
2020-10-06 20:28:38 +02:00
&__button {
margin-right: 24px;
}
&__button:last-of-type {
margin-right: 0;
Refactor transactions list views. Add redesign components
2018-07-31 07:03:20 +02:00
}
}
Copy Permalink