Minor fixes for UI integration

.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;

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"

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",

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 />

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;
   }
-}
+} */

src/components/SimpleText/simpleText.css

@@ -7,7 +7,7 @@
 }
 
 .text--light {
-  color: var(--codex-color-light);
+  color: var(--codex-input-label-color);
 }
 
 .text--center {

stories/Menu.stories.css

@@ -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;
-}