Skip to content

Commit

Permalink
Merge pull request #207 from serginogal/main
Browse files Browse the repository at this point in the history 
[Finished] - serginogal solution to the challenge
  • Loading branch information
@midudev
midudev authored Oct 9, 2022
2 parents 54c8378 + 1afbeab commit 5af8701
Show file tree
Hide file tree
Showing 16 changed files with 792 additions and 0 deletions.
123 changes: 123 additions & 0 deletions src/components/serginogal/Logo.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
---
---

<div class='logoWrapper'>
<div class='logo'>
<div class='badge'>
<svg
width='224'
height='224'
viewBox='0 0 224 224'
fill='none'
xmlns='https://www.w3.org/2000/svg'
class='globe'
><path
fill-rule='evenodd'
clip-rule='evenodd'
d='M208.979 167.991C178.056 221.55 109.569 239.901 56.0093 208.979C2.44951 178.056 -15.9014 109.569 15.0213 56.0093C45.9441 2.44951 114.431 -15.9014 167.991 15.0213C221.55 45.9441 239.901 114.431 208.979 167.991ZM35.7052 184.154C29.9638 169.391 29.0031 150.536 32.8872 130.242C27.1675 124.879 22.1166 119.513 17.8303 114.256C13.7802 109.289 10.372 104.37 7.72571 99.5969C4.09083 130.28 14.2172 161.451 35.7052 184.154ZM9.90682 87.4222C12.1098 94.0693 16.6206 101.697 23.2545 109.833C26.5697 113.899 30.385 118.055 34.6529 122.24C36.1532 116.23 38.0655 110.127 40.3916 103.997C40.7446 104.505 41.144 104.984 41.5871 105.427C42.9061 106.746 44.54 107.677 46.3122 108.149C43.8773 114.783 41.9565 121.355 40.5414 127.772C44.3205 131.18 48.3839 134.589 52.706 137.966C52.5773 138.623 52.5099 139.302 52.5099 139.996L52.5099 146.628C47.7391 143.053 43.2338 139.422 39.0245 135.773C37.8976 142.897 37.4188 149.77 37.5754 156.255C38.0817 177.226 45.1093 193.053 57.0257 201.341L66.7935 184.423C67.2401 186.297 68.1979 188.028 69.5823 189.413C70.0861 189.916 70.6359 190.364 71.2218 190.75L63.1432 204.743C76.1431 210.356 92.9488 208.368 110.887 198.581C116.582 195.474 122.294 191.623 127.9 187.085C119.38 184.139 110.515 180.496 101.502 176.193L101.502 168.415C112.744 173.95 123.734 178.421 134.07 181.772C135.235 180.707 136.392 179.613 137.541 178.49L146.994 178.49C147.108 178.49 147.222 178.488 147.335 178.484C145.517 180.427 143.672 182.301 141.806 184.105C147.564 185.708 153.071 186.935 158.25 187.773C168.612 189.45 177.473 189.542 184.331 188.127C191.46 181.348 197.749 173.444 202.917 164.491C210.279 151.741 214.662 138.088 216.282 124.339C210.834 124.431 204.88 123.939 198.565 122.917C186.197 120.915 172.201 116.841 157.492 110.864L157.492 103.291C165.012 106.447 172.329 109.09 179.315 111.201C184.411 95.8738 186.745 80.9994 186.425 67.7456C185.932 47.317 179.25 31.769 167.889 23.3173L157.472 41.3604C157.314 38.8141 156.232 36.4037 154.418 34.5892C154.183 34.3546 153.938 34.1322 153.685 33.9225L161.884 19.7204C148.749 13.5443 131.528 15.3721 113.113 25.419C104.109 30.3316 95.0597 37.105 86.4577 45.5119L77.0058 45.5119C76.8917 45.5119 76.7778 45.5138 76.6641 45.5175C95.3136 25.5891 116.731 12.8676 136.34 9.84974C108.271 3.14963 78.794 8.44328 54.9537 23.8428C57.3791 28.3235 60.6378 33.1012 64.6879 38.0683C66.9857 40.8864 69.5239 43.748 72.2865 46.6325C71.2958 47.131 70.3814 47.7879 69.5825 48.5867C68.6777 49.4915 67.9552 50.5445 67.4384 51.6886C64.4707 48.6007 61.7396 45.5277 59.2637 42.4911C55.221 37.5331 51.8179 32.6229 49.1737 27.8584C38.0763 36.1362 28.444 46.7582 21.0825 59.5088C15.9137 68.4614 12.2134 77.8588 9.90682 87.4222ZM174.878 196.103C150.123 214.592 118.066 221.408 87.6611 214.15C103.317 211.741 120.126 203.146 135.759 189.635C143.263 191.907 150.436 193.598 157.132 194.682C163.458 195.706 169.422 196.198 174.878 196.103ZM216.87 117.325C211.777 117.465 206.01 117.032 199.683 116.008C195.356 115.308 190.799 114.336 186.058 113.1C195.131 85.6334 195.829 59.2182 188.295 39.8466C208.132 60.8047 218.286 88.9795 216.87 117.325Z'
fill='url(#paint0_linear_1_287)'></path>
<defs>
<linearGradient
id='paint0_linear_1_287'
x1='30.1538'
y1='30.1538'
x2='110.165'
y2='227.733'
gradientUnits='userSpaceOnUse'
><stop stop-color='#FFE27D'></stop>
<stop offset='0.505208' stop-color='#64E3FF'></stop>
<stop offset='1' stop-color='#9192FF'></stop>
</linearGradient>
</defs>
</svg>
<svg
width='113'
height='124'
viewBox='0 0 113 124'
fill='none'
xmlns='https://www.w3.org/2000/svg'
class='h'
><path
d='M0.846191 49.8003L0.846202 38.2416L0.846964 37.5231H13.2913L13.2913 49.8001H2.10096L0.846191 49.8003Z'
fill='currentColor'></path>
<path
d='M13.2913 29.2604L13.2913 37.5231H25.7357L25.7357 86.6309H13.2913V91.5501L13.2906 98.908H24.5256L25.7357 98.9078V99.6507L25.735 106.835L25.7357 123.462H38.18V86.6308H50.6244V74.3542L75.5131 74.3539V111.185H87.9575V98.9078H97.7151L100.401 98.908L100.402 86.6309H105.388L112.463 86.6311L112.846 86.6309V74.3539L100.402 74.3539L100.402 86.6309L87.9575 86.6308L87.9575 0.692383L75.5131 0.692383V12.9693L63.0687 12.9693V25.2462H50.6244V28.9521L50.6237 36.4003L50.6244 37.5231H52.3251L63.0679 37.5234L63.0687 25.2462L75.3832 25.2462L75.5124 25.2464L75.5124 37.3024L75.5131 37.5231V44.1068L75.5124 51.0645L75.5131 62.077H50.6244V74.3542L38.18 74.3539V12.9693L25.7357 12.9693L25.735 17.3027L25.7357 25.2462H13.2913V29.2604Z'
fill='currentColor'></path>
</svg>
</div>
</div>
<svg
width='259'
height='138'
viewBox='0 0 259 138'
fill='none'
xmlns='https://www.w3.org/2000/svg'
class='text'
><path
d='M27.0649 0L37.2717 0V15.3141H65.9451V0L76.1519 0V41.5498H65.9451V25.286L37.2717 25.286V41.5498H27.0649V0Z'
fill='currentColor'></path><path
d='M89.8774 7.41962C90.5067 5.28277 91.549 3.52184 93.0043 2.13686C94.499 0.712273 96.5442 0 99.1402 0L111.471 0C114.106 0 116.211 0.712273 117.784 2.13686C119.357 3.52184 120.458 5.28277 121.088 7.41962L131.235 41.5498L119.908 41.5498L117.135 31.5778H98.4322L100.792 21.6059H114.362L111.176 9.97194H99.7302L90.9984 41.5498H79.6706L89.8774 7.41962Z'
fill='currentColor'></path><path
d='M134.159 7.41962C134.159 6.35119 134.356 5.36188 134.749 4.45177C135.142 3.54162 135.654 2.76997 136.283 2.13686C136.952 1.46414 137.719 0.94971 138.584 0.593554C139.489 0.197838 140.413 0 141.357 0L180.119 0V9.97194L144.366 9.97194V31.5778H180.119V41.5498H141.77C140.708 41.5498 139.705 41.3519 138.761 40.9562C137.817 40.5605 137.011 40.0461 136.342 39.4129C135.673 38.7402 135.142 37.9686 134.749 37.098C134.356 36.1879 134.159 35.2579 134.159 34.3082V7.41962Z'
fill='currentColor'></path><path
d='M185.451 0L195.658 0V16.2638H204.862L217.37 0L229.169 0L213.771 20.1813L232.06 41.5498H219.021L205.393 26.2357H195.658V41.5498H185.451V0Z'
fill='currentColor'></path><path
d='M19.8236 57.8896H0L0 47.9177H49.7359V57.8896H30.0304L30.0304 89.4675H19.8236L19.8236 57.8896Z'
fill='currentColor'></path><path
fill-rule='evenodd'
clip-rule='evenodd'
d='M53.5598 55.3373C53.5598 54.2689 53.7565 53.2796 54.1498 52.3694C54.5431 51.4593 55.0543 50.6877 55.6838 50.0545C56.3524 49.3818 57.1194 48.8674 57.9847 48.5113C58.8893 48.1155 59.8136 47.9177 60.7576 47.9177H95.7439C96.8059 47.9177 97.8088 48.1155 98.7528 48.5113C99.6968 48.907 100.503 49.4412 101.172 50.1139C101.84 50.747 102.371 51.5187 102.765 52.4288C103.158 53.2994 103.355 54.2095 103.355 55.1592V82.0478C103.355 83.1163 103.158 84.1056 102.765 85.0157C102.371 85.9258 101.84 86.7172 101.172 87.39C100.542 88.0231 99.7754 88.5375 98.8708 88.9332C98.0055 89.2894 97.1009 89.4675 96.1569 89.4675H61.1706C60.1086 89.4675 59.1057 89.2696 58.1617 88.8739C57.2177 88.4781 56.4114 87.9637 55.7427 87.3306C55.074 86.6579 54.5431 85.8862 54.1498 85.0157C53.7565 84.1056 53.5598 83.1756 53.5598 82.2259V55.3373ZM93.148 79.4955V57.8896H63.7665V79.4955H93.148Z'
fill='currentColor'></path><path
fill-rule='evenodd'
clip-rule='evenodd'
d='M108.654 55.3373C108.654 54.2689 108.851 53.2796 109.244 52.3694C109.638 51.4593 110.149 50.6877 110.778 50.0545C111.447 49.3818 112.214 48.8674 113.079 48.5113C113.984 48.1155 114.908 47.9177 115.852 47.9177L144.113 47.9177C145.175 47.9177 146.158 48.1155 147.063 48.5113C147.967 48.907 148.734 49.4412 149.364 50.1139C150.032 50.747 150.544 51.5187 150.898 52.4288C151.291 53.2994 151.488 54.2095 151.488 55.1592V63.8253C152.549 63.8253 153.493 64.0232 154.319 64.4189C155.185 64.8146 155.912 65.3488 156.502 66.0215C157.092 66.6546 157.525 67.4263 157.8 68.3364C158.115 69.207 158.272 70.1171 158.272 71.0668V82.0478C158.272 83.1163 158.076 84.1056 157.682 85.0157C157.289 85.9258 156.758 86.7172 156.089 87.39C155.46 88.0231 154.693 88.5375 153.788 88.9332C152.923 89.2894 152.019 89.4675 151.075 89.4675H108.654V55.3373ZM148.066 79.4955V73.1444H118.861V79.4955H148.066ZM141.281 63.8253V57.8896L118.861 57.8896V63.8253L141.281 63.8253Z'
fill='currentColor'></path><path
d='M162.972 55.3373C162.972 54.2689 163.169 53.2796 163.562 52.3694C163.956 51.4593 164.467 50.6877 165.096 50.0545C165.765 49.3818 166.532 48.8674 167.397 48.5113C168.302 48.1155 169.226 47.9177 170.17 47.9177H207.339V57.8896H173.179V63.2317H202.679V73.2037H173.179V79.4955H207.339V89.4675H170.583C169.521 89.4675 168.518 89.2696 167.574 88.8739C166.63 88.4781 165.824 87.9637 165.155 87.3306C164.487 86.6579 163.956 85.8862 163.562 85.0157C163.169 84.1056 162.972 83.1756 162.972 82.2259V55.3373Z'
fill='currentColor'></path><path
d='M36.0649 103.716C36.0649 102.648 36.2616 101.658 36.655 100.748C37.0483 99.838 37.5596 99.0663 38.1889 98.4332C38.8576 97.7605 39.6245 97.2461 40.4898 96.8899C41.3945 96.4943 42.3188 96.2964 43.2628 96.2964H77.541V106.268H46.2717V115.825H72.8211V125.797H46.2717L46.2717 137.846H36.0649L36.0649 103.716Z'
fill='currentColor'></path><path
d='M81.3373 103.716C81.3373 102.648 81.5339 101.658 81.9272 100.748C82.3205 99.838 82.8319 99.0663 83.4612 98.4332C84.1298 97.7605 84.8969 97.2461 85.7621 96.8899C86.6668 96.4943 87.5911 96.2964 88.5351 96.2964H125.704V106.268H91.544V111.61H121.043V121.582H91.544V127.874H125.704V137.846H88.9481C87.8861 137.846 86.8832 137.648 85.9392 137.253C84.9952 136.857 84.1888 136.342 83.5202 135.709C82.8515 135.037 82.3205 134.265 81.9272 133.394C81.5339 132.484 81.3373 131.554 81.3373 130.605V103.716Z'
fill='currentColor'></path><path
d='M131.016 127.874H170.486V121.582H138.391C137.329 121.582 136.346 121.385 135.441 120.989C134.536 120.593 133.75 120.079 133.081 119.446C132.452 118.773 131.94 118.001 131.547 117.131C131.193 116.221 131.016 115.291 131.016 114.341V103.716C131.016 102.648 131.213 101.658 131.606 100.748C131.999 99.838 132.511 99.0663 133.14 98.4332C133.809 97.7605 134.576 97.2461 135.441 96.8899C136.346 96.4943 137.27 96.2964 138.214 96.2964H176.091V106.268H141.223V111.61H173.318C174.38 111.61 175.363 111.808 176.268 112.204C177.173 112.6 177.94 113.134 178.569 113.807C179.238 114.44 179.749 115.211 180.103 116.122C180.496 116.992 180.693 117.902 180.693 118.852V130.427C180.693 131.495 180.496 132.484 180.103 133.394C179.71 134.305 179.179 135.096 178.51 135.769C177.881 136.402 177.114 136.916 176.209 137.312C175.344 137.668 174.439 137.846 173.495 137.846H131.016V127.874Z'
fill='currentColor'></path><path
d='M200.514 106.268H180.69V96.2964H230.426V106.268H210.721V137.846H200.514V106.268Z'
fill='currentColor'></path><path
fill-rule='evenodd'
clip-rule='evenodd'
d='M213.284 56.2081C213.284 54.9852 213.509 53.853 213.959 52.8112C214.409 51.7695 214.994 50.8864 215.715 50.1617C216.48 49.3918 217.358 48.803 218.348 48.3954C219.384 47.9425 220.442 47.716 221.522 47.716H250.021C251.236 47.716 252.362 47.9425 253.397 48.3954C254.432 48.8483 255.31 49.4597 256.031 50.2296C256.796 50.9543 257.381 51.8375 257.786 52.8792C258.236 53.8756 258.462 54.9173 258.462 56.0042L258.395 64.6111C258.395 65.6981 258.17 66.7398 257.72 67.7362C257.402 68.5523 256.974 69.2711 256.436 69.8927C256.468 69.9273 256.499 69.9623 256.53 69.9977C257.12 70.6309 257.553 71.4025 257.828 72.3127C258.143 73.1832 258.3 76.7442 258.3 77.694V82.0478C258.3 83.1161 258.104 84.1054 257.71 85.0155C257.317 85.9257 256.786 86.7171 256.117 87.3898C255.488 88.0229 254.721 88.5374 253.816 88.9331C252.951 89.2892 252.046 89.4673 251.102 89.4673H242.173V80.8521L248.093 80.8209V75.5503H221.456C220.375 75.5503 219.317 75.3238 218.282 74.8709C217.291 74.4633 216.414 73.8745 215.648 73.1046C214.928 72.3799 214.343 71.4967 213.893 70.455C213.442 69.4133 213.217 68.281 213.217 67.0582L213.284 56.2081ZM246.779 58.1045V64.8982H224.966V58.1045H246.779Z'
fill='currentColor'></path><path
d='M223.747 80.8521V89.4675H213.217V76.8757C213.217 76.8757 215.192 80.8521 220.456 80.8521H223.747Z'
fill='currentColor'></path>
</svg>
</div>

