Quest redesign - phase 1

packages/react-app/config/webpack.config.ts

@@ -345,7 +345,7 @@ module.exports = function (webpackEnv) {
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.
             {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
               loader: require.resolve('url-loader'),
               options: {
                 limit: imageInlineSizeLimit,

packages/react-app/src/app.tsx

@@ -3,6 +3,7 @@ import { Main } from '@1hive/1hive-ui';
 import { useEffect, useState } from 'react';
 import { hot } from 'react-hot-loader/root';
 import { HashRouter } from 'react-router-dom';
+import styled from 'styled-components';
 import MainView from './components/main-view';
 import ErrorBoundary from './components/utils/error-boundary';
 import { DEFAULT_THEME } from './constants';
@@ -12,32 +13,37 @@ import { QuestsContextProvider } from './contexts/quests.context';
 import { TransactionContextProvider } from './contexts/transaction.context';
 import { WalletProvider } from './contexts/wallet.context';
 import Routes from './Routes';
+import background from './assets/background.svg';
+import backgroundMotif from './assets/background-motif.svg';
+import { customDarkTheme } from './styles/dark-theme';
+import { customLightTheme } from './styles/light-theme';
+import { isDarkTheme } from './utils/style.util';
+import { ModalContextProvider } from './contexts/modal-context';
 
-const sharedTheme = {
-  positiveSurface: '#2cc68f',
-  warningSurface: '#ffe443',
-};
-const customLightTheme = {
-  ...sharedTheme,
-  _name: 'customLight',
-  _appearance: 'light',
-  negativeSurface: '#ce2828',
-  negative: '#ce2828',
-  surface: '#F9FAFC',
-};
-const customDarkTheme = {
-  ...sharedTheme,
-  _name: 'customDark',
-  _appearance: 'dark',
-  negativeSurface: '#ff6969',
-  negative: '#ff6969',
-};
+// #region StyledComponents
+
+const AppStyled = styled.div`
+  ${({ theme }: any) => isDarkTheme(theme) && `background-image: url(${background});`};
+  &::after {
+    content: '';
+    background: url(${backgroundMotif}) no-repeat center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0.02;
+    z-index: -1;
+  }
+`;
+
+// #endregion
 
 function App() {
   const [currentTheme, setCurrentTheme] = useState<any>(undefined);
 
   useEffect(() => {
-    let themeName = localStorage.getItem('theme');
+    let themeName = localStorage.getItem('forcetheme');
     if (!themeName) themeName = DEFAULT_THEME;
     setCurrentTheme(themeName === 'dark' ? customDarkTheme : customLightTheme);
   }, []);
@@ -49,31 +55,34 @@ function App() {
   };
 
   return (
-    // Trigger sentry.io
-    <WalletProvider>
-      <PageContextProvider>
-        <TransactionContextProvider>
-          <QuestsContextProvider>
-            <FilterContextProvider>
-              <Main
-                assetsUrl="/aragon-ui/"
-                layout={false}
-                scrollView={false}
-                theme={currentTheme ?? DEFAULT_THEME}
-              >
-                <HashRouter>
-                  <ErrorBoundary>
-                    <MainView toggleTheme={toggleTheme} currentTheme={currentTheme}>
-                      <Routes />
-                    </MainView>
-                  </ErrorBoundary>
-                </HashRouter>
-              </Main>
-            </FilterContextProvider>
-          </QuestsContextProvider>
-        </TransactionContextProvider>
-      </PageContextProvider>
-    </WalletProvider>
+    <AppStyled theme={currentTheme}>
+      <WalletProvider>
+        <PageContextProvider>
+          <ModalContextProvider>
+            <TransactionContextProvider>
+              <QuestsContextProvider>
+                <FilterContextProvider>
+                  <Main
+                    assetsUrl="/aragon-ui/"
+                    layout={false}
+                    scrollView={false}
+                    theme={currentTheme ?? DEFAULT_THEME}
+                  >
+                    <HashRouter>
+                      <ErrorBoundary>
+                        <MainView toggleTheme={toggleTheme}>
+                          <Routes />
+                        </MainView>
+                      </ErrorBoundary>
+                    </HashRouter>
+                  </Main>
+                </FilterContextProvider>
+              </QuestsContextProvider>
+            </TransactionContextProvider>
+          </ModalContextProvider>
+        </PageContextProvider>
+      </WalletProvider>
+    </AppStyled>
   );
 }
 export default process.env.NODE_ENV === 'development' ? hot(App) : App;

packages/react-app/src/collapsable-block.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/destructuring-assignment */
-import { Button, IconDown, IconUp, IconCopy } from '@1hive/1hive-ui';
+import { Button, IconDown, IconUp, IconCopy, useTheme } from '@1hive/1hive-ui';
 import { ReactNode, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useCopyToClipboard } from './hooks/use-copy-to-clipboard.hook';
-import { GUpx } from './utils/css.util';
+import { GUpx } from './utils/style.util';
 
 // #region StyledComponents
 
@@ -38,6 +38,11 @@ const ContentWrapperStyled = styled.div`
 
 const LabelStyled = styled.span`
   height: 100%;
+  color: ${({ theme }: any) => theme.link} !important;
+`;
+
+const WrapperStyled = styled.pre`
+  background: ${({ theme }: any) => theme.surfaceUnder} !important;
 `;
 
 // #endregion
@@ -51,6 +56,7 @@ type Props = {
 };
 
 export function CollapsableBlock(props: Props) {
+  const theme = useTheme();
   const [isVisible, setVisible] = useState(props.visible);
   const copyCode = useCopyToClipboard();
 
@@ -66,7 +72,7 @@ export function CollapsableBlock(props: Props) {
   }, [props, props.children]);
 
   return (
-    <pre>
+    <WrapperStyled theme={theme}>
       <LineStyled>
         <CollapseButtonStyled onClick={() => setVisible(!isVisible)}>
           <IconColumnStyled>
@@ -82,7 +88,7 @@ export function CollapsableBlock(props: Props) {
               </>
             )}
           </IconColumnStyled>
-          <LabelStyled>
+          <LabelStyled theme={theme}>
             {isVisible ? 'Hide ' : 'Show '}
             {props.label}
           </LabelStyled>
@@ -98,6 +104,6 @@ export function CollapsableBlock(props: Props) {
         )}
       </LineStyled>
       {isVisible && content ? <ContentWrapperStyled>{content}</ContentWrapperStyled> : <></>}
-    </pre>
+    </WrapperStyled>
   );
 }

packages/react-app/src/components/account/account-button.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-unresolved */
 import { EthIdenticon, RADIUS, shortenAddress, textStyle, useTheme } from '@1hive/1hive-ui';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 import { useWallet } from '../../contexts/wallet.context';
 import HeaderModule from '../header/header-module';

packages/react-app/src/components/account/account-module.tsx

@@ -163,6 +163,7 @@ function AccountModule({ compact = false }: Props) {
         <AccountButton onClick={toggle} />
       ) : (
         <Button
+          mode="strong"
           icon={<IconConnect />}
           label="Enable account"
           onClick={toggle}

packages/react-app/src/components/account/screen-connected.tsx

@@ -8,7 +8,7 @@ import {
   useTheme,
 } from '@1hive/1hive-ui';
 import { useCallback } from 'react';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import { getProviderFromUseWalletId } from '../../ethereum-providers';
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard.hook';
 import { getNetworkName } from '../../utils/web3.utils';

packages/react-app/src/components/account/screen-providers.tsx

@@ -1,6 +1,6 @@
 import { ButtonBase, GU, Link, RADIUS, textStyle, useTheme } from '@1hive/1hive-ui';
 import { useCallback } from 'react';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import { getProviderFromUseWalletId } from '../../ethereum-providers';
 import { getUseWalletProviders } from '../../utils/web3.utils';
 

packages/react-app/src/components/claim-list.tsx

@@ -1,8 +1,8 @@
-import { AddressField, Field, Accordion } from '@1hive/1hive-ui';
+import { AddressField, Field, Accordion, useTheme } from '@1hive/1hive-ui';
 import { ClaimModel } from 'src/models/claim.model';
 import { useWallet } from 'src/contexts/wallet.context';
 import styled from 'styled-components';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import { ENUM_CLAIM_STATE } from 'src/constants';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { QuestModel } from 'src/models/quest.model';
@@ -20,6 +20,10 @@ import { StateTag } from './state-tag';
 
 // #region StyledComponents
 
+const FieldStyled = styled(Field)`
+  color: ${({ color }: any) => color};
+`;
+
 const ClaimHeaderStyled = styled.div`
   display: flex;
   align-items: center;
@@ -53,6 +57,7 @@ export default function ClaimList({
   questTotalBounty,
 }: Props) {
   const { walletAddress } = useWallet();
+  const theme = useTheme();
   const [claims, setClaims] = useState<ClaimModel[]>();
 
   useEffect(() => {
@@ -93,7 +98,7 @@ export default function ClaimList({
             <HeaderStyled>Claims</HeaderStyled>
             <IconTooltip
               tooltip="Claims"
-              tooltipDetail={`A claim includes the proof of the quest's completion.`}
+              tooltipDetail="A claim includes the proof of the quest's completion."
             />
           </ClaimHeaderStyled>
           <Accordion
@@ -126,19 +131,22 @@ export default function ClaimList({
                   <Outset>
                     <ChildSpacer size={16} justify="start" align="center" buttonEnd>
                       <StateTag state={claim.state ?? ''} />
-                      <Field
+                      <FieldStyled
+                        color={theme.content}
                         label={walletAddress === claim.playerAddress ? 'You' : 'Claiming player'}
                       >
                         <AddressField address={claim.playerAddress} autofocus={false} />
-                      </Field>
+                      </FieldStyled>
                       {claim.claimedAmount.parsedAmount ? (
                         <AmountFieldInput
                           id="amount"
                           label="Claimed amount"
                           value={claim.claimedAmount}
                         />
                       ) : (
-                        <Field label="Claimed amount">All available</Field>
+                        <FieldStyled color={theme.content} label="Claimed amount">
+                          All available
+                        </FieldStyled>
                       )}
                       {walletAddress && actionButton}
                     </ChildSpacer>

packages/react-app/src/components/field-input/amount-field-input.tsx

@@ -18,7 +18,7 @@ import { getNetwork } from 'src/networks';
 import { fetchRewardTokens } from 'src/services/quest.service';
 import { arrayDistinctBy } from 'src/utils/array.util';
 import { getTokenInfo } from 'src/utils/contract.util';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import { Logger } from 'src/utils/logger';
 import { floorNumber } from 'src/utils/math.utils';
 import { includesCaseInsensitive } from 'src/utils/string.util';
@@ -267,7 +267,7 @@ function AmountFieldInput({
             renderItem={(i: number) => (
               <LineStyled key={tokens[i].symbol}>
                 <TokenNameStyled>{tokens[i].name}</TokenNameStyled>
-                <Tag>{tokens[i].symbol}</Tag>
+                <Tag mode="identifier">{tokens[i].symbol}</Tag>
               </LineStyled>
             )}
             tabindex="-1"

packages/react-app/src/components/field-input/checkbox-field-input.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
 import { ReactNode } from 'react';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 import { FieldInput } from './field-input';
 

packages/react-app/src/components/field-input/date-field-input.tsx

@@ -2,7 +2,7 @@ import { useTheme } from '@1hive/1hive-ui';
 import { connect } from 'formik';
 import { noop } from 'lodash-es';
 import { CSSProperties, ReactNode } from 'react';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx, isDarkTheme } from 'src/utils/style.util';
 import styled from 'styled-components';
 import { addTime, dateFormat, ONE_HOUR_IN_MS } from '../../utils/date.utils';
 import { FieldInput } from './field-input';
@@ -83,7 +83,7 @@ function DateFieldInput({
       borderColor={theme.border}
       focusBorderColor={theme.accent}
       // eslint-disable-next-line no-underscore-dangle
-      isDarkTheme={theme._appearance === 'dark'}
+      isDarkTheme={isDarkTheme(theme)}
     />
   ) : (
     <span>{value ? new Date(value).toDateString() : 'Not set'}</span>

packages/react-app/src/components/field-input/field-input.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@1hive/1hive-ui';
 import React from 'react';
 import Skeleton from 'react-loading-skeleton';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 import { IconTooltip } from './icon-tooltip';
 

packages/react-app/src/components/field-input/icon-tooltip.tsx

@@ -1,6 +1,6 @@
 import { Help, IconQuestion, useTheme } from '@1hive/1hive-ui';
 import { ReactNode } from 'react';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 
 // #region Styled
@@ -33,6 +33,9 @@ const HelpWrapperStyled = styled.div`
   display: inline-block;
   margin-left: ${GUpx()};
   margin-right: ${GUpx(0.5)};
+  svg {
+    color: ${({ theme }: any) => theme.hint}!important;
+  }
 `;
 
 // #endregion
@@ -47,7 +50,7 @@ type Props = {
 export const IconTooltip = ({ tooltip, tooltipDetail, icon, children }: Props) => {
   const theme = useTheme();
   return (
-    <HelpWrapperStyled className="btn-no-margin">
+    <HelpWrapperStyled className="btn-no-margin" theme={theme}>
       {tooltipDetail || children ? (
         <Help hint={tooltip ?? tooltipDetail}>
           <TooltipWrapperStyled color={theme.accentContent}>

packages/react-app/src/components/field-input/text-field-input.tsx

@@ -2,7 +2,7 @@ import { TextInput, Markdown } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
 import React, { ReactNode } from 'react';
 import { CollapsableBlock } from 'src/collapsable-block';
-import { GUpx } from 'src/utils/css.util';
+import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 import { FieldInput } from './field-input';
 
@@ -100,6 +100,12 @@ export default function TextFieldInput({
                   visible: !maxLine,
                 },
               },
+              a: {
+                component: 'a',
+                props: {
+                  target: '_blank',
+                },
+              },
             },
           })}
         />