From c3b5c6827f3f38ce657cdcf9901e9b2871288210 Mon Sep 17 00:00:00 2001
From: darkstack <1835601+darkstack@users.noreply.github.com>
Date: Sun, 19 Nov 2023 03:22:59 +0100
Subject: [PATCH] i m tired

---
 .../src/app/donation/donation.component.html  |  6 +-
 .../app/topdonors/topdonors.component.html    |  2 +-
 frontend/src/styles.scss                      | 91 +++++++++++++++++++
 3 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/donation/donation.component.html b/frontend/src/app/donation/donation.component.html
index 80458fd..a25cae1 100644
--- a/frontend/src/app/donation/donation.component.html
+++ b/frontend/src/app/donation/donation.component.html
@@ -23,8 +23,8 @@ div {
         <source src="/assets/img.mp4"/>
     </video>
     <div>
-        <p>{{ Name }}</p>
-        <p>{{ Euro }}</p>
-        <p>{{ Message }}</p>
+        <p class="donation-name">{{ Name }}</p>
+        <p class="donation-amount">{{ Euro }}</p>
+        <p class="donation-test">{{ Message }}</p>
     </div>
 </div>
diff --git a/frontend/src/app/topdonors/topdonors.component.html b/frontend/src/app/topdonors/topdonors.component.html
index 54de94f..c8a749c 100644
--- a/frontend/src/app/topdonors/topdonors.component.html
+++ b/frontend/src/app/topdonors/topdonors.component.html
@@ -1,4 +1,4 @@
-<table>
+<table class="rwd-table">
     <thead>
         <th>Nom</th>
         <th>Montant</th>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 90d4ee0..c5b49a3 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1 +1,92 @@
 /* You can add global styles to this file, and also import other style files */
+
+body {
+  color: white;
+  font-size: 24px;
+  font-family: fantasy;
+}
+
+.donation-name{
+    font-style: bold;
+    color: red;
+}
+
+.donation-text{
+    font-style: bold;
+    color: white;
+}
+
+.donation-amount{
+    font-style: bold;
+    color: blue;
+}
+.rwd-table {
+  margin: 1em 0;
+  min-width: 300px; // adjust to your needs
+
+  tr {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+
+  th {
+    display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
+  }
+
+  td {
+    display: block;
+
+    &:first-child {
+      padding-top: 0.5em;
+    }
+    &:last-child {
+      padding-bottom: 0.5em;
+    }
+
+    &:before {
+      content: attr(data-th) ": "; // who knew you could do this? The internet, that's who.
+      font-weight: bold;
+
+      // optional stuff to make it look nicer
+      width: 6.5em; // magic number :( adjust according to your own content
+      display: none;
+    }
+  }
+
+  th,
+  td {
+    text-align: left;
+    display: table-cell;
+    padding: 0.25em 0.5em;
+
+    &:first-c6ild {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}
+
+// presentational styling
+
+.rwd-table {
+//  background: #34495e;
+  color: #fff;
+  border-radius: 0.4em;
+  overflow: hidden;
+  tr {
+    border-color: lighten(#34495e, 10%);
+  }
+  th,
+  td {
+    margin: 0.5em 1em;
+    //padding: 1em !important;
+  }
+  th,
+  td:before {
+    color: #dd5;
+  }
+}
+