Updates snaps with new classnames

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+	"extends": "stylelint-config-sass-guidelines",
+	"rules": {
+		"indentation": "tab"
+	}
+}

Jenkinsfile

@@ -26,6 +26,12 @@ pipeline {
 						sh './do.sh _lint'
 					}
 				}
+				stage('stylelint') {
+					steps {
+						echo 'Running stylelint'
+						sh './do.sh _stylelint'
+					}
+				}
 				stage('test') {
 					steps {
 						echo 'Running test'

do.sh

@@ -22,6 +22,10 @@ _lint() {
 	npx eslint src --ext .js,.jsx
 }
 
+_stylelint() {
+	npx stylelint "src/**/*.{css,scss,sass}"
+}
+
 _jest() {
 	npx jest --ci --coverage
 }
@@ -32,7 +36,7 @@ _jestUpdateSnaps() {
 
 test() {
 	echo "I am ${FUNCNAME[0]}ing"
-	_lint && _jest
+	_lint && _stylelint && _jest
 }
 
 "$@" # <- execute the task

package.json

@@ -62,6 +62,8 @@
 		"sass": "^1.32.5",
 		"sass-loader": "^10.1.1",
 		"style-loader": "^2.0.0",
+		"stylelint": "^13.9.0",
+		"stylelint-config-sass-guidelines": "^7.1.0",
 		"webpack": "^5.19.0",
 		"webpack-cli": "^4.3.1",
 		"webpack-dev-server": "^3.11.1"

src/App.jsx

@@ -9,7 +9,7 @@ function App() {
 	const { user } = useAuth();
 	console.log(user);
 	return (
-		<div className="App">
+		<div className="app">
 			<h1>Frontend</h1>
 			{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
 		</div>

src/App.scss

@@ -1,15 +1,10 @@
-@use "./common_styles/typography" as t;
+@use './common_styles/typography' as t;
-@use "./common_styles/colours";
+@use './common_styles/colours';
 
-.App {
+.app {
 	font: t.$stack;
+	line-height: 1.5;
 	margin: 1rem;
-	line-height: 1.5
-}
-
-.mainContent {
-	width: 80%;
-	margin: auto;
 }
 
 body {

src/common_styles/typography.scss

@@ -15,11 +15,11 @@
 // }
 
 @font-face {
-	src: url("fonts/Trilby-Regular-Testing.woff2") format("woff2"),
+	font-family: 'Trilby';
-		url("fonts/Trilby-Regular-Testing.woff") format("woff");
-	font-family: "Trilby";
 	font-style: normal;
 	font-weight: normal;
+	src: url('fonts/Trilby-Regular-Testing.woff2') format('woff2'),
+		url('fonts/Trilby-Regular-Testing.woff') format('woff');
 }
 
-$stack: 14px "Trilby", "Century Gothic", Futura, sans-serif;
+$stack: 14px 'Trilby', 'Century Gothic', Futura, sans-serif;

src/components/UnauthenticatedApp.jsx

@@ -15,19 +15,19 @@ function UnauthenticatedApp() {
 		<Login login={login} />
 	);
 	return (
-		<div className="UnauthenticatedApp">
+		<div className="unauthenticated-app">
-			<div className="loginRegisterButtonsWrapper">
+			<div className="button-wrapper">
 				<button
 					type="submit"
 					onClick={() => setShowRegister(false)}
-					className="chooseLogin"
+					className="choose-login"
 				>
 					Login
 				</button>
 				<button
 					type="submit"
 					onClick={() => setShowRegister(true)}
-					className="chooseRegister"
+					className="choose-register"
 				>
 					Register
 				</button>

src/components/UnauthenticatedApp.scss

@@ -1,19 +1,16 @@
-@use "../common_styles/colours";
+@use '../common_styles/colours';
-@use "../common_styles/typography";
+@use '../common_styles/typography';
 
-.UnauthenticatedApp button {
+.unauthenticated-app button {
-	padding: 10px 15px;
-	border: 0px;
-	margin: 10px;
 	background-color: colours.$accent-color;
+	border: 0;
 	color: colours.$inverted-text-color;
 	font: typography.$stack;
+	margin: 10px;
+	padding: 10px 15px;
 }
 
-.UnauthenticatedApp .chooseLogin {
+.unauthenticated-app .choose-register {
-}
-
-.UnauthenticatedApp .chooseRegister {
 	background-color: colours.$dimmed-color;
 	color: colours.$text-color;
 }

src/components/__snapshots__/UnauthenticatedApp-snapshot.test.jsx.snap

@@ -2,20 +2,20 @@
 
 exports[`UnauthenticatedApp Snapshot 1`] = `
 <div
-  className="UnauthenticatedApp"
+  className="unauthenticated-app"
 >
   <div
-    className="loginRegisterButtonsWrapper"
+    className="button-wrapper"
   >
     <button
-      className="chooseLogin"
+      className="choose-login"
       onClick={[Function]}
       type="submit"
     >
       Login
     </button>
     <button
-      className="chooseRegister"
+      className="choose-register"
       onClick={[Function]}
       type="submit"
     >