1 files changed, 42 insertions, 5 deletions
diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss
index e91dab9..babffa2 100644
--- a/apps/Notes/Notes.module.scss
+++ b/apps/Notes/Notes.module.scss
@@ -57,9 +57,8 @@
         flex-grow: 1;
       }
 
-      & > span:nth-child(2),
-      & > span:nth-child(3) {
-        margin-left: .5em;
+      & > span:nth-child(n+2){
+        margin-left: .25em;
         padding: .15em .5em;
         line-height: 1em;
         border-radius: 50%;
@@ -76,8 +75,7 @@
     border-radius: .5em;
     cursor: pointer;
 
-    & > td:first-of-type > span:nth-child(2),
-    & > td:first-of-type > span:nth-child(3) {
+    & > td:first-of-type > span:nth-child(n+2){
       color: #666;
       visibility: visible;
       opacity: 1;
@@ -91,6 +89,11 @@
   }
 
   & > td:first-of-type > span:nth-child(3):hover {
+    background-color: #ffffde;
+    color: #333;
+  }
+
+  & > td:first-of-type > span:nth-child(4):hover {
     background-color: #ffdede;
     color: #333;
   }
@@ -229,3 +232,37 @@
   }
 }
 
+.loader,
+.connection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  flex-direction: column;
+
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  svg {
+    font-size: 600%;
+    color: #ccc;
+  }
+
+  p {
+    padding-top: 1em;
+    color: #ccc;
+    font-weight: 600;
+  }
+}
+
+.loader {
+  svg {
+    animation: rotating 1s linear infinite;
+  }
+}