Au 06 - Front-end - React - Componentizando nossos elementos e estilizando o select - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo de hoje a gente vai estar fazendo a estilização da nossa do cabeçalho né Eu chamei aqui de cabeçalho da lista mas é basicamente um um um painel ali que a gente vai usar para controlar a lista né a gente pode chamar isso aqui de subheader a gente pode chamar isso aqui de ou cabeçalho ou list header alguma coisa do tipo né só que a A ideia é que isso né esse cabeçalho ou essa esses controles serão controles da nossa lista tá da listagem que a gente vai estar criando aqui do desses nossos produtos Então se a gente vem aqui no XD a gente pode ver que essa lista ela seria basicamente tudo isso aqui né Deixa eu só trocar aqui paraa design Opa o que a gente criou na aula passada seria basicamente isso aqui que tá selecionado Tá e isso tudo que tá selecionado a gente criou dentro ali da página de produto mas isso aqui a gente pode separar em componente né em uma componente que é a componente que eu chamei de eu posso chamar isso aqui de subheader ou de list header ou de enfim a gente pode ser criativo aí na questão do nome também mas é basicamente um cabeçalho da nossa lista e dentro desse cabeçalho a gente tem outras componentes né a gente pode a gente vai nessa aula começar a ideia de componentização para para facilitar para vocês ver que Isso facilita na estilização e Vai facilitar também quando a gente for fazer a funcionalidade que vai ser na próxima aula tá então o que que a gente vai ter aqui a gente vai ter a componente select né que é onde eu faço aqui essa essa seleção das opções a gente vai ter a componente Range né a gente pode chamar aqui de Filter Range Price Range que é um filtro de preço que é tem essa ideia de Range né que a gente desliza ele e também tem a componente aqui que a gente pode separar Opa que é um botão né um botão que a gente pode criar um componente também de Botão Então a gente vai estar criando quatro componentes né a componente uma componente Pie aqui que seria esse subheader e dentro desse subheader a gente teria três componentes que é o o select o range e o botão Beleza então se a gente vir aqui no web né vamos ver aqui no Browser que a gente fez até então a gente criou aqui um select a gente criou aqui um Range criou também um botão só não tá estilizado e também não tá organizado né no código se a gente vem olhar isso aqui tá em na na tela de na página de produtos né a gente tem aqui uma div com todos esses caras dentro então a gente vai estar separando isso aqui Começando por essa div né que essa div como eu falei lá ela pode a gente pode chamar ela criar um componente chamada eh subheader mesmo eu vou chamar isso aqui de de é é vou chamar de subheader mesmo product subheader acho que fica fica tranquilo e aí dentro dele a gente vai criar essas outras componentes tá então como essa componente né esse product subheader ela é uma componente exclusiva da página de produtos Então dentro aqui de Pages né Nós temos aqui o diretório products e dentro de products a gente tá aqui com o index né o index tsx aqui não tem Styles aqui então vou criar aqui o arquivo de Styles o styles. ts ele por enquanto só vou dar um na verdade aqui não é TS não é TS né styles. css né E aqui dentro de products também eu vou criar uma pasta né eu vou criar aqui o meu folder components e aqui dentro nós vamos colocar as componentes específicas dessa página né e não as componentes que serão reutilizadas em todo o projeto então aqui dentro eu vou criar uma nova pasta vou chamar isso aqui de products e com iniciando com letra maiúscula né que é um isso aqui indica que é uma componente né então vai ser um products subheader certo aqui dentro a gente vai ter aquele mesmo padrão um index t x e o Styles pm.

