fixed step 4 styling issues

TritonSE · May 9, 2024 · f43d2ac · f43d2ac
1 parent 214b958
commit f43d2ac
Show file tree

Hide file tree

Showing 5 changed files with 329 additions and 301 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -23,8 +23,7 @@ function App() {
     <div className="app-container">
       <Routes>
         <Route path="/" element={<Layout />}>
-          <Route index element={<Application path={1} />} />
-          {/* <Route index element={<Candidates />} /> */}
+          <Route index element={<Candidates />} />
           <Route path="path1" element={<Application path={1} />} />
           <Route path="path2" element={<Application path={2} />} />
           <Route path="path3" element={<Application path={3} />} />

diff --git a/frontend/src/components/Dropdown.module.css b/frontend/src/components/Dropdown.module.css
@@ -4,7 +4,7 @@
   font-size: 16px;
   color: var(--color-ccidc-placeholder);
   height: 40px;
-  width: 460px;
+
   border-radius: 4px;
   border: 1px solid #d8d8d8;
   background-image: url("../assets/dropDownIcon.svg");
@@ -45,9 +45,3 @@
 .dpItem:hover {
   background-color: #ebebeb;
 }
-
-@media (max-width: 1250px) {
-  .dropDown {
-    width: 330px;
-  }
-}
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
@@ -17,42 +17,40 @@ export function Dropdown(props: {
   };
 
   return (
-    <>
-      <div
-        className={styles.dropDown}
-        onClick={() => {
-          setIsActive(!isActive);
-        }}
-        role="button"
-        tabIndex={0}
-        onKeyDown={() => {
-          setIsActive(!isActive);
-        }}
-      >
-        <div className={selected === "Select One" ? styles.selectOne : styles.selectedOption}>
-          {selected ?? "Select One"}
-        </div>
-        {isActive && (
-          <div className={styles.dpContent}>
-            {props.options.map((option, index) => (
-              <div
-                onClick={() => {
-                  handleOptionClick(option);
-                }}
-                className={styles.dpItem}
-                role="button"
-                tabIndex={0}
-                key={index}
-                onKeyDown={() => {
-                  setIsActive(!isActive);
-                }}
-              >
-                {option}
-              </div>
-            ))}
-          </div>
-        )}
+    <div
+      className={styles.dropDown}
+      onClick={() => {
+        setIsActive(!isActive);
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={() => {
+        setIsActive(!isActive);
+      }}
+    >
+      <div className={selected === "Select One" ? styles.selectOne : styles.selectedOption}>
+        {selected ?? "Select One"}
       </div>
-    </>
+      {isActive && (
+        <div className={styles.dpContent}>
+          {props.options.map((option, index) => (
+            <div
+              onClick={() => {
+                handleOptionClick(option);
+              }}
+              className={styles.dpItem}
+              role="button"
+              tabIndex={0}
+              key={index}
+              onKeyDown={() => {
+                setIsActive(!isActive);
+              }}
+            >
+              {option}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
   );
 }