diff --git a/public/assets/images/signup/profile-pictures/upload.svg b/public/assets/images/signup/profile-pictures/upload.svg new file mode 100644 index 0000000..84c0567 --- /dev/null +++ b/public/assets/images/signup/profile-pictures/upload.svg @@ -0,0 +1,6 @@ + diff --git a/src/pages/signup/AdditionalQuestions.module.scss b/src/pages/signup/AdditionalQuestions.module.scss index 6f6c4f1..8596d8a 100644 --- a/src/pages/signup/AdditionalQuestions.module.scss +++ b/src/pages/signup/AdditionalQuestions.module.scss @@ -221,21 +221,27 @@ } .profileImages { - display: grid; - width: 100%; + display: flex; + width: 100vw; list-style: none; height: 100%; + left: -7%; + position: relative; overflow-y: hidden; overflow-x: auto; - grid-template-columns: 50px 50px 50px 50px; - grid-template-rows: auto; + justify-content: flex-start; + flex-direction: column; + flex-wrap: wrap; + padding: 20px 0; + button { - width: 15vw; - height: 15vw; + margin: 0 auto; + display: block; + width: 19vw; + height: 19vw; border-radius: 50%; font-size: 10px; - display: inline-block; outline: none; background-color: var(--ash-dust); color: var(--black-rock); @@ -248,6 +254,22 @@ border-width: 2px; box-shadow: 0px 0px 10px 0px var(--shamrock); } + + &.upload { + background-color: transparent; + border-color: var(--shamrock); + border-width: 2px; + font-size: 12px; + color: var(--shamrock); + + ion-icon { + width: 30px; + height: 30px; + font-size: 20px; + display: block; + margin: 0 auto; + } + } } ion-icon { @@ -296,7 +318,7 @@ height: 60px; --border-color: var(--rock); --color: var(--rock); - --background: transparent; + --background: var(--charcoal); --border-radius: 50%; --border-width: 2px; transition: opacity 0.3; diff --git a/src/pages/signup/AdditionalQuestions.tsx b/src/pages/signup/AdditionalQuestions.tsx index 4e01f1f..0cb4277 100644 --- a/src/pages/signup/AdditionalQuestions.tsx +++ b/src/pages/signup/AdditionalQuestions.tsx @@ -241,6 +241,12 @@ const AdditionalQuestions: React.FC = () => {