Merge pull request #629 from framer/csv-import-move-icon

CSV Import: move CMS icon into dropdown

Author: madebyisaacr

plugins/csv-import/src/App.css

@@ -126,6 +126,8 @@ body {
     align-items: center;
     gap: 10px;
     width: 100%;
+    position: relative;
+    color: var(--framer-color-text);
 }
 
 .collection-icon-container {
@@ -134,7 +136,9 @@ body {
     justify-content: center;
     width: 20px;
     height: 20px;
-    opacity: 0.5;
+    position: absolute;
+    left: 8px;
+    top: 5px;
 }
 
 .collection-creation-container {
@@ -147,22 +151,29 @@ body {
 .collection-select {
     flex: 1;
     min-width: 0;
-    height: 28px;
+    padding-left: 33px;
 }
 
-.collection-select.error {
+.collection-selector.error {
     color: #f36;
-    background-color: color-mix(in srgb, #f36 10%, transparent);
-    box-shadow: inset 0 0 0 1px #f36;
+}
+
+.collection-selector.error .collection-select {
+    color: inherit;
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    box-shadow: inset 0 0 0 1px currentColor;
+}
+
+select.collection-select {
+    padding-bottom: 0;
 }
 
 input.collection-select {
-    padding: 0px 16px 1px 8px;
+    padding-left: 33px;
 }
 
 .error-message {
     color: #f36;
-    padding-left: 30px;
 }
 
 /* Manage conflicts screen */

plugins/csv-import/src/components/CollectionIcon.tsx

@@ -1,6 +1,4 @@
-import type { SVGProps } from "react"
-
-export function CollectionIcon(props: SVGProps<SVGSVGElement>) {
+export function CollectionIcon() {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -10,7 +8,6 @@ export function CollectionIcon(props: SVGProps<SVGSVGElement>) {
             fill="none"
             role="presentation"
             aria-hidden="true"
-            {...props}
         >
             <path
                 d="M 6 0.5 C 8.761 0.5 11 1.619 11 3 C 11 4.381 8.761 5.5 6 5.5 C 3.239 5.5 1 4.381 1 3 C 1 1.619 3.239 0.5 6 0.5 Z"

plugins/csv-import/src/components/CollectionSelector.tsx

@@ -124,15 +124,15 @@ export function CollectionSelector({ forceCreate, collection, onCollectionChange
     if (isCreatingNew) {
         return (
             <div className="collection-creation-container">
-                <div className="collection-selector">
+                <div className={creationError ? "collection-selector error" : "collection-selector"}>
                     <div className="collection-icon-container">
                         <CollectionIcon />
                     </div>
 
                     <input
                         ref={inputRef}
                         type="text"
-                        className={creationError ? "collection-select error" : "collection-select"}
+                        className="collection-select"
                         value={newCollectionName}
                         onChange={handleCollectionNameChange}
                         onKeyDown={handleKeyDown}