Migrate styles to SCSS

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.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>
   );

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
-import "./index.css";
+import "./styles/index.scss";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

src/styles/Legend.scss

@@ -1,3 +1,5 @@
+@use "shared" as *;
+
 .legend {
   .box {
     display: inline-block;
@@ -6,7 +8,9 @@
     border-radius: 4px;
     margin-right: 8px;
     vertical-align: middle;
+    @include shadow;
   }
+
   ul {
     list-style: none;
     margin: 16px;

src/styles/QRCode.scss

@@ -1,11 +1,12 @@
+@use "shared" as *;
+
 .qr-code-container {
-  background-color: hsl(18.6deg 100% 55.1%);
+  @include rounded;
+
+  background-color: $aai-orange;
   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;
 

src/styles/_shared.scss

@@ -0,0 +1,50 @@
+$aai-blue-dark: hsl(198.5deg 83.5% 19%);
+$aai-blue-light: hsl(196.8deg 63% 55.5%);
+
+$aai-green-dark: hsl(181deg 75% 37%);
+$aai-green-light: hsl(127.5deg 100% 87.5%);
+
+$aai-grey: hsl(202.5deg 20% 76.5%);
+$aai-orange: hsl(18.6deg 100% 55.1%);
+
+@mixin rounded {
+  border-radius: 16px;
+}
+
+@mixin shadow {
+  filter: drop-shadow(0 16px 16px rgb($aai-grey, 80%));
+}
+
+@mixin no-shadow {
+  filter: none;
+}
+
+$border-radius: 16px;
+
+@mixin button {
+  @include shadow;
+
+  background-color: $aai-action-button;
+  color: #ffffff;
+
+  border-radius: $border-radius;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  overflow: hidden;
+
+  &:active {
+    @include no-shadow;
+  }
+
+  span {
+    flex: 1 auto;
+    white-space: nowrap;
+    text-align: center;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 16px;
+  }
+}

src/styles/index.scss

@@ -1,3 +1,5 @@
+@use "shared" as *;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -32,11 +34,11 @@ h6 {
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: $aai-blue-dark;
   text-decoration: inherit;
 }
 a:hover {
-  color: #747bff;
+  color: $aai-blue-light;
 }
 
 body {
@@ -56,13 +58,13 @@ body {
 }
 
 .chart-container {
+  @include rounded;
+  @include shadow;
+
   display: flex;
   flex-direction: column;
 
   background-color: #ffffff;
-  border-radius: 16px;
-
-  filter: drop-shadow(0 8px 8px hsl(202.5deg 20% 76.5%));
 }
 
 .charts {
@@ -73,14 +75,14 @@ body {
 }
 
 .question-group {
+  @include rounded;
+  @include shadow;
+
   background-color: #ffffff;
   padding: 16px;
   border: 1px solid #ddd;
-  border-radius: 8px;
 
-  flex: 1 1 380px;
-
-  filter: drop-shadow(0 2px 2px hsl(202.5deg 20% 76.5%));
+  flex: 1 1 300px;
 
   display: flex;
   flex-direction: column;
@@ -104,6 +106,8 @@ body {
   font-weight: bold;
   color: #333;
 }
-.question-title::before {
-  content: "💻 ";
+
+.question-title .material-icons {
+  vertical-align: top;
+  margin-right: 1ex;
 }