UI restyle

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": "^1.0.5",
     "bignumber.js": "^9.0.0",
     "clipboard-polyfill": "^3.0.0-pre5",
     "ethers": "5.0.8",

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 = (
     <MainScreen
@@ -40,8 +40,8 @@ const App = React.memo(function App() {
       selectedProposal={selectedProposal}
       totalActiveTokens={totalStaked}
     />
-  )
-  
+  );
+
   return (
     <div>
       <NetworkErrorModal visible={fetchingErrors} />
@@ -72,7 +72,7 @@ const App = React.memo(function App() {
         <AddProposalPanel onSubmit={actions.newProposal} />
       </SidePanel>
     </div>
-  )
-})
+  );
+});
 
-export default App
+export default App;

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'

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'
@@ -174,6 +174,9 @@ function AccountModule({ compact }) {
           onClick={toggle}
           display={compact ? 'icon' : 'all'}
           disabled={isLoading}
+          css={`
+            right: 56px;
+          `}
         />
       )}
 

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'

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,

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'

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'
 

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()

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'

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 <SyncIndicator visible label="Loading app" />

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'

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
 

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'

src/components/FilterBar/DropdownFilter.js

@@ -9,7 +9,7 @@ import {
   Tag,
   useTheme,
   useLayout,
-} from '@1hive/1hive-ui'
+} from '@tecommons/ui'
 
 const DropwdownFilter = React.memo(
   ({

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'

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 = '' }) => {

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'

src/components/Header.js

@@ -1,11 +1,11 @@
 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'
 
-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'
+import logoFullText from '../assets/tecFullTextLogo.svg'
+import logoSvg from '../assets/logo.svg'
 
 function Header({ compact }) {
   const theme = useTheme()
@@ -20,7 +20,7 @@ function Header({ compact }) {
   return (
     <header
       css={`
-        background-color: ${theme.yellow};
+        background-color: ${theme.background};
         margin-bottom: ${compact ? `${2 * GU}px` : 0};
       `}
     >
@@ -30,11 +30,10 @@ 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 ${4 * GU}px 0`
           };
         `}
       >
-        <Layout>
           <div
             css={`
               display: flex;
@@ -44,10 +43,23 @@ function Header({ compact }) {
           >
             <div
               css={`
-                width: ${headerItemsWidth}px;
+                width: 100%;
               `}
             >
-              {compact ? Icon : <img src={logoTextSvg} height="50" alt="" />}
+              { compact ? 
+                Icon 
+              :
+                <div css={`
+                  display: flex;
+                  align-items: center;
+                `}>
+                  <img src={logo} height="126" alt="" />
+                  <img src={logoFullText} alt="" css={`
+                    height: 50px;
+                    margin-left: ${4.2 * GU}px;
+                  `}  />
+                </div>
+              }
             </div>
             {!compact && <div>{Icon}</div>}
             <div
@@ -58,7 +70,6 @@ function Header({ compact }) {
               <AccountModule compact={compact} />
             </div>
           </div>
-        </Layout>
       </div>
     </header>
   )

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()

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

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 }) {

src/components/Layout.js

@@ -1,16 +1,20 @@
 import React from 'react'
-import { Layout, useViewport } from '@1hive/1hive-ui'
+import { GU, Layout, useViewport } from '@tecommons/ui'
 import { BREAKPOINTS } from '../styles/breakpoints'
 
 function CustomLayout({ children }) {
   const { width: vw } = useViewport()
+  console.log(vw);
   return (
     <Layout
       breakpoints={BREAKPOINTS}
-      parentWidth={vw}
       paddingBottom={0}
       css={`
-        min-width: auto;
+        @media screen and (min-width: ${BREAKPOINTS.small}px) {
+          margin-left: ${GU * 15.75}px;
+          margin-right: ${GU * 7}px;
+          width: ${vw - GU * 22.75}px;
+        }
       `}
     >
       {children}

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'

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 => (
   <ButtonIcon