use css properties insted of headings (#1588)

* use css properties insted of headings

* # merge master

* Delete .idea directory

src/ThreeEditor/Simulation/Physics/Beam.ts

@@ -4,7 +4,7 @@ import { Line2 } from 'three/examples/jsm/lines/Line2.js';
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
 
-import { Particle, PARTICLE_TYPES, FLUKA_PARTICLE_TYPES } from '../../../types/Particle';
+import { FLUKA_PARTICLE_TYPES,Particle, PARTICLE_TYPES } from '../../../types/Particle';
 // Import of 'lines' from examples subfolder follows the official guidelines of threejs.editor (see https://threejs.org/docs/#manual/en/introduction/Installation)
 import { ConfigSourceFile } from '../../../types/SimulationTypes/ConfigTypes';
 import { YaptideEditor } from '../../js/YaptideEditor';
@@ -167,7 +167,9 @@ export class Beam extends SimulationElement {
 	sourceFile: ConfigSourceFile;
 
 	get particle(): Particle {
-		return [...PARTICLE_TYPES, ...FLUKA_PARTICLE_TYPES].find(p => p.id === this.particleData.id) as Particle;
+		return [...PARTICLE_TYPES, ...FLUKA_PARTICLE_TYPES].find(
+			p => p.id === this.particleData.id
+		) as Particle;
 	}
 
 	constructor(editor: YaptideEditor) {

src/ThreeEditor/components/Sidebar/EditorSidebar.tsx

@@ -227,8 +227,11 @@ export function EditorSidebar(props: EditorSidebarProps) {
 										spacing={2}>
 										<Box>
 											<Typography
-												variant='h6'
-												sx={{ margin: '0.5rem 0' }}>
+												sx={{
+													fontSize: '1rem',
+													margin: '0.5rem 0',
+													letterSpacing: '0.0075em'
+												}}>
 												Beam
 											</Typography>
 											<PropertiesPanel

src/ThreeEditor/components/Sidebar/properties/category/BeamConfiguration.tsx

@@ -2,7 +2,7 @@ import { Divider, ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { useEffect } from 'react';
 import { Object3D } from 'three';
 
-import { PARTICLE_TYPES, FLUKA_PARTICLE_TYPES } from '../../../../../types/Particle';
+import { FLUKA_PARTICLE_TYPES,PARTICLE_TYPES } from '../../../../../types/Particle';
 import { SimulatorType } from '../../../../../types/RequestTypes';
 import { useSmartWatchEditorState } from '../../../../../util/hooks/signals';
 import { SetValueCommand } from '../../../../js/commands/SetValueCommand';
@@ -150,11 +150,11 @@ function BeamConfigurationFields(props: { editor: YaptideEditor; object: Beam })
 	const { object, editor } = props;
 
 	let supportedParticles: ParticleType[] = [...PARTICLE_TYPES];
+
 	if (editor.contextManager.currentSimulator === SimulatorType.FLUKA) {
 		supportedParticles.push(...FLUKA_PARTICLE_TYPES);
 	}
 
-
 	const { state: watchedObject } = useSmartWatchEditorState(editor, object, true);
 
 	const setValueCommand = (value: any, key: string) => {

src/ThreeEditor/components/Sidebar/properties/category/QuantityConfiguration.tsx

@@ -10,7 +10,8 @@ import {
 	canChangePrimaryMultiplier,
 	DETECTOR_KEYWORD_OPTIONS,
 	FLUKA_DETECTOR_KEYWORD_OPTIONS,
-	MEDIUM_KEYWORD_OPTIONS} from '../../../../Simulation/Scoring/ScoringOutputTypes';
+	MEDIUM_KEYWORD_OPTIONS
+} from '../../../../Simulation/Scoring/ScoringOutputTypes';
 import { isScoringQuantity, ScoringQuantity } from '../../../../Simulation/Scoring/ScoringQuantity';
 import { ObjectSelectPropertyField } from '../fields/ObjectSelectPropertyField';
 import {

src/WrapperApp/WrapperApp.tsx

@@ -7,14 +7,14 @@ import { useStore } from '../services/StoreService';
 import SceneEditor from '../ThreeEditor/components/Editor/SceneEditor';
 import { SimulatorType } from '../types/RequestTypes';
 import { SimulationInputFiles } from '../types/ResponseTypes';
+import { camelCaseToNormalText } from '../util/camelCaseToSentenceCase';
 import InputEditorPanel from './components/InputEditor/InputEditorPanel';
 import NavDrawer from './components/NavDrawer/NavDrawer';
 import { AboutPanel } from './components/Panels/AboutPanel';
 import LoginPanel from './components/Panels/LoginPanel';
 import { TabPanel } from './components/Panels/TabPanel';
 import ResultsPanel from './components/Results/ResultsPanel';
 import SimulationPanel from './components/Simulation/SimulationPanel';
-import {camelCaseToNormalText} from '../util/camelCaseToSentenceCase'
 
 function WrapperApp() {
 	const { demoMode } = useConfig();
@@ -50,7 +50,7 @@ function WrapperApp() {
 	}, [isAuthorized, tabsValue]);
 
 	useEffect(() => {
-		//The document.title is used by web browser to display a name on the browser tab. 
+		//The document.title is used by web browser to display a name on the browser tab.
 		//There we would like to see the name extracted from a tabsValue, which can sugest user in which tab of our application is at the moment.
 		//We want to make the text which be a title as a normal text, not cammel case text, to make it similar to values of tabs user can see on navbar.
 		document.title = camelCaseToNormalText(tabsValue); //e.g. we've got 'inputFiles' as a value of tabsValue and this function converts this value to 'Input Files'

src/WrapperApp/components/InputEditor/InputFilesEditor.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Card, CardActions, CardContent, Divider } from '@mui/material';
+import { Box, Button, Card, CardActions, CardContent, Divider, Typography } from '@mui/material';
 import useTheme from '@mui/system/useTheme';
 import CodeEditor from '@uiw/react-textarea-code-editor';
 
@@ -145,7 +145,13 @@ export function InputFilesEditor(props: InputFilesEditorProps) {
 
 						return (
 							<Box key={name}>
-								<h2>
+								<Typography
+									sx={{
+										fontWeight: 'bold',
+										fontSize: '1.5em',
+										marginBlockStart: '0.83em',
+										marginBlockEnd: '0.83em'
+									}}>
 									{name}
 									<Button
 										color='info'
@@ -197,7 +203,7 @@ export function InputFilesEditor(props: InputFilesEditorProps) {
 											File is to large, displaying first few lines...
 										</Box>
 									)}
-								</h2>
+								</Typography>
 								<CodeEditor
 									aria-label={name + ' text field'}
 									value={content}

src/WrapperApp/components/NavDrawer/NavDrawer.tsx

@@ -175,8 +175,12 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) {
 								}
 								label={
 									<Typography
-										variant='h5'
-										sx={{ opacity: open ? 1 : 0 }}>
+										sx={{
+											opacity: open ? 1 : 0,
+											fontSize: '1.5em',
+											marginBlockStart: '0.67em',
+											marginBlockEnd: '0.67em'
+										}}>
 										YAPTIDE
 									</Typography>
 								}

src/WrapperApp/components/Panels/AboutPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Link } from '@mui/material';
+import { Box, Link, Typography } from '@mui/material';
 
 export function AboutPanel() {
 	return (
@@ -9,7 +9,15 @@ export function AboutPanel() {
 				flexDirection: 'column',
 				justifyContent: 'space-between'
 			}}>
-			<h1>About</h1>
+			<Typography
+				sx={{
+					fontWeight: 'bold',
+					fontSize: '2em',
+					marginBlockStart: '0.67em',
+					marginBlockEnd: '0.67em'
+				}}>
+				About
+			</Typography>
 			<p>
 				{'This work was supported by the '}
 				<Link

src/types/Particle.ts

@@ -71,10 +71,9 @@ export const PARTICLE_TYPES = [
 	}
 ] as const satisfies readonly ParticleType[];
 
-
 export const FLUKA_PARTICLE_TYPES = [
 	{
 		id: 26,
 		name: 'Electron'
 	}
-] as const satisfies readonly ParticleType[];
+] as const satisfies readonly ParticleType[];

src/util/camelCaseToSentenceCase.ts

@@ -1,9 +1,9 @@
-import { CapitalizeString } from "./Capitalize";
+import { CapitalizeString } from './Capitalize';
 
 export function camelCaseToNormalText(input: string) {
-    // Insert a space before all caps and trim any leading space
-    let result = input.replace(/([A-Z])/g, ' $1').trim();
-    
-    // Convert the first character to uppercase and the rest to lowercase
-    return CapitalizeString(result);
-}
+	// Insert a space before all caps and trim any leading space
+	let result = input.replace(/([A-Z])/g, ' $1').trim();
+
+	// Convert the first character to uppercase and the rest to lowercase
+	return CapitalizeString(result);
+}