Merge pull request #11 from AyaDigital/hotfix/DMVP-1086

DMVP-1086 - Сверстать компонент "Настройки адреса приема" в окне созд…

src/pages/AppointmentsSettings/index.tsx

@@ -56,6 +56,7 @@ type AppointmentProps = {
 	scheduleCreated: boolean,
 	isScheduleCreationLoading: boolean,
 	scheduleError: string,
+	address: string,
 	slotsCalculation?: SlotsCountItemT[]
 } & DispatchProps;
 
@@ -63,6 +64,7 @@ const AppointmentsSettings: React.FC<AppointmentProps> = ({
 	scheduleCreated,
 	isScheduleCreationLoading,
 	scheduleError,
+	address,
 	slotsCalculation,
 	updateScheduleStatus,
 	setSchedule,
@@ -107,6 +109,7 @@ const AppointmentsSettings: React.FC<AppointmentProps> = ({
 						updateScheduleStatus={updateScheduleStatus}
 						isScheduleCreationLoading={isScheduleCreationLoading}
 						scheduleError={scheduleError}
+						address={address}
 						// cancelAppointment={cancelAppointment}
 					/>
 				</div>
@@ -118,6 +121,7 @@ const AppointmentsSettings: React.FC<AppointmentProps> = ({
 
 const mapStateToProps = (state: AppStateType) => ({
 	scheduleCreated: state.schedule.scheduleCreated,
+	address: state.profile.address,
 	isScheduleCreationLoading: state.schedule.isScheduleCreationLoading,
 	slotsCalculation: state.schedule.slots,
 	scheduleError: state.schedule.error

src/pages/AppointmentsSettings/settings.scss

@@ -41,10 +41,10 @@
 
 .settings-schedule-form-layout {
 	position: absolute;
-	top: 2vw;
-	left: 30vw;
+	top: 1vw;
+	left: 18vw;
 	transform: translate(0%, 7%);
-	width: 620px;
+	width: 890px;
 	height: auto;
 	padding: 0px 32px 32px 32px;
 	border-radius: 12px;
@@ -121,12 +121,49 @@
         }
     }
 
+    .upper-block {
+        @include flex-row();
+        column-gap: 10px;
+
+        .working-hours-block {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            row-gap: 20px;
+
+            & > .errorBlock {
+                color: red;
+                text-align: start;
+        
+                &.margin-top {
+                    margin-top: 0px;
+                }
+            }
+        }
+    }
+
+    .lower-block {
+        .appointment-location-label {
+            @include flex-row();
+            align-items: center;
+        }
+
+        .select-clinic {
+            width: 556px;
+            padding: 8px 16px 8px 16px;
+        }
+
+        .description {
+            width: 556px;
+            padding: 8px 16px 8px 16px;
+        }
+    }
+
     .calendar-block {
-        height: 298px;
+        height: auto;
 
         .calendar-schedule-common {
             width: auto;
-            height: 290px;
             box-shadow: none;
             border: none;
             background: rgba(250, 250, 250, 1);
@@ -274,9 +311,10 @@
 
     .time-picker-block {
         @include flex-row();
-        column-gap: 16px;
+        flex-direction: column;
+        row-gap: 12px;
         width: 556px;
-        height: 48px;
+
         padding: 8px 16px 8px 16px;
         border-radius: 16px;
 
@@ -287,6 +325,7 @@
 
         .select-period-block {
             width: 50%;
+            height: 34px;
 
             & > div > div {
                 & > .MuiSelect-select:focus {
@@ -303,12 +342,13 @@
 
     .controls-block{
         @include flex-row();
+        flex-direction: column;
         justify-content: space-around;
         width: 556px;
-        height: 48px;
+
         padding: 8px 16px 8px 16px;
         border-radius: 16px;
-        column-gap: 12px;
+        row-gap: 12px;
 
         &.empty {
             justify-content: flex-start;