aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-03 08:26:48 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-03 08:26:48 +0800
commita5231df6d9d8c9b89431df2e4674f46d307f6d80 (patch)
treead34f5ebe57f30c912d2f021f3298c22220dd6b9
parent73e81c62fb2e902cb7252410fe162e8f2ba2596b (diff)
downloaddexon-sol-tools-a5231df6d9d8c9b89431df2e4674f46d307f6d80.tar
dexon-sol-tools-a5231df6d9d8c9b89431df2e4674f46d307f6d80.tar.gz
dexon-sol-tools-a5231df6d9d8c9b89431df2e4674f46d307f6d80.tar.bz2
dexon-sol-tools-a5231df6d9d8c9b89431df2e4674f46d307f6d80.tar.lz
dexon-sol-tools-a5231df6d9d8c9b89431df2e4674f46d307f6d80.tar.xz
dexon-sol-tools-a5231df6d9d8c9b89431df2e4674f46d307f6d80.tar.zst
dexon-sol-tools-a5231df6d9d8c9b89431df2e4674f46d307f6d80.zip
Add media query abstraction around ScreenWidths and stop relayer grid hover effect on mobile
-rw-r--r--packages/website/public/index.html12
-rw-r--r--packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx2
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx4
-rw-r--r--packages/website/ts/types.ts7
-rw-r--r--packages/website/ts/utils/utils.ts7
5 files changed, 22 insertions, 10 deletions
diff --git a/packages/website/public/index.html b/packages/website/public/index.html
index 4c0985c71..c7a40875f 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -70,7 +70,17 @@
})(document, 'script', 'twitter-wjs');
</script>
<!-- End Twitter SDK -->
-
+ <!-- Hotjar Tracking Code for https://0xproject.com/ -->
+ <script>
+ (function (h, o, t, j, a, r) {
+ h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
+ h._hjSettings = { hjid: 935597, hjsv: 6 };
+ a = o.getElementsByTagName('head')[0];
+ r = o.createElement('script'); r.async = 1;
+ r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+ a.appendChild(r);
+ })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+ </script>
<!-- Main -->
<script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
</body>
diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
index 0039aa545..4ed7137d4 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOn
<Container marginTop="15px" marginBottom="15px">
<img src="/images/metamask_icon.png" height="50px" width="50px" />
</Container>
- <Text center={true}>Unlock your metamask extension to get started.</Text>
+ <Text center={true}>Unlock your MetaMask extension to get started.</Text>
</div>
</div>
);
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index b26bf512b..20594e5ca 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -9,6 +9,7 @@ import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
import { Island } from 'ts/components/ui/island';
import { colors } from 'ts/style/colors';
+import { media } from 'ts/style/media';
import { styled } from 'ts/style/theme';
import { WebsiteBackendRelayerInfo } from 'ts/types';
import { utils } from 'ts/utils/utils';
@@ -111,6 +112,9 @@ const GridTile = styled(PlainGridTile)`
&:hover {
transform: translate(0px, -3px);
}
+ ${media.small`
+ transform: none;
+ `};
`;
interface SectionProps {
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 498a0a5b8..e8fdbc255 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -215,10 +215,11 @@ export interface ContractEvent {
}
export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void;
+// Associated values are in `em` units
export enum ScreenWidths {
- Sm = 'SM',
- Md = 'MD',
- Lg = 'LG',
+ Sm = 40,
+ Md = 52,
+ Lg = 64,
}
export enum AlertTypes {
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 726e1815f..73dacc1d6 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -27,9 +27,6 @@ import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import * as u2f from 'ts/vendor/u2f_api';
-const LG_MIN_EM = 64;
-const MD_MIN_EM = 52;
-
const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD);
export const utils = {
@@ -134,9 +131,9 @@ export const utils = {
// This logic mirrors the CSS media queries in BassCSS for the `lg-`, `md-` and `sm-` CSS
// class prefixes. Do not edit these.
- if (widthInEm > LG_MIN_EM) {
+ if (widthInEm > ScreenWidths.Lg) {
return ScreenWidths.Lg;
- } else if (widthInEm > MD_MIN_EM) {
+ } else if (widthInEm > ScreenWidths.Md) {
return ScreenWidths.Md;
} else {
return ScreenWidths.Sm;