notifications styling

src/main.rs

@@ -98,6 +98,9 @@ pub type AppData = actix_web::web::Data<Arc<crate::data::Data>>;
 #[actix_web::main]
 async fn main() -> std::io::Result<()> {
     use api::v1;
+
+    env::set_var("RUST_LOG", "info");
+
     pretty_env_logger::init();
     info!(
         "{}: {}.\nFor more information, see: {}\nBuild info:\nVersion: {} commit: {}",

src/pages/panel/sitekey/mod.rs

@@ -31,7 +31,7 @@ pub mod routes {
             Sitekey {
                 list: "/sitekey/list",
                 add: "/sitekey/add",
-                view: "/sitekey/{key}/view",
+                view: "/sitekey/{key}",
             }
         }
     }

src/pages/panel/sitekey/view.rs

@@ -125,7 +125,7 @@ mod test {
 
         let app = get_app!(data).await;
 
-        let url = format!("/sitekey/{}/view", &key.key);
+        let url = format!("/sitekey/{}/", &key.key);
 
         let list_sitekey_resp = test::call_service(
             &app,

src/settings.rs

@@ -18,7 +18,7 @@ use std::env;
 use std::path::Path;
 
 use config::{Config, ConfigError, Environment, File};
-use log::debug;
+use log::{debug, warn};
 use serde::Deserialize;
 use url::Url;
 
@@ -138,7 +138,7 @@ impl Settings {
             Ok(val) => {
                 s.set("server.port", val).unwrap();
             }
-            Err(e) => println!("couldn't interpret PORT: {}", e),
+            Err(e) => warn!("couldn't interpret PORT: {}", e),
         }
 
         match env::var("DATABASE_URL") {
@@ -147,7 +147,7 @@ impl Settings {
                 let database_conf = DatabaseBuilder::extract_database_url(&url);
                 set_from_database_url(&mut s, &database_conf);
             }
-            Err(e) => println!("couldn't interpret DATABASE_URL: {}", e),
+            Err(e) => warn!("couldn't interpret DATABASE_URL: {}", e),
         }
 
         set_database_url(&mut s);

static/cache/img/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>

static/cache/img/svg/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>

static/cache/img/svg/x-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

templates/index.ts

@@ -33,6 +33,7 @@ import './components/error/main.scss';
 import './components/showPassword/main.scss';
 import './panel/css/main.scss';
 import './panel/navbar/main.scss';
+import './panel/notifications/main.scss';
 import './panel/header/taskbar/main.scss';
 import './panel/help-banner/main.scss';
 import './panel/sitekey/add/css/main.scss';

templates/panel/header/taskbar/main.scss

@@ -43,14 +43,17 @@
   opacity: 0.8;
   width: 1.5rem;
   margin: auto 20px;
-}
+  border-radius: 50px;
-
-.taskbar__icon {
   color: $light-text;
 }
 
 .taskbar__icon:hover {
   cursor: grab;
+  background-color: $light-grey;
+  color: $green;
+  background-color: $light-grey;
+  filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
+    brightness(91%) contrast(92%);
 }
 
 .taskbar__add-site {

templates/panel/index.html

@@ -19,7 +19,7 @@
     <ul class="sitekey-list__box">
       <h1 class="sitekey-list__title">Your Sitekeys</h1>
       <. for sitekey in sitekeys.iter() { .>
-      <a href="/sitekey/<.= sitekey.key .>/view" class="sitekey-list__item-container">
+      <a href="/sitekey/<.= sitekey.key .>/" class="sitekey-list__item-container">
         <li class="sitekey-list__item">
 
           <span class="sitekey-list__name">

templates/panel/navbar/index.html

@@ -14,7 +14,6 @@
     </label>
   </div>
   <ul class="secondary-menu__list">
-    
     <!--
           <li class="secondary-menu__section-partition"></li>
           -->

templates/panel/notifications/index.html

@@ -8,22 +8,36 @@ include!("../navbar/index.html"); .>
         <!-- Main menu/ important actions roaster -->
         <table class="notification__table">
           <thead class="notification__heading">
-            <th class="notification__title-text">Your Notifications</th>
+            <tr>
+              <th colspan="4" class="notification__title-text">Your Notifications</th>
+            </tr>
           </thead>
           <tbody class="notification__body">
             <. for notification in n.iter() { .>
             <tr class="notification__item">
-              <td class="notification__mark-reak">
-                <button class="notification__mark-read-btn">tick</button>
-              </td>
               <td>
                 <h3 class="notification__item-heading">
                   <.= notification.heading .>
                 </h3>
                 <p class="notification__item-text"><.= notification.message .></p>
+				<div class="notification-data__container">
+				  <span class="notification__sender"><.= notification.name .></span>
+				  <span>.</span>
+				  <span class="notification__received"><.= notification.received .></span>
+				</div>
+
+              </td>
+			<td class="notification__mark-read-col">
+                <button class="notification__mark-read-btn">
+                  <img 
+                    class="notification__mark-read"
+                    src="<.= crate::FILES
+                         .get("./static/cache/img/svg/check.svg")
+                         .unwrap() .>"
+                    alt="Mark Read" 
+                  />
+				</button>
               </td>
-              <td class="notification__sender"><.= notification.name .></td>
-              <td class="notification__received"><.= notification.received .></td>
             </tr>
             <. } .>
           </tbody>

templates/panel/notifications/main.scss

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+@import '../../vars';
+
+.notification__table {
+  background-color: $white;
+  width: 90%;
+}
+
+.notification__title-text {
+  padding-left: 10px;
+  font-size: 1rem;
+  padding: 0.75rem 1.25rem;
+  box-sizing: border-box;
+  text-align: left;
+  width: 100%;
+  border-bottom: 0.1px solid $light-grey;
+}
+
+.notification__mark-read-btn {
+  background: none;
+  border: none;
+  display: flex;
+  border-radius: 50px;
+}
+
+.notification__mark-read-btn:hover {
+  cursor: grab;
+  background-color: $light-grey;
+}
+
+.notification-data__container {
+	font-size: 0.7rem;
+}
+
+.notification__mark-read {
+  color: $green;
+  margin: auto;
+  filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
+    brightness(91%) contrast(92%);
+}

templates/panel/sitekey/list/index.html

@@ -10,7 +10,7 @@
     <ul class="sitekey-list__box">
       <h1 class="sitekey-list__title">Your Sitekeys</h1>
       <. for sitekey in sitekeys.iter() { .>
-      <a href="/sitekey/<.= sitekey.key .>/view" class="sitekey-list__item-container">
+      <a href="/sitekey/<.= sitekey.key .>/" class="sitekey-list__item-container">
         <li class="sitekey-list__item">
           <span class="sitekey-list__name"><.= sitekey.name .></span>
           <span class="sitekey-list__key"><.= sitekey.key .></span>

templates/panel/sitekey/view/index.html

@@ -8,15 +8,11 @@
   <!-- Main content container -->
   <div class="inner-container">
     <!-- Main menu/ important actions roaster -->
-          
+	<form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
-<form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
+		<h1 class="form__title">Sitekey: <.= name .> 
-	<h1 class="form__title">
+			<a href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
-		Sitekey: <.= name .> 
+		>Click here to see CAPTCHA widget in action</a> 
-		<a href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
+		</h1>
-    >Click here to see CAPTCHA widget in action</a> 
-
-
-	</h1>
     <label class="sitekey-form__label" for="description">
 		Description
 	  <input
@@ -31,7 +27,6 @@
 		<. } .>
 	  />
 	</label>
-
     <label class="sitekey-form__label" for="duration">
 		Cooldown Duratoin(in seconds)
 	  <input

templates/views/v1/routes.ts

@@ -21,7 +21,7 @@ const ROUTES = {
   signoutUser: '/api/v1/signout',
   panelHome: '/',
   docsHome: '/docs/',
-  listSitekey: (key: string) => `/sitekey/${key}/view`,
+  listSitekey: (key: string) => `/sitekey/${key}/`,
   addSiteKey: '/sitekey/add',
 };