top bar title and version

src/ui/App.css

@@ -12,6 +12,7 @@ body {
 
 .TopButton:hover {
   filter: invert(100%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(100%) contrast(100%);
+  cursor: pointer;
 }
 
 .TopButton img {

src/ui/components/TopBar.css

@@ -1,10 +1,28 @@
 .TopBar {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 34px;
   background-color: #141414;
   z-index: 1;
   color: #fff;
 }
+
+.TopBtns {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  height: 100%;
+}
+
+#title {
+  margin: 0px 12px;
+  color: #c5c5c5;
+}
+
+#version {
+  margin: 0px 6px;
+  color: #434343;
+}

src/ui/components/TopBar.tsx

@@ -20,11 +20,17 @@ export default class TopBar extends React.Component {
   render() {
     return (
       <div className="TopBar" data-tauri-drag-region >
-        <div id="closeBtn" onClick={this.handleClose} className='TopButton'>
+        <div id="title">
-          <img src={closeIcon} alt="close" />
+          <span>Cultivation</span>
+          <span id="version">v0.0.1</span>
         </div>
-        <div id="minBtn" onClick={this.handleMinimize} className='TopButton'>
+        <div className="TopBtns">
-          <img src={minIcon} alt="minimize" />
+          <div id="closeBtn" onClick={this.handleClose} className='TopButton'>
+            <img src={closeIcon} alt="close" />
+          </div>
+          <div id="minBtn" onClick={this.handleMinimize} className='TopButton'>
+            <img src={minIcon} alt="minimize" />
+          </div>
         </div>
       </div>
     )