From 0c3461188a8b2bfaf6e29d18b1dd5f8a39c8091c Mon Sep 17 00:00:00 2001 From: andynnnfw Date: Thu, 8 Oct 2026 20:38:58 -0300 Subject: [PATCH 1/6] refactor(css): estilos soltos das views viram classes em components.css - public/css/components.css: classes novas form-submit, auth-container-wide e progress (barra nativa com as cores da paleta) - public/css/app.css: sai o estilo antigo da barra (.progress e .progress-bar), que agora mora no components.css - views/auth/merchant/register.php: os dois style soltos (largura do card e margem do botao) viram classes - views/partials/reward-progress.php: a barra passa a ser a tag progress com value, sem style de largura - tests/Feature/RewardProgressScreenTest.php: testes conferem o value da barra e que a tela nao tem mais style solto --- public/css/app.css | 16 +-------- public/css/components.css | 41 ++++++++++++++++++++++ tests/Feature/RewardProgressScreenTest.php | 13 +++---- views/auth/merchant/register.php | 5 +-- views/partials/reward-progress.php | 6 ++-- 5 files changed, 54 insertions(+), 27 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index c0179fe..a90266c 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -561,7 +561,7 @@ span.btn-secondary { } } -/* progresso ate o proximo premio: barra fina com o preenchimento na cor da marca */ +/* progresso ate o proximo premio: frase em cima da barra (a barra em si e o .progress do components.css) */ .reward-progress { margin-top: 0.75rem; } @@ -571,20 +571,6 @@ span.btn-secondary { margin-bottom: 0.4rem; } -.progress { - height: 0.6rem; - background: var(--bg-body); - border: 1px solid var(--border); - border-radius: 999px; - overflow: hidden; -} - -.progress-bar { - height: 100%; - background: var(--primary); - border-radius: 999px; -} - /* cartaz: folha clara (--paper) com nome da loja e qr code; centralizado e legivel de longe */ .poster { max-width: 520px; diff --git a/public/css/components.css b/public/css/components.css index b33a781..7cbb532 100644 --- a/public/css/components.css +++ b/public/css/components.css @@ -170,3 +170,44 @@ border-color: var(--warning); color: var(--warning-text); } + +/* botao de envio que vem logo depois de uma linha de campos: um respiro a mais em cima */ +.form-submit { + margin-top: 1rem; +} + +/* card de formulario longo (cadastro da loja): no celular segue 100%, em tela grande vai ate 600px. + o seletor duplo vence o max-width que o auth.css da ao .auth-container nas telas maiores */ +.auth-container.auth-container-wide { + max-width: 600px; +} + +/* barra de progresso: . o preenchimento vem do atributo value, + entao a view nao precisa de style="width". cada navegador desenha a barra com um + pseudo-elemento proprio, e eles nao podem dividir a mesma regra (um seletor desconhecido anula a regra toda) */ +.progress { + display: block; + width: 100%; + height: 0.6rem; + -webkit-appearance: none; + appearance: none; + background: var(--bg-body); + border: 1px solid var(--border); + border-radius: 999px; + overflow: hidden; +} + +.progress::-webkit-progress-bar { + background: var(--bg-body); + border-radius: 999px; +} + +.progress::-webkit-progress-value { + background: var(--primary); + border-radius: 999px; +} + +.progress::-moz-progress-bar { + background: var(--primary); + border-radius: 999px; +} diff --git a/tests/Feature/RewardProgressScreenTest.php b/tests/Feature/RewardProgressScreenTest.php index 14eaf7d..c52a39f 100644 --- a/tests/Feature/RewardProgressScreenTest.php +++ b/tests/Feature/RewardProgressScreenTest.php @@ -25,8 +25,9 @@ public function testConsultaPublicaMostraFaltamPontosEBarra(): void { $this->post('customer/balance', ['phone' => '11911110001', 'loja' => $code], true, 'customer/balance&loja=' . $code); $this->assertMatchesRegularExpression('/Faltam\s*20 pontos<\/strong>\s*para\s*Suco<\/strong>/', $this->lastBody); - $this->assertStringContainsString('aria-valuenow="60"', $this->lastBody); - $this->assertStringContainsString('width: 60%', $this->lastBody); + $this->assertStringContainsString('max="100" value="60"', $this->lastBody); + // a largura vem do atributo value: a view nao pode voltar a ter estilo solto + $this->assertStringNotContainsString('style=', $this->lastBody); } public function testTelaDoLojistaMostraOMesmoProgresso(): void { @@ -35,7 +36,7 @@ public function testTelaDoLojistaMostraOMesmoProgresso(): void { $this->get('merchant/customer&phone=11911110001'); $this->assertMatchesRegularExpression('/Faltam\s*20 pontos<\/strong>\s*para\s*Suco<\/strong>/', $this->lastBody); - $this->assertStringContainsString('aria-valuenow="60"', $this->lastBody); + $this->assertStringContainsString('max="100" value="60"', $this->lastBody); } public function testSaldoZeroMostraOPrimeiroPremio(): void { @@ -44,7 +45,7 @@ public function testSaldoZeroMostraOPrimeiroPremio(): void { $this->get('merchant/customer&phone=11911110001'); $this->assertMatchesRegularExpression('/Faltam\s*20 pontos<\/strong>\s*para\s*Cafe<\/strong>/', $this->lastBody); - $this->assertStringContainsString('aria-valuenow="0"', $this->lastBody); + $this->assertStringContainsString('max="100" value="0"', $this->lastBody); } public function testQuandoPagaTudoDizQueJaDaParaResgatar(): void { @@ -53,7 +54,7 @@ public function testQuandoPagaTudoDizQueJaDaParaResgatar(): void { $this->get('merchant/customer&phone=11911110001'); $this->assertStringContainsString('Já dá para resgatar qualquer prêmio', $this->lastBody); - $this->assertStringContainsString('aria-valuenow="100"', $this->lastBody); + $this->assertStringContainsString('max="100" value="100"', $this->lastBody); } public function testLojaSemPremioNaoMostraBarra(): void { @@ -63,7 +64,7 @@ public function testLojaSemPremioNaoMostraBarra(): void { $this->loginAs('loja@teste.test'); $this->get('merchant/customer&phone=11911110001'); - $this->assertStringNotContainsString('progressbar', $this->lastBody); + $this->assertStringNotContainsString('lastBody); } public function testPremioInativoNaoEntraNoProgresso(): void { diff --git a/views/auth/merchant/register.php b/views/auth/merchant/register.php index 563c063..cf245c9 100644 --- a/views/auth/merchant/register.php +++ b/views/auth/merchant/register.php @@ -12,7 +12,8 @@ -
+
+

Registre sua empresa no ecossistema FidelityX

@@ -97,7 +98,7 @@
- +