Update sharetribe-scripts v5.0.1 -> v6.0.0

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   format:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:
@@ -25,7 +25,7 @@ jobs:
           command: yarn run format-ci
   test:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:
@@ -48,7 +48,7 @@ jobs:
           command: yarn run test-ci
   build:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:
@@ -71,7 +71,7 @@ jobs:
           command: yarn run build
   audit:
     docker:
-      - image: circleci/node:12.20
+      - image: cimg/node:14.19
     steps:
       - checkout
       - restore_cache:

CHANGELOG.md

@@ -14,8 +14,12 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2022-XX-XX
 
-- [change] ImageCarousel uses react-image-gallery. It renders all the images early on and supports touch swipes.
-  [#1529](https://github.com/sharetribe/ftw-daily/pull/1529)
+- [change] sharetribe-scripts is updated to v6.0.0. This causes a new major release for FTW
+  templates. Because most of the CSS files need to be updated!
+  [#1531](https://github.com/sharetribe/ftw-daily/pull/1531)
+
+- [change] ImageCarousel uses react-image-gallery. It renders all the images early on and supports
+  touch swipes. [#1529](https://github.com/sharetribe/ftw-daily/pull/1529)
 - [fix] Fixing a small typo. [#1518](https://github.com/sharetribe/ftw-daily/pull/1518)
 
 ## [v8.6.2] 2022-05-19

package.json

@@ -5,8 +5,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@loadable/component": "^5.14.1",
-    "@loadable/server": "^5.14.2",
+    "@loadable/component": "^5.15.2",
+    "@loadable/server": "^5.15.2",
     "@mapbox/polyline": "^1.1.1",
     "@sentry/browser": "^6.19.7",
     "@sentry/node": "^6.19.7",
@@ -21,8 +21,8 @@
     "core-js": "^3.22.5",
     "cors": "^2.8.5",
     "decimal.js": "^10.3.1",
-    "dotenv": "8.2.0",
-    "dotenv-expand": "5.1.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
     "express": "^4.18.1",
     "express-enforces-ssl": "^1.1.0",
     "express-sitemap": "^1.8.0",
@@ -55,11 +55,11 @@
     "react-redux": "^7.2.8",
     "react-router-dom": "^5.3.2",
     "react-with-direction": "^1.4.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
     "seedrandom": "^3.0.5",
     "sharetribe-flex-sdk": "^1.17.0",
-    "sharetribe-scripts": "5.0.1",
+    "sharetribe-scripts": "6.0.0",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.21",
     "url": "^0.11.0"
@@ -120,7 +120,7 @@
     ]
   },
   "engines": {
-    "node": "^12.19.0 || >=14.15.0 <17"
+    "node": ">=14.15.0"
   },
   "prettier": {
     "singleQuote": true,

src/components/ActivityFeed/ActivityFeed.module.css

@@ -1,17 +1,17 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
   margin: 0;
 
   /* Clearfix */
-  @apply --clearfix;
+  composes: clearfix from global;
 }
 
 .messageItem {
   margin-bottom: 20px;
 
   /* Clearfix */
-  @apply --clearfix;
+  composes: clearfix from global;
 
   @media (--viewportMedium) {
     margin-bottom: 17px;
@@ -48,12 +48,12 @@
 }
 
 .ownMessageContentWrapper {
-  @apply --clearfix;
+  composes: clearfix from global;
 }
 
 .messageContent,
 .ownMessageContent {
-  @apply --marketplaceMessageFontStyles;
+  composes: marketplaceMessageFontStyles from global;
 
   display: inline-block;
   margin: 0;
@@ -79,7 +79,7 @@
 
 .messageDate,
 .ownMessageDate {
-  @apply --marketplaceMessageDateFontStyles;
+  composes: marketplaceMessageDateFontStyles from global;
 
   margin: 11px 0 0 0;
   color: var(--matterColorAnti);
@@ -97,7 +97,7 @@
   margin-bottom: 18px;
 
   /* Clearfix */
-  @apply --clearfix;
+  composes: clearfix from global;
 
   @media (--viewportMedium) {
     margin-bottom: 16px;
@@ -119,12 +119,12 @@
 }
 
 .transitionContent {
-  @apply --marketplaceTxTransitionFontStyles;
+  composes: marketplaceTxTransitionFontStyles from global;
   margin: 0;
 }
 
 .transitionDate {
-  @apply --marketplaceMessageDateFontStyles;
+  composes: marketplaceMessageDateFontStyles from global;
   color: var(--matterColorAnti);
   margin: 7px 0 0 0;
 
@@ -138,7 +138,7 @@
 }
 
 .reviewContent {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   font-style: italic;
   white-space: pre-line;
   margin: 8px 0 0 0;

src/components/BookingBreakdown/BookingBreakdown.module.css

@@ -1,4 +1,4 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
   display: flex;
@@ -10,7 +10,7 @@
 }
 
 .lineItem {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   margin: 0;
 
   @media (--viewportMedium) {
@@ -40,7 +40,7 @@
 }
 
 .dayLabel {
-  @apply --marketplaceH5FontStyles;
+  composes: h5 from global;
   margin: 0;
   color: var(--matterColorAnti);
   line-height: 24px;
@@ -54,11 +54,11 @@
 }
 
 .dayInfo {
-  @apply --marketplaceButtonFontStyles;
+  composes: buttonFont from global;
 }
 
 .subTotalLineItem {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   font-weight: var(--fontWeightBold);
   margin: 0;
   padding: 5px 0 1px 0;
@@ -73,7 +73,7 @@
 }
 
 .lineItemTotal {
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   margin: 0;
   padding-top: 6px;
   padding-bottom: 6px;
@@ -87,13 +87,21 @@
     padding-bottom: 2px;
   }
 }
+
+.smallFontStyles {
+  font-family: var(--fontFamily);
+  font-weight: var(--fontWeightMedium);
+  font-size: 14px;
+  line-height: 24px;
+}
+
 .itemLabel {
-  @apply --marketplaceSmallFontStyles;
+  composes: smallFontStyles;
   flex: 1;
 }
 
 .itemValue {
-  @apply --marketplaceSmallFontStyles;
+  composes: smallFontStyles;
   margin: 0 0 0 10px;
 }
 
@@ -112,17 +120,17 @@
 }
 
 .totalLabel {
-  @apply --marketplaceSmallFontStyles;
+  composes: smallFontStyles;
 }
 
 .totalPrice {
-  @apply --marketplaceButtonFontStyles;
+  composes: buttonFont from global;
   margin: 0 0 0 10px;
   padding-top: 0px;
 }
 
 .feeInfo {
-  @apply --marketplaceTinyFontStyles;
+  composes: marketplaceTinyFontStyles from global;
   flex-shrink: 0;
   margin: 0;
   color: var(--matterColorAnti);

src/components/BookingPanel/BookingPanel.module.css

@@ -1,9 +1,9 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 /* Booking form inside modalContainer needs special handling */
 /* since "inMobile" breakpoint is actually --viewportLarge */
 .modalContainer {
-  @apply --marketplaceModalInMobileBaseStyles;
+  composes: marketplaceModalInMobileBaseStyles from global;
 
   height: 100vh;
 
@@ -40,7 +40,6 @@
 
 .title {
   /* Font */
-  @apply --marketplaceH1FontStyles;
   color: var(--matterColor);
 
   /* Layout */
@@ -55,7 +54,7 @@
 
 .author {
   width: 100%;
-  @apply --marketplaceH4FontStyles;
+  composes: h4 from global;
   margin-top: 7px;
   margin-bottom: 0;
 
@@ -84,8 +83,8 @@
 }
 
 .bookingHelp {
+  composes: h5 from global;
   display: none;
-  @apply --marketplaceH5FontStyles;
 
   @media (--viewportMedium) {
     color: var(--matterColor);
@@ -165,7 +164,7 @@
 
 .priceValue {
   /* Font */
-  @apply --marketplaceH2FontStyles;
+  composes: h2 from global;
   color: var(--matterColor);
 
   margin-top: 0;
@@ -178,7 +177,7 @@
 
 .perUnit {
   /* Font */
-  @apply --marketplaceTinyFontStyles;
+  composes: marketplaceTinyFontStyles from global;
   color: var(--matterColor);
 
   margin-top: 0;
@@ -190,7 +189,7 @@
 }
 
 .bookButton {
-  @apply --marketplaceButtonStylesPrimary;
+  composes: button buttonFont buttonText buttonBorders buttonColorsPrimary from global;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;

src/components/Button/Button.module.css

@@ -1,21 +1,21 @@
-@import '../../styles/propertySets.css';
+@import '../../styles/customMediaQueries.css';
 
 .root {
-  @apply --marketplaceButtonStyles;
+  composes: button buttonFont buttonText buttonBorders buttonColors from global;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;
 }
 
 .primaryButtonRoot {
-  @apply --marketplaceButtonStylesPrimary;
+  composes: button buttonFont buttonText buttonBorders buttonColorsPrimary from global;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;
 }
 
 .secondaryButtonRoot {
-  @apply --marketplaceButtonStylesSecondary;
+  composes: button buttonFont buttonText buttonBordersSecondary buttonColorsSecondary from global;
 
   /* We must lift up the text from the center since it looks better with
    the button border. Also clears the top padding set for link
@@ -24,7 +24,7 @@
 }
 
 .inlineTextButtonRoot {
-  @apply --marketplaceLinkStyles;
+  composes: a from global;
 }
 
 .primaryButton {
@@ -110,11 +110,13 @@
 /* Social logins && SSO buttons */
 
 .socialButtonRoot {
-  @apply --marketplaceButtonStyles;
+  composes: button buttonFont buttonText from global;
+
   min-height: 48px;
-  background-color: var(--matterColorLight);
 
+  background-color: var(--matterColorLight);
   color: var(--matterColorDark);
+
   font-weight: var(--fontWeightMedium);
   font-size: 14px;
 
@@ -134,6 +136,7 @@
   }
   &:disabled {
     background-color: var(--matterColorNegative);
+    color: var(--matterColorLight);
   }
 }