style: consistencia

This commit is contained in:
2025-01-23 13:43:16 -03:00
parent eb424f90ff
commit de3f90f83b
16 changed files with 129 additions and 125 deletions

View File

@@ -21,12 +21,12 @@
<input hidden type="text" name="id-comanda-balcao" id="id-comanda-balcao" value="{{comanda.id}}"> <input hidden type="text" name="id-comanda-balcao" id="id-comanda-balcao" value="{{comanda.id}}">
<div> <div>
<button id="pagarComanda" onclick="modal_payment_comanda()" <button id="pagarComanda" class="btn-secondary" onclick="modal_payment_comanda()"
{% if total == 0 %} {% if total == 0 %}
disabled disabled
{% endif %}>Receber</button> {% endif %}>Receber</button>
<button class="button" id="imprimirFichas" onclick="imprimirFichas()" <button class="btn-primary" id="imprimirFichas" onclick="imprimirFichas()"
{% if total == 0 %} {% if total == 0 %}
disabled disabled
{% endif %} {% endif %}
@@ -44,7 +44,7 @@
<tr> <tr>
<td>{{item.product.name}}</td> <td>{{item.product.name}}</td>
<td>R$ {{item.product.price}}</td> <td>R$ {{item.product.price}}</td>
<td><button onclick="removeProductBalcao({{item.id}})">🗑️ Excluir</button></td> <td><button class="btn-cancel" onclick="removeProductBalcao({{item.id}})">🗑️ Excluir</button></td>
</tr> </tr>
{% endfor %} {% endfor %}
@@ -120,12 +120,12 @@
</div> </div>
<footer> <footer>
<button class="secondary" hx-get="{% url 'paymentBalcao' comanda.id %} " hx-trigger="click" hx-swap="none" <button class="btn-secondary" hx-get="{% url 'paymentBalcao' comanda.id %} " hx-trigger="click" hx-swap="none"
onclick="reloadPage()"> onclick="reloadPage()">
Receber Receber
</button> </button>
<button onclick="close_modal_payment_comanda()">Cancelar</button> <button class="btn-cancel" onclick="close_modal_payment_comanda()">Cancelar</button>
</footer> </footer>
</article> </article>
</dialog> </dialog>

View File

@@ -17,9 +17,8 @@ Clientes
<div class="grid-container"> <div class="grid-container">
<div class="grid-top"> <div class="grid-top">
<button style=" <button class="btn-primary"
width: 30%;
margin: 5px 10px 20px 10px;"
onclick="openModal()" id="openModal">Novo Cliente</button> onclick="openModal()" id="openModal">Novo Cliente</button>
</div> </div>
@@ -85,9 +84,9 @@ Clientes
<input type="text" id="clientContact" name="contact" placeholder="Contato"></input> <input type="text" id="clientContact" name="contact" placeholder="Contato"></input>
<footer class="grid-buttons"> <footer class="grid-buttons">
<button id="save" type="submit">Salvar</button> <button class="btn-primary" id="save" type="submit">Salvar</button>
<button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-swap="none" style="width: 100%;">Alterar</button> <button class="btn-primary" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-swap="none" style="width: 100%;">Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button> <button class="btn-cancel" type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
</footer> </footer>
</form> </form>

View File

@@ -15,7 +15,7 @@ Comandas
<body> <body>
<div style="justify-self: center;"> <div style="justify-self: center;">
<button id="openModal">Abrir Comanda</button> <button class="btn-primary" id="openModal">Abrir Comanda</button>
</div> </div>
<div class="grid-container "> <div class="grid-container ">
@@ -63,8 +63,8 @@ Comandas
</select> </select>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit">Abrir</button> <button class="btn-primary" type="submit">Abrir</button>
<button type="button" onclick="closeModal()" style="background-color:red;border: none;">Cancelar</button> <button class="btn-cancel" type="button" onclick="closeModal()">Cancelar</button>
</div> </div>
</form> </form>
</article> </article>

View File

