css

ui/src/App.sass

@@ -0,0 +1,19 @@
+.mizuApp
+  background-color: #090b14
+  width: 100%
+
+  .header
+    height: 100px
+    display: flex
+    align-items: center
+    padding-left: 24px
+
+    .title
+      font-size: 45px
+      letter-spacing: 2px
+
+    .description
+      margin-left: 10px
+      color: rgba(255,255,255,0.5)
+      padding-top: 15px
+      font-size: 16px

ui/src/App.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import {HarPage} from "./components/HarPage";
+import './App.sass';
 
 const App = () => {
   return (
-      <div style={{backgroundColor: "#090b14", width: "100%"}}>
-        <div style={{height: 100, display: "flex", alignItems: "center", paddingLeft: 24}}>
-            <div style={{fontSize: 45, letterSpacing: 2}}>MIZU</div>
-            <div style={{marginLeft: 10, color: "rgba(255,255,255,0.5)", paddingTop: 15, fontSize: 16}}>Traffic viewer for Kubernetes</div>
+      <div className="mizuApp">
+        <div className="header">
+            <div className="title">MIZU</div>
+            <div className="description">Traffic viewer for Kubernetes</div>
         </div>
         <HarPage/>
       </div>