feat: make external field more consistent with other fields

measuredco · Oct 31, 2023 · 5bfbc5b · 5bfbc5b
1 parent ac4543f
commit 5bfbc5b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -2,7 +2,7 @@ import { useMemo, useEffect, useState } from "react";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { ExternalField } from "../../types/Config";
-import { Link } from "react-feather";
+import { Link, Unlock } from "react-feather";
 import { Modal } from "../Modal";
 import { Heading } from "../Heading";
 
@@ -86,7 +86,7 @@ export const ExternalInput = ({
               onChange(null);
             }}
           >
-            Detach
+            <Unlock size={16} />
           </button>
         )}
       </div>

diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
@@ -14,7 +14,7 @@
   background-color: white;
   border: 1px solid var(--puck-color-grey-8);
   border-radius: 4px;
-  color: var(--puck-color-blue);
+  color: var(--puck-color-grey-2);
   padding: 12px 16px;
   font-weight: 500;
   white-space: nowrap;
@@ -27,14 +27,13 @@
 .ExternalInput-button:hover,
 .ExternalInput-detachButton:hover {
   cursor: pointer;
-  background: var(--puck-color-grey-10);
-  border-color: var(--puck-color-neutral-3);
+  background: var(--puck-color-azure-9);
+  color: var(--puck-color-azure-4);
   z-index: 1;
 }
 
 .ExternalInput--hasData .ExternalInput-button {
   display: block;
-  color: var(--puck-color-neutral-4);
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
@@ -43,7 +42,8 @@
   border: 1px solid var(--puck-color-grey-8);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
-  background-color: var(--puck-color-neutral-1);
+  background-color: var(--puck-color-grey-11);
+  color: var(--puck-color-grey-4);
   display: flex;
   gap: 8px;
   align-items: center;

diff --git a/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx b/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
@@ -1,5 +1,3 @@
-import getClassNameFactory from "../../../../lib/get-class-name-factory";
-import styles from "../../styles.module.css";
 import { FieldLabelInternal, type InputProps } from "../..";
 import { ExternalInput } from "../../../ExternalInput";
 import { Link } from "react-feather";