Migrate styles to SCSS

src/components/Legend.css

@@ -1,19 +0,0 @@
-.legend {
-  .box {
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    border-radius: 4px;
-    margin-right: 8px;
-    vertical-align: middle;
-  }
-  ul {
-    list-style: none;
-    margin: 16px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-  }
-}

src/components/Legend.tsx

@@ -1,5 +1,5 @@
 import { colorScheme } from "../config";
-import "./Legend.css";
+import "../styles/Legend.scss";
 
 const labels = {
   0: "Keine Erfahrung",

src/components/QRCode.css

@@ -1,28 +0,0 @@
-.qr-code-container {
-  background-color: hsl(18.6deg 100% 55.1%);
-  flex-basis: 20%;
-  flex-shrink: 0;
-  padding: 16px;
-  border-radius: 16px;
-
-  filter: drop-shadow(0 8px 8px hsl(202.5deg 20% 76.5%));
-
-  color: #fff;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  p {
-    text-align: center;
-  }
-
-  img {
-    display: block;
-    margin: 0 auto;
-    background-color: #fff;
-    border-radius: 16px;
-    padding: 16px;
-    width: 50%;
-  }
-}

src/components/QRCode.tsx

@@ -1,4 +1,4 @@
-import "./QRCode.css";
+import "../styles/QRCode.scss";
 
 export default function QRCode() {
   return (
@@ -9,7 +9,7 @@ export default function QRCode() {
         egal, auf welchem Level du bist.
       </p>
       <div className="qr-code bracket-frame">
-        <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/QR_Code_Example.svg" />
+        <img src="/qr_code_ki-skills-umfrage.png" />
       </div>
     </div>
   );