Merge pull request #636 from ensdomains/dev

Deploy to live

src/components/Links/ContentHashLink.js

@@ -45,7 +45,7 @@ const ContentHashLink = ({ value, contentType }) => {
     externalLink = `https://swarm-gateways.net/bzz://${decoded}`
     url = `bzz://${decoded}`
   } else if (protocolType === 'onion' || protocolType === 'onion3') {
-    externalLink = `https://${decoded}.onion`
+    externalLink = `http://${decoded}.onion`
     url = `onion://${decoded}`
   } else {
     console.warn(`Unsupported protocol ${protocolType}`)

src/components/Links/TextRecordLink.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { ReactComponent as ExternalLinkIcon } from '../Icons/externalLink.svg'
+
+const LinkContainer = styled('a')`
+  display: inline-block;
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  svg {
+    margin-left: 10px;
+    transition: 0.1s;
+    opacity: 0;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+`
+
+const TextRecordLink = ({ textKey, value }) => {
+  let url
+  switch (textKey) {
+    case 'url':
+      url = `${value}`
+      break
+    case 'vnd.twitter':
+      url = `twitter.com/${value}`
+      break
+    case 'vnd.github':
+      url = `github.com/${value}`
+      break
+    default:
+  }
+  if (url && !url.match(/http[s]?:\/\//)) {
+    url = 'https://' + url
+  }
+  return url ? (
+    <LinkContainer target="_blank" href={url}>
+      {value}
+      <ExternalLinkIcon />
+    </LinkContainer>
+  ) : (
+    value
+  )
+}
+
+export default TextRecordLink

src/components/SingleName/DNSNameRegister/NameRegister.js

@@ -12,6 +12,7 @@ import You from '../../Icons/You'
 
 const EtherScanLink = styled(DefaultEtherScanLink)`
   display: flex;
+  overflow: hidden;
   svg {
     flex-grow: 1;
   }

src/components/SingleName/NameDetails.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useQuery } from 'react-apollo'
 import styled from '@emotion/styled'
 import { Link, Route } from 'react-router-dom'
+import mq from 'mediaQuery'
 
 import {
   SET_OWNER,
@@ -53,12 +54,17 @@ const Button = styled(DefaultButton)`
 `
 
 const ButtonContainer = styled('div')`
-  margin-top: 0;
-  position: absolute;
-  right: ${props => (props.outOfSync ? '195px' : '180px')};
-  -webkit-transform: translate(0, -65%);
-  -ms-transform: translate(0, -65%);
-  transform: translate(0, -65%);
+  margin-top: 20px;
+  height: 50px;
+  ${mq.small`
+    height: 50px;
+    width: 50px;
+    position: absolute;
+    right: 128px;
+    -webkit-transform: translate(0, -65%);
+    -ms-transform: translate(0, -65%);
+    transform: translate(0, -65%);
+  `}
 `
 
 const ExpirationDetailsValue = styled(DetailsValue)`
@@ -75,7 +81,11 @@ const Explainer = styled('div')`
   color: #adbbcd;
   display: flex;
   padding: 1em 0;
-  margin-left: 180px;
+  margin-left: 0px;
+  ${mq.small`
+    margin-left: 180px;
+  `}
+
   margin-bottom: 45px;
   padding-left 24px;
 `
@@ -100,7 +110,7 @@ const EtherScanLinkContainer = styled('span')`
 `
 
 const LinkToLearnMore = styled('a')`
-  margin-right: ${props => (props.outOfSync ? '' : '2em')};
+  margin-right: ${props => (props.outOfSync ? '' : '')};
   font-size: 14px;
   letter-spacing: 0.58px;
   text-align: center;

src/components/SingleName/ResolverAndRecords/KeyValueRecord/KeyValueRecord.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import styled from '@emotion/styled'
 import { useMutation, useQuery, Mutation } from 'react-apollo'
+import TextRecordLink from '../../../Links/TextRecordLink'
 import mq from 'mediaQuery'
 
 import {
@@ -67,16 +68,12 @@ const RecordsListItem = styled('div')`
   `}
 `
 
-const Value = styled(RecordsValue)`
-  padding-right: 0;
-`
-
 const KeyValuesContent = styled(RecordsContent)`
   display: grid;
   width: 100%;
   grid-template-columns: 1fr;
   padding-right: 30px;
-
+  overflow: hidden;
   ${mq.small`
     grid-template-columns: 150px 1fr;
   `}
@@ -148,7 +145,7 @@ const Editable = ({
     <KeyValueItem editing={editing} hasRecord={true} noBorder>
       <KeyValuesContent editing={editing}>
         <RecordsSubKey>{textKey}</RecordsSubKey>
-        <Value editableSmall>{value}</Value>
+        <TextRecordLink textKey={textKey} value={value} />
 
         {pending && !confirmed && txHash ? (
           <PendingTx

src/components/SingleName/ResolverAndRecords/RecordsItem.js

@@ -40,10 +40,13 @@ export const RecordsItem = styled(DetailsItem)`
 `
 
 export const RecordsContent = styled('div')`
-  display: flex;
+  display: grid;
   justify-content: flex-start;
   align-items: center;
   position: relative;
+  ${mq.medium`
+    display: flex;
+  `}
   ${({ editing }) => editing && 'margin-bottom: 30px'};
 `
 
@@ -74,6 +77,10 @@ export const RecordsSubKey = styled('div')`
 
 export const RecordsValue = styled(DetailsValue)`
   font-size: 14px;
+  margin-top: 1em;
+  ${mq.small`
+      margin-top: 0;
+  `}
 `
 
 const EditRecord = styled('div')`

src/components/SingleName/ResolverAndRecords/TextRecord/TextRecord.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import TEXT_RECORD_KEYS from 'constants/textRecords'
 import KeyValueRecord from '../KeyValueRecord'
-import { Query, useQuery } from 'react-apollo'
+import { useQuery } from 'react-apollo'
 import { getNamehash } from '@ensdomains/ui'
 import { GET_RESOLVER_FROM_SUBGRAPH } from 'graphql/queries'