1 files changed, 36 insertions, 15 deletions

diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index 09ae14016..a112f4745 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "global/globalCssVariables";
 
 $linkGap : 3px;
 
@@ -7,13 +7,13 @@ $linkGap : 3px;
 }
 
 .documentButtonBar-linkButton-empty:hover {
-    background: $main-accent;
+    background: $medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
 
 .documentButtonBar-linkButton-nonempty:hover {
-    background: $main-accent;
+    background: $medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
@@ -25,8 +25,8 @@ $linkGap : 3px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
-    background-color: $dark-color;
-    color: $light-color;
+    background-color: $dark-gray;
+    color: $white;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 75%;
@@ -37,39 +37,60 @@ $linkGap : 3px;
     align-items: center;
 
     &:hover {
-        background: $main-accent;
+        background: $medium-gray;
         transform: scale(1.05);
         cursor: pointer;
     }
 }
 
 .documentButtonBar {
-    margin-top: $linkGap;
-    grid-column: 1/4;
-    width: max-content;
-    height: auto;
     display: flex;
     flex-direction: row;
 }
 
 .documentButtonBar-button {
-    pointer-events: auto;
-    padding-right: 5px;
-    width: 25px;
+    cursor: pointer;
+    display: flex;
+    width: 30px;
+    height: 30px;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
 }
 
+// depracated (now use .documentButtonBar-icon) for standard buttons
 .documentButtonBar-linker {
     height: 20px;
     width: 20px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    background-color: $dark-color;
+    background-color: $dark-gray;
+    border: none;
+    transition: 0.2s ease all;
+
+    &:hover {
+        background-color: $medium-gray;
+    }
+}
+
+.documentButtonBar-icon {
+    height: 80%;
+    width: 80%;
+    font-size: 100%;
+    text-align: center;
+    border-radius: 50%;
+    pointer-events: auto;
+    background-color: $dark-gray;
     border: none;
     transition: 0.2s ease all;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
 
     &:hover {
-        background-color: $main-accent;
+        background-color: $black;
     }
 }