From 8447d11f24ce1439833a4f9a63cda46ca5c17c3c Mon Sep 17 00:00:00 2001
From: Liraz Yehezkel <lirazy@up9.com>
Date: Tue, 27 Apr 2021 15:10:39 +0300
Subject: [PATCH] css

---
 ui/src/App.sass | 19 +++++++++++++++++++
 ui/src/App.tsx  |  9 +++++----
 2 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/App.sass

diff --git a/ui/src/App.sass b/ui/src/App.sass
new file mode 100644
index 000000000..406c0f678
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 462a3efe8..235f1670c 100644
--- a/ui/src/App.tsx
+++ b/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>