From ba3b65b7dbca2a7124e0f7831921f5fd2a9a7b3a Mon Sep 17 00:00:00 2001
From: Alexander Bentkamp <bentkamp@gmail.com>
Date: Wed, 25 Jan 2023 13:47:44 +0100
Subject: [PATCH] use css for svg styling

---
 client/src/components/Welcome.tsx |  9 +++------
 client/src/components/welcome.css | 12 ++++++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/welcome.css

diff --git a/client/src/components/Welcome.tsx b/client/src/components/Welcome.tsx
index 981aae4..a121968 100644
--- a/client/src/components/Welcome.tsx
+++ b/client/src/components/Welcome.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
+import './welcome.css'
 import cytoscape, { LayoutOptions } from 'cytoscape'
 import klay from 'cytoscape-klay';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
@@ -63,8 +60,8 @@ function Welcome() {
 
       svgElements.push(
         <Link key={`world${id}`} to={`/world/${id}/level/1`}>
-          <circle fill="#61DAFB" cx={position.x} cy={position.y} r="8" />
-          <text style={{font: "italic 2px sans-serif",  textAnchor: "middle", dominantBaseline: "middle"} as any}
+          <circle className="world-circle" cx={position.x} cy={position.y} r="8" />
+          <text className="world-name"
             x={position.x} y={position.y}>{nodes[id].data.title ? nodes[id].data.title : id}</text>
         </Link>
       )
diff --git a/client/src/components/welcome.css b/client/src/components/welcome.css
new file mode 100644
index 0000000..849f441
--- /dev/null
+++ b/client/src/components/welcome.css
@@ -0,0 +1,12 @@
+
+svg .world-circle {
+  fill: var(--clr-primary)
+}
+
+svg .world-name {
+  fill: white;
+  font-size: 2px;
+  font-weight: 500;
+  text-anchor: middle;
+  dominant-baseline: middle;
+}