From 9932a2075edae8bc14e7d5e7ee21e622e38352cf Mon Sep 17 00:00:00 2001 From: Fabian Molina Date: Wed, 16 Dec 2020 10:21:59 -0300 Subject: [PATCH 1/5] changed 1hive-ui for tecommon-ui --- package.json | 1 + src/App.js | 40 +++++++++++----------- src/components/Account/AccountButton.js | 2 +- src/components/Account/AccountModule.js | 2 +- src/components/Account/ScreenConnected.js | 2 +- src/components/Account/ScreenConnecting.js | 2 +- src/components/Account/ScreenError.js | 2 +- src/components/Account/ScreenProviders.js | 2 +- src/components/AccountNotConnected.js | 2 +- src/components/AddProposalPanel.js | 2 +- src/components/AppLoader.js | 2 +- src/components/BalanceToken.js | 2 +- src/components/ConvictionBanner.js | 2 +- src/components/ConvictionVisuals.js | 2 +- src/components/FilterBar/DropdownFilter.js | 2 +- src/components/FilterBar/FilterBar.js | 2 +- src/components/FilterBar/TextFilter.js | 2 +- src/components/Footer.js | 2 +- src/components/Header.js | 2 +- src/components/Header/HeaderModule.js | 2 +- src/components/Header/HeaderPopover.js | 2 +- src/components/IdentityBadge.js | 2 +- src/components/Layout.js | 2 +- src/components/MainView.js | 2 +- src/components/MenuButton.js | 2 +- src/components/Metrics.js | 2 +- src/components/ModifiedLineChart.js | 2 +- src/components/NetworkErrorModal.js | 2 +- src/components/ProposalActions.js | 2 +- src/components/SummaryBar.js | 2 +- src/components/SupportersDistribution.js | 2 +- src/components/Wallet.js | 2 +- src/hooks/useCopyToClipboard.js | 2 +- src/index.js | 28 +++++++-------- src/screens/ProposalDetail.js | 2 +- src/screens/Proposals.js | 2 +- src/screens/StakingTokens.js | 2 +- src/styles/breakpoints.js | 2 +- yarn.lock | 38 ++++++++++++++++++++ 39 files changed, 108 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index fa8e915e1..1980e016f 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@1hive/1hive-ui": "^1.0.2", "@1hive/connect-conviction-voting": "^0.4.1", "@aragon/connect": "^0.6.0", + "@tecommons/ui": "https://github.com/TECommons/tec-ui.git#re-style-library", "bignumber.js": "^9.0.0", "clipboard-polyfill": "^3.0.0-pre5", "ethers": "5.0.8", diff --git a/src/App.js b/src/App.js index 686458145..5541629dc 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,16 @@ -import React from 'react' -import { SidePanel, Split } from '@1hive/1hive-ui' +import React from "react"; +import { SidePanel, Split } from "@tecommons/ui"; -import AddProposalPanel from './components/AddProposalPanel' -import AppLoader from './components/AppLoader' -import MainScreen from './screens/MainScreen' -import NetworkErrorModal from './components/NetworkErrorModal' -import StakingTokens from './screens/StakingTokens' -import Wallet from './components/Wallet' +import AddProposalPanel from "./components/AddProposalPanel"; +import AppLoader from "./components/AppLoader"; +import MainScreen from "./screens/MainScreen"; +import NetworkErrorModal from "./components/NetworkErrorModal"; +import StakingTokens from "./screens/StakingTokens"; +import Wallet from "./components/Wallet"; -import useAppLogic from './app-logic' -import { useWallet } from './providers/Wallet' -import useSelectedProposal from './hooks/useSelectedProposal' +import useAppLogic from "./app-logic"; +import { useWallet } from "./providers/Wallet"; +import useSelectedProposal from "./hooks/useSelectedProposal"; const App = React.memo(function App() { const { @@ -20,11 +20,11 @@ const App = React.memo(function App() { proposals, proposalPanel, totalStaked, - fetchingErrors, - } = useAppLogic() + fetchingErrors + } = useAppLogic(); - const { account } = useWallet() - const selectedProposal = useSelectedProposal(proposals) + const { account } = useWallet(); + const selectedProposal = useSelectedProposal(proposals); const MainScreenComponent = ( - ) - + ); + return (
@@ -72,7 +72,7 @@ const App = React.memo(function App() {
- ) -}) + ); +}); -export default App +export default App; diff --git a/src/components/Account/AccountButton.js b/src/components/Account/AccountButton.js index cc7033973..3a378130e 100644 --- a/src/components/Account/AccountButton.js +++ b/src/components/Account/AccountButton.js @@ -7,7 +7,7 @@ import { shortenAddress, textStyle, useTheme, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import { useWallet } from 'use-wallet' import HeaderModule from '../Header/HeaderModule' diff --git a/src/components/Account/AccountModule.js b/src/components/Account/AccountModule.js index 51fba4591..3e829c54f 100644 --- a/src/components/Account/AccountModule.js +++ b/src/components/Account/AccountModule.js @@ -6,7 +6,7 @@ import { IconConnect, springs, shortenAddress, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import { Transition, animated } from 'react-spring/renderprops' import ScreenError from './ScreenError' diff --git a/src/components/Account/ScreenConnected.js b/src/components/Account/ScreenConnected.js index 4ba72269d..adcf12723 100644 --- a/src/components/Account/ScreenConnected.js +++ b/src/components/Account/ScreenConnected.js @@ -8,7 +8,7 @@ import { RADIUS, textStyle, useTheme, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import IdentityBadge from '../IdentityBadge' import { getProviderFromUseWalletId } from '../../ethereum-providers' import { useCopyToClipboard } from '../../hooks/useCopyToClipboard' diff --git a/src/components/Account/ScreenConnecting.js b/src/components/Account/ScreenConnecting.js index a9488a567..dcaf716cc 100644 --- a/src/components/Account/ScreenConnecting.js +++ b/src/components/Account/ScreenConnecting.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { keyframes } from 'styled-components' -import { GU, useTheme, textStyle, Link } from '@1hive/1hive-ui' +import { GU, useTheme, textStyle, Link } from '@tecommons/ui' import { getProviderFromUseWalletId, getProviderString, diff --git a/src/components/Account/ScreenError.js b/src/components/Account/ScreenError.js index 74ce7896b..bfb68aa27 100644 --- a/src/components/Account/ScreenError.js +++ b/src/components/Account/ScreenError.js @@ -1,6 +1,6 @@ import React, { useMemo, useRef } from 'react' import PropTypes from 'prop-types' -import { GU, Link, textStyle, useTheme } from '@1hive/1hive-ui' +import { GU, Link, textStyle, useTheme } from '@tecommons/ui' import { UnsupportedChainError } from 'use-wallet' import { getNetworkName } from '../../lib/web3-utils' import connectionError from './assets/connection-error.png' diff --git a/src/components/Account/ScreenProviders.js b/src/components/Account/ScreenProviders.js index 667bccf32..0d5778e60 100644 --- a/src/components/Account/ScreenProviders.js +++ b/src/components/Account/ScreenProviders.js @@ -7,7 +7,7 @@ import { RADIUS, useTheme, textStyle, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import { getProviderFromUseWalletId } from '../../ethereum-providers' import { getUseWalletProviders } from '../../lib/web3-utils' diff --git a/src/components/AccountNotConnected.js b/src/components/AccountNotConnected.js index 46af51554..50785961d 100644 --- a/src/components/AccountNotConnected.js +++ b/src/components/AccountNotConnected.js @@ -1,5 +1,5 @@ import React from 'react' -import { GU, IconConnect, RADIUS, textStyle, useTheme } from '@1hive/1hive-ui' +import { GU, IconConnect, RADIUS, textStyle, useTheme } from '@tecommons/ui' function AccountNotConnected() { const theme = useTheme() diff --git a/src/components/AddProposalPanel.js b/src/components/AddProposalPanel.js index 2da079b92..80f0a256d 100644 --- a/src/components/AddProposalPanel.js +++ b/src/components/AddProposalPanel.js @@ -10,7 +10,7 @@ import { MEDIUM_RADIUS, TextInput, useTheme, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import { useAppState } from '../providers/AppState' import connect from '../base/connect' diff --git a/src/components/AppLoader.js b/src/components/AppLoader.js index 860e01ee4..613bf1a88 100644 --- a/src/components/AppLoader.js +++ b/src/components/AppLoader.js @@ -1,5 +1,5 @@ import React from 'react' -import { SyncIndicator } from '@1hive/1hive-ui' +import { SyncIndicator } from '@tecommons/ui' export default function AppLoader() { return diff --git a/src/components/BalanceToken.js b/src/components/BalanceToken.js index 5f38a58de..8b03bae54 100644 --- a/src/components/BalanceToken.js +++ b/src/components/BalanceToken.js @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' -import { GU, tokenIconUrl } from '@1hive/1hive-ui' +import { GU, tokenIconUrl } from '@tecommons/ui' import { formatTokenAmount } from '../lib/token-utils' import { ETHER_TOKEN_VERIFIED_BY_SYMBOL } from '../lib/verified-tokens' diff --git a/src/components/ConvictionBanner.js b/src/components/ConvictionBanner.js index 45eb64e1e..533cda8a5 100644 --- a/src/components/ConvictionBanner.js +++ b/src/components/ConvictionBanner.js @@ -8,7 +8,7 @@ import { GU, RADIUS, useViewport, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' const BANNER_HEIGHT = 48 const MOBILE_BANNER_HEIGHT = 64 diff --git a/src/components/ConvictionVisuals.js b/src/components/ConvictionVisuals.js index c8e3e41e7..fb855af76 100644 --- a/src/components/ConvictionVisuals.js +++ b/src/components/ConvictionVisuals.js @@ -9,7 +9,7 @@ import { Timer, useLayout, useTheme, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import styled from 'styled-components' import LineChart from './ModifiedLineChart' import SummaryBar from './SummaryBar' diff --git a/src/components/FilterBar/DropdownFilter.js b/src/components/FilterBar/DropdownFilter.js index a27c17fe6..e09835cf1 100644 --- a/src/components/FilterBar/DropdownFilter.js +++ b/src/components/FilterBar/DropdownFilter.js @@ -9,7 +9,7 @@ import { Tag, useTheme, useLayout, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' const DropwdownFilter = React.memo( ({ diff --git a/src/components/FilterBar/FilterBar.js b/src/components/FilterBar/FilterBar.js index ec4249941..c5a8cb4b7 100644 --- a/src/components/FilterBar/FilterBar.js +++ b/src/components/FilterBar/FilterBar.js @@ -1,5 +1,5 @@ import React, { useState, useRef, useCallback } from 'react' -import { DropDown, GU, useLayout, useTheme } from '@1hive/1hive-ui' +import { DropDown, GU, useLayout, useTheme } from '@tecommons/ui' import PropTypes from 'prop-types' import TextFilter from './TextFilter' diff --git a/src/components/FilterBar/TextFilter.js b/src/components/FilterBar/TextFilter.js index 3b74d2003..aeb506018 100644 --- a/src/components/FilterBar/TextFilter.js +++ b/src/components/FilterBar/TextFilter.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { GU, Popover, SearchInput, useLayout } from '@1hive/1hive-ui' +import { GU, Popover, SearchInput, useLayout } from '@tecommons/ui' const TextFilter = React.memo( ({ textFilter, updateTextFilter, placeholder = '' }) => { diff --git a/src/components/Footer.js b/src/components/Footer.js index 61d8045e6..fde691cb4 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,5 +1,5 @@ import React from 'react' -import { GU, Link as AragonLink, textStyle, useTheme } from '@1hive/1hive-ui' +import { GU, Link as AragonLink, textStyle, useTheme } from '@tecommons/ui' import styled from 'styled-components' import connect from '../base/connect' diff --git a/src/components/Header.js b/src/components/Header.js index c13f41178..7645febb6 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,5 +1,5 @@ import React from 'react' -import { GU, Link, useTheme } from '@1hive/1hive-ui' +import { GU, Link, useTheme } from '@tecommons/ui' import AccountModule from './Account/AccountModule' import Layout from './Layout' diff --git a/src/components/Header/HeaderModule.js b/src/components/Header/HeaderModule.js index 974fb72af..ed660a837 100644 --- a/src/components/Header/HeaderModule.js +++ b/src/components/Header/HeaderModule.js @@ -5,7 +5,7 @@ import { IconDown, useTheme, useViewport, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' function HeaderModule({ icon, content, onClick }) { const { above } = useViewport() const theme = useTheme() diff --git a/src/components/Header/HeaderPopover.js b/src/components/Header/HeaderPopover.js index 923ca801c..82b4e2be2 100644 --- a/src/components/Header/HeaderPopover.js +++ b/src/components/Header/HeaderPopover.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { GU, Popover, springs, textStyle, useTheme } from '@1hive/1hive-ui' +import { GU, Popover, springs, textStyle, useTheme } from '@tecommons/ui' import { Spring, animated } from 'react-spring/renderprops' const AnimatedSection = animated.section diff --git a/src/components/IdentityBadge.js b/src/components/IdentityBadge.js index 6bf894b52..e3aa242f5 100644 --- a/src/components/IdentityBadge.js +++ b/src/components/IdentityBadge.js @@ -1,5 +1,5 @@ import React from 'react' -import { IdentityBadge as Badge } from '@1hive/1hive-ui' +import { IdentityBadge as Badge } from '@tecommons/ui' import { getNetworkType } from '../lib/web3-utils' function IdentityBadge({ entity, ...props }) { diff --git a/src/components/Layout.js b/src/components/Layout.js index 576ea807c..2f0489b34 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -1,5 +1,5 @@ import React from 'react' -import { Layout, useViewport } from '@1hive/1hive-ui' +import { Layout, useViewport } from '@tecommons/ui' import { BREAKPOINTS } from '../styles/breakpoints' function CustomLayout({ children }) { diff --git a/src/components/MainView.js b/src/components/MainView.js index 3f02584f0..4e7efbe88 100644 --- a/src/components/MainView.js +++ b/src/components/MainView.js @@ -1,5 +1,5 @@ import React from 'react' -import { GU, useViewport } from '@1hive/1hive-ui' +import { GU, useViewport } from '@tecommons/ui' import ConvictionBanner from './ConvictionBanner' import Footer from './Footer' diff --git a/src/components/MenuButton.js b/src/components/MenuButton.js index 18744dc4d..5b340123a 100644 --- a/src/components/MenuButton.js +++ b/src/components/MenuButton.js @@ -1,5 +1,5 @@ import React from 'react' -import { ButtonIcon, IconMenu } from '@1hive/1hive-ui' +import { ButtonIcon, IconMenu } from '@tecommons/ui' export default props => ( @@ -15,9 +15,9 @@ ReactDOM.render(
@@ -29,5 +29,5 @@ ReactDOM.render(
, - document.getElementById('root') -) + document.getElementById("root") +); diff --git a/src/screens/ProposalDetail.js b/src/screens/ProposalDetail.js index da92a7961..5fe6cb36b 100644 --- a/src/screens/ProposalDetail.js +++ b/src/screens/ProposalDetail.js @@ -12,7 +12,7 @@ import { textStyle, useLayout, useTheme, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import Balance from '../components/Balance' import { ConvictionCountdown, diff --git a/src/screens/Proposals.js b/src/screens/Proposals.js index 3c05a651c..73eaa5465 100644 --- a/src/screens/Proposals.js +++ b/src/screens/Proposals.js @@ -10,7 +10,7 @@ import { textStyle, useLayout, useTheme, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import { getTokenIconBySymbol } from '../lib/token-utils' import { useHistory } from 'react-router-dom' diff --git a/src/screens/StakingTokens.js b/src/screens/StakingTokens.js index 19ae5a022..6f5428bcd 100644 --- a/src/screens/StakingTokens.js +++ b/src/screens/StakingTokens.js @@ -1,6 +1,6 @@ import React, { useCallback, useMemo } from 'react' import { useHistory } from 'react-router-dom' -import { Box, Distribution, GU, useTheme, useViewport } from '@1hive/1hive-ui' +import { Box, Distribution, GU, useTheme, useViewport } from '@tecommons/ui' import BigNumber from '../lib/bigNumber' import { stakesPercentages } from '../lib/math-utils' diff --git a/src/styles/breakpoints.js b/src/styles/breakpoints.js index 39f035dd2..36cfa8129 100644 --- a/src/styles/breakpoints.js +++ b/src/styles/breakpoints.js @@ -1,4 +1,4 @@ -import { GU } from '@1hive/1hive-ui' +import { GU } from '@tecommons/ui' // These breakpoints values represent minimum screen sizes. export const BREAKPOINTS = { diff --git a/yarn.lock b/yarn.lock index 9db450bd8..7c53ccfeb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1481,6 +1481,30 @@ penpal "3.0.7" pocket-js-core "0.0.3" +"@tecommons/ui@https://github.com/TECommons/tec-ui.git#re-style-library": + version "1.0.0" + resolved "https://github.com/TECommons/tec-ui.git#79407fa36eea796dff78d0c85039cd5bab9c3d79" + dependencies: + "@babel/runtime" "^7.3.1" + airbnb-prop-types "^2.9.0" + arg "^2.0.0" + command-exists "^1.2.6" + dayjs "^1.8.14" + js-sha3 "^0.8.0" + jsbi "^3.1.2" + lodash "^4.17.19" + markdown-to-jsx "^6.11.0" + popper.js "^1.14.4" + prop-types "^15.6.0" + react-blockies "^1.4.0" + react-display-name "^0.2.3" + react-onclickout "^2.0.8" + react-spring "^7.2.11" + recursive-copy "^2.0.9" + token-amount "^0.1.0" + use-inside "^0.2.0" + use-token "^0.2.0" + "@toruslabs/eccrypto@^1.1.4": version "1.1.5" resolved "https://registry.yarnpkg.com/@toruslabs/eccrypto/-/eccrypto-1.1.5.tgz#c4b9319e02e913fecd90f3f2b98ae2699e7d498e" @@ -10156,6 +10180,13 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== +token-amount@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/token-amount/-/token-amount-0.1.0.tgz#1b25775346a7de4df47a988ecf022ffe2d4b6f76" + integrity sha512-3p2HE8ef1PKB6Rl6tMmQW289esS5PWsPq/mG8JyyQUFe/1I3LtDBmSGYzzqW/99uvvoQNpUURI1fX8uZE6LSow== + dependencies: + jsbi "^3.1.1" + tough-cookie@^2.3.3, tough-cookie@^2.5.0, tough-cookie@~2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" @@ -10403,6 +10434,13 @@ use-inside@^0.2.0: dependencies: prop-types "^15.7.2" +use-token@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/use-token/-/use-token-0.2.0.tgz#5690aec9fcc327cf843eb8ff01cd1f75f7d93a25" + integrity sha512-lvKboDH7okV/SAb9q4Fs+kgEOS976SvHPMzpy+KCKXXVAMzG30znfsvYKiiK2Mdg+QU4vil0+NHXZ6ozuo+ysw== + dependencies: + js-sha3 "^0.8.0" + use-wallet@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/use-wallet/-/use-wallet-0.5.0.tgz#8f9bc6c5186d4eebd24dc2cbd850ca5904567f78" From ac574eb62c1d6b2701575f8b7708d50c74eceba3 Mon Sep 17 00:00:00 2001 From: Fabian Molina Date: Thu, 17 Dec 2020 01:15:08 -0300 Subject: [PATCH 2/5] Logos --- src/assets/logo-black.svg | 1 + src/assets/logo-light-bg.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/assets/logo-black.svg create mode 100644 src/assets/logo-light-bg.svg diff --git a/src/assets/logo-black.svg b/src/assets/logo-black.svg new file mode 100644 index 000000000..bb21ab2c5 --- /dev/null +++ b/src/assets/logo-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logo-light-bg.svg b/src/assets/logo-light-bg.svg new file mode 100644 index 000000000..c50ef1d4a --- /dev/null +++ b/src/assets/logo-light-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file From 699a2d6c81a9c256c1291c7646d615a1d0f5c81b Mon Sep 17 00:00:00 2001 From: Fabian Molina Date: Thu, 17 Dec 2020 01:15:49 -0300 Subject: [PATCH 3/5] Header first approach of redesigning --- src/components/Account/AccountModule.js | 3 +++ src/components/Header.js | 14 +++++++------- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/Account/AccountModule.js b/src/components/Account/AccountModule.js index 3e829c54f..90b386b75 100644 --- a/src/components/Account/AccountModule.js +++ b/src/components/Account/AccountModule.js @@ -174,6 +174,9 @@ function AccountModule({ compact }) { onClick={toggle} display={compact ? 'icon' : 'all'} disabled={isLoading} + css={` + right: 45px; + `} /> )} diff --git a/src/components/Header.js b/src/components/Header.js index 7645febb6..e2bc13f99 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -5,7 +5,7 @@ import Layout from './Layout' import logoSvg from '../assets/logo.svg' import headerBackgroundSvg from '../assets/header-background.svg' -import logoTextSvg from '../assets/logoText.svg' +import logo from '../assets/logo-light-bg.svg' function Header({ compact }) { const theme = useTheme() @@ -20,7 +20,7 @@ function Header({ compact }) { return (
@@ -30,11 +30,11 @@ function Header({ compact }) { background-size: 811px 600px; background-position: center; padding: ${ - compact ? `${3 * GU}px` : `${5.625 * GU}px 0 ${8.75 * GU}px 0` + compact ? `0px` : `0px 0 ${8.75 * GU}px 0` }; `} > - +
- {compact ? Icon : } + {compact ? Icon : }
{!compact &&
{Icon}
}
- +
) From 27db7bc9c481644a0cb4489ce9eae0a456d54ae5 Mon Sep 17 00:00:00 2001 From: Fabian Molina Date: Sat, 19 Dec 2020 11:14:00 -0300 Subject: [PATCH 4/5] Added new logos and restyle header --- src/assets/tecFullTextLogo.svg | 1 + src/components/Account/AccountModule.js | 2 +- src/components/Header.js | 23 +++++++++++++++++------ src/components/Layout.js | 10 +++++++--- src/components/panels/SupportProposal.js | 2 +- 5 files changed, 27 insertions(+), 11 deletions(-) create mode 100644 src/assets/tecFullTextLogo.svg diff --git a/src/assets/tecFullTextLogo.svg b/src/assets/tecFullTextLogo.svg new file mode 100644 index 000000000..0a9eafc89 --- /dev/null +++ b/src/assets/tecFullTextLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Account/AccountModule.js b/src/components/Account/AccountModule.js index 90b386b75..63fa6aa36 100644 --- a/src/components/Account/AccountModule.js +++ b/src/components/Account/AccountModule.js @@ -175,7 +175,7 @@ function AccountModule({ compact }) { display={compact ? 'icon' : 'all'} disabled={isLoading} css={` - right: 45px; + right: 56px; `} /> )} diff --git a/src/components/Header.js b/src/components/Header.js index e2bc13f99..844d76100 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,11 +1,11 @@ import React from 'react' import { GU, Link, useTheme } from '@tecommons/ui' import AccountModule from './Account/AccountModule' -import Layout from './Layout' -import logoSvg from '../assets/logo.svg' import headerBackgroundSvg from '../assets/header-background.svg' import logo from '../assets/logo-light-bg.svg' +import logoFullText from '../assets/tecFullTextLogo.svg' +import logoSvg from '../assets/logo.svg' function Header({ compact }) { const theme = useTheme() @@ -30,11 +30,10 @@ function Header({ compact }) { background-size: 811px 600px; background-position: center; padding: ${ - compact ? `0px` : `0px 0 ${8.75 * GU}px 0` + compact ? `0px` : `0px 0 ${4 * GU}px 0` }; `} > -
- {compact ? Icon : } + { compact ? + Icon + : +
+ + +
+ }
{!compact &&
{Icon}
}
- ) diff --git a/src/components/Layout.js b/src/components/Layout.js index 2f0489b34..2ae7b03c7 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -1,16 +1,20 @@ import React from 'react' -import { Layout, useViewport } from '@tecommons/ui' +import { GU, Layout, useViewport } from '@tecommons/ui' import { BREAKPOINTS } from '../styles/breakpoints' function CustomLayout({ children }) { const { width: vw } = useViewport() + console.log(vw); return ( {children} diff --git a/src/components/panels/SupportProposal.js b/src/components/panels/SupportProposal.js index 10d6dbfbf..d7db1c17b 100644 --- a/src/components/panels/SupportProposal.js +++ b/src/components/panels/SupportProposal.js @@ -9,7 +9,7 @@ import { TextInput, useSidePanelFocusOnReady, useTheme, -} from '@1hive/1hive-ui' +} from '@tecommons/ui' import { toDecimals, round, pct } from '../../lib/math-utils' import useAccountTotalStaked from '../../hooks/useAccountTotalStaked' import { formatTokenAmount } from '../../lib/token-utils' From 7560da545f144f9da7e838d1936c635d7ee71ef2 Mon Sep 17 00:00:00 2001 From: Fabian Molina Date: Mon, 21 Dec 2020 17:40:29 -0300 Subject: [PATCH 5/5] Changed images and Metrics component --- package.json | 2 +- src/assets/t-ellipse-green.svg | 1 + src/assets/tec-ellipse-logo.svg | 10 ++++++++++ src/components/Metrics.js | 32 ++++++++++++++++++-------------- yarn.lock | 7 ++++--- 5 files changed, 34 insertions(+), 18 deletions(-) create mode 100644 src/assets/t-ellipse-green.svg create mode 100644 src/assets/tec-ellipse-logo.svg diff --git a/package.json b/package.json index 1980e016f..47e9a0297 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "@1hive/1hive-ui": "^1.0.2", "@1hive/connect-conviction-voting": "^0.4.1", "@aragon/connect": "^0.6.0", - "@tecommons/ui": "https://github.com/TECommons/tec-ui.git#re-style-library", + "@tecommons/ui": "^1.0.5", "bignumber.js": "^9.0.0", "clipboard-polyfill": "^3.0.0-pre5", "ethers": "5.0.8", diff --git a/src/assets/t-ellipse-green.svg b/src/assets/t-ellipse-green.svg new file mode 100644 index 000000000..532673735 --- /dev/null +++ b/src/assets/t-ellipse-green.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tec-ellipse-logo.svg b/src/assets/tec-ellipse-logo.svg new file mode 100644 index 000000000..a43980b24 --- /dev/null +++ b/src/assets/tec-ellipse-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Metrics.js b/src/components/Metrics.js index 0ad93eb0d..8f627ec41 100644 --- a/src/components/Metrics.js +++ b/src/components/Metrics.js @@ -1,8 +1,8 @@ import React from 'react' -import { Box, GU, textStyle, Link, useLayout, useTheme } from '@tecommons/ui' +import { Box, Button, GU, textStyle, Link, useLayout, useTheme } from '@tecommons/ui' import { formatTokenAmount, formatDecimals } from '../lib/token-utils' -import tokenIconSvg from '../assets/tec-token.svg' +import tokenIconSvg from '../assets/tec-ellipse-logo.svg' import { useBondingCurvePrice } from '../hooks/useBondingCurvePrice' const Metrics = React.memo(function Metrics({ @@ -19,6 +19,7 @@ const Metrics = React.memo(function Metrics({ return ( - {compactMode && } + {compactMode && } {!compactMode && }
@@ -82,7 +83,7 @@ function Metric({ label, value, color }) { <>

@@ -108,7 +109,7 @@ function TokenBalance({ label, token, value }) { return ( <> - +

{ + window.open('https://convert.tecommons.org') + } return (
- - Convert - + Trade +
) } diff --git a/yarn.lock b/yarn.lock index 7c53ccfeb..1e7d7deae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1481,9 +1481,10 @@ penpal "3.0.7" pocket-js-core "0.0.3" -"@tecommons/ui@https://github.com/TECommons/tec-ui.git#re-style-library": - version "1.0.0" - resolved "https://github.com/TECommons/tec-ui.git#79407fa36eea796dff78d0c85039cd5bab9c3d79" +"@tecommons/ui@^1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@tecommons/ui/-/ui-1.0.5.tgz#8651e3dc5f04542490c0718852d197e6bb06631a" + integrity sha512-k/Iy0TP0YpLyFYexaBXHFX5QkP7/vZqedvVV0sNPEAvCVSp21nBts12uKizTTmCH+O93MAGZXg9w1TSv9qqCFg== dependencies: "@babel/runtime" "^7.3.1" airbnb-prop-types "^2.9.0"