Update circle button style.

src/views/css/addMenu.css

@@ -9,9 +9,8 @@
     padding: 15px;
 }
 
-#AddMenu .circle{
+#AddMenu .circleButton{
     position: absolute;
     top: 15px;
     right: 15px;
-    width: initial;
 }

src/views/css/home.css

@@ -1,5 +1,9 @@
-.buttonBox{
+#Home .buttonBox{
     position: absolute;
     top: 15px;
     right: 15px;
 }
+
+#Home .buttonBox > *{
+    margin-bottom: 5px;
+}

src/views/css/index.css

@@ -96,16 +96,23 @@ body{
     color: white;
 }
 
-.button.circle{
+.circleButton{
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     height: 50px;
     width: 50px;
-    font-size: 35px;
-    font-weight: normal;
+    font-size: 45px;
     color: var(--accent);
+    background: var(--primary);
+    border: none;
+    cursor: pointer;
+}
+
+.circleButton svg{
+    height: 35px;
+    width: 35px;
 }
 
 .link,

src/views/js/pages/AddMenu.js

@@ -4,14 +4,15 @@ import Elem from "../Elem.js";
 export default class AddMenu extends Page{
     constructor(){
         super("AddMenu");
+        const logoutSvg = '<?xml version="1.0" encoding="UTF-8"?><svg stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
 
-        this.render();
+        this.render(logoutSvg);
     }
 
-    render(){
+    render(logoutSvg){
         new Elem("button")
-            .text("X")
-            .addClass("button", "circle")
+            .innerHtml(logoutSvg)
+            .addClass("circleButton")
             .onclick(()=>{changePage("home")})
             .appendTo(this.container);
 

src/views/js/pages/Home.js

@@ -34,12 +34,12 @@ export default class Home extends Page{
             .addClass("buttonBox")
             .append(new Elem("button")
                 .text("+")
-                .addClass("button", "circle")
+                .addClass("circleButton")
                 .onclick(()=>{changePage("addMenu")})
             )
             .append(new Elem("button")
                 .innerHtml(logoutSvg)
-                .addClass("button", "circle")
+                .addClass("circleButton")
                 .onclick(this.logout)
             )
             .appendTo(this.container);