Fix DOB input colors

spacebarchat · Sep 3, 2023 · c764bab · c764bab
1 parent 64394e7
commit c764bab
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git a/src/components/DOBInput.css b/src/components/DOBInput.css
@@ -7,7 +7,7 @@
 	position: relative;
 	display: block;
 	padding: 10px;
-	background: var(--background-secondary);
+	background: var(--background-secondary-alt);
 	border: none;
 	color: var(--text);
 	outline: none;
@@ -92,7 +92,7 @@
 .select-search-is-selected {
 	font-weight: bold;
 	color: var(--text);
-	background-color: hsl(20, 4%, 25%);
+	background-color: var(--background-primary-alt);
 }
 
 .select-search-row:not(:first-child) .select-search-group-header {

diff --git a/src/components/DOBInput.tsx b/src/components/DOBInput.tsx
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import SelectSearch from "react-select-search";
 import styled from "styled-components";
+import { Input } from "./AuthComponents";
 import "./DOBInput.css";
 
 // const MIN_AGE = 13;
@@ -11,17 +12,7 @@ const Container = styled.div`
 	display: flex;
 `;
 
-const Input = styled.input<{ error?: boolean }>`
-	outline: none;
-	background: var(--background-secondary);
-	padding: 10px;
-	font-size: 16px;
-	border-radius: 12px;
-	color: var(--text);
-	margin: 0 0 0 5px;
-	border: none;
-	aria-invalid: ${(props) => (props.error ? "true" : "false")};
-	border: ${(props) => (props.error ? "1px solid red" : "none")};
+const CustomInput = styled(Input)`
 	box-sizing: border-box;
 	width: 100%;
 `;
@@ -198,15 +189,15 @@ export class DOBInput extends Component<Props, State> {
 					value={this.state.month}
 					disabled={this.props.disabled}
 				/>
-				<Input
+				<CustomInput
 					placeholder="Day"
 					onChange={this.onInputChange("day")}
 					value={this.state.day}
 					error={this.state.errors.day || this.props.error}
 					maxLength={2}
 					disabled={this.props.disabled}
 				/>
-				<Input
+				<CustomInput
 					placeholder="Year"
 					onChange={this.onInputChange("year")}
 					value={this.state.year}