tweak datetime display

Author: samuelcolvin

src/components/shared/Input.js

@@ -72,13 +72,15 @@ const DatetimeInput = ({field, name, value, field_label, on_change}) => {
   return (
     <label>
       {field_label}
-      <div className="tcs-datetime">
+      <div>
         <input type="date"
+               className="tcs-datetime tcs-date"
                name={name + '-date'}
                required={required}
                value={render_values.date}
                onChange={on_change_}/>
         <input type="time"
+               className="tcs-datetime tcs-time"
                step="300"
                name={name + '-time'}
                required={required}

src/styles/input.scss

@@ -1,6 +1,8 @@
 @import '../conf';
 
-$border-colour: #66afe9;
+$border-colour: #aaa;
+$border-highlight-colour: #66afe9;
+$border-radius: 5px;
 .tcs-field {
   &.required {
     .help-text {
@@ -17,14 +19,14 @@ $border-colour: #66afe9;
     padding: 8px 12px 10px;
     margin: 0;
     height: inherit;
-    border-radius: 5px;
-    border: 1px solid #aaa;
+    border-radius: $border-radius;
+    border: 1px solid $border-colour;
     font-family: inherit;
     outline: none;
     background-color: white;
     &:focus {
-      border-color: $border-colour;
-      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-colour, 20%);
+      border-color: $border-highlight-colour;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-highlight-colour, 20%);
     }
     &:required {
       border: 1px solid #888;
@@ -43,13 +45,15 @@ $border-colour: #66afe9;
       display: none;
     }
   }
-  .tcs-datetime input {
-    width: calc(50% - 5px);
-   &:first-child {
-     margin-right: 5px
-   }
-   &:last-child {
-     margin-left: 5px;
-   }
+  .tcs-datetime {
+    width: 50%;
+    &.tcs-date {
+      border-radius: $border-radius 0 0 $border-radius;
+      border-right: 1px solid lighten($border-colour, 20%);
+    }
+    &.tcs-time {
+      border-radius: 0 $border-radius $border-radius 0;
+      border-left: none;
+    }
   }
 }