add styled components to copyableinput

Author: raclim

client/modules/IDE/components/CopyableInput.jsx

@@ -1,11 +1,91 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import Clipboard from 'clipboard';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
+import { remSize, prop } from '../../../theme';
+import Button from '../../../common/Button';
 import ShareIcon from '../../../images/share.svg';
 
+const CopyableInputWrapper = styled.div`
+  //.copyable-input
+  padding-bottom: ${remSize(30)};
+  display: flex;
+
+  ${({ hasPreviewLink }) =>
+    hasPreviewLink &&
+    `
+    .copyable-input--with-preview & {
+      border-radius: 2px 0 0 2px;
+    }
+  `}
+`;
+
+const CopyableInputValueContainer = styled.div`
+  //.copyable-input__value-container
+  position: relative;
+  width: 100%;
+
+  &.tooltipped-no-delay {
+    transition-delay: 0s;
+  }
+
+  ${({ isCopied }) =>
+    isCopied &&
+    `
+    .tooltipped::after {
+    background-color: ${prop('buttonBackgroundHoverColor')};
+    color: ${prop('button-hover-color')};
+    font-family: Montserrat, sans-serif;
+    font-size: ${remSize(12)};
+  }
+
+  .tooltipped-n::before,
+  .tooltipped::before {
+    background-color: ${prop('buttonBackgroundHoverColor')};
+    color: ${prop('buttonBackgroundHoverColor')};
+  }
+  `}
+`;
+
+const InputLabel = styled.label`
+  //.copyable-input__label
+  width: 100%;
+  font-size: ${remSize(11)};
+  padding-bottom: ${remSize(5)};
+  color: ${prop('inactiveTextColor')};
+`;
+
+const InputLabelContainer = styled.div`
+  //.copyable-input__label-container
+  width: 100%;
+  font-size: ${remSize(11)};
+  padding-bottom: ${remSize(5)};
+  color: ${prop('inactiveTextColor')};
+`;
+
+const InputField = styled.input`
+  //.copyable-input__value
+  width: 100%;
+  font-size: ${remSize(16)};
+  .copyable-input--with-preview & {
+    border-radius: 2px 0 0 2px;
+  }
+`;
+
+const PreviewLink = styled(Button)`
+  //.copyable-input__preview
+  align-self: flex-end;
+  border-radius: 0 2px 2px 0;
+  padding: ${remSize(2)};
+
+  & svg {
+    height: ${remSize(30)};
+    width: ${remSize(30)};
+  }
+`;
+
 const CopyableInput = ({ label, value, hasPreviewLink }) => {
   const { t } = useTranslation();
 
@@ -33,48 +113,37 @@ const CopyableInput = ({ label, value, hasPreviewLink }) => {
   }, [inputRef, setIsCopied]);
 
   return (
-    <div
-      className={classNames(
-        'copyable-input',
-        hasPreviewLink && 'copyable-input--with-preview'
-      )}
-    >
-      <div
-        className={classNames(
-          'copyable-input__value-container',
-          'tooltipped-no-delay',
-          isCopied && 'tooltipped tooltipped-n'
-        )}
+    <CopyableInputWrapper hasPreviewLink={hasPreviewLink}>
+      <CopyableInputValueContainer
+        isCopied={isCopied}
         aria-label={t('CopyableInput.CopiedARIA')}
         onMouseLeave={() => setIsCopied(false)}
+        className={`tooltipped-no-delay ${
+          isCopied ? 'tooltipped tooltipped-n' : ''
+        }`}
       >
-        <label
-          className="copyable-input__label"
-          htmlFor={`copyable-input__value-${label}`}
-        >
-          <div className="copyable-input__label-container">{label}</div>
-          <input
+        <InputLabel htmlFor={`copyable-input__value-${label}`}>
+          <InputLabelContainer>{label}</InputLabelContainer>
+          <InputField
             type="text"
-            className="copyable-input__value"
             id={`copyable-input__value-${label}`}
             value={value}
             ref={inputRef}
             readOnly
           />
-        </label>
-      </div>
+        </InputLabel>
+      </CopyableInputValueContainer>
       {hasPreviewLink && (
-        <a
+        <PreviewLink
           target="_blank"
           rel="noopener noreferrer"
           href={value}
-          className="copyable-input__preview"
           aria-label={t('CopyableInput.CopiedARIA', { label })}
         >
           <ShareIcon focusable="false" aria-hidden="true" />
-        </a>
+        </PreviewLink>
       )}
-    </div>
+    </CopyableInputWrapper>
   );
 };