DRAFT: redesign

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)",

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)",

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)
     );

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;

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

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,53 +64,32 @@
 .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 {
     outline: 2px solid $color-major !important;
   }
 
   &:hover:not(:disabled) {
-    background-color: $color-greenH;
+    border-color: $bg-darker;
   }
 }
 

src/components/occurrence/Occurrence.tsx

@@ -155,42 +155,28 @@ const Occurrence = ({ occurrence }: Props) => {
           </div>
           {prices}
         </div>
-        <h3>{t('commentHeading')}</h3>
-        {comments}
         <div className={styles.dynamicSpace} />
-        <div className={styles.buttonContainer}>
-          {/* TODO: Enable once feature is implemented */}
-          <button className={styles.occDetails} disabled>
-            {t('showOccurrenceDetails')}
-          </button>
-          {/* 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
-          */}
-          <button
-            disabled={!canReview}
-            className={styles.rate}
-            onClick={() => setPopupOpen(true)}
-          >
-            {t('rate')}
-          </button>
-          <Popup
-            closeOnDocumentClick
-            on="click"
-            modal
-            open={popupOpen}
-            onClose={() => setPopupOpen(false)}
-          >
-            <ReviewModal
-              occurrenceName={occurrenceName}
-              occurrenceId={occurrence.id}
-              afterSuccessfulSubmit={() => setPopupOpen(false)}
-            />
-          </Popup>
-        </div>
+        {comments}
+        <button
+          disabled={!canReview}
+          className={styles.rate}
+          onClick={() => setPopupOpen(true)}
+        >
+          {t('rate')}
+        </button>
+        <Popup
+          closeOnDocumentClick
+          on="click"
+          modal
+          open={popupOpen}
+          onClose={() => setPopupOpen(false)}
+        >
+          <ReviewModal
+            occurrenceName={occurrenceName}
+            occurrenceId={occurrence.id}
+            afterSuccessfulSubmit={() => setPopupOpen(false)}
+          />
+        </Popup>
       </div>
     </div>
   );

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

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 {

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);