v1.1-beta Release

components/Confirm.tsx

@@ -15,7 +15,7 @@ const Confirm: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
   const [browser, setBrowser] = React.useState(false)
   const [helpModal, setHelpModal] = React.useState(false)
   const [help, setHelp] = React.useState('')
-  
+
   React.useEffect(() => {
     setBrowser(true)
   }, [])
@@ -38,16 +38,16 @@ const Confirm: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
       <StyledModal>
         <StyledModalHeader>
           <a href="#" onClick={handleCloseClick}>
-            <span 
+            <span
               className="material-icons"
             >
               close
             </span>
           </a>
         </StyledModalHeader>
-        {show && 
+        {show &&
           <StyledModalTitle>
-            <div 
+            <div
               className="material-icons"
               style={{
                 marginTop: '4px',
@@ -118,7 +118,7 @@ const Confirm: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
                 marginLeft: '25px'
               }}
             >
-              <button 
+              <button
                 className="button-option"
                 style={{
                   height: '35px',
@@ -127,34 +127,34 @@ const Confirm: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
                   fontSize: '15px',
                   fontWeight: '700'
                 }}
-                onClick={() => { 
-                  handleConfirmSubmit('0') 
+                onClick={() => {
+                  handleConfirmSubmit('0')
                 }}
-                data-tooltip={ children === '0' ? 'Continue With Ownerhash' : 'Continue With Recordhash' }
+                data-tooltip={children === '0' ? 'Continue With Ownerhash' : 'Continue With Recordhash'}
               >
-                <div 
+                <div
                   className="flex-row"
                 >
-                  { children === '0' ? 'Ownerhash' : 'Recordhash' }&nbsp;<span className="material-icons chonk">hub</span>
+                  {children === '0' ? 'Ownerhash' : 'Recordhash'}&nbsp;<span className="material-icons chonk">hub</span>
                 </div>
               </button>
-              <button 
+              <button
                 className="button-tiny"
-                onClick={() => { 
-                  setHelpModal(true),
+                onClick={() => {
+                  setHelpModal(true)
                   setHelp(`<span><span style="color: cyan">${children === '0' ? 'Ownerhash' : 'Recordhash'}</span> is specific to one ${children === '0' ? 'wallet' : 'name'} and it is the <span style="color: lime">permissionless</span> and <span style="color: lime">decentralised</span> option</span>`)
                 }}
-                data-tooltip={ 'Enlighten Me' }
+                data-tooltip={'Enlighten Me'}
               >
-                <div 
+                <div
                   className="material-icons smol"
-                  style={{ 
+                  style={{
                     color: 'cyan',
                     marginLeft: '5px',
                     marginTop: '16px'
                   }}
                 >
-                  info_outline 
+                  info_outline
                 </div>
               </button>
             </div>
@@ -164,7 +164,7 @@ const Confirm: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
                 marginLeft: '25px'
               }}
             >
-              <button 
+              <button
                 className="button-option"
                 style={{
                   height: '35px',
@@ -173,35 +173,35 @@ const Confirm: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
                   fontSize: '15px',
                   fontWeight: '700'
                 }}
-                onClick={ () => { 
+                onClick={() => {
                   handleConfirmSubmit('1')
                 }}
-                data-tooltip={ 'Continue With HTTP Gateway' }
+                data-tooltip={'Continue With HTTP Gateway'}
                 disabled={!children}
               >
-                <div 
+                <div
                   className="flex-row"
                 >
-                  { 'HTTP Gateway' }&nbsp;<span className="material-icons chonk">dns</span>
+                  {'HTTP Gateway'}&nbsp;<span className="material-icons chonk">dns</span>
                 </div>
               </button>
-              <button 
+              <button
                 className="button-tiny"
-                onClick={() => { 
-                  setHelpModal(true),
+                onClick={() => {
+                  setHelpModal(true)
                   setHelp('<span><span style="color: cyan">HTTP Gateway</span> could point to a <span style="color: cyan">web<span style="font-family: \'SF Mono\'; font-size: 15px">2</span></span> gateway or <span style="color: cyan">L<span style="font-family: \'SF Mono\'; font-size: 15px">2</span></span> proxy</span>')
                 }}
-                data-tooltip={ 'Continue With Gateway' }
+                data-tooltip={'Continue With Gateway'}
               >
-                <div 
+                <div
                   className="material-icons smol"
-                  style={{ 
+                  style={{
                     color: 'cyan',
                     marginLeft: '5px',
                     marginTop: '16px'
                   }}
                 >
-                  info_outline 
+                  info_outline
                 </div>
               </button>
             </div>
@@ -210,12 +210,13 @@ const Confirm: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
       </StyledModal>
       <div id="modal-inner">
         <Help
-          color={ 'cyan' }
-          icon={ 'info' }
+          color={'cyan'}
+          icon={'info'}
           onClose={() => setHelpModal(false)}
           show={helpModal}
+          position={''}
         >
-          { help }
+          {help}
         </Help>
       </div>
     </StyledModalOverlay>
@@ -280,7 +281,7 @@ const StyledModal = styled.div`
 `
 
 const StyledModalOverlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;

components/Error.tsx

@@ -77,6 +77,8 @@ const StyledModalHeader = styled.div`
 `
 
 const StyledModal = styled.div`
+  position: fixed;
+  top: 300px;  
   background: red;
   width: 400px;
   height: auto;
@@ -88,7 +90,7 @@ const StyledModal = styled.div`
 `
 
 const StyledModalOverlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;

components/Export.tsx

@@ -220,6 +220,7 @@ const Export: React.FC<ModalProps> = ({ show, onClose, children, handleModalData
           icon={ 'info' }
           onClose={() => setHelpModal(false)}
           show={helpModal}
+          position={''}
         >
           { help }
         </Help>
@@ -287,7 +288,7 @@ const StyledModal = styled.div`
 
 const StyledModalOverlay = styled.div`
   position: absolute;
-  top: 0;
+  top: -60px;
   left: 0;
   width: 100%;
   height: 100%;

components/Gas.tsx

@@ -168,6 +168,8 @@ const StyledModalHeader = styled.div`
 `;
 
 const StyledModal = styled.div`
+  position: fixed;
+  top: 250px;  
   background: rgba(66,46,40,1);
   background-size: 400% 400%;
   width: auto;
@@ -182,7 +184,7 @@ const StyledModal = styled.div`
 `;
 
 const StyledModalOverlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;

components/Gateway.tsx

@@ -153,6 +153,7 @@ const Gateway: React.FC<ModalProps> = ({ show, onClose, children, handleModalDat
           icon={ 'info' }
           onClose={() => setHelpModal(false)}
           show={helpModal}
+          position={''}
         >
           { help }
         </Help>
@@ -223,7 +224,7 @@ const StyledModal = styled.div`
 
 const StyledModalOverlay = styled.div`
   position: absolute;
-  top: 0;
+  top: -60px;
   left: 0;
   width: 100%;
   height: 100%;

components/Help.tsx

@@ -3,7 +3,10 @@ import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 import { isMobile } from 'react-device-detect'
 
-const Help = ({ icon, color, show, onClose, children }) => {
+interface StyledModalProps {
+  top: string;
+}
+const Help = ({ icon, color, show, onClose, children, position }) => {
   const [browser, setBrowser] = React.useState(false)
   React.useEffect(() => {
     setBrowser(true)
@@ -16,7 +19,7 @@ const Help = ({ icon, color, show, onClose, children }) => {
 
   const modalContent = show ? (
     <StyledModalOverlay>
-      <StyledModal>
+      <StyledModal top={position}>
         <StyledModalHeader>
           <a href="#" onClick={handleCloseClick}>
             <span 
@@ -88,7 +91,9 @@ const StyledModalHeader = styled.div`
   justify-content: flex-end;
 `
 
-const StyledModal = styled.div`
+const StyledModal = styled.div<StyledModalProps>`
+  position: fixed;
+  top: ${props => props.top}; 
   background: rgba(66,46,40,1);
   background-size: 400% 400%;
   width: auto;
@@ -102,7 +107,7 @@ const StyledModal = styled.div`
 `
 
 const StyledModalOverlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;

components/Info.tsx

@@ -203,7 +203,7 @@ const StyledModal = styled.div`
 
 const StyledModalOverlay = styled.div`
   position: absolute;
-  top: 0;
+  top: -60px;
   left: 0;
   width: 100%;
   height: 100%;