updated rollup plugin node-resolve; improved favorites refresh animation

src/styles/scss/base/_animations.scss

@@ -0,0 +1,9 @@
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}

src/styles/scss/style.scss

@@ -1,6 +1,7 @@
 @import './base/base';
 @import './base/normalize';
 @import './base/mixins';
+@import './base/animations';
 
 @import './globals/globals';
 @import './globals/tables';

src/styles/scss/tabs/_favorites-tab.scss

@@ -2,26 +2,14 @@
 	color: var(--accent-text);
 }
 
-div.reload-button {
-	width: 36px;
-	height: 36px;
-}
-div.reload-button i{
-	padding: 6px;
-}
+.reload-button {
+	&.reload-button--inline {
+		display: inline-block;
+	}
 
-div.reload-button.spin {
-	animation-name: spin;
-  animation-duration: 0.5s;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-out;
-}
-
-@keyframes spin {
-    from {
-        transform:rotate(0deg);
-    }
-    to {
-        transform:rotate(360deg);
-    }
+	&.spin {
+		i {
+			animation: spin 500ms infinite ease-out reverse;
+		}
+	}
 }

src/styles/scss/tabs/_tabs.scss

@@ -9,7 +9,7 @@
 }
 
 .tab button {
-	background-color: var(--primary-background);
+	background-color: var(--main-background);
 	color: var(--foreground);
 }
 
@@ -42,8 +42,7 @@
 	&__tab {
 		flex: 1;
 		font-size: 1.2rem;
-		// width: 10rem;
-		padding: 1em;
+		padding: .8em;
 		border-top: 3px solid var(--foreground);
 		text-align: center;