Update modal

src/components/BookingTable/index.js

@@ -128,6 +128,36 @@ const ErrorMessage = styled.p`
   text-align: center;
 `;
 
+const ModalWrapper = styled.div`
+  .startTime {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    margin-right: 20px;
+  }
+  .endTime {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 20px;
+    margin-bottom: 10px;
+  }
+  .textInput {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 20px;
+    margin-bottom: 10px;
+  }
+  .textArea {
+    width: 278px;
+    height: 93px;
+    resize: none;
+    border-radius: 2px;
+    border: none;
+    text-align: initial;
+  }
+`;
+
 class BookingTable extends Component {
   static propTypes = {
     locale: PropTypes.shape({
@@ -445,67 +475,71 @@ class BookingTable extends Component {
             )}
           </DayMenu>
         </DayMenuDiv>
-        <Modal
-          visable={this.state.showModal}
-          modalHeader="Booking Modal"
-          modalFooterSubmit={this.props.locale.bookTime}
-          modalFooterSubmit2={this.props.locale.closeModal}
-          valid={this.state.valid}
-          onSubmit={() =>
-            this.bookTime(
-              this.state.timeStamp,
-              this.state.userName,
-              this.state.userId,
-              this.state.bookTimeText,
-              this.state.startTime,
-              this.state.endTime
-            )}
-          onSubmit2={() => this.setState({ showModal: false })}
-        >
-          <div>
-            <div>
-              {this.props.locale.start}
-              <img alt="Blue clock icon" src={timeBlue} />
-              {this.state.range.length > 0 && (
-                <DropDown
-                  range={this.state.range}
-                  onChange={date => {
-                    this.setState({ startTime: date }, () => {
-                      this.validateDate();
-                    });
-                  }}
-                />
-              )}
-              {this.state.valid === false && (
-                <img alt="NotValidIcon" src={notValid} />
+        <ModalWrapper>
+          <Modal
+            visable={this.state.showModal}
+            modalHeader="Book appointment"
+            modalFooterSubmit={this.props.locale.bookTime}
+            modalFooterSubmit2={this.props.locale.closeModal}
+            valid={this.state.valid}
+            onSubmit={() =>
+              this.bookTime(
+                this.state.timeStamp,
+                this.state.userName,
+                this.state.userId,
+                this.state.bookTimeText,
+                this.state.startTime,
+                this.state.endTime
               )}
-            </div>
+            onSubmit2={() => this.setState({ showModal: false })}
+          >
             <div>
-              {this.props.locale.end}
-              <img alt="Red clock icon" src={timeRed} />
-              {this.state.range.length > 0 && (
-                <DropDown
-                  range={this.state.range}
-                  onChange={date => {
-                    this.setState({ endTime: date }, () => {
-                      this.validateDate();
-                    });
-                  }}
+              <div className="startTime">
+                {this.props.locale.start}
+                <img alt="Blue clock icon" src={timeBlue} />
+                {this.state.range.length > 0 && (
+                  <DropDown
+                    className="dropDown"
+                    range={this.state.range}
+                    onChange={date => {
+                      this.setState({ startTime: date }, () => {
+                        this.validateDate();
+                      });
+                    }}
+                  />
+                )}
+                {this.state.valid === false && (
+                  <img alt="NotValidIcon" src={notValid} />
+                )}
+              </div>
+              <div className="endTime">
+                {this.props.locale.end}
+                <img alt="Red clock icon" src={timeRed} />
+                {this.state.range.length > 0 && (
+                  <DropDown
+                    range={this.state.range}
+                    onChange={date => {
+                      this.setState({ endTime: date }, () => {
+                        this.validateDate();
+                      });
+                    }}
+                  />
+                )}
+              </div>
+              <div className="textInput">
+                {this.props.locale.note}
+                <img alt="Grey note icon" src={noteGray} />
+                <textarea
+                  className="textArea"
+                  type="text"
+                  placeholder={this.props.locale.optional}
+                  value={this.state.bookTimeText}
+                  onChange={this.handleChange}
                 />
-              )}
-            </div>
-            <div>
-              {this.props.locale.note}
-              <img alt="Grey note icon" src={noteGray} />
-              <input
-                type="text"
-                placeholder={this.props.locale.optional}
-                value={this.state.bookTimeText}
-                onChange={this.handleChange}
-              />
+              </div>
             </div>
-          </div>
-        </Modal>
+          </Modal>
+        </ModalWrapper>
       </div>
     );
   }

src/components/DropDown/index.js

@@ -8,17 +8,17 @@ import * as ApiActions from '../../components/Actions/actions';
 
 const DropDownWrapper = styled.div`
   position: relative;
-  display: inline-block;
-  .dropbtn {
-    width: 90px;
-    height: 30px;
+  ${'' /* display: inline-block; */} .dropbtn {
+    width: 280px;
+    height: 36px;
     color: white;
     font-size: 16px;
     border: none;
     border-radius: 2px 2px 2px 2px;
     cursor: pointer;
     outline: none !important;
     color: #5f7183;
+    text-align: initial;
   }
   ${props => {
     if (props.menuHidden) {
@@ -42,7 +42,9 @@ const DropDownWrapper = styled.div`
     }
   }};
   .bookingButton {
-    width: 90px;
+    width: -webkit-fill-available;
+    display: inline-flex;
+    justify-content: flex-start;
     height: 30px;
     color: white;
     font-size: 16px;

src/components/Header/index.js

@@ -3,36 +3,51 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import usaFlag from './usaflag.png';
+import iceFlag from './iceflag.png';
+import ebsLogo from './logo.png';
 
 import * as LocaleActions from '../../redux/locale/actions';
 
 const HeaderWrapper = styled.header`
-  display: flex;
-  justify-content: center;
   padding: 7px;
   background-color: #0085ff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
-const ImageLogo = styled.div`
-  background-image: url(${props => props.src});
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  width: 200px;
-  height: 50px;
+const FlagWrapper = styled.div`
+  margin-right: 64px;
+
+  button {
+    border: none;
+    background-color: Transparent;
+    outline: none;
+  }
 `;
+const LogoHeader = styled.div`
+  img {
+    width: 200px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+`;
+
 const UserInfo = styled.div`
-  position: relative;
-  height: 100%;
+  margin-right: 160px;
   display: flex;
   img {
     border-radius: 50%;
     margin-right: 10px;
+    width: 20%;
   }
   p {
     color: white;
     display: inline-block;
     white-space: nowrap;
+    font-family: 'Trebuchet MS';
   }
 `;
 
@@ -50,14 +65,25 @@ class Header extends Component {
   render() {
     return (
       <HeaderWrapper>
+        <LogoHeader>
+          <img alt="logo of the website" src={ebsLogo} />
+        </LogoHeader>
         {this.props.userData != null && (
           <UserInfo>
             <img alt="/" src={this.props.userData.picture} />
             <p>{this.props.userData.name}</p>
           </UserInfo>
         )}
-        <button onClick={() => this.props.setLanguage('is')}>is</button>
-        <button onClick={() => this.props.setLanguage('en')}>en</button>
+        <FlagWrapper>
+          <button onClick={() => this.props.setLanguage('is')}>
+            {' '}
+            <img alt="Icelandic" src={iceFlag} />
+          </button>
+          <button onClick={() => this.props.setLanguage('en')}>
+            {' '}
+            <img alt="English" src={usaFlag} />
+          </button>
+        </FlagWrapper>
       </HeaderWrapper>
     );
   }