diff --git a/public/locales/de/common.json b/public/locales/de/common.json index 4c34f71..cfc03fe 100644 --- a/public/locales/de/common.json +++ b/public/locales/de/common.json @@ -17,7 +17,7 @@ "noCommentMsg": "Es gibt noch keine Kommentare für dieses Gericht.", "noImagesMsg": "Es gibt noch keine Bilder für dieses Gericht.", "noAuthorName": "(anonym)", - "rate": "Bewerten", + "rate": "Bewertung abgeben...", "reviewModalHeading": "Wie war '{{name}}'?", "reviewModalRatingLabel": "Bewertung", "reviewModalImageLabel": "Bild (Optional)", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 783c4cd..aa25f11 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -17,7 +17,7 @@ "noCommentMsg": "There are no comments for this dish yet.", "noImagesMsg": "There are no images for this dish yet.", "noAuthorName": "(anonymous)", - "rate": "Rate", + "rate": "Give a rating...", "reviewModalHeading": "How was '{{name}}'?", "reviewModalRatingLabel": "Rating", "reviewModalImageLabel": "Picture (Optional)", diff --git a/src/components/footer/Footer.module.scss b/src/components/footer/Footer.module.scss index f3d4f14..55fe5f7 100644 --- a/src/components/footer/Footer.module.scss +++ b/src/components/footer/Footer.module.scss @@ -7,8 +7,9 @@ row-gap: 2pt; column-gap: 8pt; align-items: center; - padding: $main-content-padding 0; + padding: $main-content-padding $container-padding; margin: #{$container-padding} #{-$container-padding} 0 #{-$container-padding}; + border-top: 1px solid $bg-darker; p { grid-area: disclaimer; @@ -100,7 +101,7 @@ grid-template-areas: 'copyright' 'social' 'legal' 'disclaimer'; grid-template-columns: 1fr; row-gap: 8pt; - padding: 40pt 0; + padding: 40pt $container-padding; margin-bottom: calc( $header-element-height + 6pt + env(safe-area-inset-bottom) ); diff --git a/src/components/navigation/Navigation.module.scss b/src/components/navigation/Navigation.module.scss index 535b997..ce8fc71 100644 --- a/src/components/navigation/Navigation.module.scss +++ b/src/components/navigation/Navigation.module.scss @@ -3,7 +3,7 @@ grid-template-areas: 'nav-left nav-center nav-right'; grid-template-columns: 1fr auto 1fr; align-items: center; - margin: 20pt 0; + padding: 20pt $container-padding; h1 { grid-area: nav-center; @@ -29,7 +29,7 @@ background-repeat: no-repeat; background-position: center; background-size: contain; - transform: translateX(-100%); + transform: translateX(-100%) translateY(-2px); } } } @@ -39,7 +39,7 @@ } .settings { - @include lifted; + border: 1px solid $bg-darker; box-sizing: border-box; display: inline-flex !important; grid-area: nav-right; @@ -88,7 +88,7 @@ .content { grid-template-areas: 'nav-center nav-right'; grid-template-columns: 1fr auto; - margin: 10pt 0; + padding: 10pt $container-padding; h1 { margin-left: 1em; diff --git a/src/components/navigation/weekday-selection/WeekdaySelection.module.scss b/src/components/navigation/weekday-selection/WeekdaySelection.module.scss index 052685d..756289e 100644 --- a/src/components/navigation/weekday-selection/WeekdaySelection.module.scss +++ b/src/components/navigation/weekday-selection/WeekdaySelection.module.scss @@ -24,7 +24,7 @@ transition: background-color 0.1s ease-out; &:hover { - background-color: $bg-light; + background-color: $color-green60; } &:focus-visible { @@ -52,10 +52,6 @@ &.selected { background-color: $color-green; - span { - color: $bg-lighter; - } - &:focus-visible { outline: 2px solid black !important; } @@ -96,14 +92,18 @@ height: unset; padding: 6pt 0; padding-bottom: calc(6pt + env(safe-area-inset-bottom)); - border-right: none !important; - border-bottom: none !important; - border-left: none !important; + border: none !important; border-radius: 0; box-shadow: none; - + background-color: $bg-tinted; + button { - padding: 3pt 0; + padding: 4pt 0; + background-color: $bg-tinted; + } + + .button { + display: none; } } } diff --git a/src/components/occurrence/Occurrence.module.scss b/src/components/occurrence/Occurrence.module.scss index bede3a9..5f5c388 100644 --- a/src/components/occurrence/Occurrence.module.scss +++ b/src/components/occurrence/Occurrence.module.scss @@ -1,12 +1,12 @@ .content { - @include lifted; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background-color: $bg-lighter; - border-radius: $main-content-br; + padding-bottom: calc($main-content-padding * 2); + border-radius: 20pt; } .inner { @@ -64,45 +64,24 @@ .buttonContainer { display: flex; gap: $card-item-padding; - margin-top: $main-content-padding; + margin-bottom: $main-content-padding; } -.buttonContainer button { +.rate { all: unset; flex: 1; - height: $content-pills-height; - padding: 3pt 0; - font-family: $font-major; + padding: 8pt; + font-family: $font-regular; font-size: 11pt; - color: #ffffff; - text-align: center; - cursor: pointer; - background-color: $bg-light; + color: $color-minor; + border: 1px solid $bg-dark; + margin-top: 10pt; + cursor: text; border-radius: $card-item-br; transition: background-color 0.1s ease; -} - -.buttonContainer .occDetails { - &:disabled { - cursor: not-allowed; - background-color: $bg-dark; - } - - &:hover:not(:disabled) { - background-color: $bg-darker; - } - - &:focus-visible { - outline: 2px solid $color-green !important; - } -} - -.buttonContainer .rate { - background-color: $color-green; &:disabled { - cursor: not-allowed; - background-color: $bg-dark; + display: none; } &:focus-visible { @@ -110,7 +89,7 @@ } &:hover:not(:disabled) { - background-color: $color-greenH; + border-color: $bg-darker; } } diff --git a/src/components/occurrence/Occurrence.tsx b/src/components/occurrence/Occurrence.tsx index 73bfabb..9af057c 100644 --- a/src/components/occurrence/Occurrence.tsx +++ b/src/components/occurrence/Occurrence.tsx @@ -155,42 +155,28 @@ const Occurrence = ({ occurrence }: Props) => { {prices} -