fix: modal responsiveness (#71)

* fix: modal responsiveness * fix: viewport * fix: lint warnings * fix: modal
vechain · Nov 13, 2023 · adcacc0 · adcacc0
1 parent eae93c8
commit adcacc0
Show file tree

Hide file tree

Showing 17 changed files with 66 additions and 25 deletions.
diff --git a/apps/sample-vanilla-app/index.html b/apps/sample-vanilla-app/index.html
@@ -2,6 +2,7 @@
 
 <html lang="en">
     <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Sample Vanilla App</title>
         <meta charset="utf-8" />
         <script crossorigin type="module" src="index.js"></script>

diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectButtonWithModal.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { useCallback, useContext, useState } from 'react';
 import type { WalletSource } from '@vechainfoundation/wallet-kit';
 import type { SourceInfo } from '@vechainfoundation/vanilla-wallet-kit';
@@ -11,7 +12,7 @@ interface ConnectButtonWithModalProps {
 
 export const ConnectButtonWithModal = ({
     onClose,
-}: ConnectButtonWithModalProps) => {
+}: ConnectButtonWithModalProps): ReactNode => {
     const { theme } = useContext(ThemeContext);
 
     const handleSourceClick = (e: SourceInfo): void => {

diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx
@@ -1,12 +1,14 @@
 // ThemeSelector.js
 
+import type { ReactNode } from 'react';
 import React, { useContext } from 'react';
-import { ThemeContext } from '../../provider/ThemeProvider';
+// eslint-disable-next-line import/no-named-as-default
 import styled from 'styled-components';
+import { ThemeContext } from '../../provider/ThemeProvider';
 
 const Button = styled.button``;
 
-const ThemeSelector = () => {
+const ThemeSelector = (): ReactNode => {
     const { toggleTheme } = useContext(ThemeContext);
 
     return <Button onClick={toggleTheme}>Toggle Theme</Button>;

diff --git a/packages/react-wallet-kit/src/provider/ThemeProvider.tsx b/packages/react-wallet-kit/src/provider/ThemeProvider.tsx
@@ -1,19 +1,20 @@
 // ThemeProvider.js
 
+import type { ReactNode } from 'react';
 import React, { useState, createContext } from 'react';
-import { lightTheme, darkTheme } from '../ConnectWalletButton/Constants';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import { lightTheme, darkTheme } from '../ConnectWalletButton/Constants';
 
 const ThemeContext = createContext({
     theme: lightTheme,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     toggleTheme: () => {},
 });
 
-const ThemeProvider = ({ children }: any) => {
+const ThemeProvider = ({ children }: { children: ReactNode }): ReactNode => {
     const [currentTheme, setCurrentTheme] = useState(lightTheme);
 
-    const toggleTheme = () => {
+    const toggleTheme = (): void => {
         setCurrentTheme((prevTheme) =>
             prevTheme === lightTheme ? darkTheme : lightTheme,
         );

diff --git a/packages/vanilla-wallet-kit/index.html b/packages/vanilla-wallet-kit/index.html
@@ -2,6 +2,7 @@
 
 <html lang="en">
     <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Sample Vanilla App</title>
         <meta charset="utf-8" />
         <script crossorigin type="module" src="./index.js"></script>

diff --git a/packages/vanilla-wallet-kit/src/class/index.ts b/packages/vanilla-wallet-kit/src/class/index.ts
@@ -0,0 +1 @@
+export * from './responsive';
diff --git a/packages/vanilla-wallet-kit/src/class/responsive.ts b/packages/vanilla-wallet-kit/src/class/responsive.ts
@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators';
+import { addResizeListeners } from '../utils';
+import { Breakpoint } from '../constants';
+
+export enum Media {
+    Mobile = 'mobile',
+    Tablet = 'tablet',
+    Desktop = 'desktop',
+}
+
+export class ResponsiveLitElement extends LitElement {
+    @property()
+    media = Media.Desktop;
+
+    private setCurrentMedia = (): void => {
+        if (window.screen.width <= Breakpoint.Mobile) {
+            this.media = Media.Mobile;
+            return;
+        }
+        if (window.screen.width <= Breakpoint.Tablet) {
+            this.media = Media.Tablet;
+            return;
+        }
+        this.media = Media.Desktop;
+    };
+
+    constructor() {
+        super();
+        addResizeListeners(this.setCurrentMedia);
+    }
+}
diff --git a/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts b/packages/vanilla-wallet-kit/src/components/base/vwk-base-modal/index.ts
@@ -1,8 +1,8 @@
 import type { TemplateResult } from 'lit';
-import { css, html, LitElement } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Theme, ThemeMode } from '@vechainfoundation/wallet-kit';
-import { Colors } from '../../../constants';
+import { Breakpoint, Colors } from '../../../constants';
 
 @customElement('vwk-base-modal')
 export class Modal extends LitElement {
@@ -22,7 +22,6 @@ export class Modal extends LitElement {
         .modal {
             position: absolute;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-            box-sizing: border-box;
         }
 
         .modal.LIGHT {
@@ -35,7 +34,7 @@ export class Modal extends LitElement {
             color: ${Colors.LightGrey};
         }
 
-        @media (max-width: 600px) {
+        @media (max-width: ${Breakpoint.Mobile}px) {
             .modal {
                 width: 100%;
                 border-top-left-radius: 16px;
@@ -46,7 +45,7 @@ export class Modal extends LitElement {
             }
         }
 
-        @media (min-width: 600px) {
+        @media (min-width: ${Breakpoint.Mobile}px) {
             .modal {
                 width: 350px;
                 top: 50%;
@@ -56,6 +55,7 @@ export class Modal extends LitElement {
             }
         }
     `;
+
     @property({ type: Boolean })
     open = false;
     @property()

diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-modal/index.ts
@@ -11,10 +11,7 @@ import {
 } from '../../assets';
 import type { SourceInfo } from '../../constants';
 import { Colors, WalletSources } from '../../constants';
-import {
-    dispatchCustomEvent,
-    subscribeToCustomEvent,
-} from '../../utils/events';
+import { dispatchCustomEvent, subscribeToCustomEvent } from '../../utils';
 import { DAppKit } from '../../client';
 
 @customElement('vwk-connect-modal')

diff --git a/packages/vanilla-wallet-kit/src/constants/breakpoint.ts b/packages/vanilla-wallet-kit/src/constants/breakpoint.ts
@@ -0,0 +1,4 @@
+export const Breakpoint = {
+    Mobile: 500,
+    Tablet: 800,
+};
diff --git a/...-wallet-kit/src/constants/enums/colors.ts → ...anilla-wallet-kit/src/constants/colors.ts b/...-wallet-kit/src/constants/enums/colors.ts → ...anilla-wallet-kit/src/constants/colors.ts
diff --git a/packages/vanilla-wallet-kit/src/constants/enums/index.ts b/packages/vanilla-wallet-kit/src/constants/enums/index.ts
diff --git a/packages/vanilla-wallet-kit/src/constants/index.ts b/packages/vanilla-wallet-kit/src/constants/index.ts
@@ -1,2 +1,4 @@
 // TODO: use the wallet-kit package instead of this one
-export * from './enums';
+export * from './colors';
+export * from './sources';
+export * from './breakpoint';
diff --git a/...wallet-kit/src/constants/enums/sources.ts → ...nilla-wallet-kit/src/constants/sources.ts b/...wallet-kit/src/constants/enums/sources.ts → ...nilla-wallet-kit/src/constants/sources.ts
@@ -1,9 +1,4 @@
-import {
-    Sync2Logo,
-    SyncLogo,
-    VeWorldLogo,
-    WalletConnectLogo,
-} from '../../assets';
+import { Sync2Logo, SyncLogo, VeWorldLogo, WalletConnectLogo } from '../assets';
 
 enum WalletSource {
     WalletConnect = 'wallet-connect',

diff --git a/packages/vanilla-wallet-kit/src/modal.ts b/packages/vanilla-wallet-kit/src/modal.ts
@@ -5,7 +5,7 @@ import type {
     SubscribeModalState,
     WCModal,
 } from '@vechainfoundation/wallet-kit';
-import { dispatchCustomEvent, subscribeToCustomEvent } from './utils/events';
+import { dispatchCustomEvent, subscribeToCustomEvent } from './utils';
 
 const MODAL_STATE_EVENT = 'vwk-modal-state-change';
 

diff --git a/packages/vanilla-wallet-kit/src/utils/index.ts b/packages/vanilla-wallet-kit/src/utils/index.ts
@@ -1 +1,3 @@
 export * from './qr-code';
+export * from './listeners';
+export * from './events';
diff --git a/packages/vanilla-wallet-kit/src/utils/listeners.ts b/packages/vanilla-wallet-kit/src/utils/listeners.ts
@@ -0,0 +1,4 @@
+export const addResizeListeners = (callback: () => void): void => {
+    window.addEventListener('load', callback, false);
+    window.addEventListener('resize', callback, false);
+};