Estilo admin (#86)

* corregir seed -> prisma:seed

* descripción de endpoints

* format on save

* cambio de inputs y boton

* update format

.vscode/settings.json

@@ -3,8 +3,15 @@
     "source.fixAll.eslint": "explicit",
     "source.fixAll": "explicit"
   },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "standard.enable": false,
   "prettier.prettierPath": "./node_modules/prettier",
   "typescript.tsdk": "node_modules/typescript/lib",
-  "tailwindCSS.codeActions": false
+  "tailwindCSS.codeActions": false,
+  "editor.formatOnSave": true
 }

README.md

@@ -39,7 +39,7 @@ This is the current DB design
 3. **Seed Database**: To seed your database with dummy data.
 
    ```bash
-   docker compose exec app npm run seed
+   docker compose exec app npm run prisma:seed
    ```
 
 4. **Open Your App**: Your application should now be running at [http://localhost:3000](http://localhost:3000). You can start building your project by modifying the source code located in the `src` directory.

src/components/admin/client.ts

@@ -5,5 +5,13 @@ export const APIS: {
   [key: string]: ["GET" | "POST", TObject];
 } = {
   "/api/admin/sendEmail": ["POST", SendEmailRequestSchema],
-  "/api/admin/exportParticipants": ["GET", Type.Object({})],
+  "/api/admin/exportParticipants": [
+    "GET",
+    Type.Object(
+      {},
+      {
+        description: "Exporta a google sheets la lista de participantes",
+      },
+    ),
+  ],
 };

src/styles/rjsf.css

@@ -6,7 +6,26 @@
 
 .rjsf .btn {
   margin-top: 12px;
-  padding: 8px;
-  border: solid 2px black;
+  padding: 4px;
+  border: solid 2px #facc15;
   border-radius: 24px;
+  width: 100%;
+  background-color: #facc15;
+  color: #111827;
+  font-weight: bold;
+}
+
+.rjsf .btn:hover {
+  background-color: #eab308;
+}
+
+.rjsf input {
+  border-radius: 6px;
+  padding: 4px;
+  border: 1px solid lightgray;
+  box-shadow: 0.5px 1px rgba(200, 200, 200, 0.3);
+}
+
+.rjsf input:focus {
+  border: 1px solid purple;
 }

src/types/admin.schema.ts

@@ -6,9 +6,12 @@ export const SendEmailResponseSchema = Type.Object({
 });
 
 export type SendEmailRequest = Static<typeof SendEmailRequestSchema>;
-export const SendEmailRequestSchema = Type.Object({
-  email: Type.String(),
-  subject: Type.String({ minLength: 1 }),
-  // Html of the email content
-  content: Type.String({ minLength: 1 }),
-});
+export const SendEmailRequestSchema = Type.Object(
+  {
+    email: Type.String(),
+    subject: Type.String({ minLength: 1 }),
+    // Html of the email content
+    content: Type.String({ minLength: 1 }),
+  },
+  { description: "Envía un correo desde la cuenta de ofmi-no-reply" },
+);