fix: 🎨 select dropdown input color and placeholder color (#529)

* fix: 🎨 select dropdown input color and placeholder color * fix: 🎨 changed language input dropdown max-width
caisy-io · Aug 12, 2024 · 3f63e6d · 3f63e6d
1 parent 645d540
commit 3f63e6d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/input/styles/SInput.tsx b/src/components/input/styles/SInput.tsx
@@ -32,7 +32,11 @@ const Bronze = css`
     font-size: 14px;
     line-height: 1.71;
     text-align: left;
-    color: var(--form-item-text-color);
+    color: var(--text-01);
+
+    &::placeholder {
+      color: var(--text-03);
+    }
 
     &:disabled {
       opacity: 0.5;

diff --git a/src/components/language-format-input-dropdown/SelectLanguage.stories.tsx b/src/components/language-format-input-dropdown/SelectLanguage.stories.tsx
@@ -59,6 +59,11 @@ const dataSource = [
     title: "Italy",
     solidLabelText: "en-US",
   },
+  {
+    key: "long_input",
+    title: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et quod.",
+    solidLabelText: "en-US",
+  },
   {
     key: "icon_title_label1",
     title: "Portugal",

diff --git a/...ponents/language-format-input-dropdown/styles/SLanguageFormatInputDropdownTextWrapper.tsx b/...ponents/language-format-input-dropdown/styles/SLanguageFormatInputDropdownTextWrapper.tsx
@@ -6,7 +6,7 @@ const Bronze = css`
   flex: 1 1 auto;
   flex-direction: column;
   align-items: flex-start;
-  max-width: calc(100% - 20px - 8px - 8px - 49px);
+  max-width: calc(100% - 8px);
 `;
 
 const Silver = css``;