SimpleDatePicker Input Styled

src/components/Calendar/index.css

@@ -6,11 +6,17 @@
   
   .DatePicker__input {
     background: #fff;
-    border: 1px solid #ddd;
-    padding: 0.4em 0.8em;
-    font-family: inherit;
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    padding: 0.6em 1.2em;
+    font-family:'iranSans';
     text-align: center;
     font-size: 12px;
+    border-radius: 7px;
+    
+  }
+  .DatePicker__input:focus{
+    outline:1px solid #06BACE;
+    color: #06BACE;
   }
   
   .DatePicker__input.-rtl {
@@ -20,6 +26,9 @@
   .DatePicker__input::placeholder {
     color: #979797;
   }
+  .DatePicker__input:focus::placeholder{
+    color: #06BACE;
+  }
   
   .DatePicker__calendarContainer.-top + .DatePicker__calendarArrow {
     top: auto;

src/components/SimpleDatePicker/index.js

@@ -8,7 +8,7 @@ const SimpleDatePicker = () =>{
             <DatePicker
                 value={selectedDay}
                 onChange={setSelectedDay}
-                inputPlaceholder="Select a day"
+                inputPlaceholder="انتخاب تاریخ"
                 shouldHighlightWeekends
                 locale='fa'
             />