Prettier

.eslintrc.yml

@@ -3,6 +3,8 @@ env:
   es2021: true
 extends:
   - standard
+  - "eslint:recommended"
+  - "prettier"
 parserOptions:
   ecmaVersion: 12
   sourceType: module

CHANGELOG.md

@@ -104,6 +104,7 @@ About changelog [here](https://keepachangelog.com/en/1.0.0/)
  - Reinstated tooltips to display additional information on genetic elements
 ### Changed
  - Use popper for positioning tooltips
+ - Prettier for code formatting
 ### Fixed
 
 ## [1.2.0]

assets/__mocks__/fileMock.js

@@ -1,3 +1,3 @@
 // __mocks__/fileMock.js
 
-module.exports = 'test-file-stub';
+module.exports = "test-file-stub";

assets/__mocks__/styleMock.js

@@ -1,3 +1,3 @@
 // __mocks__/styleMock.js
 
-module.exports = {};
+module.exports = {};

assets/css/about.scss

@@ -1,4 +1,4 @@
-@import 'defaults', 'navbar';
+@import "defaults", "navbar";
 $tablet-width: 768px;
 $desktop-width: 1024px;
 
@@ -15,96 +15,101 @@ $desktop-width: 1024px;
 }
 
 .content {
-    width: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 #logo {
-    img {
-        width: 500px;
-    }
+  img {
+    width: 500px;
+  }
 
-    .version {
-        font-style: italic;
-    }
+  .version {
+    font-style: italic;
+  }
 }
 
 .card-panel {
-    .row {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        justify-content: center;
-    }
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+  }
 
+  .card {
+    margin: 10px;
+    padding: 15px 20px 20px 20px;
+    border-radius: 3px;
+    box-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.2),
+      0 3px 10px 0 rgba(0, 0, 0, 0.19);
+  }
+  @include tablet {
     .card {
-        margin: 10px;
-        padding: 15px 20px 20px 20px;
-        border-radius: 3px;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
-    }
-    @include tablet {
-        .card {
-            max-width: 100%;
-            flex: 100%;
-        }
+      max-width: 100%;
+      flex: 100%;
     }
+  }
 }
 
 #loaded-db-data {
+  h2,
+  h3,
+  h4 {
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 5px;
 
-    h2, h3, h4 {
-        margin: 0;
-        padding-top: 0;
-        padding-bottom: 5px;
-
-        .year {
-            font-size: 0.85em;
-        }
+    .year {
+      font-size: 0.85em;
     }
+  }
 
-    h2 {
-        font-size: 1.4em;
-    }
+  h2 {
+    font-size: 1.4em;
+  }
 
-    ul {
-        margin: 0;
-        padding-top: 0;
-    }
-    
-    .year {
-        font-weight: lighter;
-        font-style: italic;
-    }
+  ul {
+    margin: 0;
+    padding-top: 0;
+  }
+
+  .year {
+    font-weight: lighter;
+    font-style: italic;
+  }
 }
 
 #config {
-    @extend #loaded-db-data;
-
-    h3 { padding-top: 10px; }
-    h4 { 
-        padding-top: 5px;
-        padding-bottom: 0;
-    }
+  @extend #loaded-db-data;
 
-    .color-group { 
-        width: 150px;
-        padding-top: 5px;
-        margin-left: 20px;
-        display: flex; 
-        justify-content: space-between;
-        align-items: center;
-    }
-    .title { margin: 0; }
+  h3 {
+    padding-top: 10px;
+  }
+  h4 {
+    padding-top: 5px;
+    padding-bottom: 0;
+  }
 
-    .color-box {
-        width: 30px;
-        height: 20px;
-        margin-left: 20px;
-    }
+  .color-group {
+    width: 150px;
+    padding-top: 5px;
+    margin-left: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .title {
+    margin: 0;
+  }
 
+  .color-box {
+    width: 30px;
+    height: 20px;
+    margin-left: 20px;
+  }
 }

assets/css/defaults.scss

@@ -1,17 +1,17 @@
- // Default colors 
+// Default colors
 $default-font-color: #202231;
-$default-bg-color: #F7F9F9;
+$default-bg-color: #f7f9f9;
 // font
 $default-font: Arial, Helvetica, sans-serif;
 $default-font-print: "Times New Roman", Times, serif;
 
 html {
-    font-family: $default-font;
-    color: $default-font-color;
-    background-color: $default-bg-color;
+  font-family: $default-font;
+  color: $default-font-color;
+  background-color: $default-bg-color;
 }
 
 body {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }

assets/css/error.scss

@@ -1,57 +1,57 @@
 #broken-dna {
-    position: absolute;
-    transform: rotate(-80deg);
-    width: 800px;
-    top: -130px;
-    left: 30%;
-    z-index: -1;
+  position: absolute;
+  transform: rotate(-80deg);
+  width: 800px;
+  top: -130px;
+  left: 30%;
+  z-index: -1;
 }
 
 .content {
-    margin: auto;
-    max-width: 60%;
-    margin-top: 50px;
-    padding: 20px 15px;
+  margin: auto;
+  max-width: 60%;
+  margin-top: 50px;
+  padding: 20px 15px;
 
-    #error-code {
-        z-index: 1;
-        position: relative;
-        left: -150px;
-        top: 50px;
-        margin: 0;
-        padding: 0;
-        // font
-        font-size: 150px;
-        font-weight: bolder;
-        letter-spacing: 10px;
-        transform: rotate(-25deg);
-        color: #4d5663;
-    }
+  #error-code {
+    z-index: 1;
+    position: relative;
+    left: -150px;
+    top: 50px;
+    margin: 0;
+    padding: 0;
+    // font
+    font-size: 150px;
+    font-weight: bolder;
+    letter-spacing: 10px;
+    transform: rotate(-25deg);
+    color: #4d5663;
+  }
 
-    .headline {
-        font-size: 48px;
-        text-align: center;
-        font-style: italic;
-        margin-top: 0;
-    }
+  .headline {
+    font-size: 48px;
+    text-align: center;
+    font-style: italic;
+    margin-top: 0;
+  }
 
-    p {
-        text-align: center;
-        padding-top: 15px;
-    }
+  p {
+    text-align: center;
+    padding-top: 15px;
+  }
 
-    .error-msg-container {
-        position: absolute;
-        top: 500px;
-        width: 40%;
-        border-radius: 4px;
-        padding: 20px;
-        // center in parent
-        left: 50%;
-        transform: translateX(-50%);
-    }
+  .error-msg-container {
+    position: absolute;
+    top: 500px;
+    width: 40%;
+    border-radius: 4px;
+    padding: 20px;
+    // center in parent
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 
 .bold {
-    font-weight: bold;
+  font-weight: bold;
 }