added 'connect your wallet' from new design

app/static/css/styles.css

@@ -1125,10 +1125,6 @@ input:checked + .toggle-bg {
   top: 11rem;
 }
 
-.top-20 {
-  top: 5rem;
-}
-
 .-z-10 {
   z-index: -10;
 }
@@ -1207,11 +1203,6 @@ input:checked + .toggle-bg {
   margin-right: auto;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1334,10 +1325,6 @@ input:checked + .toggle-bg {
   margin-top: 9rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .mt-40 {
   margin-top: 10rem;
 }
@@ -2023,6 +2010,11 @@ input:checked + .toggle-bg {
   background-color: rgb(200 30 30 / var(--tw-bg-opacity));
 }
 
+.bg-slate-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+}
+
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -2163,10 +2155,6 @@ input:checked + .toggle-bg {
   padding-bottom: 1rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2428,6 +2416,14 @@ input:checked + .toggle-bg {
   color: red;
 }
 
+.h-box{
+  height: calc(100vh - 150px);
+}
+
+.w-box{
+  width: calc(100vw - 255px);
+}
+
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -2530,6 +2526,11 @@ input:checked + .toggle-bg {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-blue-100:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(225 239 254 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-blue-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
@@ -2727,6 +2728,11 @@ input:checked + .toggle-bg {
   background-color: rgb(155 28 28 / var(--tw-bg-opacity));
 }
 
+:is(.dark .dark\:bg-slate-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+}
+
 :is(.dark .dark\:bg-teal-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(4 116 129 / var(--tw-bg-opacity));

app/templates/book/breadcrumbs_navigation.html

@@ -1,5 +1,5 @@
 <!-- prettier-ignore -->
-<nav class="fixed flex top-32 p-4 pl-1 mt-1.5 z-40 w-full md:w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
+<nav class="fixed flex top-32 p-4 pl-1 mt-1.5 z-40 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-3 ml-5 overflow-x-scroll md:overflow-auto p-0">
     {% for breadcrumb in breadcrumbs %}
     <li class="inline-flex items-center">

app/templates/book/index.html

@@ -3,7 +3,21 @@
 {% set selected_tab='my_library' %}
 {% block content %}
 
-<div class="md:mr-64 relative overflow-x-auto shadow-md sm:rounded-lg mt-1">
+<div
+  class="md:mr-64 relative overflow-x-auto shadow-md sm:rounded-lg mt-1 h-box w-box flex">
+  {% if not current_user.is_authenticated %}
+  <!-- prettier-ignore -->
+  <div class="mx-auto my-auto h-full w-full p-2">
+  <button type="button" id="connectWalletBtn" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div> Connect you wallet to see your library! </div></button></div>
+  <!-- prettier-ignore -->
+  {% endif %}
+  {% if current_user.is_authenticated and books.total<1 %}
+  <!-- prettier-ignore -->
+  <div class="mx-auto my-auto h-full w-full p-2">
+  <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> New book </div></button></div>
+  <!-- prettier-ignore -->
+  {% endif %}
+  <!-- prettier-ignore -->
   {% for book in books %}
   <!-- prettier-ignore -->
   <dl class=" bg-white dark:bg-gray-900 max-w-full p-5 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
@@ -32,7 +46,7 @@
   </dl>
   {% endfor %}
   <!-- prettier-ignore -->
-  {% if page.pages > 1 %}
+  {% if current_user.is_authenticated and page.pages > 1 %}
   <div class="container content-center mt-3 flex bg-white dark:bg-gray-800">
     <nav aria-label="Page navigation example" class="mx-auto">
       <ul class="inline-flex items-center -space-x-px">

app/templates/book/interpretation_view.html

@@ -16,7 +16,7 @@
 {% include 'book/breadcrumbs_navigation.html'%}
 <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
   <!-- prettier-ignore -->
-  <div class="fixed z-30 w-full md:w-4/5 top-44 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <div class="fixed z-30 w-full top-44 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
     <!-- prettier-ignore -->
     <h1 class="text-l font-extrabold dark:text-white ml-4"> Interpretations page </h1>
     <!-- prettier-ignore -->
@@ -57,6 +57,17 @@
 
     <!-- prettier-ignore -->
     <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="interpretation" role="tabpanel" aria-labelledby="interpretation-tab">
+      {% if not current_user.is_authenticated %}
+      <div class="bg-white dark:bg-gray-900 max-w-full p-6 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
+        <div class="grid gap-6">
+          <div class="col-span-6 sm:col-span-3 truncate">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white ">Connect you wallet to start contributing!</h3>
+          </div>
+        </div>
+      </div>
+      <!-- prettier-ignore -->
+      {% endif %}
+      {% if current_user.is_authenticated %}
       <!-- prettier-ignore -->
       <form
       {% if sub_collection %}
@@ -90,6 +101,8 @@
         <button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 ml-auto">Submit</button>
       </div>
     </form>
+    <!-- prettier-ignore -->
+    {% endif %}
       <!-- prettier-ignore  -->
       <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
         <!-- prettier-ignore -->

app/templates/header.html

@@ -120,7 +120,7 @@
     <div class="flex items-center justify-between">
       <div class="flex w-full items-center justify-between">
         <ul class="flex font-medium items-center">
-          <li class="mx-2 {% if selected_tab == 'my_library' %} bg-slate-600 rounded-lg {% endif %}">
+          <li class="mx-2 {% if selected_tab == 'my_library' %} bg-slate-300 dark:bg-slate-700 rounded-lg {% endif %}">
             <a
               href="{{ url_for('book.my_library') }}"
               class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">

app/views/book.py

@@ -34,21 +34,25 @@ def get_all():
 
 
 @bp.route("/", methods=["GET"])
-@login_required
 def my_library():
-    q = request.args.get("q", type=str, default=None)
-    books: m.Book = m.Book.query.order_by(m.Book.id)
-    books = books.filter_by(user_id=current_user.id)
-    if q:
-        books = books.filter(m.Book.label.like(f"{q}"))
+    if current_user.is_authenticated:
+        q = request.args.get("q", type=str, default=None)
+        books: m.Book = m.Book.query.order_by(m.Book.id)
+        books = books.filter_by(user_id=current_user.id, is_deleted=False)
+        if q:
+            books = books.filter(m.Book.label.like(f"{q}"))
 
-    pagination = create_pagination(total=books.count())
+        pagination = create_pagination(total=books.count())
 
+        return render_template(
+            "book/index.html",
+            books=books.paginate(page=pagination.page, per_page=pagination.per_page),
+            page=pagination,
+            search_query=q,
+        )
     return render_template(
         "book/index.html",
-        books=books.paginate(page=pagination.page, per_page=pagination.per_page),
-        page=pagination,
-        search_query=q,
+        books=[],
     )
 
 

src/styles.css

@@ -5,4 +5,10 @@
 
 .text-danger {
     color: red;
+}
+.h-box{
+    height: calc(100vh - 150px);
+}
+.w-box{
+    width: calc(100vw - 255px);
 }

src/wallet.ts

@@ -54,15 +54,16 @@ export function initWallet() {
       credentials: 'include',
       redirect: 'follow',
     });
-    console.log('res2', res2);
-    window.location.href = res2.url;
+    window.location.reload();
   }
 
-  const connectWalletBtn = document.querySelector('#connectWalletBtn');
+  const connectWalletBtns = document.querySelectorAll('#connectWalletBtn');
 
-  if (connectWalletBtn) {
-    connectWalletBtn.addEventListener('click', () => {
-      signInWithEthereum();
-    });
+  if (connectWalletBtns) {
+    connectWalletBtns.forEach(btn =>
+      btn.addEventListener('click', () => {
+        signInWithEthereum();
+      }),
+    );
   }
 }