QMAPS-2801 ui fixes

src/components/OpeningHour.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import classnames from 'classnames';
 import { capitalizeFirst } from 'src/libs/string';
-import { GREEN_DARK, RED_DARKER } from 'src/libs/colors';
+import { RED_DARKER } from 'src/libs/colors';
 import { PoiHourBlockProps } from 'src/panel/poi/blocks/Information/blocks/Hour';
 import { PoiTimeTableProps } from 'src/panel/poi/blocks/Information/blocks/Hour/TimeTable';
 
@@ -15,7 +15,7 @@ const getStatusMessage = ({
   if (status === 'open') {
     return {
       label: texts?.open ?? '',
-      color: GREEN_DARK,
+      color: 'var(--serpPermaLink)',
     };
   }
 

src/panel/poi/blocks/Reservation/ReservationComposer.jsx

@@ -50,7 +50,7 @@ export function ReservationComposer({ value: propsValue, onChange, mobile, visib
   const ageOptionsMemo = ageOptions();
   const hasChildWithNoAge = value.ages.filter(a => a === null).length > 0;
   return (
-    <Wrapper mobile={mobile} visible={visible} onClose={handleSubmit}>
+    <Wrapper mobile={mobile} visible={visible} onClose={handleSubmit} className="toto">
       <Box px="m" py="s" className="ReservationComposerCounter">
         <Line value={value} onChange={setValue} field="rooms" />
         <Line value={value} onChange={setValue} field="adults" />

src/scss/includes/components/reservation.scss

@@ -132,6 +132,7 @@
   top: 50px;
   left: 0;
   z-index: 1050;
+  box-shadow: rgb(0 0 0 / 20%) 0 2px 12px 0 !important;
 }
 
 .ReservationComposerModal {

src/scss/includes/panels/poi_panel.scss

@@ -214,6 +214,10 @@ $BLOCK_ICON_FONT_SIZE: 16px;
   min-height: 18px;
 }
 
+.poi_panel__actions .poi_panel__action__favorite:hover {
+  background: var(--red-400-alpha20);
+}
+
 @media (max-width: 640px) {
   .poi_panel__content {
     padding: 0 $spacing-s;

src/scss/includes/reviewScore.scss

@@ -31,5 +31,9 @@
 }
 
 .reviewScore-starRating {
-  color: var(--grey-900);
+  color: var(--green-500);
+  div {
+    font-size: 14px;
+    font-weight: bold;
+  }
 }

src/scss/includes/search_form.scss

@@ -10,6 +10,7 @@ $input-height: 48px;
   align-items: center;
   background: var(--green-400) !important;
   border: 1px solid var(--grey-900-alpha16);
+  border-radius: var(--spacing-xs)
 }
 
 // Wrapper around the field and some icons, gets a colored border when the field is focused

src/scss/includes/survey.scss

@@ -1,7 +1,26 @@
 .survey aside {
+  background: var(--grey-000) !important;
   top: 80px;
   right: 10px;
   bottom: auto;
+  box-shadow: rgb(0 0 0 / 20%) 0 2px 12px 0 !important;
+
+  div + div + div a {
+    background: var(--green-400);
+
+    &:hover {
+      background: var(--green-300);
+    }
+  }
+
+  button svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  * {
+    color: var(--grey-900);
+  }
 }
 
 @media (max-width: 640px) {