Merge pull request #13 from MauGaP/feature/betterStyles

Feature/better styles
MauGaP · Dec 1, 2023 · 425b66f · 425b66f
2 parents f77be7b + 92c6ef1
commit 425b66f
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 55 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,72 +1,108 @@
 body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f4;
-    color: #333;
-    margin: 0;
-    padding: 20px;
+  font-family: Arial, sans-serif;
+  background-color: #fdfdfd;
+  color: #333;
+  margin: 0;
+  padding: 20px;
 }
 
 header {
-    text-align: center;
-    margin-bottom: 30px;
+  text-align: center;
+  margin-bottom: 30px;
 }
 
 h1 {
-    color: #d33;
+  color: #b3000c;
 }
 
 table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 20px;
+  width: 100%;
+  margin: 20px auto;
+  border-collapse: collapse;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-th, td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
+th,
+td {
+  border: 1px solid #ddd;
+  padding: 12px 15px;
 }
 
 th {
-    background-color: #eee;
+  background-color: #f8f9fa;
+  color: #6c757d;
 }
 
-button {
-    background-color: #4CAF50; /* Green */
-    border: none;
-    color: white;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 4px 2px;
-    cursor: pointer;
+tbody tr:nth-child(odd) {
+  background-color: #f2f2f2;
 }
 
-button:hover {
-    opacity: 0.8;
+.button {
+  background-color: #28a745;
+  color: white;
+  padding: 10px 20px;
+  border: 1px solid #218838;
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: bold;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.3s, box-shadow 0.3s;
+  text-align: center;
+  cursor: pointer;
 }
 
-footer {
-    text-align: center;
-    padding-top: 20px;
-    font-size: 0.8em;
+.button-right {
+  float: right;
+}
+
+.button-center {
+  display: block;
+  margin: auto;
+}
+
+.button:hover {
+  background-color: #218838;
+}
+
+.button:active {
+  background-color: #1e7e34;
+}
+
+.button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
 }
 
-/* Classes for specific elements */
-.instructions {
-    margin-bottom: 20px;
+footer {
+  text-align: center;
+  padding-top: 20px;
+  font-size: 0.8em;
+  background-color: #f8f9fa;
+  color: #6c757d;
 }
 
 .friend-list {
-    background-color: #fff;
-    padding: 15px;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#friendsTable input[type='text'],
+#friendsTable input[type='email'] {
+  border: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  background-color: transparent;
+  color: #495057;
 }
 
-.actions {
-    text-align: center;
-    padding-top: 20px;
+#friendsTable input[type='text']:focus,
+#friendsTable input[type='email']:focus {
+  background-color: #e9ecef;
 }
diff --git a/index.html b/index.html
@@ -6,8 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sorteo del Amigo Invisible</title>
     <link rel="stylesheet" href="css/styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-    <!-- Add any additional CSS libraries or frameworks you might be using -->
+    <!-- Add any additional CSS libraries or frameworks you mi,ght be using -->
 </head>
 
 <body>
@@ -28,7 +27,6 @@
 
     <header>
         <h1>Sorteo del Amigo Invisible</h1>
-        <!-- Add additional navigation or header content -->
     </header>
 
     <main>
@@ -38,7 +36,9 @@ <h1>Sorteo del Amigo Invisible</h1>
 
         <section class="friend-list">
             <form id="friendForm">
-                <button type="button" onclick="addFriendRow()">Añadir más amigos</button>
+                <button type="button" class="button" onclick="addFriendRow()">Añadir más amigos</button>
+                <button type="button" class="button button-right" onclick="clearParticipants()">Borrar
+                    todos</button>
                 <table id="friendsTable">
                     <thead>
                         <tr>
@@ -65,16 +65,10 @@ <h1>Sorteo del Amigo Invisible</h1>
                         </tr>
                     </tbody>
                 </table>
-                <button type="button" onclick="clearParticipants()">Borrar todos</button>
-
-                <!-- Replace with actual functionality to add friends -->
+                <button type="button" class="button button-center" onclick="sendAssignmentsToServer()">Enviar
+                    correos</button>
             </form>
         </section>
-
-        <section class="actions">
-            <button onclick="sendAssignmentsToServer()">Enviar correos</button>
-            <!-- Additional buttons or actions -->
-        </section>
     </main>
 
     <footer>