🐛 datepicker visibility

components/home/ChooseCustom.js

@@ -234,6 +234,7 @@ export default function ChooseCustom({ details, setDetails, handleNext }) {
             When should redemption start?
           </FormLabel>
           <DatePicker
+            id="date-picker"
             selected={redemptionStart}
             onChange={(date) => setRedemptionStart(date)}
             showTimeSelect
@@ -250,6 +251,7 @@ export default function ChooseCustom({ details, setDetails, handleNext }) {
             When should the crowdsale end?
           </FormLabel>
           <DatePicker
+            id="date-picker"
             selected={saleEnds}
             onChange={(date) => setSaleEnds(date)}
             showTimeSelect

styles/style.css

@@ -3,21 +3,29 @@
 #mobile-menu {
   position: fixed;
   bottom: 0;
-  background-color:rgba(255, 255, 255, 0.8) !important;
-  width:100%;
+  background-color: rgba(255, 255, 255, 0.8) !important;
+  width: 100%;
   padding: 5px 10px;
 }
 
 /* //////////////// GRADIENT //////////////// */
 
 .gradient-item {
-  background: rgb(70,37,74);
-  background: linear-gradient(54deg, rgba(70,37,74,0.9) 0%, rgba(250,42,16,0.9) 100%);
+  background: rgb(70, 37, 74);
+  background: linear-gradient(
+    54deg,
+    rgba(70, 37, 74, 0.9) 0%,
+    rgba(250, 42, 16, 0.9) 100%
+  );
 }
 
 .gradient-item:hover {
-  background: rgb(70,37,74);
-  background: linear-gradient(54deg, rgba(70,37,74,1) 0%, rgba(250,42,16,1) 100%);
+  background: rgb(70, 37, 74);
+  background: linear-gradient(
+    54deg,
+    rgba(70, 37, 74, 1) 0%,
+    rgba(250, 42, 16, 1) 100%
+  );
 }
 
 #gradient1 {
@@ -74,7 +82,7 @@
 .solid-btn {
   padding: 10px 15px !important;
   font-size: 1em !important;
-  font-weight:normal !important;
+  font-weight: normal !important;
   background: #7e8d90 !important;
   border: none !important;
   color: white !important;
@@ -100,7 +108,7 @@ select {
 .delete-icon {
   background: none !important;
   border: 0 !important;
-  margin-bottom:30px;
+  margin-bottom: 30px;
 }
 
 #deployer-container .delete-icon {
@@ -112,30 +120,30 @@ ul.alternating-list {
 }
 
 ul.alternating-list li {
-  padding:20px;
+  padding: 20px;
   border-radius: none !important;
 }
 
-ul.alternating-list > li:nth-child(2n+1) {
+ul.alternating-list > li:nth-child(2n + 1) {
   background-color: #eeeeee !important;
 }
 
 ul.alternating-list > li:nth-child(2n) {
   background-color: #eeeeee !important;
 }
 
-#deployer-container ul.alternating-list > li:nth-child(2n+1) {
-  background-color:rgba(0, 0, 0, 0.1) !important;
+#deployer-container ul.alternating-list > li:nth-child(2n + 1) {
+  background-color: rgba(0, 0, 0, 0.1) !important;
 }
 
 #deployer-container ul.alternating-list > li:nth-child(2n) {
-  background-color:rgba(0, 0, 0, 0.1) !important;
+  background-color: rgba(0, 0, 0, 0.1) !important;
 }
 
 /* //////////////// DEPLOYER //////////////// */
 
 #deployer-container {
-  padding:20px;
+  padding: 20px;
   min-height: 100vh;
 }
 
@@ -163,11 +171,10 @@ div.dao-type:hover {
 }
 
 #landing-tile-left {
-  margin-right:100px;
+  margin-right: 100px;
 }
 
 #landing-tile-right {
-
 }
 
 #not-connected {
@@ -179,7 +186,7 @@ div.dao-type:hover {
 }
 
 .member-address {
-  width:90% !important;
+  width: 90% !important;
   margin-right: 10px !important;
 }
 
@@ -194,6 +201,9 @@ div.dao-type:hover {
   width: 70%;
 }
 
+#date-picker {
+  color: black !important;
+}
 /* //////////////// APP //////////////// */
 
 div#dao-main {
@@ -204,7 +214,6 @@ div#dao-main {
 div#footer {
   margin: 0 -45px;
   padding: 20px 45px !important;
-
 }
 
 #dao-main h1 {
@@ -239,15 +248,16 @@ div#footer {
   color: white;
 }
 
-.dashboard-tile, .proposal-tile, .proposal-type-tile {
+.dashboard-tile,
+.proposal-tile,
+.proposal-type-tile {
   padding: 30px;
   margin: 0;
   border-radius: 15px;
   color: white;
-  width:100%;
+  width: 100%;
 }
 
-
 .dashboard-tile h2 {
   font-size: 1.5em;
   margin-bottom: 15px;