DM switch, fix Benefits bg, styles
This commit is contained in:
Fede Álvarez
parent
50b6739070
commit
e346372f41
@ -23,6 +23,7 @@
|
||||
"@graphql-codegen/typescript-operations": "^2.3.5",
|
||||
"@juggle/resize-observer": "^3.3.1",
|
||||
"@radix-ui/react-polymorphic": "^0.0.14",
|
||||
"@radix-ui/react-switch": "^0.1.5",
|
||||
"@reach/dialog": "^0.17.0",
|
||||
"@types/lodash": "^4.14.182",
|
||||
"@types/marked": "^4.0.3",
|
||||
|
||||
@ -337,20 +337,33 @@
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: var(--color-grey-light);
|
||||
font-size: tovw(18px, 'default', 14px);
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
}
|
||||
|
||||
li:first-of-type {
|
||||
li:first-child {
|
||||
color: var(--color-grey-light);
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
@include respond-to('mobile') {
|
||||
margin-bottom: tovw(32px, 'tablet', 32px);
|
||||
gap: tovw(32px, 'mobile');
|
||||
}
|
||||
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
gap: tovw(37px, 'default', 24px);
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-left: tovw(8px, 'default', 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import { Container } from '~/components/layout/container'
|
||||
import Section from '~/components/layout/section'
|
||||
import Heading from '~/components/primitives/heading'
|
||||
import Link from '~/components/primitives/link'
|
||||
import Switch from '~/components/primitives/switch'
|
||||
import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
|
||||
|
||||
import {
|
||||
@ -242,6 +243,9 @@ export const Footer = () => {
|
||||
</li>
|
||||
</ul>
|
||||
<ul className={s['sub__footer__links']}>
|
||||
<li>
|
||||
<p>Laconic, The Source of Proof</p>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/privacy-policy" variant="nav">
|
||||
Privacy Policy
|
||||
@ -249,9 +253,9 @@ export const Footer = () => {
|
||||
<Link href="/terms-of-use" variant="nav">
|
||||
Terms of Use
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<p>Laconic, The Source of Proof</p>
|
||||
<p>
|
||||
<span>Dark Mode</span> <Switch />
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
12
src/components/primitives/switch/index.tsx
Normal file
12
src/components/primitives/switch/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import s from './switch.module.scss'
|
||||
|
||||
const Switch = () => {
|
||||
return (
|
||||
<label className={s.switch}>
|
||||
<input type="checkbox" />
|
||||
<span className={s.slider}></span>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
export default Switch
|
||||
49
src/components/primitives/switch/switch.module.scss
Normal file
49
src/components/primitives/switch/switch.module.scss
Normal file
@ -0,0 +1,49 @@
|
||||
@import '~/css/helpers';
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: tovw(24px, 'default', 24px);
|
||||
height: tovw(15px, 'default', 15px);
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-black);
|
||||
border-radius: tovw(100px, 'default', 100px);
|
||||
border: tovw(1px, 'default', 1px) solid var(--color-white);
|
||||
transition: var(--normal-transition);
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: tovw(9px, 'default', 9px);
|
||||
width: tovw(9px, 'default', 9px);
|
||||
left: tovw(2px, 'default', 2px);
|
||||
bottom: tovw(2px, 'default', 2px);
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: var(--normal-transition);
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
border: tovw(1px, 'default', 1px) solid var(--color-black);
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
input:checked + .slider::before {
|
||||
background-color: var(--color-black);
|
||||
transform: translateX(tovw(10px, 'default', 10px));
|
||||
}
|
||||
@ -88,7 +88,7 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
margin: 0 tovw(-56px, 'default', -56px);
|
||||
margin: 0 tovw(-56px, 'default', -116px);
|
||||
margin-top: tovw(72px, 'default', 60px);
|
||||
background-image: url('/images/benefit-bg.png');
|
||||
background-position: center center;
|
||||
|
||||
107
yarn.lock
107
yarn.lock
@ -1106,11 +1106,118 @@
|
||||
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
|
||||
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
|
||||
|
||||
"@radix-ui/primitive@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-0.1.0.tgz#6206b97d379994f0d1929809db035733b337e543"
|
||||
integrity sha512-tqxZKybwN5Fa3VzZry4G6mXAAb9aAqKmPtnVbZpL0vsBwvOHTBwsjHVPXylocYLwEtBY9SCe665bYnNB515uoA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-compose-refs@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
|
||||
integrity sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-context@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-0.1.1.tgz#06996829ea124d9a1bc1dbe3e51f33588fab0875"
|
||||
integrity sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-id@0.1.5":
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.1.5.tgz#010d311bedd5a2884c1e9bb6aaaa4e6cc1d1d3b8"
|
||||
integrity sha512-IPc4H/63bes0IZ1GJJozSEkSWcDyhNGtKFWUpJ+XtaLyQ1X3x7Mf6fWwWhDcpqlYEP+5WtAvfqcyEsyjP+ZhBQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-layout-effect" "0.1.0"
|
||||
|
||||
"@radix-ui/react-label@0.1.5":
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.1.5.tgz#12cd965bfc983e0148121d4c99fb8e27a917c45c"
|
||||
integrity sha512-Au9+n4/DhvjR0IHhvZ1LPdx/OW+3CGDie30ZyCkbSHIuLp4/CV4oPPGBwJ1vY99Jog3zyQhsGww9MXj8O9Aj/A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
|
||||
"@radix-ui/react-polymorphic@^0.0.14":
|
||||
version "0.0.14"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
|
||||
integrity sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==
|
||||
|
||||
"@radix-ui/react-primitive@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1"
|
||||
integrity sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-slot" "0.1.2"
|
||||
|
||||
"@radix-ui/react-slot@0.1.2":
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.2.tgz#e6f7ad9caa8ce81cc8d532c854c56f9b8b6307c8"
|
||||
integrity sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
|
||||
"@radix-ui/react-switch@^0.1.5":
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-0.1.5.tgz#071ffa19a17a47fdc5c5e6f371bd5901c9fef2f4"
|
||||
integrity sha512-ITtslJPK+Yi34iNf7K9LtsPaLD76oRIVzn0E8JpEO5HW8gpRBGb2NNI9mxKtEB30TVqIcdjdL10AmuIfOMwjtg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-label" "0.1.5"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-controllable-state" "0.1.0"
|
||||
"@radix-ui/react-use-previous" "0.1.1"
|
||||
"@radix-ui/react-use-size" "0.1.1"
|
||||
|
||||
"@radix-ui/react-use-callback-ref@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz#934b6e123330f5b3a6b116460e6662cbc663493f"
|
||||
integrity sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-controllable-state@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1"
|
||||
integrity sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
|
||||
"@radix-ui/react-use-layout-effect@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223"
|
||||
integrity sha512-+wdeS51Y+E1q1Wmd+1xSSbesZkpVj4jsg0BojCbopWvgq5iBvixw5vgemscdh58ep98BwUbsFYnrywFhV9yrVg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-previous@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
|
||||
integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-size@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz#f6b75272a5d41c3089ca78c8a2e48e5f204ef90f"
|
||||
integrity sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@reach/dialog@^0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.17.0.tgz#81c48dd4405945dfc6b6c3e5e125db2c4324e9e8"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user