@protacon/muster-booking-frontend 1.23.0 → 1.23.2

package/dist/styles.bundle.css

@@ -2,6 +2,7 @@
 .summary-component-container {
 	display: flex;
 	justify-content: space-between;
+	padding-top: 4px;
 }
 
 .summary-component {
@@ -36,7 +37,7 @@ nav.disabled {
 	margin: auto;
 }
 
-.icon {
+.icon-booking {
 	fill: white;
 }
 
@@ -68,8 +69,21 @@ nav.disabled {
 	}
 }
 
-.nav-button {
-	background: #B9BEC1;
+.nav-button-booking {
+	display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+	background-color: #B9BEC1;
 	width: 24px;
 	height: 24px;
 	padding: 0px;
@@ -77,16 +91,16 @@ nav.disabled {
 	color: white;
 }
 
-.summary-component nav.active .nav-button {
-	background: #95C01F;
+.summary-component nav.active .nav-button-booking {
+	background-color: #95C01F;
 }
 
-.nav-button:hover {
+.nav-button-booking:hover {
 	color: white;
 }
 
-.nav-button.disabled {
-	background: #E3E3E3;
+.nav-button-booking.disabled {
+	background-color: #E3E3E3;
 }
 
 .summary-component nav.active .nav-text {
@@ -161,7 +175,7 @@ button {
 	border: none;
 }
 
-@media screen and (max-width: 424px) {
+@media screen and (max-width: 991px) {
 	.button-container {
 		display: flex;
 		justify-content: space-between;
@@ -172,8 +186,8 @@ button {
 		height: 89px;
 		border-top: #cccccc 1px solid;
 	}
-	.previous-button {
-		display: none;
+	.previous-button-booking {
+		display: none !important;
 	}
 	.navigation-container {
 		display: flex;
@@ -192,9 +206,8 @@ button {
 	justify-content: space-between;
 }
 
-.vehicle-step-component .plate-input {
+.vehicle-step-component .plate-input-booking {
 	position: absolute;
-	height: 100%;
 	top: 0;
 	left: 50px;
 	right: 0px;
@@ -325,15 +338,7 @@ input[type="radio"]:checked::before {
 	transform: translate(-50%, -50%);
 }
 
-input[type="checkbox"].form-check-input {
-	margin-left: -3.25rem;
-}
-
-.form-check-input {
-	margin-left: -2.25rem;
-}
-
-.vehicle-step-component .plate-input[readonly] {
+.vehicle-step-component .plate-input-booking[readonly] {
 	background-color: white;
 }
 
@@ -354,7 +359,7 @@ input[type="checkbox"].form-check-input {
 	border: 1px solid #979797;
 }
 
-.vehicle-step-component .plate-input.is-invalid {
+.vehicle-step-component .plate-input-booking.is-invalid {
 	background: white;
 	padding-right: 0;
 }
@@ -448,7 +453,7 @@ input[type="checkbox"].form-check-input {
 		height: 66px;
 	}
 
-	.vehicle-step-component .plate-input {
+	.vehicle-step-component .plate-input-booking {
 		left: 46px;
 		width: calc(100% - 46px);
 		font-size: 45px !important;
@@ -478,7 +483,7 @@ input[type="checkbox"].form-check-input {
 		height: 50px;
 	}
 
-	.vehicle-step-component .plate-input {
+	.vehicle-step-component .plate-input-booking {
 		left: 38px;
 		width: calc(100% - 38px);
 		font-size: 40px !important;
@@ -594,21 +599,25 @@ input[type="checkbox"] {
 
 /*For pagination component*/
 .page-link {
-	color: #3A7203;
+	color: #3A7203 !important;
 }
 
 /*For pagination component*/
 .page-item.active .page-link {
     z-index: 1;
-    color: #fff;
-    background-color: #3A7203;
-    border-color: #3A7203;
+    color: #fff !important;
+    background-color: #3A7203 !important;
+    border-color: #3A7203 !important;
 }
 
 .map-button {
 	display: none;
 }
 
+.map-button:focus {
+	box-shadow: none;
+}
+
 @media screen and (max-width: 991px) {
 	.row-container-left {
 		width: 100%;
@@ -635,11 +644,11 @@ input[type="checkbox"] {
 	.map-button {
 		display: inline-block;
 		background-color: #b9bec110;
-		color: #ffffff;
 		border-color: #b9bec110;
 		color: #000000;
 		width: 56px;
 		height: 56px;
+		padding: 0;
 		margin-left: 16px;
 	}
 }
@@ -742,15 +751,15 @@ input[type="checkbox"] {
 }
 
 .dropdown-toggle::after {
-	display: none;
+	display: none !important;
 }
 
 .sort-button {
-    color: #95C01F;
+    color: #95C01F !important;
 	height: auto;
 	width: auto;
     padding: 5px;
-    background: transparent;
+    background-color: transparent !important;
     border: none;
 	margin: auto;
     margin-right: 2px;
@@ -758,12 +767,6 @@ input[type="checkbox"] {
 	justify-content: space-between;
 }
 
-.sort-button:hover {
-	background: #E3E3E3;
-	color: #000000;
-	border: none;
-}
-
 .sort-dropdown {
 	height: 20px;
     margin: auto;
@@ -771,12 +774,6 @@ input[type="checkbox"] {
     margin-bottom: 24px;
 }
 
-.dropdown-toggle:active {
-	background: #E3E3E3;
-	color: #000000;
-	border: none;
-}
-
 .slot {
 	border: 2px solid #D8D8D8;
 	border-radius: 2px;
@@ -933,6 +930,8 @@ input[type="checkbox"] {
 }
 .react-datepicker__day--selected {
 	background-color: #95C01F;
+	padding: 0 !important;
+	width: 14% !important;
 }
 .react-datepicker__day--selected:hover {
 	background-color: #3A7203;
@@ -1079,6 +1078,9 @@ input[type="checkbox"] {
 	}
 }
 
+.finalize-step-component {
+	font-family: Inter, sans-serif;
+}
 
 .finalize-step-component .invalid-feedback {
 	display: block;
@@ -1090,6 +1092,9 @@ input[type="checkbox"] {
 	padding-left: 4px;
 }
 
+.confirm-bookin-button {
+	width: auto;
+}
 .summary-component .card-header {
 	display: flex;
 	justify-content: center;
@@ -1146,6 +1151,10 @@ input[type="checkbox"] {
 .summary-component .campaign-name {
 	flex-flow: wrap;
 }
+
+.edit-button {
+	height: auto;
+}
 .confirmation-step-component .confirmation-step-confirm-icon {
 	width: 38px;
 	height: 38px;
@@ -1178,7 +1187,7 @@ input[type="checkbox"] {
 
 
 .insurance {
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-family: Inter, sans-serif;
 	font-size: 18px;
 	line-height: 1.5;
 	max-width: 440px;
@@ -1217,14 +1226,155 @@ input[type="checkbox"] {
 	font-weight: 700;
 }
 
+.cancel-booking-button {
+    width: auto;
+}
+
 @media screen and (max-width: 767px) {
     .modify-reservation-component .title {
         font-size: 1.5rem;
     }
 }
+body {
+	background: white;
+	font-size: 16px;
+	font-family: Inter, sans-serif;
+}
+
+@font-face {
+	font-display: block;
+	font-family: Azbuka W01 Bold;
+	src: url(/fonts/azbuka.eot);
+	src: url(/fonts/azbuka.eot?#iefix) format("embedded-opentype"),
+		url(/fonts/azbuka.woff2) format("woff2"),
+		url(/fonts/azbuka.woff) format("woff"),
+		url(/fonts/azbuka.ttf) format("truetype"),
+		url("/fonts/azbuka.woff#Azbuka W01 Bold") format("svg");
+}
+
+.full-width-input {
+    width: 100% !important;
+}
+
+.booking-component h5 {
+	color: #b1b1b1;
+	font-family: Azbuka W01 Bold, "sans-serif";
+	font-size: 18px;
+}
+
+.grey {
+	color: #b1b1b1;
+	letter-spacing: 1px;
+}
+
+.booking-component h2 {
+	font-family: Azbuka W01 Bold,"sans-serif";
+	font-size: 33px;
+}
+
+.booking-component .plate-input-booking {
+	font-family: Azbuka W01 Bold, "sans-serif";
+	font-size: 50px;
+	letter-spacing: 2px;
+	text-align: center;
+	height: 100%;
+}
+
+.summary-component {
+	font-family: Azbuka W01 Bold, "sans-serif";
+}
+
+.time-step-component h4 {
+	color: #b1b1b1;
+	font-family: Azbuka W01 Bold,"sans-serif";
+	font-size: 18px;
+	text-transform: uppercase;
+}
+
+.title {
+	margin-top: .5rem;
+}
+
+.form-check-input-booking {
+    position: absolute;
+    margin-top: .3rem;
+    margin-left: -2.25rem
+}
+
+.btn-booking {
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
+}
+
+.btn-booking:disabled, .btn-booking:disabled:hover{
+    background-color: #E3E3E3 !important;
+    color: #495057 !important;
+    border: none;
+}
+
+.input-group-booking>.custom-file,.input-group-booking>.custom-select,.input-group-booking>.form-control-booking,.input-group-booking>.form-control-plaintext {
+    position: relative;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    margin-bottom: 0
+}
+
+.form-control-booking {
+    display: flex;
+    width: auto;
+    height: 56px;
+    border-radius: 5px;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.campaing-code {
+    border-radius: 5px 0 0 5px;
+}
+
+.is-invalid {
+    border-color: #dc3545;
+}
+
+.input-group-booking {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%;
+    flex: 1 1 auto;
+}
+
+input[type="checkbox"].form-check-input-booking {
+	margin-left: -3.25rem;
+}
+
 .booking-component {
     width: 100%;
     height: auto;
+    max-height: calc(100vh - 180px);;
     display: flex;
     overflow: hidden;
     flex-direction: column;
@@ -1238,10 +1388,10 @@ input[type="checkbox"] {
     width: 100%;
 }
 
-.btn-apply {
+.btn-apply-booking {
     background: #8AC100;
     border: none;
-    border-radius: 7px;
+    border-radius: 0 5px 5px 0;
     color: #ffffff;
     font-weight: 700;
     font-size: 16px;
@@ -1265,15 +1415,9 @@ input[type="checkbox"] {
 	justify-content: space-between;
 	margin-top: 16px;
 	padding: 16px;
-	width: 100%;
 	height: 89px;
 }
 
-.form-control{
-    height: 56px;
-    border-radius: 5px;
-}
-
 ::-webkit-scrollbar {
     width: 16px;
 }
@@ -1308,6 +1452,7 @@ input[type="checkbox"] {
     }
 
     .booking-component {
+        max-height: none;
         height: calc(100vh - 97px);
     }
 
@@ -1326,4 +1471,3 @@ input[type="checkbox"] {
     }
 }
 
-

package/package.json

@@ -4,7 +4,7 @@
   "author": "Muster by Pinja",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "/dist/index.bundle.js",
-  "version": "1.23.0",
+  "version": "1.23.2",
   "scripts": {
     "start": "webpack-dev-server",
     "build": "cross-env NODE_ENV=production OUTPUT=library webpack --progress",