From 70d9b4fa569f7c98dd09ab8fff34e7df32c98e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=90=D1=85=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=82=D0=B7=D1=8F=D0=BD=D0=BE=D0=B2?= <ahmetzianov.temur@ya.ru>
Date: Sat, 3 Aug 2024 19:07:24 +0500
Subject: [PATCH] action btns moved

---
 index.html       | 28 ++++++++++++++++++----------
 styles/style.css | 46 +++++++++++++++++++++++++++++++++-------------
 2 files changed, 51 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index 13364ee..5edd1c1 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,24 @@
 <body>
     <header>
         <h1 id="header-title">DnD battles</h1>
+
+        <div class="header-buttons-box">
+            <button class="action-btn" id="reorder-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
+                    <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
+                    <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
+                </svg>
+                <p class="action-btn-text">Reorder</p>
+            </button>
+
+            <button class="action-btn" id="remove-all-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
+                    <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
+                </svg>
+                <p class="action-btn-text">Clear</p>
+            </button>
+        </div>
     </header>
 
     <main>
@@ -119,16 +137,6 @@ <h2 class="char-name">Name</h2>
                 </div>
             </div>
         </div> -->
-
-        <div id="remove-all-box">
-            <button class="remove-btn">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
-                    <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
-                </svg>
-                <p class="remove-btn-text">Clear</p>
-            </button>
-        </div>
     </main>
 
     <footer>
diff --git a/styles/style.css b/styles/style.css
index 9939d55..006adea 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -14,6 +14,7 @@ header {
     height: 10vh;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 #header-title {
@@ -34,51 +35,70 @@ main {
     align-items: center;
 }
 
-#remove-all-box {
-    margin-top: 20px;
-
-    width: 80%;
-
+.header-buttons-box {
     display: flex;
     flex-direction: row;
-    justify-content: end;
+
+    margin-right: 20px;
 }
 
-.remove-btn {
+.action-btn {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
 
-    color: #b4637a;
+
     background: transparent;
-    border: 2px solid #b4637a;
+
     border-radius: 10px;
     font-weight: 500;
     font-family: "Montserrat";
+
+    margin-right: 20px;
+}
+
+#remove-all-btn {
+    color: #b4637a;
+    border: 2px solid #b4637a;
+}
+
+#reorder-btn {
+    color: #907aa9;
+    border: 2px solid #907aa9;
 }
 
 @media (hover: hover) {
-    .remove-btn:hover {
+    #remove-all-btn:hover {
         color: #fffaf3;
         background: #b4637a;
     }
+
+    #reorder-btn:hover {
+        color: #fffaf3;
+        background: #907aa9;
+    }
 }
 
 @media (hover: none) {
-    .remove-btn:active {
+    #remove-all-btn:active {
         color: #fffaf3;
         background: #b4637a;
     }
+
+    #reorder-btn:hover {
+        color: #fffaf3;
+        background: #907aa9;
+    }
 }
 
-.bi-trash {
+.action-btn > .bi {
     height: 20px;
     width: 20px;
     margin-left: 10px;
 }
 
-.remove-btn-text {
+.action-btn-text {
     font-size: 20px;
     margin: 8px 10px 8px 5px;
 }
