fix: multiple select label color (#832)

* Refactor css styles into styled modules * Extract all components to separate file * Fix select label wrong color * chore: change label text --------- Co-authored-by: ArkadiK94 <[email protected]>
th3cyb3rhub · Jun 5, 2024 · 3ced7cf · 3ced7cf
1 parent 76cd9a3
commit 3ced7cf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/Common/MultipleSelect/MultipleSelect.jsx b/src/components/Common/MultipleSelect/MultipleSelect.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Option, Select, SelectContainer } from "./MultipleSelectElements";
+import styled from "styled-components";
 
 /*
 optionsValuesWithLabels=[
@@ -19,7 +20,7 @@ const MultipleSelect = ({ selectLabel, selectedValue, onValueSelect, optionsValu
     });
     return (
         <SelectContainer>
-            {selectLabel && <label htmlFor="Select">{selectLabel}:</label>}
+            {selectLabel && <StyledLabel htmlFor="Select">{selectLabel}:</StyledLabel>}
             <Select
                 name={selectLabel.toLowerCase()}
                 value={defaultValue || selectedValue}
@@ -30,4 +31,8 @@ const MultipleSelect = ({ selectLabel, selectedValue, onValueSelect, optionsValu
         </SelectContainer>
     );
 };
+
+const StyledLabel = styled.label`
+    color: #d7d7d7;
+`;
 export default MultipleSelect;
diff --git a/src/components/Common/MultipleSelect/MultipleSelect.stories.jsx b/src/components/Common/MultipleSelect/MultipleSelect.stories.jsx
@@ -23,7 +23,7 @@ const Template = ({ optionsValuesWithLabels, ...args }) => (
 
 export const Default = Template.bind({});
 Default.args = {
-    selectLabel: "Select an option",
+    selectLabel: "Label",
     selectedValue: "",
     defaultValue: "",
     optionsValuesWithLabels: [