Move to button component

css/styles.scss

@@ -43,7 +43,7 @@
 	.notification-wrapper {
 		display: flex;
 		flex-direction: column;
-		margin-bottom: 44px;
+		margin-bottom: 66px;
 		max-height: calc(100vh - 50px * 4 - 44px) !important;
 	}
 
@@ -62,7 +62,7 @@
 		padding: 10px;
 		width: calc(100% - 10px * 2);
 		position: absolute;
-		bottom: 0px;
+		bottom: 0;
 		background-color: var(--color-main-background);
 
 		&:hover,
@@ -98,25 +98,8 @@
 			color: var(--color-text-maxcontrast);
 			margin: 13px 0 13px auto;
 		}
-
-		.notification-delete {
-			display: flex;
-			color: var(--color-text-maxcontrast);
-			padding: 14px;
-
-			&:hover,
-			.icon-close {
-				opacity: 1;
-				cursor: pointer;
-			}
-
-			.icon-close {
-				opacity: .5;
-			}
-		}
 	}
 
-
 	.notification-subject,
 	.notification-message,
 	.notification-full-message,
@@ -176,9 +159,68 @@
 		overflow: hidden;
 
 		.button {
+			position: relative;
+			width: fit-content;
+			overflow: hidden;
+			border: none;
+			font-size: var(--default-font-size);
+			font-weight: bold;
+			min-height: 44px;
+			min-width: 44px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			cursor: pointer;
+			& * {
+				cursor: pointer;
+			}
+
+			border-radius: 44px / 2;
+			transition: background-color 0.1s linear !important;
+			transition: border 0.1s linear;
+
+
+			color: var(--color-main-text);
+			background-color: var(--color-background-dark);
+			&:hover {
+				background-color: var(--color-primary-light-hover);
+			}
+			// Back to the default color for this button when active
+			// TODO: add ripple effect
+			&:active {
+				background-color: var(--color-primary-element-lighter);
+			}
+
 			line-height: normal;
 			vertical-align: baseline;
 			padding: 8px 16px;
+
+			box-shadow: 0 0 0 2px var(--color-border-dark);
+			&:hover {
+				color: var(--color-main-text);
+				background-color: var(--color-background-dark);
+				box-shadow: 0 0 0 2px var(--color-primary-element);
+			}
+			&:active {
+				box-shadow: 0 0 0 2px var(--color-main-text);
+			}
+
+			&--tabbed {
+				box-shadow: 0 0 0 2px var(--color-main-text);
+				background-color: var(--color-primary-light-hover);
+				&.button-vue--vue-primary {
+					background-color: var(--color-primary-hover);
+				}
+				&.button-vue--vue-secondary {
+					box-shadow: 0 0 0 2px var(--color-main-text);
+				}
+			}
+		}
+
+		.button-vue {
+			line-height: normal;
+			margin: 2px 8px;
 		}
 
 		.action-button.primary {

js/notifications-main.js.LICENSE.txt

@@ -259,6 +259,28 @@
  *
  */
 
+/**
+ * @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 /**!
  * @fileOverview Kickass library to create and place poppers near their reference elements.
  * @version 1.16.1