UI changes

atharva-kakarot · Jun 20, 2024 · a606915 · a606915
1 parent fc2c774
commit a606915
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 24 deletions.
diff --git a/css/index.css b/css/index.css
@@ -455,7 +455,7 @@ body {
     }
 
     #input-box {
-        font-size: 40px;
+        font-size: 30px;
         padding: 20px;
     }
 
@@ -493,8 +493,12 @@ body {
         margin-top: -10px;
     }
 
-    #synopsis-div {
-        font-size: 8px;
+    #synopsis-div, #relations-div {
+        margin: 50px;
+        margin-top: 20px;
+        font-size: 16px;
+        text-align: center;
+        padding: 20px 50px;
     }
 
     #anime-details-main-div {
@@ -540,12 +544,6 @@ body {
         width: 90%;
     }
 
-    #synopsis-div {
-        margin: 50px;
-        margin-top: 20px;
-        font-size: 15px;
-    }
-
     #relations-div {
         margin: 50px;
         margin-top: -30px;
@@ -577,7 +575,7 @@ body {
     }
 
     #anime-div {
-        margin-bottom: 120px;
+        margin-bottom: 50px;
     }
 
     #currently-airing-header {
@@ -666,11 +664,10 @@ body {
     }
 
     .search-anime-details-table {
-        font-size: 22px;
+        font-size: 20px;
     }
 
     .search-anime-details-table tr {
-        height: 32.5px;
+        height: 32px;
     }
-
 }
diff --git a/js/index.js b/js/index.js
@@ -999,35 +999,35 @@ function animeAboutDiv() {
         `<table id="anime-info-table">
         <tr>
             <td>Type:</td>
-            <td>${type}</td>
+            <td><i class="fa-solid fa-photo-film"></i> ${type}</td>
         </tr>
         <tr>
             <td>Episodes:</td>
-            <td>${episodes}</td>
+            <td><i class="fa-solid fa-tv"></i> ${episodes}</td>
         </tr>
         <tr>
             <td>Duration:</td>
-            <td>${duration} min</td>
+            <td><i class="fa-regular fa-clock"></i> ${duration} min</td>
         </tr>
         <tr>
             <td>Broadcast:</td>
-            <td>${startDay}/${startMonth}/${startYear} to ${endDay}/${endMonth}/${endYear}</td>
+            <td><i class="fa-solid fa-tower-broadcast"></i> ${startDay}/${startMonth}/${startYear} to ${endDay}/${endMonth}/${endYear}</td>
         </tr>
         <tr>
             <td>Status:</td>
-            <td>${statusKey}</td>
+            <td><i class="fa-solid fa-bars-progress"></i> ${statusKey}</td>
         </tr>
         <tr>
             <td>Source:</td>
-            <td>${source}</td>
+            <td><i class="fa-brands fa-sourcetree"></i> ${source}</td>
         </tr>
         <tr>
             <td>Studios:</td>
-            <td>${studios}</td>
+            <td><i class="fa-solid fa-building"></i> ${studios}</td>
         </tr>
         <tr>
             <td>Season:</td>
-            <td>${aniSeason}</td>
+            <td><i class="fa-regular fa-calendar"></i> ${aniSeason}</td>
         </tr>
     </table>`;
 
@@ -1042,15 +1042,15 @@ function animeAboutDiv() {
         `<table id="anime-stats-table">
         <tr>
             <td>Score:</td>
-            <td>${score}% (${scoredBy})</td>
+            <td><i class="fa-solid fa-star" style="color:gold"></i> ${score}% (${scoredBy})</td>
         </tr>
         <tr>
             <td>Favourites:</td>
-            <td>#${favourites}</td>
+            <td><i class="fa-solid fa-heart" style="color:red"></i> #${favourites}</td>
         </tr>
         <tr>
             <td>Popularity:</td>
-            <td>#${popularity}</td>
+            <td><i class="fa-solid fa-chart-simple" style="color:lightgreen"></i> #${popularity}</td>
         </tr>
     </table>`;