@corva/create-app 0.116.0 → 0.118.0

package/lib/constants/package.js

@@ -27,12 +27,15 @@ const jsUiDevDependencies = {
   '@testing-library/react': '^12.1.5',
   '@testing-library/react-hooks': '^8.0.1',
   '@testing-library/user-event': '^13.2.1',
-  'jest-watch-typeahead': '^1.0.0',
-  'jest': '^27.4.3',
   'babel-jest': '^27.4.2',
   'babel-preset-react-app': '^10.0.1',
   'eslint': '7.32.0',
+  'identity-obj-proxy': '^3.0.0',
+  'jest': '^27.4.3',
+  'jest-watch-typeahead': '^1.0.0',
   'postcss-loader': '4.1.0',
+  'sass': '^1.89.2',
+  'sass-loader': '^16.0.5',
 };
 
 const tsUiDevDependencies = {
@@ -124,12 +127,12 @@ const uiPackage = {
     },
     transformIgnorePatterns: [
       '/node_modules/(?!.*@babel/runtime|@icon-park/react/es).+\\.(js|jsx|mjs|cjs|ts|tsx)$',
-      '^.+\\.module\\.(css|sass|scss)$',
+      '^.+\\.(css|sass|scss)$',
     ],
     modulePaths: [],
     moduleNameMapper: {
       '~(.*)': '<rootDir>/src/$1',
-      '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+      '^.+\\.(css|sass|scss)$': 'identity-obj-proxy',
       '@corva/ui(.*)': '@corva/ui/cjs-bundle/$1',
     },
     watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
@@ -162,16 +165,19 @@ const nodeNpmScripts = {
 };
 
 const nodeDependencies = {
-  '@corva/node-sdk': '^8.3.0',
+  '@corva/node-sdk': '^8.5.0',
 };
 
 const nodeDevDependencies = {
-  '@corva/eslint-config-node': '^5.1.1',
+  '@corva/eslint-config-node': '^6.0.0',
+  '@typescript-eslint/eslint-plugin': '^8.58.1',
+  '@typescript-eslint/parser': '^8.58.1',
   'jest': '^29.7.0',
   'dotenv': '^16.0.3',
   'eslint': '^8.2.0',
+  'eslint-plugin-jest': '^27.1.5',
   'prettier': '^2.0.0',
-  'typescript': '^5.5.4',
+  'typescript': '^5.9.3',
 };
 
 const nodeTsDevDependencies = {
@@ -216,6 +222,36 @@ const nodeNpmPackage = {
   eslintConfig: {
     root: true,
     extends: '@corva/eslint-config-node',
+    overrides: [
+      {
+        files: ['**/*.ts'],
+        parser: '@typescript-eslint/parser',
+        parserOptions: {
+          project: 'tsconfig.json',
+          sourceType: 'module',
+        },
+        plugins: ['@typescript-eslint/eslint-plugin'],
+        rules: {
+          '@typescript-eslint/padding-line-between-statements': 'off',
+        },
+      },
+      {
+        files: [
+          '**/*.spec.js',
+          '**/*.spec.ts',
+          '**/*.spec.mjs',
+          '**/*.spec.cjs',
+          '**/__mocks__/**/*.js',
+          '**/__mocks__/**/*.ts',
+          '**/__mocks__/**/*.cjs',
+          '**/__mocks__/**/*.mjs',
+        ],
+        plugins: ['jest'],
+        env: {
+          jest: true,
+        },
+      },
+    ],
   },
 };
 
@@ -242,7 +278,8 @@ const nodeTsYarnPackage = {
 
 const extendWithTsConfig = (packageJson, version) => {
   packageJson.devDependencies = {
-    [`@tsconfig/node${version}`]: `^${version === '12' ? '1.0.9' : '1.0.1'}`,
+    // New @tsconfig/nodeX package versioning: it starts with X major version
+    [`@tsconfig/node${version}`]: `^${version}`,
     ...packageJson.devDependencies,
   };
 

package/lib/flows/lib/manifest.js

@@ -11,7 +11,7 @@ const SCHEDULER_MAPPING = [SCHEDULER_TYPE_DATA_TIME, SCHEDULER_TYPE_DEPTH, SCHED
   {},
 );
 
-const NODE_RUNTIMES = [APP_RUNTIMES.NODE18, APP_RUNTIMES.NODE20, APP_RUNTIMES.NODE22];
+const NODE_RUNTIMES = [APP_RUNTIMES.NODE24];
 
 export class Manifest {
   constructor(manifest) {

package/lib/flows/steps/zip-file-list-resolve.js

@@ -255,7 +255,7 @@ const resolveDataForZipPythonApp = async (itemsToZip = [], { manifest, dirName,
     );
   }
 
-  itemsToZip.push('manifest.json', 'requirements.txt');
+  itemsToZip.push('manifest.json', 'pyproject.toml', 'uv.lock', 'requirements.txt');
 
   return {
     zipFileName,

package/lib/helpers/resolve-app-runtime.js

@@ -6,6 +6,8 @@ import os from 'os';
 import semver from 'semver';
 
 const debug = debugFn('cca:resolve-app-runtime');
+const DEFAULT_UI_NODE_VERSION = '24';
+const DEFAULT_UI_NODE_RANGE = '>=24 <25';
 
 /**
  *
@@ -41,7 +43,7 @@ const checkCliVersion = async (command, version) =>
     });
   });
 
-const checkNodeVersion = (version) => async () => {
+const checkNodeVersion = (range) => async () => {
   try {
     await fs.access(`${os.homedir()}/.nvm/nvm.sh`);
 
@@ -52,7 +54,7 @@ const checkNodeVersion = (version) => async () => {
     debug(e);
     debug('nvm is not installed, checking node version');
 
-    return checkCliVersion('node', version);
+    return checkCliVersion('node', range);
   }
 };
 
@@ -60,18 +62,22 @@ export const IS_WINDOWS = process.platform === 'win32';
 
 const semverVersionsMapping = {
   node: {
-    18: '18.14.0',
-    20: '20.16.0',
+    18: '18.20.8',
+    20: '20.20.1',
+    24: '24.14.0',
   },
   python: {
-    '3.8': '3.8.16',
-    '3.9': '3.9.16',
-    '3.10': '3.10.9',
-    '3.11': '3.11.1',
-    '3.13': '3.13.7',
+    3.13: '3.13.13',
+    3.14: '3.14.4',
   },
 };
 
+const nodeVersionRanges = {
+  18: '>=18 <19',
+  20: '>=20 <21',
+  24: '>=24 <25',
+};
+
 /**
  * @typedef {Object} Runtime
  * @property {string} language
@@ -79,17 +85,20 @@ const semverVersionsMapping = {
  * @property {string} packageManager
  * @property {string} version
  * @property {string} semver
+ * @property {string} [enginesNode]
  */
 export const resolveAppRuntime = (opts) => {
   if (opts.appType === APP_TYPES.UI) {
-    const version = '20';
+    const version = DEFAULT_UI_NODE_VERSION;
 
     return {
+      environment: 'node',
       language: opts.useTypescript ? 'typescript' : 'javascript',
-      isRuntimeAvailable: checkNodeVersion(version),
+      isRuntimeAvailable: checkNodeVersion(DEFAULT_UI_NODE_RANGE),
       packageManager: opts.packageManager,
       version,
       semver: semverVersionsMapping.node[version],
+      enginesNode: DEFAULT_UI_NODE_RANGE,
     };
   }
 
@@ -97,17 +106,20 @@ export const resolveAppRuntime = (opts) => {
     const version = /nodejs(\d{2})\.x/.exec(opts.runtime)[1];
 
     return {
+      environment: 'node',
       language: opts.useTypescript ? 'typescript' : 'javascript',
-      isRuntimeAvailable: checkNodeVersion(version),
+      isRuntimeAvailable: checkNodeVersion(nodeVersionRanges[version]),
       packageManager: opts.packageManager,
       version,
       semver: semverVersionsMapping.node[version],
+      enginesNode: `^${version}`,
     };
   }
 
   const version = /python(\d\.\d+)/.exec(opts.runtime)[1];
 
   return {
+    environment: 'python',
     language: 'python',
     isRuntimeAvailable: async () => {
       if (!IS_WINDOWS) {

package/lib/helpers/utils.js

@@ -26,9 +26,13 @@ export const addUiAppFile = (templateFolder, root, runtime, manifest, opts) => {
 };
 
 export const getExcludedFiles = (manifest) => {
-  if (manifest.isUi()) return ['App.drilling.js', 'App.completion.js', 'App.drilling.tsx', 'App.completion.tsx'];
+  const excludedFiles = ['.ruff_cache', '.venv', '.pytest_cache', '__pycache__'];
 
-  return [];
+  if (manifest.isUi()) {
+    return [...excludedFiles, 'App.drilling.js', 'App.completion.js', 'App.drilling.tsx', 'App.completion.tsx'];
+  }
+
+  return excludedFiles;
 };
 
 export function copyFileSync(source, target) {

package/lib/main.js

@@ -17,17 +17,16 @@ import { StepError } from './flows/lib/step-error.js';
 function checkNodeVersion() {
   logger.write('Checking node version...');
 
-  const unsupportedNodeVersion = !semver.satisfies(process.version, '>=16');
+  const unsupportedNodeVersion = !semver.satisfies(process.version, '>=24 <25');
 
   if (unsupportedNodeVersion) {
     logger.log(
       chalk.red(
         `\nYou are using Node ${process.version}.\n\n` +
-          `Please update to Node 16 or higher for a better, fully supported experience.\n`,
+          `Please update to Node 24.x for a better, fully supported experience.\n`,
       ),
     );
 
-    // Fall back to latest supported react-scripts on Node 4
     return process.exit(1);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/create-app",
-  "version": "0.116.0",
+  "version": "0.118.0",
   "private": false,
   "description": "Create an app to use it in CORVA.AI",
   "keywords": [
@@ -70,18 +70,18 @@
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "@corva/eslint-config-browser": "^0.1.7",
-    "@corva/eslint-config-node": "^5.1.1",
-    "@corva/node-sdk": "^8.0.1",
+    "@corva/eslint-config-node": "^6.0.0",
+    "@corva/node-sdk": "^8.5.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/jest": "^29.5.4",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^8.58.1",
+    "@typescript-eslint/parser": "^8.58.1",
     "conventional-changelog-cli": "^2.1.0",
     "eslint": "^8.2.0",
+    "eslint-plugin-jest": "^27.1.5",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.0",
@@ -92,12 +92,12 @@
     "prettier": "^2.0.0",
     "prettier-plugin-packagejson": "^2.3.0",
     "standard-version": "^9.0.0",
-    "typescript": "^4.8.4",
+    "typescript": "^5.9.3",
     "zx": "^7.2.3"
   },
   "packageManager": "yarn@1.22.19+sha512.ff4579ab459bb25aa7c0ff75b62acebe576f6084b36aa842971cf250a5d8c6cd3bc9420b22ce63c7f93a0857bc6ef29291db39c3e7a23aab5adfd5a4dd6c5d71",
   "engines": {
-    "node": ">=18"
+    "node": ">=24 <25"
   },
   "standard-version": {
     "skip": {

package/templates/ui/javascript/AGENTS.md

@@ -20,7 +20,7 @@ src/
   AppSettings.js       — Settings panel component (default export required)
   index.js             — Root export: { component, settings }
   constants.js         — Default settings values
-  App.css              — Component styles (CSS modules)
+  App.scss              — Component styles
   __tests__/           — Jest test files
   __mocks__/           — Mock data (mockAppProps.js, mockAppSettingsProps.js)
   assets/              — Static assets (SVGs, images)
@@ -38,83 +38,86 @@ manifest.json          — Corva platform app metadata (generated at scaffold ti
 
 ### Styling
 
-CSS modules for component styles:
+The preferred way to write styles is SCSS (`.scss` files).
 
-```javascript
-import styles from './App.css';
-// Use: <div className={styles.container}>
+Every `.scss` file must import the shared utilities:
+
+```scss
+@import '@corva/ui/styles/common';
 ```
 
-For custom component styles, use `makeStyles` from MUI v4:
+This provides all functions, variables, and mixins below.
 
-```javascript
-import { makeStyles } from '@material-ui/core/styles';
+For custom shared variables or mixins specific to the project, create a `src/styles/` directory (e.g. `_variables.scss`, `_common.scss`) and import them alongside the `@corva/ui` import.
 
-const useStyles = makeStyles(theme => ({
-  root: { display: 'flex', gap: theme.spacing(1) },
-}));
+**`spacing($top, $right?, $bottom?, $left?)`** — 8px base unit:
 
-// Inside component:
-const styles = useStyles();
-return <div className={styles.root}>...</div>;
+```scss
+padding: spacing(2); // 16px
+margin: spacing(1, 0); // 8px 0
+gap: spacing(0.5); // 4px
+padding: spacing(2, 1, 2, 1); // 16px 8px 16px 8px
 ```
 
-**`theme.spacing(n)`** — 8px base unit for layout dimensions:
+**`colorAlpha($color, $opacity)`** — transparency:
 
-```javascript
-padding: theme.spacing(2); // 16px
-margin: theme.spacing(1, 0); // 8px 0
-borderRadius: theme.spacing(0.5); // 4px
+```scss
+background: colorAlpha($palette_t1, 0.08); // white at 8% opacity
+border: 1px solid colorAlpha($palette_t1, 0.12);
 ```
 
-**Color manipulation** — `fade`, `darken`, `lighten` from `@material-ui/core/styles`:
+**`transition($properties...)`** — standard `cubic-bezier(0.4, 0, 0.2, 1) 0.15s`:
 
-```javascript
-import { fade, darken, lighten } from '@material-ui/core/styles';
-
-background: fade(theme.palette.common.white, 0.08); // white at 8% opacity
-color: darken(theme.palette.primary.main, 0.2); // darken by 20%
+```scss
+transition: transition(opacity);
+transition: transition(color, background-color);
 ```
 
-**Transitions:**
+**Full example:**
 
-```javascript
-transition: theme.transitions.create('opacity');
-transition: theme.transitions.create(['opacity', 'background-color'], {
-  duration: theme.transitions.duration.standard, // 300ms
-});
+```scss
+@import '@corva/ui/styles/common';
+
+.container {
+  padding: spacing(2);
+  background: $palette_b5;
+  color: $palette_t1;
+  transition: transition(opacity, background-color);
+
+  &:hover {
+    background: colorAlpha($palette_t1, 0.08);
+  }
+}
+
+.label {
+  color: $palette_t7;
+  font-size: 12px;
+}
 ```
 
-**Breakpoints:**
+**Import in component:**
 
 ```javascript
-[theme.breakpoints.down('sm')]: { padding: theme.spacing(1) }  // max-width: 599px
-[theme.breakpoints.up('md')]: { flexDirection: 'row' }         // min-width: 960px
+import styles from './App.scss';
+// Use: <div className={styles.container}>
 ```
 
-**`theme.zIndex`** — stacking constants: `appBar` (1100), `drawer` (1200), `modal` (1300), `tooltip` (1500).
+**Colors & Theming:**
 
-**CSS variables** — available in `.css` files:
+NEVER hardcode color values (hex, rgb, hsl). Always use `@corva/ui` theme colors:
 
-```css
-color: var(--palette-primary-text-1); /* primary text */
-background: var(--palette-background-b-5); /* card background */
-border-color: var(--palette-primary-text-9); /* borders */
-```
+- In SCSS: use SCSS variables from `@corva/ui/styles/common` like `$palette_t1`, `$palette_b5`, `$palette_t7`
+- Use `colorAlpha($color, $opacity)` for transparency instead of raw `rgba()`
+- Run MCP tool `get_theme_docs` (section: "variables") to see all available theme variables
+- Run MCP tool `get_theme_docs` (section: "palette") to see available palette colors with hex values
 
-**SCSS functions** — available in `.module.scss` files:
+**Rules:**
 
-```scss
-padding: spacing(2); // 16px
-color: colorAlpha($color, 0.5); // rgba transparency
-transition: transition(opacity); // standard cubic-bezier
-```
-
-**Direct theme import:**
-
-```javascript
-import { lightTheme, darkTheme } from '@corva/ui/config';
-```
+- No inline `style={{...}}` unless absolutely necessary for dynamic values
+- Use `classnames` for conditional/composed classes, never manual string joins
+- No global selectors (tag selectors like `div`, `span`) — use `:global()` only when absolutely necessary
+- No `!important`
+- Use a descriptive camelCase class as the root selector (e.g. `.toolbar`, `.chartPanel`) instead of generic `.root`
 
 ### State Management (Zustand)
 

package/templates/ui/javascript/src/App.completion.js

@@ -4,7 +4,7 @@ import { useAppCommons } from '@corva/ui/effects';
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
 
-import styles from './App.css';
+import styles from './App.scss';
 
 const App = () => {
   const { appKey, fracFleet, well, wells, appSettings } = useAppCommons();

package/templates/ui/javascript/src/App.drilling.js

@@ -4,7 +4,7 @@ import { useAppCommons } from '@corva/ui/effects';
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
 
-import styles from './App.css';
+import styles from './App.scss';
 
 const App = () => {
   const { appKey, rig, well, appSettings } = useAppCommons();

package/templates/ui/typescript/AGENTS.md

@@ -22,7 +22,7 @@ src/
   constants.ts         — Default settings values
   types.ts             — Custom app settings interface
   custom.d.ts          — Module declarations for CSS/SVG imports
-  App.css              — Component styles (CSS modules)
+  App.scss             — Component styles (SCSS modules)
   __tests__/           — Jest test files
   __mocks__/mockData.ts — Mock data for tests
   assets/              — Static assets (SVGs, images)
@@ -57,83 +57,86 @@ const AppSettings = () => {
 
 ### Styling
 
-CSS modules for component styles:
+The preferred way to write styles is SCSS (`.scss` files).
 
-```typescript
-import styles from './App.css';
-// Use: <div className={styles.container}>
+Every `.scss` file must import the shared utilities:
+
+```scss
+@import '@corva/ui/styles/common';
 ```
 
-For custom component styles, use `makeStyles` from MUI v4:
+This provides all functions, variables, and mixins below.
 
-```typescript
-import { makeStyles } from '@material-ui/core/styles';
+For custom shared variables or mixins specific to the project, create a `src/styles/` directory (e.g. `_variables.scss`, `_common.scss`) and import them alongside the `@corva/ui` import.
 
-const useStyles = makeStyles(theme => ({
-  root: { display: 'flex', gap: theme.spacing(1) },
-}));
+**`spacing($top, $right?, $bottom?, $left?)`** — 8px base unit:
 
-// Inside component:
-const styles = useStyles();
-return <div className={styles.root}>...</div>;
+```scss
+padding: spacing(2); // 16px
+margin: spacing(1, 0); // 8px 0
+gap: spacing(0.5); // 4px
+padding: spacing(2, 1, 2, 1); // 16px 8px 16px 8px
 ```
 
-**`theme.spacing(n)`** — 8px base unit for layout dimensions:
+**`colorAlpha($color, $opacity)`** — transparency:
 
-```typescript
-padding: theme.spacing(2)        // 16px
-margin: theme.spacing(1, 0)      // 8px 0
-borderRadius: theme.spacing(0.5) // 4px
+```scss
+background: colorAlpha($palette_t1, 0.08); // white at 8% opacity
+border: 1px solid colorAlpha($palette_t1, 0.12);
 ```
 
-**Color manipulation** — `fade`, `darken`, `lighten` from `@material-ui/core/styles`:
-
-```typescript
-import { fade, darken, lighten } from '@material-ui/core/styles';
+**`transition($properties...)`** — standard `cubic-bezier(0.4, 0, 0.2, 1) 0.15s`:
 
-background: fade(theme.palette.common.white, 0.08)  // white at 8% opacity
-color: darken(theme.palette.primary.main, 0.2)       // darken by 20%
+```scss
+transition: transition(opacity);
+transition: transition(color, background-color);
 ```
 
-**Transitions:**
+**Full example:**
 
-```typescript
-transition: theme.transitions.create('opacity')
-transition: theme.transitions.create(['opacity', 'background-color'], {
-  duration: theme.transitions.duration.standard, // 300ms
-})
+```scss
+@import '@corva/ui/styles/common';
+
+.container {
+  padding: spacing(2);
+  background: $palette_b5;
+  color: $palette_t1;
+  transition: transition(opacity, background-color);
+
+  &:hover {
+    background: colorAlpha($palette_t1, 0.08);
+  }
+}
+
+.label {
+  color: $palette_t7;
+  font-size: 12px;
+}
 ```
 
-**Breakpoints:**
+**Import in component:**
 
 ```typescript
-[theme.breakpoints.down('sm')]: { padding: theme.spacing(1) }  // max-width: 599px
-[theme.breakpoints.up('md')]: { flexDirection: 'row' }         // min-width: 960px
+import styles from './App.scss';
+// Use: <div className={styles.container}>
 ```
 
-**`theme.zIndex`** — stacking constants: `appBar` (1100), `drawer` (1200), `modal` (1300), `tooltip` (1500).
-
-**CSS variables** — available in `.css` files:
+**Colors & Theming:**
 
-```css
-color: var(--palette-primary-text-1);        /* primary text */
-background: var(--palette-background-b-5);   /* card background */
-border-color: var(--palette-primary-text-9);  /* borders */
-```
+NEVER hardcode color values (hex, rgb, hsl). Always use `@corva/ui` theme colors:
 
-**SCSS functions** — available in `.module.scss` files:
+- In SCSS: use SCSS variables from `@corva/ui/styles/common` like `$palette_t1`, `$palette_b5`, `$palette_t7`
+- Use `colorAlpha($color, $opacity)` for transparency instead of raw `rgba()`
+- Run MCP tool `get_theme_docs` (section: "variables") to see all available theme variables
+- Run MCP tool `get_theme_docs` (section: "palette") to see available palette colors with hex values
 
-```scss
-padding: spacing(2);                // 16px
-color: colorAlpha($color, 0.5);     // rgba transparency
-transition: transition(opacity);    // standard cubic-bezier
-```
+**Rules:**
 
-**Direct theme import:**
-
-```typescript
-import { lightTheme, darkTheme } from '@corva/ui/config';
-```
+- No inline `style={{...}}` unless absolutely necessary for dynamic values
+- Use `classnames` for conditional/composed classes, never manual string joins
+- No global selectors (tag selectors like `div`, `span`) — use `:global()` only when absolutely necessary
+- No `!important`
+- Use a descriptive camelCase class as the root selector (e.g. `.toolbar`, `.chartPanel`) instead of generic `.root`
 
 ### State Management (Zustand)
 
@@ -216,6 +219,7 @@ const selectedChannels = useAppStoreSelector(state => state.selectedChannels);
 **Wire it up in `ParentApp`** (see full example with `QueryClientProvider` in the Data Fetching section below).
 
 General rules:
+
 - Name stores `use[Name]Store` (e.g., `useWellDataStore`)
 - Use selectors: `const value = useAppStore('value')`
 - Keep business logic in store actions
@@ -277,6 +281,7 @@ export default { component: ParentApp, settings: AppSettings };
 ```
 
 General rules:
+
 - Encapsulate queries in custom hooks (e.g., `useWellData`)
 - Use typed query keys (array format)
 - Always handle `isLoading` and `isError` states

package/templates/ui/typescript/src/App.completion.tsx

@@ -4,7 +4,7 @@ import { useAppCommons } from '@corva/ui/effects';
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
 
-import styles from './App.css';
+import styles from './App.scss';
 
 const App = () => {
   const { appKey, fracFleet, well, wells, appSettings } = useAppCommons();

package/templates/ui/typescript/src/App.drilling.tsx

@@ -4,7 +4,7 @@ import { useAppCommons } from '@corva/ui/effects';
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
 
-import styles from './App.css';
+import styles from './App.scss';
 
 const App = () => {
   const { appKey, rig, well, appSettings } = useAppCommons();