CSS né eu criei ali o ind styles. css é só renomear ele aqui porque a gente tá usando o CSS modular né então ST P mod não é CSS modular né mas CSS mods Tá certo então aqui no meu index. tsx eu vou criar componente né a componente Relembrando lá né E tem toda a questão do jsx né que aqui no caso typescript é um tsx que a componente é basicamente uma função né a junção de uma função JavaScript com lá o o nosso XML né com a a parte visual então aqui eu vou ter uma const do mesmo nome da pasta né então vai ser produ so header né Isso aqui é uma função essa função retorna nesse caso aqui eu vou retornar só uma div escrito Hello from e product so header tá tá E no final eu vou exportar essa função né exportar essa componente Export default products subheader tá então com isso aqui a gente já tem a componente criada E aí essa componente eu vou chamar ela s Salvar esse arquivo aqui de Styles eu vou chamar essa componente dentro do meu index de products né do do Index aqui da da página em si então a página products vai chamar componente product subheader tá então aqui eu tenho uma div vou deixar essa div aqui por enquanto eu só vou chamar aqui products subheader eu vou fazer ela uma tag né self Close então eu abro aqui a tag product subheader e já fecho ela com o barra e o sinal de maior né a diferença aí para quem não sabe do do self o self Close é essa e o outro tipo de tag é uma tag que não é self Close né que a gente pode colocar elementos aqui dentro dela tá certo então vou deixar assim vou salvar se a gente vem ver aqui na web nós temos aqui o Hello from product subheader né que é o texto que a gente tá retornando lá da nossa div beleza da nossa componente Beleza então o que que a gente vai fazer aqui agora a gente vai começar a mover o código para dentro de product subheader né e depois de product subheader a gente começa a mover de novo para separar nas outras componentes Então esse select aqui vai né esse input aqui do tipo Range também vai esse spam que tá aqui controlando V eu vou levar ele também lá a gente apaga né porque é vai eu vou levar ele também E também o botão né o botão novo produto né é novo produto vai ir para lá também então vou recortar ele aqui e lá dentro de product subheader ao invés de eu retornar a div com Hello from product subheader eu vou tirar ele aqui esse texto né e colar aquele nosso código vai dar um erro aqui uns erros aqui porque a gente não tem o value e o set value né porque é um state que a gente criou eu vou mover esse state também esse state ele faz parte aqui dessa minha dessa minha desse meu input tá vou levar ele aqui pro prod subhead e depois a gente leva ele para dentro lá do da componente que a gente vai criar tá importar o US state Vou salvar Vou salvar aqui também o products ele já vai formatar para mim né vou dar um Out tab aqui no web ele continua do mesmo jeito né atualizando aqui e as eu só movi de lugar o código né então não deveria mudar nada aqui beleza e agora que Eu movi né que a gente tá com tudo aqui dentro de product subheader eu vou criar as outras componentes tá então a gente vai vai ter uma componente pro select uma componente pro nosso Range né o nosso input range e uma componente também aqui pro botão Beleza então eu vou querer chamar aqui o quê eu vou querer chamar aqui uma componente chamada select beleza uma componente eu vou chamar isso aqui do range eu vou chamar de Range Price Filter certo e vai ser esse input aqui do tipo Range né o slider lá que a gente vai puxar pro lado e a gente vai ter também um botão um boton certo então a gente vai criar essas três componentes Beleza o select ele é específico dessa tela né nesse projeto aqui a gente não vai usar esse select em outro lugar então na verdade o não o select não né é o Range esse Range Price Filter ele é específico daqui o select e o botão eles vão ser reutilizado em outros lugares então a gente já vai começar a criar essa essas componentes aqui em locais diferentes tá o select e o botão a gente vai criar nessa pasta component que a gente tem aqui externa eh no mesmo nível aqui da pasta peixes tá que é um componente fora aqui do das nossas páginas né são componentes que vão ser usadas em vários locais aí do projeto Tá certo então eu vou criar aqui eu vou dar um New file e aqui eu vou criar a pasta select né se a gente digita o nome da o nome barra aqui no vs code ele entende que é para criar uma pasta né um diretório então tô criando aqui a pasta select dentro dela eu vou ter um index tsx tá esse index tsx é também uma componente né então eu vou criar aqui um const select vai receber uma função essa função retorna aqui eu vou retornar só uma Hello from select e no final vou exportar né Export select as componentes a gente sempre exporta default também tá e eu não lembro se eu disse isso anteriormente mas vocês perceberam aí que eu t sempre dando esse Export default Tá bom então vou criar aqui também o arquivo de estilo né então Styles pm.

