review css component specific

website/src/Reviews.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
-import './Reviews.css';
+import styles from './Reviews.module.css';
 import SelectDropdown from './components/SelectDropdown';
 
 function Reviews() {
@@ -108,63 +108,87 @@ function Reviews() {
     return (<>
         <div className='site-box'>
             <h1 className='site-headline'>Reviews</h1>
-            <p className='review-description'>I would greatly appreciate receiving a review. You are welcome to write it in either English or German. All fields are optional and all reviews are submitted anonymously.</p>
+            <p className={styles["review-description"]}>I would greatly appreciate receiving a review. You are welcome to write it in either English or German. All fields are optional and all reviews are submitted anonymously.</p>
 
 
 
-            <div className='input-box'>
+            <div className={styles["input-box"]}>
-                <div className='input-component-box'>
+                <div className={styles["input-component-box"]}>
-                    <p className='description'>Website</p>
+                    <p className={styles.description}>Website</p>
+
                     <SelectDropdown
-                        listClass="flex"
+                        styles={styles}
-                        parentClass="input-component"
+                        parentClass={styles["input-component"]}
                         values={websites}
                         defaultValue={websites.at(-1)}
-                        classNames={"website"}
+                        classNames={styles.website}
                         changeInputParent={changeSelectedWebsite}
                     />
                 </div>
 
-                <div className='input-component-box'>
+                <div className={styles["input-component-box"]}>
-                    <p className='description'>Rating</p>
+                    <p className={styles.description}>Rating</p>
+
                     <SelectDropdown
-                        listClass="grid"
+                        styles={styles}
-                        parentClass="input-component"
+                        parentClass={styles["input-component"]}
                         values={ratings}
                         defaultValue={ratings.at(0)}
-                        classNames={"rating"}
+                        classNames={styles.rating}
                         changeInputParent={changeSelectedRating}
                     />
                 </div>
 
-                <div className='input-component-box'>
+                <div className={styles["input-component-box"]}>
-                    <div className='button-div input-component'>
+                    <div className={`${styles["button-div"]} ${styles["input-component"]}`}>
-                        <button id='button-send' style={{ display: "none" }} onClick={sendReview} />
+                        <button
-                        <label htmlFor="button-send" className="custom-button send-review">
+                            id="button-send"
+                            style={{ display: "none" }}
+                            onClick={sendReview}
+                        />
+
+                        <label
+                            htmlFor="button-send"
+                            className={`custom-button ${styles["send-review"]}`}
+                        >
                             Send Review
                         </label>
 
-                        <div className='loader-box'>
+                        <div className={styles["loader-box"]}>
-                            {loading && <div className="loader2"></div>}
+                            {loading && <div className={styles.loader2}></div>}
-                            {sendSuccess && <p className='description second'>Review sent</p>}
+
-                            {error && <p className='description second'>Error</p>}
+                            {sendSuccess && (
+                                <p className={`${styles.description} ${styles.second}`}>
+                                    Review sent
+                                </p>
+                            )}
+
+                            {error && (
+                                <p className={`${styles.description} ${styles.second}`}>
+                                    Error
+                                </p>
+                            )}
                         </div>
                     </div>
                 </div>
 
-                <div className='input-component-box text'>
+                <div className={`${styles["input-component-box"]} ${styles.text}`}>
-                    <p className='description'>Review</p>
+                    <p className={styles.description}>Review</p>
+
                     <textarea
                         autoCorrect="off"
                         autoCapitalize="off"
                         spellCheck={false}
-                        className='review-text input-component'
+                        className={`${styles["review-text"]} ${styles["input-component"]}`}
                         type="text"
                         value={text}
                         onChange={(e) => handleTextInput(e)}
                         placeholder="Share your Opinion"
                     />
-                    <p className='description second'>{text.length}/{MAX_TEXT}</p>
+
+                    <p className={`${styles.description} ${styles.second}`}>
+                        {text.length}/{MAX_TEXT}
+                    </p>
                 </div>
             </div>
         </div>

website/src/components/SelectDropdown.css

@@ -1,3 +0,0 @@
-.review-select-menu {
-    display: grid;
-}

website/src/components/SelectDropdown.jsx

@@ -1,5 +1,4 @@
 import { useState, useRef, useEffect } from 'react';
-import './SelectDropdown.css';
 
 function SelectDropdown(props) {
     const values = props.values;
@@ -7,6 +6,7 @@ function SelectDropdown(props) {
     const classNames = props.classNames;
     const changeInputParent = props.changeInputParent;
     const parentClass = props.parentClass;
+    const styles = props.styles;
     const [selectVisibility, setSelectVisibility] = useState(false);
     const SelectButton = useRef();
 
@@ -38,7 +38,7 @@ function SelectDropdown(props) {
             String(selectedInput) !== String(item) && (
                 <div
                     key={item}
-                    className={`review-select-item review-select-box-${indices[indices.length - 1]} ${classNames}` + (i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? ' last' : '')}
+                    className={`${styles["review-select-item"]} ${styles[`review-select-box-${indices[indices.length - 1]}`]} ${classNames}` + (i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? ` ${styles.last}` : '')}
                     onClick={() => changeSelectedInput(item)}
                     style={{gridArea:`box${indices.pop()}`}}
                 >
@@ -50,12 +50,12 @@ function SelectDropdown(props) {
 
 
     return (
-        <div className={`review-select-dropdown ${classNames} ${parentClass}`} >
+        <div className={`${styles["review-select-dropdown"]} ${classNames} ${parentClass}`} >
-            <button ref={SelectButton} className={selectVisibility ? `review-select-button ${classNames} active` : `review-select-button ${classNames}`} onClick={() => { setSelectVisibility(!selectVisibility) }}>
+            <button ref={SelectButton} className={selectVisibility ? `${styles["review-select-button"]} ${classNames} ${styles.active}` : `${styles["review-select-button"]} ${classNames}`} onClick={() => { setSelectVisibility(!selectVisibility) }}>
                 {selectedInput}
             </button>
             {selectVisibility &&
-                <div className={`review-select-menu ${classNames}`}>
+                <div className={`${styles["review-select-menu"]} ${classNames}`} style={{display: "grid"}}>
                     <CreateItems />
                 </div>}