LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-09-13 05:54:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Work on form select (#73)

Browse Source 
* Work on form select
This commit is contained in:
Fede Álvarez
2022-05-27 16:41:11 +02:00
committed by GitHub
parent 00da9ba100
commit 41762363e2
9 changed files with 399 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/primitives/select/select.css
+66
View File
@@ -0,0 +1,66 @@
.select {
height: 100%;
display: flex;
&__control {
appearance: none;
width: 100%;
min-height: unset;
place-self: end;
font-size: tovw(24px, 'default', 18px);
padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px);
background: rgb(142 142 142 / 0.1) !important;
border: tovw(1px, 'default', 1px) solid transparent !important;
border-radius: tovw(8px, 'default', 8px) !important;
transition: unset !important;
&:hover {
border: tovw(1px, 'default', 1px) solid transparent;
}
&--is-focused {
border: tovw(1px, 'default', 1px) solid var(--color-accent) !important;
background: rgb(0 0 244 / 0.1) !important;
transition: all 250ms;
}
}
&__option {
color: var(--color-grey-light) !important;
&--is-focused {
color: white !important;
background-color: unset !important;
}
&--is-selected {
background-color: unset !important;
color: white !important;
}
}
[class$='-menu'] {
background: rgb(0 0 0 / 0.3);
backdrop-filter: blur(2px);
margin: 0;
}
[class$='-indicatorContainer'] {
padding: 0 tovw(8px, 'default', 2px);
}
[class$='-ValueContainer'],
[class$='-Input'] {
height: 100%;
padding: 0 !important;
margin: 0;
}
&__single-value {
color: var(--color-white) !important;
}
&__placeholder {
color: var(--color-grey-light) !important;
}
}
src/components/sections/contact/form/form.module.scss
+1 -5
View File
@@ -53,7 +53,7 @@
display: flex;
flex-direction: column;
div:first-child {
> div:first-child {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
@@ -98,10 +98,6 @@
opacity: 50%;
border: none;
color: var(--color-white);
&:first-child {
color: red;
}
}
}
src/components/sections/contact/form/index.tsx
+24 -2
View File
@@ -1,3 +1,6 @@
import { useState } from 'react'
import Select from 'react-select'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
import { Button } from '~/components/primitives/button'
@@ -20,6 +23,16 @@ interface Props {
}
const Form = ({ data }: Props) => {
const selectOptions = [
{ value: 'Partnership', label: 'Partnership' },
{ value: 'Validator/Member', label: 'Validator/Member' },
{ value: 'Investor', label: 'Investor' },
{ value: 'Press', label: 'Press' },
{ value: 'Marketing', label: 'Marketing' }
]
const [selectedOption, setSelectedOption] = useState<any>(null)
return (
<Section className={s['section']}>
<Container className={s['container']}>
@@ -33,7 +46,7 @@ const Form = ({ data }: Props) => {
<div>
<label htmlFor="partnership">
{data?.formLabelPartner}
<select name="partnership" id="partnership" required>
{/* <select name="partnership" id="partnership" required>
<option value="" hidden>
{data?.formPlaceholderPartner}
</option>
@@ -42,7 +55,16 @@ const Form = ({ data }: Props) => {
<option value="Investor">Investor</option>
<option value="Press">Press</option>
<option value="Marketing">Marketing</option>
</select>
</select> */}
<Select
instanceId={'Contact'}
className="select"
classNamePrefix="select"
placeholder={data?.formPlaceholderPartner}
value={selectedOption}
onChange={setSelectedOption}
options={selectOptions}
/>
</label>
<label htmlFor="email">
{data?.formLabelEmail}
src/components/sections/partners/contact/contact.module.scss
+1 -1
View File
@@ -115,7 +115,7 @@
display: flex;
flex-direction: column;
div:first-child {
> div:first-child {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
src/components/sections/partners/contact/index.tsx
+21 -9
View File
@@ -1,3 +1,6 @@
import { useState } from 'react'
import Select from 'react-select'
import Line from '~/components/icons/line'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
@@ -31,6 +34,15 @@ interface Props {
}
const Contact = ({ data }: Props) => {
const selectOptions = [
{ value: 'Validator/Member', label: 'Validator/Member' },
{ value: 'Investor', label: 'Investor' },
{ value: 'Developer', label: 'Developer' },
{ value: 'Customer', label: 'Prospective Customer' }
]
const [selectedOption, setSelectedOption] = useState<any>(null)
return (
<Section className={s['section']}>
<Container className={s['container']}>
@@ -102,15 +114,15 @@ const Contact = ({ data }: Props) => {
</label>
<label htmlFor="partnership">
{data?.contactInquiryLabel}
<select name="partnership" id="partnership" required>
<option value="" hidden>
{data?.contactInquiryPlaceholder}
</option>
<option value="Validator/Member">Validator/Member</option>
<option value="Investor">Investor</option>
<option value="Developer">Contributing Developer</option>
<option value="Customer">Prospective Customer</option>
</select>
<Select
instanceId={'Partners'}
className="select"
classNamePrefix="select"
placeholder={data?.contactInquiryPlaceholder}
value={selectedOption}
onChange={setSelectedOption}
options={selectOptions}
/>
</label>
</div>
<label htmlFor="message">
src/css/global.scss
+87
View File
@@ -133,3 +133,90 @@ p {
display: none !important;
}
}
.select {
height: 100% !important;
display: flex !important;
.select__control {
@include respond-to('mobile') {
margin-top: tovw(20px, 'default', 16px) !important;
}
appearance: none !important;
width: 100% !important;
min-height: unset !important;
place-self: end !important;
font-size: tovw(24px, 'default', 18px) !important;
padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px) !important;
background: rgb(142 142 142 / 0.1) !important;
border: tovw(1px, 'default', 1px) solid transparent !important;
border-radius: tovw(8px, 'default', 8px) !important;
transition: unset !important;
&:hover {
border: tovw(1px, 'default', 1px) solid transparent !important;
}
&--is-focused {
border: tovw(1px, 'default', 1px) solid var(--color-accent) !important;
box-shadow: unset !important;
background: rgb(0 0 244 / 0.1) !important;
transition: all 250ms !important;
}
}
&__indicator-separator {
display: none !important;
}
&__option {
color: var(--color-grey-light) !important;
&--is-focused {
color: white !important;
background-color: unset !important;
}
&--is-selected {
background-color: unset !important;
color: white !important;
}
}
[class$='-menu'] {
background: rgb(0 0 0 / 0.2) !important;
backdrop-filter: blur(16px) !important;
font-size: tovw(24px, 'default', 18px) !important;
margin: 0 !important;
@-moz-document url-prefix("") {
background-color: var(--color-black) !important;
}
}
[class$='-indicatorContainer'] {
padding: 0 tovw(8px, 'default', 2px) !important;
}
[class$='-ValueContainer'],
[class$='-Input'] {
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
&__value-container,
&__input-container {
padding: 0 !important;
margin: 0 !important;
}
&__single-value {
color: var(--color-white) !important;
}
&__placeholder {
color: var(--color-grey-light) !important;
}
}