@@ -22,33 +22,33 @@ Detalhes {{comanda.name}}
<input hidden id="id-temp" type="number"> <input hidden id="id-temp" type="number">
<div class="grid-container" > <div class="grid-container" >
<div> <div>
<button class="primary" id="openModal" onclick="openModal()" <button class="btn-primary" id="openModal" onclick="openModal()"
{% if comanda.status != 'OPEN'%} {% if comanda.status != 'OPEN'%}
disabled disabled
{% endif %} {% endif %}
>Add Produto</button> >Add Produto</button>
<button id="pagarComanda" hx-get="{% url 'closeComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="imprimirConta()" <button class="btn-cancel" id="pagarComanda" hx-get="{% url 'closeComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="imprimirConta()"
{% if comanda.status != 'OPEN' %} {% if comanda.status != 'OPEN' %}
style="display: none;" style="display: none;"
{% endif %} {% endif %}
>Fechar Conta</button> >Fechar Conta</button>
{% if comanda.status == 'PAYING' %} {% if comanda.status == 'PAYING' %}
<button id="pagarComanda" onclick="modal_payment_comanda()">Receber</button> <button class="btn-secondary" id="pagarComanda" onclick="modal_payment_comanda()">Receber</button>
{% else %} {% else %}
{% endif %} {% endif %}
{% if comanda.status != 'OPEN'%} {% if comanda.status != 'OPEN'%}
<button class="button" id="imprimirFichas" <button class="btn-primary" id="imprimirFichas"
style="display: none;" style="display: none;"
onclick="imprimirFichas()">Fichas</button> onclick="imprimirFichas()">Fichas</button>
{% endif %} {% endif %}
{% if user|groupUser:"Gerente" %} {% if user|groupUser:"Gerente" %}
<button class="button" id="imprimirFichas" hx-get="{% url 'reopenComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="reloadPage()" <button class="btn-primary" id="imprimirFichas" hx-get="{% url 'reopenComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="reloadPage()"
{% if comanda.status == 'OPEN'%} {% if comanda.status == 'OPEN'%}
style="display: none;" style="display: none;"
{% elif comanda.status == 'CLOSED' %} {% elif comanda.status == 'CLOSED' %}
@@ -131,7 +131,10 @@ Detalhes {{comanda.name}}
<dialog id="Modal-add-product" style="display: none;" > <dialog id="Modal-add-product" style="display: none;" >
<article> <article>
<form id="productForm" > <form id="productForm" >
<h2>Adicionar Produto <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button></h2> <div style="display: flex;justify-content: space-around;">
<h2>Adicionar Produto</h2> <button class="btn-cancel" type="button" onclick="closeModal()">Fechar</button>
</div>
<input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br> <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br>
<div id="product-list" class="grid-list-products"> <div id="product-list" class="grid-list-products">
{% for product in products %} {% for product in products %}
@@ -153,8 +156,8 @@ Detalhes {{comanda.name}}
<textarea placeholder="Ex.: pedido sem cebola. para viagem." name="obs" id="obs"></textarea> <textarea placeholder="Ex.: pedido sem cebola. para viagem." name="obs" id="obs"></textarea>
<div> <div>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit" onclick="addOrder()" >OK</button> <button type="submit" class="btn-primary" onclick="addOrder()" >OK</button>
<button type="button" onclick="closeModalObs()" style="background-color:red;">Cancela</button> <button type="button" class="btn-cancel" onclick="closeModalObs()">Cancela</button>
</div> </div>
</article> </article>
</dialog> </dialog>
@@ -172,11 +175,11 @@ Detalhes {{comanda.name}}
<footer> <footer>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="backPage()">Receber</button> <button type="submit" class="btn-secondary" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="backPage()">Receber</button>
<button type="button" class="secondary" onclick=" modal_conta_client()"> <button type="button" class="btn-primary" onclick=" modal_conta_client()">
Conta Conta
</button> </button>
<button type="button" onclick="close_modal_payment_comanda()" style="background-color:red;">Cancelar</button> <button type="button" class="btn-cancel" onclick="close_modal_payment_comanda()">Cancelar</button>
</div> </div>
</footer> </footer>
</article> </article>
@@ -199,8 +202,8 @@ Detalhes {{comanda.name}}
</select> </select>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit">Alterar</button> <button type="submit" class="btn-primary">Alterar</button>
<button type="button" onclick="closeModalAlter()" style="background-color:red;">Cancelar</button> <button type="button" class="btn-cancel" onclick="closeModalAlter()">Cancelar</button>
</div> </div>
</form> </form>
</article> </article>
@@ -229,9 +232,8 @@ Detalhes {{comanda.name}}
</div> </div>
<footer> <footer>
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button type="submit" > <button type="submit" class="btn-primary"> Adicionar a conta</button>
Adicionar a conta</button> <button type="button" class="btn-cancel" onclick="close_modal_conta_client()">Cancelar</button>
<button type="button" onclick="close_modal_conta_client()" style="background-color:red;">Cancelar</button>
</div> </div>
</form> </form>
</footer> </footer>

Binary file not shown.

View File

@@ -51,7 +51,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Fila')" <button class="btn-primary" onclick="delayTab('Fila')"
hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas" hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
>Preparar</button> >Preparar</button>
</div> </div>
@@ -75,7 +75,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab( 'Preparo')" <button class="btn-secondary" onclick="delayTab( 'Preparo')"
hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas" hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
>Finalizar</button> >Finalizar</button>
</div> </div>
@@ -98,7 +98,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab( 'Finalizado')" <button class="btn-secondary" onclick="delayTab( 'Finalizado')"
hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas" hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
>Entregar</button> >Entregar</button>
</div> </div>

View File

@@ -16,9 +16,7 @@ Produtos
<body> <body>
<div class="grid-container"> <div class="grid-container">
<div class="grid-top"> <div class="grid-top">
<button style=" <button class="btn-primary"
width: 30%;
margin: 5px 10px 20px 10px;"
onclick="openModal()" id="openModal">Novo Produto</button> onclick="openModal()" id="openModal">Novo Produto</button>
<input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'searchProduct' %}" hx-trigger="keyup" hx-target="#product-list"> <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'searchProduct' %}" hx-trigger="keyup" hx-target="#product-list">
</div> </div>
@@ -112,9 +110,9 @@ Produtos
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<button id="save" type="submit">Salvar</button> <button class="btn-primary" id="save" type="submit">Salvar</button>
<button type="submit" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click" hx-target="#product-list" >Alterar</button> <button class="btn-primary" type="submit" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click" hx-target="#product-list" >Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button> <button class="btn-cancel" type="button" onclick="closeModal()">Cancelar</button>
</div> </div>
</footer> </footer>
</form> </form>
@@ -123,8 +121,6 @@ Produtos
</dialog> </dialog>
<script src="{% static 'products/js/products.js' %}"></script> <script src="{% static 'products/js/products.js' %}"></script>
{% endblock %} {% endblock %}

View File

@@ -8,7 +8,7 @@
<tr> <tr>
<td>{{item.product.name}}</td> <td>{{item.product.name}}</td>
<td>R$ {{item.product.price}}</td> <td>R$ {{item.product.price}}</td>
<td><button onclick="removeProductBalcao({{item.id}})" <td><button class="btn-cancel" onclick="removeProductBalcao({{item.id}})"
>🗑️ Excluir</button></td> >🗑️ Excluir</button></td>
</tr> </tr>

View File

@@ -23,7 +23,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Fila')" <button class="btn-primary" onclick="delayTab('Fila')"
hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas" hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
>Preparar</button> >Preparar</button>
</div> </div>
@@ -48,7 +48,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Preparo')" <button class="btn-secondary" onclick="delayTab('Preparo')"
hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas" hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
>Finalizar</button> >Finalizar</button>
</div> </div>
@@ -71,7 +71,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Finalizado')" <button class="btn-secondary" onclick="delayTab('Finalizado')"
hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas" hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
>Entregar</button> >Entregar</button>
</div> </div>

View File

@@ -23,7 +23,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button <button class="btn-primary"
hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#list-orders" hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#list-orders"
>Preparar</button> >Preparar</button>
</div> </div>
@@ -48,7 +48,7 @@
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4> <h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4> <h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4> <h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button <button class="btn-secondary"
hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#list-orders" hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#list-orders"
>Finalizar</button> >Finalizar</button>
</div> </div>

View File

@@ -5,7 +5,6 @@
} }
body { body {
margin: 70px 0px 0px 0px; margin: 70px 0px 0px 0px;
} }
@@ -14,6 +13,81 @@ h1{
text-align: center; text-align: center;
} }
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea, select {
width: 95%;
max-width: 95%;
max-height: 300px;
/* padding: 8px; */
margin-top: 5px;
border-radius: 8px;
border: 1px solid #cccccc52;
}
.btn-primary {
align-items: center;
background: var(--main-gradient);
border-color: rgba(86, 187, 255, 0.192);
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(12, 12, 12, 0.973);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
transition: box-shadow 0.4s;
}
.btn-primary:hover {
box-shadow: 0px 0px 15px rgba(86, 187, 255, 0.815);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
}
.btn-secondary {
align-items: center;
background: var(--main-gradient);
border-color: rgba(53, 241, 62, 0.425);
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(12, 12, 12, 0.973);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
transition: box-shadow 0.4s;
}
.btn-secondary:hover {
box-shadow: 0px 0px 15px rgb(53, 241, 62);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
}
.btn-cancel {
align-items: center;
background: linear-gradient(145deg, #dd3d3d8e, #9b4d4dbd);
border-color: rgba(250, 62, 62, 0.404);
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(12, 12, 12, 0.973);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
transition: box-shadow 0.4s;
}
.btn-cancel:hover {
box-shadow: 0px 0px 15px rgba(255, 86, 86, 0.815);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
}
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;

View File

@@ -1,22 +1,5 @@
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
width: 95%;
max-width: 95%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.grid-buttons { .grid-buttons {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
display: flex; display: flex;

View File

@@ -35,21 +35,6 @@ p {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
} }
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
width: 95%;
max-width: 95%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.grid-container { .grid-container {

View File

@@ -30,17 +30,3 @@ table td th {
text-align: center; text-align: center;
} }
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
width: 95%;
max-width: 95%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

View File

@@ -13,7 +13,7 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 8px; gap: 8px;
max-width: 800px; max-width: 800px;
margin: 0 auto; /* margin: 0 auto; */
} }
.card-product { .card-product {
@@ -31,17 +31,3 @@
text-align: center; text-align: center;
} }
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
width: 95%;
max-width: 95%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

View File

@@ -1,20 +1,5 @@
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
width: 95%;
max-width: 95%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.grid-buttons { .grid-buttons {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
@@ -31,7 +16,15 @@ input, textarea {
} }
.grid-top { .grid-top {
display: flex; display: grid;
padding: 10px;
align-items: center;
justify-items: center;
justify-self: center;
align-content: center;
align-self: center;
grid-template-columns: 1fr 3fr;
gap: 20px;
width: 100%; width: 100%;
} }