From c51b2d42612638cecf40ef932c8637cd54927f92 Mon Sep 17 00:00:00 2001
From: davidgoss <david@davidgoss.co>
Date: Sun, 18 Apr 2021 11:05:14 +0100
Subject: [PATCH] clearer labelling of clipboard import, separation from URL
 import

---
 demo/ClipboardImporter.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/demo/ClipboardImporter.tsx b/demo/ClipboardImporter.tsx
index c5872894..afcaf0b2 100644
--- a/demo/ClipboardImporter.tsx
+++ b/demo/ClipboardImporter.tsx
@@ -9,7 +9,7 @@ const Button = styled.button`
   touch-action: manipulation;
   cursor: pointer;
   user-select: none;
-  border: none;
+  border: 1px solid #ccc;
   font-size: 16px;
   height: 28px;
   box-sizing: border-box;
@@ -17,6 +17,18 @@ const Button = styled.button`
   line-height: 1;
   outline: none;
   white-space: nowrap;
+
+  @media (max-width: 699px) {
+    display: none;
+  }
+`;
+
+const Separator = styled.em`
+  padding: 0 1rem;
+
+  @media (max-width: 699px) {
+    display: none;
+  }
 `;
 
 export interface ClipboardImporterProps {
@@ -28,7 +40,10 @@ export default class ClipboardImporter extends React.Component<any, any> {
     if (!('clipboard' in navigator)) {
       return null;
     }
-    return <Button title='Get spec from clipboard' onClick={() => this.import()}>📋</Button>;
+    return <>
+      <Button title='Import spec from clipboard' onClick={() => this.import()}>Import from 📋</Button>
+      <Separator>or</Separator>
+    </>;
   }
 
   private import() {