embelleciendo

src/WebAPI/ClientApp/src/components/Home.css

@@ -19,4 +19,4 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-   }
+   }

src/WebAPI/ClientApp/src/components/Home.js

@@ -137,12 +137,15 @@ export function Home() {
         { caption: 'User signing up for DataClash', src: '/comic/registration.jpeg', },
       ]} />
 
-        <h1>Top Clans by Regions</h1>
-        <Table columns={['Clan', 'Region', 'Trofeos']} data={topClans} />
+      <h1 className="table-title">Top Clans by Regions</h1>
+      <Table columns={['Clan', 'Region', 'Trofeos']} data={topClans} />
 
-        <div className="tableContainer">
+      <div className="tableContainer">
         <div className="headerContainer">
-          <h1>Top Players by Wars</h1>
+          <h1 className="table-title">
+            <img className="table-image" src="top_players.webp" />
+                    Top Players by Wars
+          </h1>
           <Dropdown isOpen={dropdownOpenWar} toggle={toggleWar}>
             <DropdownToggle caret>
               Select a war
@@ -158,29 +161,29 @@ export function Home() {
         </div>
         <Table columns={['Player', 'Clan', 'Trophies']} data={bestPlayers} />
 
-        <h1>Completed Challenges</h1>
+        <h1 className="table-title">Completed Challenges</h1>
         <Table columns={['Player', 'Challenge']} data={completedChallenges} />
 
         <div className="headerContainer">
-           <h1>Most Popular Cards by Clans</h1>
-           <Dropdown isOpen={dropdownOpenClan} toggle={toggleClan}>
-             <DropdownToggle caret>
-               Select a clan
-             </DropdownToggle>
-             <DropdownMenu>
-               {clanName.map((name, index) => (
-                 <DropdownItem key={index} onClick={() => setSelectedClanName(name)}>
-                   {name}
-                 </DropdownItem>
-               ))}
-             </DropdownMenu>
-           </Dropdown>
-         </div>
-         <Table columns={['Card', 'Type', 'Clan']} data={popularCards} />
-
-        <h1>Most Gifted Cards by Region</h1>
+          <h1 className="table-title">Most Popular Cards by Clans</h1>
+          <Dropdown isOpen={dropdownOpenClan} toggle={toggleClan}>
+            <DropdownToggle caret>
+              Select a clan
+            </DropdownToggle>
+            <DropdownMenu>
+              {clanName.map((name, index) => (
+                <DropdownItem key={index} onClick={() => setSelectedClanName(name)}>
+                  {name}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+        <Table columns={['Card', 'Type', 'Clan']} data={popularCards} />
+
+        <h1 className="table-title">Most Gifted Cards by Region</h1>
         <Table columns={['Card', 'Region', 'Donations']} data={giftedCards} />
-         
+
       </div>
     </div>
   )

src/WebAPI/ClientApp/src/components/HomeTable.css

@@ -15,22 +15,57 @@
  * You should have received a copy of the GNU General Public License
  * along with sep3cs. If not, see <http://www.gnu.org/licenses/>.
  */
+table {
+   width: 100%;
+   border-collapse: collapse;
+   background-color: #c3dff7;
 
- table {
-    width: 100%;
-    border-collapse: collapse;
-   }
-
-   thead {
-    background-color: #f2f2f2;
-   }
-
-   th, td {
-    text-align: center;
-    padding: 10px;
-    border: 1px solid #ddd;
-   }
-
-   tr:nth-child(even) {
-    background-color: #f2f2f2;
-   }
+   margin-top: 20px;
+   margin-bottom: 20px;
+   border-radius: 20px;
+}
+tr {
+   transition: transform .2s; /* Animation */
+  }
+
+  tr:hover {
+   transform: scale(1.05); /* (105% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+  }
+
+thead {
+   background-color: #63a5b5;
+}
+
+th,
+td {
+   text-align: center;
+   padding: 10px;
+
+}
+
+.table-title {
+   font-family: Arial;
+}
+
+.table-image {
+   transition: transform .2s; /* Animation */
+  }
+
+  .table-image:hover {
+   transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+  }
+
+.table-image {
+   margin-right: 10px;
+   width: 150px;
+   height: 150px;
+   border: 1px solid #000000;
+   border-radius: 15%;
+   max-width: 100%;
+   height: auto;
+}
+
+.tableContainer {
+   margin-top: 40px;
+   margin-bottom: 40px;
+}

src/WebAPI/ClientApp/src/components/HomeTable.js

@@ -18,39 +18,38 @@ import React from 'react';
 import './HomeTable.css';
 
 function convertToTableFormat(columns, data) {
- return data.map(item => {
-   let obj = {};
-   columns.forEach((column, index) => {
-     obj[column] = item[index];
-   });
-   return obj;
- });
+  return data.map(item => {
+    let obj = {};
+    columns.forEach((column, index) => {
+      obj[column] = item[index];
+    });
+    return obj;
+  });
 }
 
 const Table = ({ columns, data }) => {
- const tableData = convertToTableFormat(columns, data);
+  const tableData = convertToTableFormat(columns, data);
 
- return (
-   <table>
-     <caption>Top Players in Wars</caption>
-     <thead>
-       <tr>
-         {columns.map((column, index) => (
-           <th key={index}>{column}</th>
-         ))}
-       </tr>
-     </thead>
-     <tbody>
-       {tableData.map((row, index) => (
-         <tr key={index}>
-           {columns.map((column, index) => (
-             <td key={index}>{row[column]}</td>
-           ))}
-         </tr>
-       ))}
-     </tbody>
-   </table>
- );
+  return (
+    <table>
+      <thead>
+        <tr>
+          {columns.map((column, index) => (
+            <th key={index}>{column}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {tableData.map((row, index) => (
+          <tr key={index}>
+            {columns.map((column, index) => (
+              <td key={index}>{row[column]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 };
 
 export default Table;