<style>
.logoWrapper {
display: flex;
flex-direction: column;
align-items: center;
}

.logo {
scale: 0.9;
position: relative;
filter: drop-shadow(rgba(255, 215, 77, 0.6) -1px -1px 2px)
drop-shadow(rgba(124, 127, 255, 0.6) 1px 1px 2px);
color: #e5e1e6;
}
.h {
position: absolute;
top: 22%;
left: 24%;
}

.text {
scale: 0.9;
margin-top: 0.5rem;
filter: drop-shadow(rgba(255, 215, 77, 0.6) -1px -1px 2px)
drop-shadow(rgba(124, 127, 255, 0.6) 1px 1px 2px);
color: #e5e1e6;
}
</style>

<script type='module'></script>
92 changes: 92 additions & 0 deletions src/components/serginogal/PasswordGenerator/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import styles from './styles.module.css'
import generatePassword from '../helpers/generatePassword.js'
import { Button, TextInput, OptIns, Slider, Toast } from '../components'

const initialOptions = [
{
id: 'uppercase',
title: 'Uppercase',
description: 'Include uppercase characters in your password',
value: true
},
{
id: 'lowercase',
title: 'Lowercase',
description: 'Include lowercase characters in your password',
value: true
},
{
id: 'numbers',
title: 'Numbers',
description: 'Include numbers characters in your password',
value: false
},
{
id: 'special_characters',
title: 'Special Characters',
description: 'Include special characters in your password',
value: false
}
]