CSS beleza criar esses dois arquivos aqui a gente vai ter aqui também a componente eu vou criar aqui também do botão né então New file Button bar index. tsx e criar aqui a componente né con Button é uma função né uma error function que retorna uma div Hello from Button tá então aqui vou dar um Export default Button certo e criar também um arquivo Styles p module p CSS pronto as duas componentes aqui foram criadas e eu vou criar também a componente do Range Price Filter e esse como ele é é uma componente específica da tela de produto eu vou criar aqui dentro de components dentro aqui do meu do desse dessa pasta components que tá dentro da pasta products que tá dentro de Pages tá então vou criar aqui o mesmo padrão lá Range Price Filter né o artivo index. tsx e aqui eu vou ter né con Range Price Filter recebe uma função e retorna também um div né Por enquanto Range Price F certo aqui no final vou dar um Export default no mesmo padrão beleza certo isso aqui salvo eh aqui ele tá dando erro porque eu vou ter agora que importar essas componentes que eu acabei de criar né então vou importar aqui o select a gente clica né no final aqui do nome da componente pressiona control espaço né o vs code vai sugerir pra gente aqui algumas coisas e primeiro que a importação né já que a gente não importou ainda do mesmo jeito as outras componentes tá ele vai importar pra gente automaticamente e eu vou salvar então se a gente vem aqui no Browser nós já temos né o Hello from select Hello é o Range Price Filter né lá no Range Price Filter não coloquei Hello qual o nome deixar aqui né no padrão Hello faltou o from beleza e o Hello from buton tá então as três componentes já estão aqui em tela as três componentes já estão eh sendo renderizadas então agora a gente vai mover o código né de de dentro aqui do nosso product do nosso product subheader né para dentro dessas componentes então o select se a gente olha aqui no no no nosso design o select ele tem um texto né um Label chamado ver né ver dois pontos um texto ali e depois e ao lado desse texto nós temos o a componente né o o select em si tá então se a gente abre o select ele vai ter mais coisas aqui tá então eu vou mover aqui aqui no no código a gente vai tirar esse select daqui né vou recortar ele e vou abrir aqui para abrir para ir para dentro né para navegar para a componente a gente pressiona control e clica em cima do nome da componente vscode abre pra gente o arquivo referente à aquela componente então Aqui nós temos o andive Hello from select aqui dentro eu vou colar esse select eu vou salvar ele aqui né para ele corrigir para mim apagar esse espaço que ele gerou além desse select nós temos aqui também um nós vamos ter né uma tag aqui Label né O que que é essa tag Label ela é o o nome o nome referente Eh que que vai ser é meio que a gente poderia usar aqui um p né tag P um parágrafo só que a tag Label ela é específica para isso né meio que uma legenda para aquele e elemento tá dentro do Label nós temos o seguinte nós temos a propriedade aqui HTML ml for tá E aqui é uma string e dentro do select nós nós podemos ter também um ID que também é um string então o que que eu vou fazer aqui nesse momento eu vou est passando o mesmo o ID select né para pro nosso componente aqui pro nosso elemento select e esse HTML for é meio é meio que uma isso aqui tá mais pra acessibilidade pro propio ce da página né que a gente vai meio que linkar esse Label para esse select através desse HTML for n esse eu vou estar fazendo o que aqui eu vou est falando que esse Label ele vai estar descrevendo a componente o elemento select né eu fico falando sempre componente confundindo com elemento do HTML mas no final eu quero dizer a mesma coisa tá então o elemento select ele tem o ID select e esse Label vai ter o HTML for n o atributo que HTML for e o valor dele vai ser select também então esse Label ele se refere a esse select com esse ID Tá certo então vamos ter esse Label o select e uma div tá a gente vai ter a questão da estilização aqui também que a gente vai fazer só que eu vou deixar desse jeito aqui enquanto a gente vai lá mover as outras componentes né já que a gente tá nessa pegada aqui de component tudo eu vou mover tudo primeiro E aí depois nós começamos a estilização tá então agora é o Range Price Filter né esse Range Price Filter ele ele é esse input né aqui a gente tem um input a gente tem um spam e basicamente a gente vai ter uma estrutura parecida ali com select então eu vou copiar esse input com esse spam vou recortar ele aqui e aqui dentro de Range Price Filter a gente tem uma div vou manter essa div e vou colar esse input e esse spam tá aqui nós vamos ter além desse input e esse spam nós vamos ter um Label também esse Label vai ter aqui se a gente olha aqui no design o Label aqui é filtro preço né então eu já vou eu vou deixar passando aqui na mão Provavelmente na próxima aula a gente vai começar a trabalhar mais com a questão de propriedade deixar as coisas genéricas enfim aqui é mesmo criar o elemento para ser estilizado e isso é uma coisa que a gente pode ter ter uma certa variedade aí no mundo do desenvolvimento que é a questão de criar primeiro os elementos depois criar a funcionalidade e depois estilizar ou estilizar primeiro para depois criar a funcionalidade né junto com os elementos isso aí Varia muito normalmente eu falando aqui particularmente quando eu já tenho o design Pronto né nesse caso aqui a gente já tem o design da página a página ela vai parecer vai ter esse visual eu prefiro criar primeiro o visual né cria o visual ali estilizo os elementos estilizo e depois parto paraa funcionalidade eu prefiro fazer isso do que criar primeiros elementos igual tá aqui no nosso web né se a gente olha aqui aqui a gente já tem os elementos em tela e eu prefiro e e tem pessoas que fazem na verdade esses elementos aí depois cria a funcionalidade E aí com a funcionalidade pronta eles vêm e estili em cima disso Isso Varia muito tá eu prefiro novamente quando eu já tenho o design pronto criar o visual para depois criar a funcionalidade tá então voltando aqui no código eu tenho aqui um Label né esse Label vai ter HTML for da mesma forma vou chamar isso aqui de input o ID input range e aqui esse input ele vai ter o ID input Range certo vou salvar ele tá dando erro aqui né por causa do set value do value que é o um US state então eu vou mover de novo esse US state para lá para dentro da componente tá E esse state ele vai controlar novamente o valor que vai ser exibido né o valor atual desse Range né então ele vai ficar ali dentro da componente e aqui agora só faltou o botão né botão recortar ele também e vou colar aqui dentro desse buton esse buton tá com uma div é eu não sei se eu mantenho essa div por enquanto ou se eu tiro ela acho que eu vou deixar ele por aí depois quando a gente for trabalhar com isso aqui a gente remove Essa d na verdade já tô aqui vou deixar só no caso da componente botão né ele retorna O um Button né um botão com texto clicado tá então com isso aqui pronto eu vou salvar tudo e agora nós temos aqui qu Qual que é a estrutura agora né só apag ess state aqui el parar de dar erro qu estrutura nós temos a página né a página products dentro dela a gente tem esse index tsx essa página products ela tem aqui a componente product subheader e dentro dela ela tem três componentes né um select Range Price Filter e um botão se a gente olha aqui no XD nós temos o select o input range e o botão agora só falta esse texto aqui né produtos Isso aqui vai ser basicamente um H1 aqui né Vou salvar vou olhar aqui na web né Nós temos aqui o texto produtos o select o filtro né o preço e aqui um novo produto que é o botão tá certo então agora a gente vai começar realmente estilizar aí todas essas componentes que a gente criou Beleza então vamos começar aqui pelo product subheader né esse product subheader ele é meio que um componente P né a gente viu que ele tem ele ele vai tá por volta né de todas essas outras componentes então ele vai a gente vai usar ele basicamente para alinhar e isso aqui na horizontal né que se a gente olha aqui tá tudo na na vertical a gente vai usar ele para alinhar na vertical e dar ali o espaçamento que for preciso para que isso aí funciona funcione Tá beleza então aqui eu vou voltar no vs code eu vou começar a passar aqui as classes né então aqui eu vou ter um Class name Na verdade acho que só alguma classe aqui vai resolver né Eh Isso aqui vai receber o Styles ponto eu vou chamar isso aqui de products subheader container ou só de container né styes P container é o estilo aqui para essa div para essa div externa onde a gente vai aplicar aqui as coisas eu vou importar aqui o meu Styles né então Import Styles from bar Styles pm.

