From 5900068144073f6fbbdab8df8d936b91dd7e5ed0 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 8 Jun 2022 12:06:05 -0400
Subject: [PATCH] Use new Datepicker on AgeVerification step

---
 app/soapbox/components/ui/select/select.tsx   |  8 ++++--
 .../verification/steps/age-verification.js    | 26 +++----------------
 app/styles/forms.scss                         |  2 ++
 3 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index 485b3238c..f79d71ddd 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -1,13 +1,17 @@
 import * as React from 'react';
 
+interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  children: Iterable<React.ReactNode>,
+}
+
 /** Multiple-select dropdown. */
-const Select = React.forwardRef<HTMLSelectElement>((props, ref) => {
+const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   const { children, ...filteredProps } = props;
 
   return (
     <select
       ref={ref}
-      className='pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 sm:text-sm rounded-md'
+      className='w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:text-white sm:text-sm rounded-md disabled:opacity-50'
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/features/verification/steps/age-verification.js b/app/soapbox/features/verification/steps/age-verification.js
index caeed7704..113d37388 100644
--- a/app/soapbox/features/verification/steps/age-verification.js
+++ b/app/soapbox/features/verification/steps/age-verification.js
@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import DatePicker from 'react-datepicker';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { verifyAge } from 'soapbox/actions/verification';
-import { Button, Form, FormGroup, Text } from 'soapbox/components/ui';
+import { Button, Datepicker, Form, Text } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   fail: {
@@ -23,13 +22,6 @@ function meetsAgeMinimum(birthday, ageMinimum) {
   return new Date(year + ageMinimum, month, day) <= new Date();
 }
 
-function getMaximumDate(ageMinimum) {
-  const date = new Date();
-  date.setUTCFullYear(date.getUTCFullYear() - ageMinimum);
-
-  return date;
-}
-
 const AgeVerification = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -67,21 +59,9 @@ const AgeVerification = () => {
         </h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <div className='sm:pt-10 sm:w-2/3 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Birth Date'>
-            <DatePicker
-              selected={date}
-              dateFormat='MMMM d, yyyy'
-              onChange={onChange}
-              showMonthDropdown
-              showYearDropdown
-              maxDate={getMaximumDate(ageMinimum)}
-              className='block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500'
-              dropdownMode='select'
-              required
-            />
-          </FormGroup>
+          <Datepicker onChange={onChange} />
 
           <Text theme='muted' size='sm'>
             {siteTitle} requires users to be at least {ageMinimum} years old to
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index df6888ad5..637f53589 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -1,5 +1,7 @@
 select {
   @apply pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md;
+
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
 }
 
 .form-error::before,