Change style preprocessor to less, as semantic-ui is using that, so we need only one

frontend/src/App.js

@@ -7,7 +7,7 @@ import {from} from 'rxjs'
 import {pluck} from 'rxjs/operators'
 
 import {useConfig} from 'config'
-import styles from './App.module.scss'
+import styles from './App.module.less'
 
 import {
   HomePage,

frontend/src/App.module.less

@@ -1,4 +1,4 @@
-@import 'styles.scss';
+@import 'styles.less';
 
 :global(#root) {
   padding-top: 60px;
@@ -17,8 +17,8 @@
   min-height: 12rem;
   padding: 2rem 0;
 
-  background: $obsColorB4;
-  color: $obsColorW;
+  background: @obsColorB4;
+  color: @obsColorW;
 
   h1, h2, h3, h4, h5, h6 {
     &:global(.ui.header) {
@@ -68,7 +68,7 @@
   font-size: 18pt;
 
   &, &:hover {
-    color: $obsColorB4;
+    color: @obsColorB4;
   }
 }
 

frontend/src/components/Avatar/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Comment} from 'semantic-ui-react'
 import classnames from 'classnames'
 
-import './styles.scss'
+import './styles.less'
 
 function hashCode(s) {
   let hash = 0

frontend/src/components/Page/Page.module.less

@@ -1,4 +1,4 @@
-@import '../../styles.scss';
+@import '../../styles.less';
 
 .page {
   margin-top: 32px;

frontend/src/components/Page/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import {Container} from 'semantic-ui-react'
 
-import styles from './Page.module.scss'
+import styles from './Page.module.less'
 
 export default function Page({small, children, fullScreen, stage}: {small?: boolean, children: ReactNode, fullScreen?: boolean,stage?: ReactNode}) {
   return (

frontend/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Settings} from 'luxon'
 import ReactDOM from 'react-dom'
-import 'semantic-ui-less/semantic.less'
+import 'fomantic-ui-less/semantic.less'
 
 import './index.css'
 import App from './App'

frontend/src/pages/HomePage.tsx

@@ -10,7 +10,7 @@ import {Stats, Page} from 'components'
 
 import {TrackListItem} from './TracksPage'
 import {CustomMap} from './MapPage'
-import styles from './HomePage.module.scss'
+import styles from './HomePage.module.less'
 
 function MostRecentTrack() {
   const track: Track | null = useObservable(

frontend/src/pages/MapPage.tsx

@@ -4,7 +4,7 @@ import {Page} from 'components'
 import {useConfig, Config} from 'config'
 import ReactMapGl, {AttributionControl } from 'react-map-gl'
 
-import styles from './MapPage.module.scss'
+import styles from './MapPage.module.less'
 
 import {obsRoads, basemap } from '../mapstyles'
 

frontend/src/pages/TrackPage/index.tsx

@@ -16,7 +16,7 @@ import TrackComments from './TrackComments'
 import TrackDetails from './TrackDetails'
 import TrackMap from './TrackMap'
 
-import styles from './TrackPage.module.scss'
+import styles from './TrackPage.module.less'
 
 function useTriggerSubject() {
   const subject$ = React.useMemo(() => new Subject(), [])

frontend/src/semantic-ui/theme.config

@@ -73,6 +73,14 @@
 @item        : 'default';
 @statistic   : 'default';
 
+
+
+@toast       : 'default';
+@slider       : 'default';
+@calendar       : 'default';
+@text       : 'default';
+@emoji       : 'default';
+
 /*******************************
             Folders
 *******************************/
@@ -88,7 +96,7 @@
          Import Theme
 *******************************/
 
-@import (multiple) "~semantic-ui-less/theme.less";
+@import (multiple) "~fomantic-ui-less/theme.less";
 @fontPath : '../../../themes/@{theme}/assets/fonts';
 
 /* End Config */

frontend/src/styles.less

@@ -0,0 +1,10 @@
+@obsColorB4: #114594;
+@obsColorG1: #76520E;
+@obsColorW: #FFFFFF;
+@obsColorB1: #122037;
+@obsColorG6: #EFB509;
+@obsColorS: #000000;
+
+@primaryColor: @obsColorB4;
+@secondaryColor: @obsColorG1;
+

frontend/src/styles.scss

@@ -1,17 +0,0 @@
-@mixin container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 16px;
-}
-
-
-$obsColorB4: #114594;
-$obsColorG1: #76520E;
-$obsColorW: #FFFFFF;
-$obsColorB1: #122037;
-$obsColorG6: #EFB509;
-$obsColorS: #000000;
-
-$primaryColor: $obsColorB4;
-$secondaryColor: $obsColorG1;
-