CSS Vou salvar isso aqui e aqui dentro de St pm. CSS eu vou criar aqui né a classe contêiner Tá certo então vou salvar tudo vou voltar aqui no web para ver se tá tudo ok né Tá tudo sem erro a gente pode ver se deu erro também aqui no no terminal né no terminal onde a gente rodou a aplicação mas aqui dentro desse coner que que eu vou fazer eu vou dar aqui o display né um display Flex né lembrando lá da flex Box que é uma uma um contêiner flexível né então vou dar aqui um display Flex vou dar um Aline item Center Deixa eu ver isso aqui como é que vai ficar ele já ficou Deixa eu tirar o Aline items a gente vai dar o display o display Flex né ele vai mudar aqui a direção ele vai alinhar esses nossos contêiner dentro dessa dessa caixa flexível se a gente pega aqui a a funcionalidade aqui do Dev T de selecionar um elemento né que é esse iconz aqui na no canto superior esquerdo a gente consegue selecionar aqui a gente pode ver que tudo isso tá dentro de um contêiner né um contêiner flexível ele tem essa parte roxa aqui né que é meio que o espaço que tá vazio né que a gente pode usar isso aí para tá alinhando tá ocupando né usar esses fazer esses elementos ocupar todos esse espaço vazio que é o que a gente vai fazer então se eu venho aqui e coloco o Aline item Center ele já ou na vertical né esses nossos elementos se eu tiro aqui ó vou tirar a gente pode ver que todos os elementos estão alinhados na parte superior né na parte superior aqui olhando de cima para baixo né tá tudo aqui na parte superior se eu coloco aqui o Aline items de volta Center né eles vão alinhar esses elementos aqui no centro Beleza então o que que eu posso fazer aqui eu posso dar um justify content justify content nesse caso aqui vai tá alinhando na na horizontal né Nós temos aqui várias várias opções e uma delas é essa Space bituin Ou seja a gente vai colocar o espaçamento entre essas componentes Ó e agora como ficou aquele espaço vazio que a gente tinha ele foi separado em em em tamanhos iguais né entre cada elemento que a gente tinha aí então já deu uma separada aí nesses elementos tá Space bit Win a gente vai colocar também a gente pode colocar aqui também só para garantir o e para tornar isso aqui mais semântico né a gente pode colocar aqui o Flex Direction Row né e a gente pode colocar aqui também o wiit né a largura desse que eu quero desse contêiner é que seja sempre 100% ou seja ele vai ocupar sempre todo esse espaço não mudou nada aqui né no visual mas a gente tá tornando o nosso CSS um pouco mais e legível né um pouco mais semântico e aqui eu vou colocar se a gente olha aqui no design nosso XD a gente tem uma margem entre esse contêiner aqui e o nosso header aqui superior né a gente tem uma marzin aqui o espaçamento dar uma olhada aqui né Tem esse espaçamento eu vou colocar aqui também uma margem no topo tá sei lá uns 40 pixels 40 pixs é ele vai dar um espaçamento bom talvez menos é uns 30 uns 20 enfim né aqui tá bom E além disso O que que eu tenho que estilizar eu tenho que estilizar esse H1 daqui né através D estilização se a gente volta aqui no nosso na nossa estrutura né no product subheader eu tenho a eu só tenho esse H1 aqui que não não é bem um componente própria né Ele é só um elemento aqui de texto Então eu vou estilizar ele através do estilo aqui do do Product subheader e para pegar ele aqui a gente pode usar a classe contêiner né Ah então ponto aqui contêiner Ah então dentro do do do elemento que tá com a classe container eu vou pegar o H1 né as tags H1 que tem como a gente tem só uma não vai ter problema tá então esse H1 aqui o que que eu vou colocar nele eu vou só controlar aqui o tamanho da fonte né então o Font size eu vou deixar aqui uns 20 pixels a gente olhar aqui se ficou bom é reduziu bem o tamanho né eu vou trocar aqui também acho que o o ela tá bastante né olhando aqui é só a cor a gente olha aqui no no nosso estilo né É ela tá essa nossa aqui ela já tá bem com stroke bem mais forte né então a gente pode controlar aqui o fonte o fonte weight ou seja isso aqui é meio que traduzindo literalmente seria o peso da fonte né O quão é espessa ela é a gente tem ali o Bold né bold boulder que são as opções onde ela tá com com tá mais forte né e a gente pode passar por exemplo ali uns valores né tipo 500 ela vai ficar uma fonte um pouco mais fraca né a gente tem sei lá 100 deixa eu ver se 100 aqui ele vai ter essa dessa fonte é 100 ele tem dessa fonte ela ficou bem mais fina né o traço da fonte nesse caso aqui eu vou manter o 500 e aqui a gente tem a tem que trocar a cor da F fte né se a gente olha aqui no no nosso XD ela não tá realmente um preto né se eu clico nela aqui a gente pode ver que a cor dela é essa cor aqui e não o preto Total então para utilizar isso aqui para definir essa cor né a gente já abordou em aulas passadas mas e e e essa cor de fonte aqui ela se repete em outros locais né então seria meio que a cor primária para para textos né então a gente pode usar as vari do CSS para definir essas cores que vão se repetir em vários locais então aqui no código nós temos aqui o nosso arquivo de estilos globais né Global Styles aqui dentro do Global Styles dentro do Body né eu defini aqui essa essa variável primary né que é a cor uma cor primária a cor primária aqui do projeto eu vou definir aqui um traço traço text traço primary que isso aqui vai ser essa cor que eu acabei de copiar Tá certo então essa cor coloco sempre o ponto vírgula no final né do CSS a gente tem que ter sempre esse Cuidado então essa variável text primary eu vou usar para pegar para usar a cor né aplicar essa cor naquele texto que tá aqui no product subheader né então no Styles aqui no nosso H1 né a cor dele Eu vou colocar aqui né o Color esse color aqui Eu vou acessar a variável né então a gente coloca var traço traço text primary certo então eu expliquei né Essa questão aqui da variável na aula passada que dentro do CSS nós temos aqui meio que a função né o método var que eu uso ele para para pegar variáveis né eu passo aqui o nome da variável variável inicia sempre com dois traços né dois iens e aí a gente consegue trazer esse text primary que a gente declarou aqui na estilização Global né no BO aqui do nosso do nosso projeto né da nossa página então se eu salva isso aqui a gente pode ver a gente pode ver que a cor mudou através aqui da a gente pega aqui a ferramenta de seleção né vou selecionar aqui o produtos e aqui no Styles dele a gente pode ver aumentar aqui a gente pode ver que o esse texto né esse H1 ele tá aplicando aqui o Color né que é a variável text primary n se eu clico aqui ele vai me trazer pra declaração da vari que essa variável global que eu criei Tá certo então perfeito tudo funcionando como planejado vamos voltar aqui na estilização e aqui de estilo para isso a gente vai parar por aqui né no product subheader a gente só vai fazer essas duas estilizações as outras já estão dentro aqui dos componentes específicos tá então agora a gente vai fazer essa estilização aqui do select tá e o select ele vai seguir um pouco esse padrão que a gente acabou de fazer aqui no nosso product subheader né que a gente aplica a gente cria uma classe né pro contêiner né para essa div e através dessa Classe A gente consegue selecionar esse Label e esse select aqui tá certo então eu vou criar aqui o Class name da nossa div vai ser Styles container né Essa Ideia de coner É bem aquilo que eu já falei nas aulas passadas né que é basicamente a gente pensa como um um Elo que tá por fora do de todos né ou dos principais Então esse elemento a gente chama ele de contêiner tá então deixa eu importar aqui o meu Styles certo então lá nos Styles eu vou ter que ter o a classe aqui né contêiner Então esse é basicamente o contêiner do meu select E aí nesse contêiner a gente já vai começar a aplicar aqui um bastant bastante estilo né para conseguir tá fazendo para conseguir tá fazendo aqui essa estilização então eu só vou fechar aqui isso que tá aberto pra gente organizar melhor aqui no vs code tá então o arquivo deos e o arquivo index aqui onde tá os elementos esse contêiner O que que a gente vai ter que fazer com ele se a gente dar uma olhada aqui nós temos né o Label V né e aqui o o select em si e a estilização dele é bastante diferente né se a gente dar uma olhada aqui do que ele renderiza por padrão né Por padrão a gente tem aqui Um a setinha tá diferente né se a gente olha ali a setinha a gente tá usando uma setinha colorida né meio que um vetor né nesse caso aqui a gente vai usar um svg para representar essa flecha e a gente vai trabalhar um pouco com background aí né Com o CSS background para est posicionando essa ess svg nessa posição tá então primeiro Começando aqui vamos começar por esse esse texto né esse ver que esse ver ele é basicamente se a gente olha aqui no HTML ele é esse Label né a gente tem um Label escrito ver que tá dentro da noss do nosso contêiner então o contêiner pro padrão vou deixar ele vazio aqui depois se a gente precisar aplicar alguma coisa a gente aplica e aqui a gente vai ter o ponto contêiner o nosso spanner é é Label Lael esquecendo das coisas cara o Label né dentro desse Label a gente vai aplicar aqui uma estilização nele que essa estilização é bem básica né se a gente olha aqui a gente só troca a cor e talvez aqui o tamanho da fonte a gente se a gente achar que tá é tá um tamanho bom já então não vou precisar mexer no tamanho é só mesmo na cor né então o Color a cor dessa fonte a gente vai novamente usar variável né E se a gente dar uma olhada aqui na estilização né no XD ele é uma cor meio que uma cor secundária né um cinza mais claro dessa cor primária aqui então eu vou criar ali um text secondary e a cor dele né eu vou pegar aqui do XD que é esse ex decimal aqui tá certo então vou criar aqui a variável lá no nosso Global Styles nós temos aqui o text primary eu vou ter aqui o text second tá vou colar aqui ponto e vírgula no final salvo e aqui a cor vai ser né text second vs cod já até sugeriu aqui para mim seu salvo a gente olha aqui no Browser né a gente pode ver que ele já tá com a cor né já tá com esse cinzinha mais claro aí então perfeito aqui quando quando a gente dá zoom né ele tenta ajustar aqui o browser e acaba quebrando tudo mas enfim só pra gente ver melhor que ali já tá com esse cinza aplicado né E aí com esse cinza aplicado a gente vai ter agora que estilizar o select em si e aqui para estilizar ele vai ser um pouco diferente porque a gente vai meio que descartar o estilo padrão que o sistema operacional aplica no elemento nesse meu caso aqui né como eu tô no Windows né no Google Chrome ele vai aplicar na verdade é o browser n n o sistema operacional o sistema operacional é no no Mobo né nesse caso aqui como eu tô no Google Chrome ele já aplica esse estilo padrão aqui nesse meu select então eu vou meio que ignorar esse estilo padrão meio que definir como ignorar mesmo descartar e aplicar algumas coisas aí que vai que vai trazer essa aparência que a gente tem aqui no nosso design né no nosso arquivo aqui do XD Tá certo então eu vou selecionar aqui né vindo aqui no nosso vs code no nosso CSS eu vou pegar o contêiner agora é o nosso input input não né select no nosso select o que que eu vou aplicar a gente usa aqui o traço traço web kit web kit appearance app Rance n não é traço traço né É só um traço dois traços é variável né web kit appearance esse web kit ele é bas basicamente um a gente usa ele para estilizar aqui o Chrome e o Safari né a gente tem outros outros seletores aqui que a gente usa para por exemplo o m né Eu só quebrar a linha aqui a gente tem o traço Moss né moz appearance ele tá dando erro porque eu não coloquei o ponto e vírgula ali esse M aqui é pro Mozilla né Firefox então nós temos alguns seletores algumas propriedades específicas pro browser que tá rodando né como a gente tá usando aqui no Google Chrome eu vou deixar o esse M aqui mas é basicamente eu tô ignorando a estilização que o Google Chrome aplica aqui nesse meu select então se eu salvo ele já muda né ele já sumiu a setinha ali e basicamente foi só a setinha né aquela cor de fundo que tava que é essa mesma cor de fundo que tá aqui no botão né ele meio que descartou também porque a gente definiu como nome tem também aqui appearance né que é do CSS em si a gente pode passar como nome então é meio que ignorar todo o tipo de estilização que pode vir por padrão aqui no nesse nosso elemento a gente pode ver que ele tem um bordinha também né eu posso passar aqui um border zero zero né zero tá para ele sumir aquela borda E aí a partir disso aqui a gente pode começar a brincar aqui com com o background com o ícone né com elemento para TR posicionando e basicamente trazendo né Essa aquela aquela setinha para baixo aquele vetor para cá pra direita tá então se a gente eu já colei aqui né já colei aqui antes da aula iniciar esse svg né que ele já tá me dando esse preview esse preview é uma extensão tá se a gente digita aqui preview Se não me engano eu falei disso na aula passada né na aula passada não em alguma das aulas passados aí mas nós temos aqui o svg preview né que é a extensão que carrega o svg aqui dentro do próprio vs code Eu tenho esse svg aqui né uma tag svg tá normal vou fechar ele aqui e o que que eu posso fazer eu posso definir aqui a propriedade é background background image ou seja uma imagem de fundo e essa imagem de fundo nós temos aqui dentro do CSS meio que esse método aqui URL tá então eu posso passar um URL para ele usar como imagem de fundo e esse URL ele pode ser tanto local e o arquivo local quanto o arquivo da web tá e como a gente tá aqui dentro do CSS e a gente tem um arquivo lá em assets esse arquivo svg eu posso usar aqui e aqui dentro do do CSS é diferente lá do react que lá no react a gente tinha que importar e tudo aqui não aqui a gente já consegue passar eh via e via o o o caminho referencial né bem que daqui eu já passo aqui o pef eu volto aqui às passas né entre em assets dentro de assets nós temos aqui erod l.