Skip to content

Commit

Permalink
style: add clx para remover espaço em branco
Browse files Browse the repository at this point in the history
  • Loading branch information
@RodolfoN1
RodolfoN1 committed Apr 1, 2024
1 parent ccd4c6c commit 6c368de
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 34 deletions.
51 changes: 26 additions & 25 deletions components/institutional/ContactForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import Icon from "$store/components/ui/Icon.tsx";
import { Picture, Source } from "apps/website/components/Picture.tsx";
import type { ImageWidget } from "apps/admin/widgets.ts";
import Button from "$store/components/ui/Button.tsx";
import LabelForm from "$store/components/ui/LabelForm.tsx";
import InputForm from "$store/components/ui/InputForm.tsx";
import ModalForm from "$store/components/ui/ModalForm.tsx";
import { FnContext, SectionProps } from "deco/mod.ts";
import { useUI } from "$store/sdk/useUI.ts";

import { clx } from "$store/sdk/clx.ts";

/**@titleBy alt*/
interface Image{
Expand Down Expand Up @@ -55,11 +53,12 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {

if(activeModalForm) displayModalForm.value = ACTIVEMODALFORM[activeModalForm]

console.log('activeModalForm ---> ', activeModalForm)
console.log('displayModalForm.value ---> ', displayModalForm.value)

function handleChange( e: Event ){
console.log('------------> ', e)
console.log('onChange ------------> ', e)
}

function handleOnBlur( e: Event ){
console.log('onBlur ------------> ', e)
}

return (
Expand All @@ -80,8 +79,9 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
nameAttr={"commercial"}
type={"checkbox"}
id={"commercial"}
_class={`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`}
_class={clx(`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`)}
required={true}
/>
<LabelForm
_class={`font-normal text-[#ffffff] text-14 leading-[21px] font-noto-sans`}
Expand All @@ -95,8 +95,8 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
nameAttr={"partnership"}
type={"checkbox"}
id={"partnership"}
_class={`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`}
_class={clx(`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`)}
/>
<LabelForm
_class={`font-normal text-[#ffffff] text-14 leading-[21px] font-noto-sans`}
Expand All @@ -110,8 +110,8 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
nameAttr={"others"}
type={"checkbox"}
id={"others"}
_class={`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`}
_class={clx(`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`)}
/>
<LabelForm
_class={`font-normal text-[#ffffff] text-14 leading-[21px] font-noto-sans`}
Expand All @@ -135,12 +135,13 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
</LabelForm>
<input
onChange={handleChange}
onBlur={handleOnBlur}
placeholder={"Seu nome"}
name={"nameUser"}
id={"nameUser"}
type={"text"}
class={`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
class={clx(`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`)}
/>
</div>
{/* Nome da Empresa*/}
Expand All @@ -155,8 +156,8 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
name="nameCompany"
type="text"
id="nameCompany"
class={`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
class={clx(`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`)}
/>
</div>
</div>
Expand All @@ -174,8 +175,8 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
name="phoneNumber"
type="text"
id="phoneNumber"
class={`w-full rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
class={clx(`w-full rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`)}
/>

</div>
Expand All @@ -192,8 +193,8 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
nameAttr="email"
id="email"
type="email"
_class={`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
_class={clx(`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`)}
/>
</div>
</div>
Expand All @@ -206,17 +207,17 @@ function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
name="message"
id="message"
type="text"
class={`bg-transparent rounded-[38px] h-[90px] border border-[#F3F4F7] py-[20px] px-[40px] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
class={clx(`bg-transparent rounded-[38px] h-[90px] border border-[#F3F4F7] py-[20px] px-[40px] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`)}
/>
</div>
{/* DADOS __________________________________________________________________________________| FINAL | */}

<div>
<input
type="submit"
class={`py-[20px] px-[30px] bg-base-200 rounded-[100px] text-[#585858] hover:bg-[#ffff]
max-h-[52px] !leading-none text-16 font-archimoto-medium font-black`}
class={clx(`py-[20px] px-[30px] bg-base-200 rounded-[100px] text-[#585858] hover:bg-[#ffff]
max-h-[52px] !leading-none text-16 font-archimoto-medium font-black`)}
value="Enviar"
/>
</div>
Expand Down
4 changes: 3 additions & 1 deletion components/ui/InputForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ interface Props{
_class?:string;
checked?:boolean;
id?:string;
required?:boolean;
}

function InputForm( { placeholder, nameAttr, type, _class, checked, id }:Props){
function InputForm( { placeholder, nameAttr, type, _class, checked, id, required }:Props){
return(
<>
<input
Expand All @@ -19,6 +20,7 @@ function InputForm( { placeholder, nameAttr, type, _class, checked, id }:Props){
class={clx(_class)}
checked={checked}
id={id}
required={required}
/>
</>
)
Expand Down
14 changes: 6 additions & 8 deletions components/ui/ModalForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Picture, Source } from "apps/website/components/Picture.tsx";
import type { ImageWidget } from "apps/admin/widgets.ts";
import { headerHeight } from "$store/components/header/constants.ts";
import { clx } from "$store/sdk/clx.ts";

/**@titleBy alt*/
interface Image{
Expand All @@ -28,20 +29,17 @@ interface Props{
}

function ModalForm( { image, text, device } : Props ){

const headerHeightNumber = headerHeight ? Number(headerHeight.replaceAll(/\D/g,'')) + 100 : null;

console.log('device ----> ', device)
// const headerHeightNumber = headerHeight ? Number(headerHeight.replaceAll(/\D/g,'')) + 100 : null;

return(
<>
<div class="fixed top-0 left-0 w-full h-full z-[11] bg-[rgba(11,_18,_39,_0.80)] text-[#ffffff]">
<div class="w-full h-full flex items-start justify-center">
<div
class="[box-shadow:0_0px_2px_#fff] mobile:w-[90%] mobile:mt-[150px] notebook:max-w-[55%] notebook:min-w-[40%]
xl:w-[600px] 2xl:h-[540px] rounded-[16px] backdrop-filter backdrop-blur-[42px] flex flex-col justify-center items-center
notebook:gap-[15px] gap-[24px] px-[20px] md:px-[30px] py-[50px] mt-[120px]
bg-[linear-gradient(161deg,_rgba(255,_255,_255,_0.10)_0%,_rgba(255,_255,_255,_0.05)_101.7%)]"
class={clx(`[box-shadow:0_0px_2px_#fff] mobile:w-[90%] mobile:mt-[150px] notebook:max-w-[55%] notebook:min-w-[40%]
xl:w-[600px] 2xl:h-[540px] rounded-[16px] backdrop-filter backdrop-blur-[42px] flex flex-col justify-center items-center
notebook:gap-[15px] gap-[24px] px-[20px] md:px-[30px] py-[50px] mt-[120px]
bg-[linear-gradient(161deg,_rgba(255,_255,_255,_0.10)_0%,_rgba(255,_255,_255,_0.05)_101.7%)]`)}
// style={{
// marginTop: `${headerHeight && device === 'desktop' ? headerHeightNumber + 'px' : '120px'}`
// }}
Expand Down

0 comments on commit 6c368de

Please sign in to comment.