const generatorChars = {
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
lowercase: 'abcdefghijklmnopqrstuvwxyz',
numbers: '0123456789',
special_characters: '!@#$%^&*()[]'
}

export default function PasswordGenerator() {
const toastRef = useRef()
const [options, setOptions] = useState(initialOptions)
const [password, setPassword] = useState('')
const [passwordLength, setPasswordLength] = useState(16)

const handleGeneratePassword = (options, passwordLength) => {
let chars = ''

options.forEach(option => {
const { id, value: isEnabled } = option
if (isEnabled) chars += generatorChars[id]
})
const pw = generatePassword(chars, passwordLength)
setPassword(pw)
}

const handleCopy = () => {
navigator.clipboard.writeText(password).then(
() => toastRef.current.displayToast('Password copied to clipboard')
)
}

const updateOptionValues = useCallback(
(arrIndex, key, newValue) => {
const updatedOptions = options.map((option, index) => {
if (arrIndex === index) {
return { ...option, [key]: newValue }
}
return option
})
setOptions(updatedOptions)
},
[options]
)

useEffect(() => {
handleGeneratePassword(options, passwordLength)
}, [options, passwordLength])

return (
<>
<Toast ref={toastRef} />
<div className={styles.generatorWrapper}>
<h2>Password Generator</h2>
<TextInput value={password} placeholder='Generated password...' onCopy={handleCopy} />
<Slider {...{ passwordLength, setPasswordLength }} title='Select password length'/>
<OptIns title={'Password generation opt-ins'} {...{ options, updateOptionValues }} />
<Button onClick={() => handleGeneratePassword(options, passwordLength)}>Generate Password</Button>
</div>
</>
)
}
18 changes: 18 additions & 0 deletions src/components/serginogal/PasswordGenerator/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.generatorWrapper {
margin-top: 1.5rem;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.generatorWrapper h2 {
text-align: center;
line-height: 2.5rem;
color: #e5e1e6;
font-size: 3rem;
font-family: Orbitron, sans-serif;
filter: drop-shadow(rgba(255, 215, 77, 0.6) -1px -1px 2px)
drop-shadow(rgba(124, 127, 255, 0.6) 1px 1px 2px);
}
43 changes: 43 additions & 0 deletions src/components/serginogal/components/Button/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import styles from './styles.module.css'

const GlassShineSVG = () => {
return (
<svg width='79' height='46' viewBox='0 0 79 46' fill='none' xmlns='https://www.w3.org/2000/svg'>
<g filter='url(#filter0_f_618_1123)'>
<path d='M42.9 2H76.5L34.5 44H2L42.9 2Z' fill='url(#paint0_linear_618_1123)'>

</path>
</g>
<defs>
<filter id='filter0_f_618_1123' x='0' y='0' width='78.5' height='46' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'><feFlood floodOpacity='0' result='BackgroundImageFix'>

</feFlood>
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'>

</feBlend>
<feGaussianBlur stdDeviation='1' result='effect1_foregroundBlur_618_1123'>

</feGaussianBlur>
</filter>
<linearGradient id='paint0_linear_618_1123' x1='76.5' y1='2.00002' x2='34.5' y2='44' gradientUnits='userSpaceOnUse'>
<stop stopColor='white' stopOpacity='0.6'>

</stop>
<stop offset='1' stopColor='white' stopOpacity='0.05'>

</stop>
</linearGradient>
</defs>
</svg>

)
}

export default function Button({ children, onClick }) {
return (
<button {...{ onClick }} className={styles.btn}>
<GlassShineSVG />
{children}
</button>
)
}
51 changes: 51 additions & 0 deletions src/components/serginogal/components/Button/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
@keyframes gradient {
100% {
background-size: 100% 100%;
}
}

.btn {
border: none;
border-radius: 2px;
clip-path: polygon(12px 0px, 100% 0px, 100% 72%, calc(100% - 12px) 100%, 0px 100%, 0px 12px);
font-family: 'JetBrains Mono', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
display: inline-block;
overflow: hidden;
padding: 8px 18px;
text-decoration: none;
text-transform: uppercase;
transition: all 0.2s ease 0s;
color: rgb(23, 15, 30);
background: linear-gradient(
90deg,
rgb(255, 215, 77) 0%,
rgb(64, 221, 255) 30%,
rgb(124, 127, 255) 85%
)
0% 0% / 200% 100%;
animation: gradient 1.5s ease 0s infinite alternate none running;
}

.btn:hover {
transform: rotate(2deg);
}

.btn:active {
transform: scale(0.95);
}

.btn:hover > svg {
transform: translateX(50%);
opacity: 1;
}

.btn svg {
left: -24px;
opacity: 0.3;
position: absolute;
top: -2px;
transition: all 0.4s cubic-bezier(0.5, -0.5, 0.5, 1.5) 0s;
}
22 changes: 22 additions & 0 deletions src/components/serginogal/components/OptIns/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import styles from './styles.module.css'

export default function OptIns({ title = 'title opt-ins', options = [], updateOptionValues }) {
const handleChange = (index, e) => updateOptionValues(index, 'value', e.target.checked)

return (
<div className={styles.optionsWrapper}>
<label className='title'>{title}</label>
{options.map(({ id, title, description, value }, index) => {
return (
<label key={id}>
<div>
<input type='checkbox' checked={value} onChange={e => handleChange(index, e)} />
<p>{title}</p>
</div>
<p>{description}</p>
</label>
)
})}
</div>
)
}
40 changes: 40 additions & 0 deletions src/components/serginogal/components/OptIns/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.optionsWrapper {
border: 1px solid #e5e1e6;
border-radius: 8px;
padding: 1rem;
margin-bottom: 2rem;
width: 100%;
transition: border-color 0.2s ease 0s;
}

.optionsWrapper:hover {
border-color: #40ddff;
}

.optionsWrapper:hover > label:first-child {
color: #40ddff;
}

.optionsWrapper label {
font-size: 1.1rem;
color: #e5e1e6;
text-shadow: rgb(255 215 77 / 60%) -1px -1px 6px, rgb(124 127 255 / 60%) 1px 1px 6px;
overflow-wrap: break-word;
}

.optionsWrapper label > div {
display: flex;
gap: 1ch;
align-items: center;
margin-top: 1rem;
}

.optionsWrapper label:first-child::before {
content: '[';
margin-right: 1ch;
}

.optionsWrapper label:first-child::after {
content: ']';
margin-left: 1ch;
}
Loading

1 comment on commit 5af8701

@vercel
Copy link

@vercel vercel bot commented on 5af8701 Oct 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

hacktoberfest-2022 – ./

hacktoberfest-2022-git-main-midudev-pro.vercel.app
hacktoberfest-2022-midudev-pro.vercel.app
hacktoberfest-2022.vercel.app

Please sign in to comment.