From 59ca7ac4d2ed3ea9a6739c8a6bd9b5274034f265 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 27 Jan 2021 17:53:41 +0100
Subject: [PATCH] Notifications app dark

---
 .../src/less2/include/colortheme-dark.less    |  7 +++++
 .../src/less2/include/colortheme.less         | 12 ++++++---
 www/notifications/app-notifications.less      | 27 +++++++++----------
 www/notifications/inner.js                    |  2 +-
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index 1b755fd96..695f0a99b 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -394,5 +394,12 @@
 @cp_kanban-color0: @cryptpad_color_neutral2_grey;
 @cp_kanban-colors: darken(#FFD4D4,75%), darken(#FFDECA, 75%), darken(#FFE69C,75%), darken(#DBFFB7,75%), darken(#AFFDC2,75%), darken(#C9FFFE,75%), darken(#C8D6FF,75%), darken(#E4CAFF,75%);
 
+// Notifications
+@cp_notif-hover: fade(@cryptpad_color_black, 10%);
+@cp_notif-header-bg: @cryptpad_color_hint_grey;
+@cp_notif-header-fg: @cryptpad_color_white;
+@cp_notif-table-border: @cryptpad_color_neutral_grey;
+@cp_notif-bg: @cryptpad_color_lighter_grey;
+@cp_notif-fg: @cryptpad_text_col;
 
 
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index b1d6258ec..54b92675a 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -397,6 +397,12 @@
 @cp_kanban-color0: @cryptpad_color_neutral2_grey;
 @cp_kanban-colors: #FFD4D4, #FFDECA, #FFE69C, #DBFFB7, #AFFDC2, #C9FFFE, #C8D6FF, #E4CAFF;
 
-
-
-
+// Notifications
+@cp_notif-hover: fade(@cryptpad_color_black, 10%);
+@cp_notif-header-bg: @cryptpad_color_hint_grey;
+@cp_notif-header-fg: @cryptpad_color_white;
+@cp_notif-table-border: @cryptpad_color_neutral_grey;
+@cp_notif-bg: @cryptpad_color_lighter_grey;
+@cp_notif-fg: @cryptpad_text_col;
+
+// XXX OO OO OO OO OO
diff --git a/www/notifications/app-notifications.less b/www/notifications/app-notifications.less
index bcb0c9dd7..26fbf48d7 100644
--- a/www/notifications/app-notifications.less
+++ b/www/notifications/app-notifications.less
@@ -13,7 +13,7 @@
     .cp-clickable {
         cursor: pointer;
         &:hover {
-            background-color: rgba(0,0,0,0.1);
+            background-color: @cp_notif-hover;
         }
     }
 
@@ -29,9 +29,8 @@
             flex-direction: row;
             justify-content: flex-start;
             align-items: center;
-//            border-radius: 5px 5px 0 0;
-            background-color: #888;
-            color: #fff;
+            background-color: @cp_notif-header-bg;
+            color: @cp_notif-header-fg;
 
             .cp-app-notifications-panel-title {
                 flex-grow: 1;
@@ -63,9 +62,8 @@
             flex-direction: column;
             justify-content: flex-start;
             align-items: stretch;
-            border: 1px solid #ccc;
+            border: 1px solid @cp_notif-table-border;
             border-top: none;
-//            border-radius: 0 0 5px 5px;
             overflow: hidden;
 
             .cp-notification {
@@ -73,12 +71,12 @@
                 flex-direction: row;
                 justify-content: flex-start;
                 align-items: center;
-                background-color: #ffffff;
+                background-color: @cp_notif-bg;
                 &.no-notifications {
                     display: none;
                     padding: 1rem 1rem;
                     font-style: italic;
-                    color: #777;
+                    color: @cp_notif-fg;
                     &:only-child {
                         display: block;
                     }
@@ -88,14 +86,14 @@
                     padding: 0 10px;
                     cursor: pointer;
                     &:hover {
-                        background-color: rgba(0,0,0,0.1);
+                        background-color: @cp_notif-hover;
                     }
                 }
                 &.cp-app-notification-archived {
-                    background-color: #f1f1f1;
+                    background-color: @cp_notif-bg;
                 }
                 &:not(:first-child) {
-                    border-top: 1px solid #ccc;
+                    border-top: 1px solid @cp_notif-table-border;
                 }
                 &.dismissed {
                     display: none;
@@ -127,7 +125,7 @@
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
-                    border-left: 1px solid #ccc;
+                    border-left: 1px solid @cp_notif-table-border;
                     width: 3rem;
                 }
             }
@@ -141,8 +139,9 @@
         align-items: center;
         width: 100%;
         padding: 0.5rem;
-        border: 1px solid #ccc;
-        color: #333;
+        background-color: @cp_notif-bg;
+        border: 1px solid @cp_notif-table-border;
+        color: @cp_notif-fg;
     }
 
 }
diff --git a/www/notifications/inner.js b/www/notifications/inner.js
index b3813bfa1..a861dc803 100644
--- a/www/notifications/inner.js
+++ b/www/notifications/inner.js
@@ -202,7 +202,7 @@ define([
             var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
             if (key === 'all') { $category.append($('<span>', {'class': 'fa fa-bars'})); }
             if (key === 'friends') { $category.append($('<span>', {'class': 'fa fa-user'})); }
-            if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-pad'})); }
+            if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-richtext'})); }
             if (key === 'archived') { $category.append($('<span>', {'class': 'fa fa-archive'})); }
 
             if (key === active) {