fix: default style on react app

apps/starter/src/ensemble/index.ts

@@ -19,10 +19,6 @@ import ThemeYAML from "./theme.yaml";
 export const starterApp: ApplicationDTO = {
  id: "myStarterApp",
  name: "My App",
- theme: {
- id: "theme",
- content: String(ThemeYAML),
- },
  config: ConfigYAML,
  scripts: [
  {

apps/starter/src/ensemble/screens/home.yaml

@@ -13,16 +13,19 @@ View:
  Column:
  styles:
  names: page
+ padding: 10px
  children:
  - Text:
  styles:
- names: heading-1
+ fontSize: 24px
+ fontWeight: 800
  text: Hello, world!
  - Markdown:
  text: This screen demonstrates a few patterns to get you started with Ensemble. Here, we fetch data from an API and use control expressions to display a loading state and a list of products. Try making a few changes and see how the screen automatically updates! For more information, see [help](/help).
  - Text:
  styles:
- names: heading-3
+ fontSize: 24px
+ fontWeight: 800
  text: My Products
  - LoadingContainer:
  isLoading: ${getDummyProducts.isLoading}

apps/starter/src/ensemble/screens/menu.yaml

@@ -4,7 +4,7 @@ ViewGroup:
  width: 240px
  iconWidth: 20px
  iconHeight: 20px
- backgroundColor: '#f7fbfa'
+ backgroundColor: "#f7fbfa"
  labelColor: "#171B2A"
  selectedColor: "#171B2A"
  labelFontSize: 1
@@ -14,6 +14,7 @@ ViewGroup:
  header:
  Image:
  height: 50px
+ width: 100%
  source: https://docs.ensembleui.com/images/logo.svg
  items:
  - label: Home
@@ -24,5 +25,10 @@ ViewGroup:
  icon: HelpOutlineOutlined
  page: help
  footer:
- Text:
- text: Give us feedback
+ Row:
+ styles:
+ padding: 10px
+ justifyContent: center
+ children:
+ - Text:
+ text: Give us feedback

packages/runtime/src/runtime/entry.tsx

@@ -53,7 +53,7 @@ export const EnsembleEntry: React.FC<EnsembleEntryProps> = ({
  />
  <div
  style={{
- flexGrow: 1,
+ flex: 1,
  height: "100vh",
  display: "flex",
  flexDirection: "column",

packages/runtime/src/runtime/menu.tsx

@@ -170,24 +170,10 @@ export const SideBarMenu: React.FC<MenuBaseProps> = ({ id, ...props }) => {
  : (values?.styles?.labelColor as string) ?? "grey",
  display: "flex",
  justifyContent: "center",
- borderRadius: 0,
  alignItems: "center",
- fontSize:
- selectedItem === item.label
- ? `${
- parseInt(
- `${
- props.styles?.labelFontSize
- ? props.styles.labelFontSize
- : 1
- }` || "1",
- ) + 0.2
- }rem`
- : `${
- props.styles?.labelFontSize
- ? props.styles.labelFontSize
- : 1
- }rem`,
+ fontSize: `${
+ props.styles?.labelFontSize ? props.styles.labelFontSize : 1
+ }rem`,
  ...(selectedItem === item.label
  ? props.styles?.onSelectStyles ?? {}
  : {}),