From 6be2ced06f8562b93f5bd5288af8a45173afc071 Mon Sep 17 00:00:00 2001
From: Frank Johnson <frank@netamorphosis.com>
Date: Mon, 23 Aug 2021 22:16:47 -0400
Subject: [PATCH] style tweaks to make Share popover match Figma a bit closer.

---
 app/.env.example                                   |  2 --
 .../src/components/EncodedUrl/ExternalScript.tsx   | 14 +++++++-------
 .../components/EncodedUrl/FullScriptEncoding.tsx   |  4 ++--
 app/web/src/components/IdeHeader/IdeHeader.tsx     |  4 ++--
 app/web/tailwind.config.js                         |  4 ++++
 5 files changed, 15 insertions(+), 13 deletions(-)
 delete mode 100644 app/.env.example

diff --git a/app/.env.example b/app/.env.example
deleted file mode 100644
index 28853d1..0000000
--- a/app/.env.example
+++ /dev/null
@@ -1,2 +0,0 @@
-# DATABASE_URL=file:./dev.db
-# BINARY_TARGET=native
\ No newline at end of file
diff --git a/app/web/src/components/EncodedUrl/ExternalScript.tsx b/app/web/src/components/EncodedUrl/ExternalScript.tsx
index 0cc04d2..c6edf08 100644
--- a/app/web/src/components/EncodedUrl/ExternalScript.tsx
+++ b/app/web/src/components/EncodedUrl/ExternalScript.tsx
@@ -53,7 +53,7 @@ const ExternalScript = () => {
   }
   return (
     <div className="p-4">
-      <p className="text-sm pb-4">
+      <p className="text-sm pb-4 border-b border-gray-700">
         Paste an external url containing a {cadName} script to generate a new
         CadHub url for this resource.{' '}
         <OutBound
@@ -66,9 +66,9 @@ const ExternalScript = () => {
       </p>
       {['INIT', 'ERROR'].includes(asyncState) && (
         <>
-          <p>Paste url</p>
+          <p className="mt-4">Paste url</p>
           <input
-            className="p-1 text-xs rounded border border-gray-700 w-full"
+            className="p-1 text-xs border border-ch-purple-450 w-full"
             value={rawUrl}
             onChange={onChange}
             onPaste={onPaste}
@@ -91,23 +91,23 @@ const ExternalScript = () => {
           <input
             value={makeExternalUrl(rawUrl).replace(/^.+:\/\//g, '')}
             readOnly
-            className="p-1 mt-4 text-xs rounded-t border border-gray-700 w-full"
+            className="py-1 px-2 mt-4 text-xs border border-ch-purple-450 w-full"
           />
           <button
-            className="w-full bg-gray-700 py-1 rounded-b text-gray-300"
+            className="w-full bg-ch-purple-450 hover:bg-ch-purple-400 py-1 text-gray-300"
             onClick={() => copyTextToClipboard(makeExternalUrl(rawUrl))}
           >
             Copy URL
           </button>
           <div className="flex flex-col gap-2 pt-2">
             <button
-              className="bg-gray-500 p-1 px-2 rounded text-gray-300"
+              className="bg-gray-500 hover:bg-gray-600 p-1 px-2 text-gray-200"
               onClick={onCopyRender}
             >
               Copy &amp; Render
             </button>
             <button
-              className="bg-gray-500 p-1 px-2 rounded text-gray-300"
+              className="bg-gray-500 hover:bg-gray-600 p-1 px-2 text-gray-200"
               onClick={() => {
                 setAsyncState('INIT')
                 setRawUrl('')
diff --git a/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx b/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx
index 32687b5..850f29a 100644
--- a/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx
+++ b/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx
@@ -13,10 +13,10 @@ const FullScriptEncoding = () => {
       <input
         value={encodedLink.replace(/^.+:\/\//g, '')}
         readOnly
-        className="p-1 mt-4 text-xs rounded-t border border-gray-700 w-full"
+        className="py-1 px-2 mt-4 text-xs border border-ch-purple-450 w-full"
       />
       <button
-        className="w-full bg-gray-700 py-1 rounded-b text-gray-300"
+        className="w-full bg-ch-purple-450 hover:bg-ch-purple-400 py-1 rounded-b text-gray-300"
         onClick={() => copyTextToClipboard(encodedLink)}
       >
         Copy URL
diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx
index 0b077b8..3a616a4 100644
--- a/app/web/src/components/IdeHeader/IdeHeader.tsx
+++ b/app/web/src/components/IdeHeader/IdeHeader.tsx
@@ -152,8 +152,8 @@ const IdeHeader = ({
                 {open && (
                   <Popover.Panel className="absolute z-10 mt-4 right-0">
                     <Tabs
-                      className="bg-gray-300 rounded-md shadow-md overflow-hidden text-gray-700"
-                      selectedTabClassName="bg-gray-200"
+                      className="bg-ch-purple-gray-200 rounded-md shadow-md overflow-hidden text-gray-700"
+                      selectedTabClassName="bg-ch-gray-700 text-white"
                     >
                       <TabPanel>
                         <FullScriptEncoding />
diff --git a/app/web/tailwind.config.js b/app/web/tailwind.config.js
index e1dca04..a308f96 100644
--- a/app/web/tailwind.config.js
+++ b/app/web/tailwind.config.js
@@ -27,9 +27,13 @@ module.exports = {
         },
         'ch-purple': {
           400: '#3B0480',
+          450: '#671BC6',
           500: '#8732F2',
           600: '#A663FA',
         },
+        'ch-purple-gray': {
+          200: '#DBDBEC',
+        },
         'ch-blue': {
           600: '#79B2F8',
           500: '5098F1',