diff --git a/package.json b/package.json index 23d7e00..fbfb074 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index 6f013ba..ca512f2 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -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); + } + } } } } diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx index c05f551..a35ea16 100644 --- a/src/components/common/footer/index.tsx +++ b/src/components/common/footer/index.tsx @@ -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 = () => { diff --git a/src/components/primitives/select/select.css b/src/components/primitives/select/select.css deleted file mode 100644 index 3cb3151..0000000 --- a/src/components/primitives/select/select.css +++ /dev/null @@ -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; - } -} diff --git a/src/components/primitives/switch/index.tsx b/src/components/primitives/switch/index.tsx new file mode 100644 index 0000000..4abe107 --- /dev/null +++ b/src/components/primitives/switch/index.tsx @@ -0,0 +1,12 @@ +import s from './switch.module.scss' + +const Switch = () => { + return ( + + ) +} + +export default Switch diff --git a/src/components/primitives/switch/switch.module.scss b/src/components/primitives/switch/switch.module.scss new file mode 100644 index 0000000..77972ce --- /dev/null +++ b/src/components/primitives/switch/switch.module.scss @@ -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)); +} diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss index 79040cd..a8e2261 100644 --- a/src/components/sections/homepage/benefits/benefits.module.scss +++ b/src/components/sections/homepage/benefits/benefits.module.scss @@ -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; diff --git a/yarn.lock b/yarn.lock index f365f82..bcce2e6 100644 --- a/yarn.lock +++ b/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"