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} -

{t('commentHeading')}

- {comments}
-
- {/* TODO: Enable once feature is implemented */} - - {/* NOTE: At the time of writing reduxjs-popup did not support using `open => ReactNode` as children (even though it was documented). So I had to work around it. - This involved: - - not using the rate button as the `trigger` value for the Popup - - using `useState` to manage the open state of the popup ourself - TODO: Investigate if this is still needed in the future or perhaps - even replace popups with own implementation - */} - - setPopupOpen(false)} - > - setPopupOpen(false)} - /> - -
+ {comments} + + setPopupOpen(false)} + > + setPopupOpen(false)} + /> +
); diff --git a/src/components/today-overview/TodayOverview.module.scss b/src/components/today-overview/TodayOverview.module.scss index 7cecaa1..06f3a78 100644 --- a/src/components/today-overview/TodayOverview.module.scss +++ b/src/components/today-overview/TodayOverview.module.scss @@ -1,7 +1,7 @@ .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: $main-content-margin; + // gap: $main-content-margin; width: 100%; } diff --git a/src/styles/globals.scss b/src/styles/globals.scss index b5416bc..d4d1e2c 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -8,14 +8,15 @@ body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - /** TEMPORÄRE FARBE */ - background: linear-gradient(180deg, #dce3eb, #ebe6dc); - background-attachment: fixed; + background-color: #ffffff; + // /** TEMPORÄRE FARBE */ + // background: linear-gradient(180deg, #dce3eb, #ebe6dc); + // background-attachment: fixed; - @media screen and (max-width: $viewport-mobile-from) { - background-color: #dce3eb; - background-image: none; - } + // @media screen and (max-width: $viewport-mobile-from) { + // background-color: #dce3eb; + // background-image: none; + // } } a { @@ -29,7 +30,7 @@ a { flex-direction: column; justify-content: space-between; min-height: 100vh; - padding: 0 $container-padding; + padding: 0; } .page-content { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 502f8b8..f1b8f8c 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -3,9 +3,11 @@ --bg-dark: #dddddd; --bg-light: #eeeeee; --bg-lighter: #ffffff; - --color-green: #77b255; - --color-green20: #77b25520; - --color-greenH: #609740; + --bg-tinted: #d3e9c6; + --color-green: #89c06a; + --color-green20: #89c06a20; + --color-green60: #89c06a60; + --color-greenH: #77b255; --color-red: #ec3960; --color-red20: #ec396020; --color-redH: #961f39; @@ -22,9 +24,11 @@ --bg-dark: #dddddd; --bg-light: #eeeeee; --bg-lighter: #ffffff; - --color-green: #77b255; - --color-green20: #77b25520; - --color-greenH: #609740; + --bg-tinted: #e5f3dd; + --color-green: #89c06a; + --color-green20: #89c06a20; + --color-green60: #89c06a60; + --color-greenH: #77b255; --color-red: #ec3960; --color-red20: #ec396020; --color-redH: #961f39; @@ -41,10 +45,12 @@ $bg-darker: var(--bg-darker); $bg-dark: var(--bg-dark); $bg-light: var(--bg-light); $bg-lighter: var(--bg-lighter); +$bg-tinted: var(--bg-tinted); // theme $color-green: var(--color-green); $color-green20: var(--color-green20); +$color-green60: var(--color-green60); $color-greenH: var(--color-greenH); $color-red: var(--color-red); $color-red20: var(--color-red20);