🎨: 디자인 반영 안된 것 수정

turbinecrew · Jan 16, 2025 · fa6554c · fa6554c
1 parent f7e53b0
commit fa6554c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/src/common/components/button/buttonVariants.ts b/src/common/components/button/buttonVariants.ts
@@ -11,7 +11,7 @@ export const buttonVariants = cva(
 			},
 			color: {
 				green: "bg-green-500 text-white hover:bg-green-600",
-				gray: "bg-gray-500 text-white hover:bg-gray-600",
+				gray: "bg-gray-400 text-white hover:bg-gray-500",
 				black: "bg-black text-white hover:bg-gray-800",
 				blue: "bg-sky-600 text-white hover:bg-sky-500",
 				red: "bg-rose-600 text-white hover:bg-rose-800",

diff --git a/src/features/realtime/components/trading-table/filter-picker/index.tsx b/src/features/realtime/components/trading-table/filter-picker/index.tsx
@@ -36,8 +36,8 @@ export function FileterPicker({
 				<div className="relative w-fit">
 					<TbButton
 						onClick={() => setDropdownOpen((e) => !e)}
-						color="white"
-						size="sm"
+						color="gray"
+						size="md"
 						className="flex w-36 justify-between gap-1 border border-gray-300 text-slate-700"
 					>
 						<div className="flex w-full justify-center text-xs md:text-sm">
@@ -59,7 +59,7 @@ export function FileterPicker({
 												setSelected(id)
 												setDropdownOpen(false)
 											}}
-											color="white"
+											color="gray"
 											size="sm"
 											className="w-full px-4 py-2 text-center text-xs text-gray-700 hover:bg-gray-100 md:text-sm"
 										>

diff --git a/src/features/realtime/components/trading-table/sort-picker/index.tsx b/src/features/realtime/components/trading-table/sort-picker/index.tsx
@@ -33,9 +33,8 @@ export function SortPicker({
 				<div className="relative w-fit">
 					<TbButton
 						onClick={() => setDropdownOpen((e) => !e)}
-						color="white"
-						size="sm"
-						className="flex w-32 justify-between gap-1 rounded-2xl border border-gray-300 text-slate-700 md:w-36"
+						color="gray"
+						className="flex w-32 justify-between gap-1 rounded-2xl border border-white text-slate-700 md:w-40"
 					>
 						<div className="flex w-full justify-center text-xs md:text-sm">
 							{currentSortColumn === "plantName"
@@ -52,7 +51,7 @@ export function SortPicker({
 						/>
 					</TbButton>
 					{dropdownOpen && (
-						<div className="absolute z-10 mt-2 flex w-full flex-col gap-1 overflow-hidden rounded-2xl border border-gray-300 bg-white text-slate-700 transition duration-200 ease-in focus:ring-2 focus:ring-gray-200">
+						<div className="absolute z-10 mt-2 flex w-full flex-col gap-1 overflow-hidden rounded-2xl border border-gray-300 bg-white text-black transition duration-200 ease-in focus:ring-2 focus:ring-gray-200">
 							{SortColumnList.map(({ id, name }) => (
 								<TbButton
 									key={id}
@@ -61,8 +60,7 @@ export function SortPicker({
 										setDropdownOpen(false)
 										handleSortState(currentSortColumn)
 									}}
-									color="white"
-									size="sm"
+									color="gray"
 									className={`w-full px-4 py-2 text-center text-xs text-gray-700 hover:bg-gray-100 md:text-sm ${
 										currentSortColumn === id ? "bg-gray-100 font-bold" : ""
 									}`}

diff --git a/src/features/realtime/components/trading-table/table-header/index.tsx b/src/features/realtime/components/trading-table/table-header/index.tsx
@@ -197,7 +197,8 @@ export function TradingTableHeader({
 				{currentSortColumn != "" && (
 					<TbButton
 						onClick={resetSorting}
-						className="flex w-fit gap-1 rounded-2xl border border-gray-300 bg-white text-slate-700"
+						color="gray"
+						className="flex w-fit gap-1"
 					>
 						{sortingState[currentSortColumn] ? (
 							<ArrowDown className="h-4 w-4 md:h-5 md:w-5" />