@media-quest/builder 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@media-quest/builder",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "Builder library for Media-quest schemas",
   "main": "dist/public-api.js",
   "types": "dist/public-api.d.js",
@@ -24,6 +24,6 @@
     "dts": true
   },
   "peerDependencies": {
-    "@media-quest/engine": "0.0.31"
+    "@media-quest/engine": "0.0.33"
   }
 }

package/src/theme/theme2.ts

@@ -20,12 +20,14 @@ const Colors = {
   white: "#ffffff",
   backgroundGray: "#F0F0F0",
   backgroundWhite: "white",
-  progressBackGround: "#164AC4",
-  progressForGround: "#F5F5F5",
+  // progressBackGround: "#164AC4",
+  // progressForGround: "#F5F5F5",
   // red: "red",
   // yellow: "yellow",
 };
 
+const MAIN_TEXT_FONT_SIZE = 35;
+const MAIN_TEXT_LINE_HEIGHT = 1.2;
 const fraction = 472.6 / 600;
 
 const LAYER_0 = 0;
@@ -90,6 +92,7 @@ const btnTextBase: PStyle = {
   width: VIDEO_CONTROLS_WIDTH / 2,
   textAlign: "center",
   visibility: "hidden",
+  margin: { _unit: "px", value: 0 },
   // backgroundColor: Colors.yellow,
 };
 
@@ -141,14 +144,16 @@ const muteUnMuteStyles: { css: PStyle; cssDisabled: PStyle; cssEnabled: PStyle }
   cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
   cssEnabled: { opacity: 0.8, cursor: "pointer" },
 };
-const buttonBaseCss = (): CssTheme => ({
+const responseButtonBaseCss = (): CssTheme => ({
   css: {
     backgroundColor: Colors.primary,
     borderColor: Colors.primary,
     textColor: Colors.white,
     fontWeight: 600,
-    fontSize: { _unit: "px", value: 45 },
-    letterSpacing: { _unit: "px", value: 2 },
+    fontSize: { _unit: "px", value: 30 },
+    lineHeight: 1,
+    maxWidth: 30,
+    // flex: "0 0 auto",
     paddingLeft: { _unit: "px", value: 30 },
     paddingTop: { _unit: "px", value: 10 },
     paddingBottom: { _unit: "px", value: 10 },
@@ -159,12 +164,13 @@ const buttonBaseCss = (): CssTheme => ({
     position: "relative",
     display: "block",
     cursor: "pointer",
+    // maxWidth: { _unit: "percent", value: 10 },
   },
   cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
   cssEnabled: { opacity: 1, cursor: "pointer" },
 });
 export const primaryButton = (overridesCss: PStyle): BuilderOptionTheme => {
-  const base = buttonBaseCss();
+  const base = responseButtonBaseCss();
   const optionTheme: BuilderOptionTheme = {
     name: "primary-button",
     normal: {
@@ -188,6 +194,7 @@ export const primaryButton = (overridesCss: PStyle): BuilderOptionTheme => {
       btn: {
         css: {
           ...base.css,
+          ...overridesCss,
           backgroundColor: Colors.secondary,
           borderColor: Colors.secondary,
           textColor: Colors.primary,
@@ -316,7 +323,8 @@ export const Theme2: IDefaultTheme = {
         backgroundColor: Colors.white,
         textAlign: "left",
         textColor: "black",
-        fontSize: { _unit: "px", value: 40 },
+        fontSize: { _unit: "px", value: 35 },
+        lineHeight: 1.2,
       },
       audio: {
         iconUrl: THEME_2_ICONS.audioPlay.dataUrl,
@@ -354,19 +362,20 @@ export const Theme2: IDefaultTheme = {
     container: {
       base: {
         display: "flex",
-        justifyContent: "space-evenly",
+        justifyContent: "flex-start",
         width: BUTTON_BAR_WIDTH,
+        height: 8,
         bottom: Q_AREA_BOTTOM + H_M3,
         left: Q_AREA_LEFT + W_M3,
         // backgroundColor: "green",
         gap: { _unit: "px", value: 20 },
-        alignItems: "center",
+        alignItems: "stretch",
       },
-      whenSingle: { justifyContent: "space-evenly" },
+      whenSingle: { justifyContent: "center" },
       whenMany: { justifyContent: "flex-start" },
     },
 
-    nextButtonTheme: primaryButton({}),
+    nextButtonTheme: primaryButton({ height: 100 }),
     responseButtons: primaryButton({}),
   },
 };