From 2e09758601cef1a121998446875aa961f80ded70 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Fri, 25 Oct 2024 18:01:37 +0200
Subject: [PATCH] Minor fixes for UI integration

---
 .storybook/preview-head.html             |  4 +++
 package-lock.json                        |  4 +--
 package.json                             |  2 +-
 src/components/Input/Input.tsx           | 10 +++++-
 src/components/Input/input.css           | 40 ++++++++++++------------
 src/components/SimpleText/simpleText.css |  2 +-
 stories/Menu.stories.css                 | 12 -------
 7 files changed, 37 insertions(+), 37 deletions(-)
 delete mode 100644 stories/Menu.stories.css

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index c367a90..cd2bfbf 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -28,6 +28,10 @@
       BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
       sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
       Noto Color Emoji;
+    --codex-input-label-color: #7b7b7b;
+    --codex-input-border-color: #494949;
+    --codex-input-background: #232323;
+    --codex-input-color-error: rgb(--codex-color-error);
 
     font-family: var(--codex-font-family);
     font-feature-settings: normal;
diff --git a/package-lock.json b/package-lock.json
index 9981578..2a4a26a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@codex-storage/marketplace-ui-components",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@codex-storage/marketplace-ui-components",
-      "version": "0.0.25",
+      "version": "0.0.26",
       "license": "MIT",
       "dependencies": {
         "lucide-react": "^0.453.0"
diff --git a/package.json b/package.json
index 7d363cd..057be55 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/codex-storage/codex-marketplace-ui-components"
   },
-  "version": "0.0.25",
+  "version": "0.0.26",
   "type": "module",
   "scripts": {
     "prepack": "npm run build",
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 8966403..3b70769 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -47,6 +47,8 @@ type Props = {
    * Apply a class to the input element
    */
   inputClassName?: string;
+
+  inputContainerClassName?: string;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 export const Input = forwardRef<HTMLInputElement, Props>(
@@ -58,6 +60,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       style,
       Icon,
       inputClassName,
+      inputContainerClassName = "",
       disabled = false,
       onChange,
       mode,
@@ -84,7 +87,12 @@ export const Input = forwardRef<HTMLInputElement, Props>(
           </label>
         )}
 
-        <div className={classnames(["input-icon", !!Icon])}>
+        <div
+          className={classnames(
+            ["input-icon", !!Icon],
+            [inputContainerClassName]
+          )}
+        >
           {Icon && (
             <div className="input-iconElement">
               <Icon />
diff --git a/src/components/Input/input.css b/src/components/Input/input.css
index 9a2f6fc..24db102 100644
--- a/src/components/Input/input.css
+++ b/src/components/Input/input.css
@@ -1,29 +1,32 @@
 .input {
-  background-color: var(
-    --codex-input-background,
-    var(--codex-background-secondary)
-  );
-  color: var(--codex-color);
+  background-color: var(--codex-input-background);
+  color: white;
   border-radius: var(--codex-border-radius);
-  border: var(--codex-input-border, 1px solid var(--codex-border-color));
-  padding: 0.75rem 1rem;
+  border: 1px solid var(--codex-input-border-color);
+  padding: 16px;
   outline: none;
   display: inline-block;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+  font-weight: 500;
+  font-size: 20px;
+  height: 64px;
 }
 
 .input--invalid {
-  color: rgb(var(--codex-color-error));
-  border-color: rgb(var(--codex-color-error));
+  color: var(--codex-input-color-error);
+  border-color: var(--codex-input-color-error);
 }
 
 .input-label {
-  margin-bottom: 0.5rem;
-  font-weight: 500;
+  margin-bottom: 0.75rem;
   display: block;
-  color: var(--codex-color);
+  font-family: var(--codex-input-font-family, var(--codex-font-family));
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.006em;
+  text-align: left;
+  color: var(--codex-input-label-color);
 }
 
 .input:not(.input[disabled]):active,
@@ -48,10 +51,7 @@
 }
 
 .input[disabled] {
-  background-color: var(
-    --codex-input-background-disabled,
-    var(--codex-background-light)
-  );
+  background-color: var(--codex-input-background-disabled);
   cursor: not-allowed;
 }
 
@@ -98,8 +98,8 @@
   font-size: 0.9rem;
 }
 
-@media (min-width: 801px) {
+/* @media (min-width: 801px) {
   .input {
     min-width: 20rem;
   }
-}
+} */
diff --git a/src/components/SimpleText/simpleText.css b/src/components/SimpleText/simpleText.css
index 9231a94..1ff4587 100644
--- a/src/components/SimpleText/simpleText.css
+++ b/src/components/SimpleText/simpleText.css
@@ -7,7 +7,7 @@
 }
 
 .text--light {
-  color: var(--codex-color-light);
+  color: var(--codex-input-label-color);
 }
 
 .text--center {
diff --git a/stories/Menu.stories.css b/stories/Menu.stories.css
deleted file mode 100644
index 19ac489..0000000
--- a/stories/Menu.stories.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.menu-story {
-  min-height: 500px;
-}
-
-.menu-noSticky {
-  transform: translatex(-1000px) !important;
-  position: fixed;
-}
-
-.menu-noSticky[aria-expanded] {
-  transform: translatex(0) !important;
-}