aligned collapse arrow

Author: garrettlchow

src/app/components/Actions/DropDown.tsx

@@ -1,9 +1,15 @@
 import Select from 'react-select';
 import React from 'react';
 
-const DropDown = ({ dropdownSelection, setDropdownSelection }: { dropdownSelection: string; setDropdownSelection: (value: string) => void }): JSX.Element => {
+const DropDown = ({
+  dropdownSelection,
+  setDropdownSelection,
+}: {
+  dropdownSelection: string;
+  setDropdownSelection: (value: string) => void;
+}): JSX.Element => {
   const handleChange = (selected: { value: string; label: string }) => {
-    setDropdownSelection(selected.value); 
+    setDropdownSelection(selected.value);
   };
 
   const options = [
@@ -12,12 +18,14 @@ const DropDown = ({ dropdownSelection, setDropdownSelection }: { dropdownSelecti
   ];
 
   return (
-    <Select
-      placeholder="Select Hook"
-      onChange={handleChange}
-      options={options}
-      value={options.find((option) => option.value === dropdownSelection)}
-    />
+    <div className='dropdown-container'>
+      <Select
+        placeholder='Select Hook'
+        onChange={handleChange}
+        options={options}
+        value={options.find((option) => option.value === dropdownSelection)}
+      />
+    </div>
   );
 };
 

src/app/styles/components/_buttons.scss

@@ -313,8 +313,7 @@
 /* Container for arrow and collapse text */
 #arrow {
   height: 44px;
-  display: grid;
-  grid-template-columns: 45px 1fr;
+  display: flex;
   align-items: center;
   border-bottom: 1px solid #e5e7eb;
   background-color: white;
@@ -366,7 +365,6 @@
   color: #6b7280;
   font-size: 1.1rem;
   font-weight: 500;
-  padding-left: 0.5rem;
   font-family: 'Outfit', sans-serif;
   transition: color 0.2s ease;
 }

src/app/styles/layout/_actionContainer.scss

@@ -16,13 +16,9 @@
 }
 
 .actionToolContainer {
-  color: #374151;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  height: 44px;
   border-bottom: 1px solid #e5e7eb;
-  padding: 0 8px;
 }
 
 .toggle-record {
@@ -32,3 +28,21 @@
 .clear-button-container {
   padding: 16px;
 }
+
+.dropdown-container {
+  padding: 4px 16px;
+}
+
+.react-select__control {
+  background-color: #f3f4f6 !important;
+  border: none !important;
+  border-radius: 0.375rem !important;
+  min-height: 30px !important;
+  box-shadow: none !important;
+}
+
+.react-select__single-value {
+  color: #374151 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+}