update html templates

bookshelf_management/apps/mgmt/templates/bookshelf.html

@@ -2,23 +2,23 @@
 
 {% block content %}
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-  <h1>{{bookshelf}}</h1>
+  <h1 class="title">{{bookshelf}}</h1>
-  <h2>Bookshelf</h2>
+  <h2 class="subheading">Bookshelf</h2>
   
-    <strong>Number of Books in Bookshelf:</strong> <p>{{ total }}</p>
+    <strong class="heading-info">Number of Books in Bookshelf:</strong> <p>{{ total }}</p>
 
-    <form action="/bookshelves/{{bookshelfId}}" method="post">
+    <form class="add-form" action="/bookshelves/{{bookshelfId}}" method="post">
       {% csrf_token %}
       {{ form }}
       <input type="submit" value="Add Book">
   </form>
-  <p>Or search for a book to add <a href="/bookshelves/{{bookshelfId}}/search">here</a></p>
+  <p class="form-help">Or search for a book to add <a href="/bookshelves/{{bookshelfId}}/search">here</a></p>
 
-    <h1>Book List</h1>
+    <h1 class="secondary-heading">Book List</h1>
     {% if books %}
     <ul>
       {% for book in books %}
-        <li class="bookshelf-entry" id="book-{{ book.id }}">
+        <li class="bookshelf" id="book-{{ book.id }}">
           <a href="https://www.gutenberg.org/ebooks/{{ book.id }}">{{ book.title }}</a>
         </li>
       {% endfor %}

bookshelf_management/apps/mgmt/templates/bookshelfList.html

@@ -2,9 +2,9 @@
 
 {% block content %}
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-  <h1>All Bookshelves</h1>
+  <h1 class="title">All Bookshelves</h1>
   
-    <strong>Number of Bookshelves:</strong> <p>{{ total }}</p>
+    <strong class="heading-info">Number of Bookshelves:</strong> <p>{{ total }}</p>
 
     {% if bookshelves %}
     <ul>

bookshelf_management/apps/mgmt/templates/bookshelvesOfBook.html

@@ -2,15 +2,15 @@
 
 {% block content %}
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-  <h1>{{bookName}}</h1>
+  <h1 class="title">{{bookName}}</h1>
-  <h2>Bookshelves this book belongs to:</h2>
+  <h2 class="subheading">Bookshelves this book belongs to:</h2>
   
-    <strong>Number of bookshelves it belongs to:</strong> <p>{{ total }}</p>
+    <strong class="heading-info">Number of bookshelves it belongs to:</strong> <p>{{ total }}</p>
 
     {% if bookshelves %}
     <ul>
       {% for bookshelf in bookshelves %}
-        <li>
+        <li class="bookshelf">
           <a href="/bookshelves/{{ bookshelf.id }}">{{ bookshelf.bookshelf }}</a>
         </li>
       {% endfor %}

bookshelf_management/apps/mgmt/templates/login.html

@@ -2,12 +2,12 @@
 
 {% block content %}
 
-<form action="/login" method="post">
+<form class="login-form" action="/login" method="post">
     {% csrf_token %}
     {{ form }}
 
     <input type="submit" value="Login">
 </form>
-<p>{{message}}</p>
+<p class="help-msg">{{message}}</p>
 {% endblock %}
   

bookshelf_management/apps/mgmt/templates/search.html

@@ -2,20 +2,20 @@
 
 {% block content %}
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-  <h1>Search Books</h1>  
+  <h1 class="title">Search Books</h1>  
-    <strong>Number of Books found:</strong> <p>{{ total }}</p>
+    <strong class="subheading">Number of Books found:</strong> <p>{{ total }}</p>
 
-    <form action="/books" method="post">
+    <form class="search-form" action="/books" method="post">
       {% csrf_token %}
       {{ form }}
       <input type="submit" value="Search">
   </form>
 
-    <h1>Book List</h1>
+    <h1 class="secondary-heading">Book List</h1>
     {% if books %}
     <ul>
       {% for book in books %}
-        <li class="bookshelf-entry" id="book-{{ book.id }}">
+        <li class="bookshelf" id="book-{{ book.id }}">
           <a href="/books/{{ book.id }}">{{ book.title }}</a>
         </li>
       {% endfor %}

bookshelf_management/apps/mgmt/templates/searchToAdd.html

@@ -2,20 +2,20 @@
 
 {% block content %}
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-  <h1>Search Books</h1>  
+  <h1 class="title">Search Books</h1>  
-    <strong>Number of Books found:</strong> <p>{{ total }}</p>
+    <strong class="subheading">Number of Books found:</strong> <p>{{ total }}</p>
 
-    <form action="/bookshelves/{{bookshelfId}}/search" method="post">
+    <form class="add-form" action="/bookshelves/{{bookshelfId}}/search" method="post">
       {% csrf_token %}
       {{ form }}
       <input type="submit" value="Search">
   </form>
 
-    <h1>Book List</h1>
+    <h1 class="secondary-heading">Book List</h1>
     {% if books %}
     <ul>
       {% for book in books %}
-        <li class="bookshelf-entry" id="book-{{ book.id }}">
+        <li class="bookshelf" id="book-{{ book.id }}">
           <a href="https://www.gutenberg.org/ebooks/{{ book.id }}">{{ book.title }}</a>
         </li>
       {% endfor %}