fix: styles

client/src/app/onboarding/lib/const/steps.tsx

@@ -16,7 +16,7 @@ import {
   managerTools,
   methodologies,
   programmingLanguages,
-  recommendedLanguages,
+  // recommendedLanguages,
 } from '@/shared/constant';
 import { SocialLinks } from '@/app/onboarding/ui/steps/social-links/social-links';
 
@@ -103,7 +103,7 @@ export const developerSteps: StepProps[] = [
     step: (
       <IconsSelector
         icons={programmingLanguages}
-        recommendedIcons={recommendedLanguages}
+        // recommendedIcons={recommendedLanguages}
         formFieldToUpdate='coreTools'
         description='All Languages'
       />

client/src/app/onboarding/onboarding.module.scss

@@ -2,18 +2,26 @@
   margin-bottom: 32px;
 }
 
-.form {
-  width: 100%;
-  height: 100%;
-}
-
 .container {
-  height: 100dvh;
+  min-height: 100dvh;
   width: 100%;
   background: var(--cards-color);
+
+  scrollbar-width: none; // For Firefox
+  -ms-overflow-style: none; // For Internet Explorer and Edge
+
+  ::-webkit-scrollbar {
+    display: none; // For Chrome, Safari, and Opera
+  }
 }
 
 .illustration > svg {
   width: 100%;
   height: 100%;
 }
+
+.sections {
+  min-height: 100dvh;
+
+}
+

client/src/app/onboarding/page.tsx

@@ -5,15 +5,15 @@ import { ProgressSection } from '@/app/onboarding/ui/progress-section/progress-s
 import { ActionSection } from '@/app/onboarding/ui/action-section/action-section';
 import { useSteps } from './lib/hooks/useSteps';
 import { useFormContext } from 'react-hook-form';
-import styles from "./onboarding.module.scss"
+import styles from './onboarding.module.scss';
 
 const OnboardingPage = () => {
   const { step, handleNext, handleBack } = useSteps();
   const { watch } = useFormContext();
   const steps = watch('steps');
 
   return (
-    <Flex width={'100%'} height={'100%'}>
+    <Flex width={'100%'} className={styles.sections}>
       <ProgressSection step={step}>
         <Flex direction='column' flex={1} width='100%'>
           <Flex className={styles.illustration} align='center' flex={1} width='100%'>

client/src/app/onboarding/ui/action-section/action-section.module.scss

@@ -3,7 +3,7 @@
   background: var(--cards-color);
   padding: 48px 55px;
 
-  @media (width <= 768px) {
+  @media (width <= 981px){
     padding: 36px 30px;
     flex-basis: 100%;
   }

client/src/app/onboarding/ui/action-section/action-section.tsx

@@ -21,19 +21,14 @@ export const ActionSection = ({ step, handleNext, handleBack }: ActionSectionPro
   const isSubmissionStep = steps[step].submissionStep;
 
   return (
-    <Flex direction={'column'} className={styles.container} height='100%'>
+    <Flex direction={'column'} className={styles.container}>
       <Flex justify={'space-between'} align={'center'}>
         <Typography className={styles.title} size={'heading_l'} color={'greenBright'}>
           {steps[step].title}
         </Typography>
         <NeedHelp />
       </Flex>
-      <Flex
-        height='100%'
-        maxHeight=''
-        justify='center'
-        align={steps[step].centered ? 'center' : 'start'}
-      >
+      <Flex flex={1} justify='center' align={steps[step].centered ? 'center' : 'start'}>
         {steps[step].step}
       </Flex>
       <Flex className={styles.buttons_container} justify={'space-between'}>

client/src/app/onboarding/ui/progress-section/progress-section.module.scss

@@ -7,7 +7,7 @@
     padding: 48px 24px;
   }
 
-  @media (width <= 768px) {
+  @media (width <= 981px) {
     display: none;
   }
 }

client/src/app/onboarding/ui/steps/icons-selector/icons-selector.module.scss

@@ -2,21 +2,3 @@
   margin-bottom: 24px;
 }
 
-.all_icons {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
-  max-height: 37vh;
-  overflow: auto;
-  padding-right: 10px;
-
-  @media (width <= 1050px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-
-  @media (width <= 480px) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-

client/src/app/onboarding/ui/steps/icons-selector/icons-selector.tsx

@@ -2,25 +2,24 @@ import { Flex } from '@/shared/ui';
 import { FC, useState } from 'react';
 import { Search } from '../../shared/search/search';
 import styles from './icons-selector.module.scss';
-import isEmpty from 'lodash.isempty';
 import { useFormContext } from 'react-hook-form';
 import { Placeholders } from '@/app/onboarding/ui/steps/icons-selector/ui/placeholders/placeholders';
 import { Options } from '@/app/onboarding/ui/steps/icons-selector/ui/options/options';
-import { IOption, IRoleToOptionsMap } from '@/shared/interfaces';
+import { IOption } from '@/shared/interfaces';
 
 const MAX_ICONS = 8;
 
 interface IconsSelector {
   icons: IOption[];
-  recommendedIcons?: IRoleToOptionsMap;
+  // recommendedIcons?: IRoleToOptionsMap;
   formFieldToUpdate: string;
   description: string;
   type?: 'text' | 'icon';
 }
 
 export const IconsSelector: FC<IconsSelector> = ({
   icons,
-  recommendedIcons,
+  // recommendedIcons,
   formFieldToUpdate,
   description,
   type = 'icon',
@@ -34,7 +33,6 @@ export const IconsSelector: FC<IconsSelector> = ({
   } = useFormContext();
 
   const selectedIcons: IOption[] = watch(formFieldToUpdate);
-  const focus: string = watch('focus');
 
   function toggleIcon(clickedIcon: IOption) {
     clearErrors(formFieldToUpdate);
@@ -76,19 +74,8 @@ export const IconsSelector: FC<IconsSelector> = ({
           />
         </Flex>
       </div>
-      <Flex direction='column' gap='24px'>
-        {text === '' && !isEmpty(recommendedIcons) && (
-          <Options
-            icons={recommendedIcons[focus] ?? []}
-            selectedIcons={selectedIcons}
-            type={type}
-            filterFn={filterBySearch}
-            toggleFn={toggleIcon}
-            description='Recommended for you'
-          />
-        )}
+      <Flex direction='column' gap='8px'>
         <Options
-          className={styles.all_icons}
           icons={icons}
           selectedIcons={selectedIcons}
           type={type}

client/src/app/onboarding/ui/steps/icons-selector/ui/options/options.module.scss

@@ -1,17 +1,18 @@
-.recommended_icons {
+.all_icons {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
-  max-height: 10vh;
+  max-height: 35vh;
   overflow: auto;
   padding-right: 10px;
 
-  @media (width <= 890px) {
-    grid-template-columns: repeat(3, 1fr);
+  @media (width <= 981px) {
+    max-height: 45vh;
   }
 
+
   @media (width <= 480px) {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 

client/src/app/onboarding/ui/steps/icons-selector/ui/options/options.tsx

@@ -15,7 +15,6 @@ interface OptionsProps {
 }
 
 export const Options: FC<OptionsProps> = ({
-  className = styles.recommended_icons,
   icons,
   selectedIcons,
   filterFn,
@@ -28,7 +27,7 @@ export const Options: FC<OptionsProps> = ({
       <Typography size='body_s' color='greyNormal'>
         {description}
       </Typography>
-      <div className={className}>
+      <div className={styles.all_icons}>
         {icons
           .filter(filterFn)
           .map((icon, index) =>
@@ -42,7 +41,6 @@ export const Options: FC<OptionsProps> = ({
               />
             ) : (
               <BadgeText
-                className={styles.badge_text}
                 isNotActive={!selectedIcons.find(option => option.label === icon.label)}
                 onClick={() => toggleFn(icon)}
                 data={icon.label}

client/src/app/onboarding/ui/steps/specialty/specialty.tsx

@@ -26,8 +26,8 @@ export const Specialty = () => {
   };
 
   return (
-    <Flex direction='column' width={'100%'} maxWidth='400px'>
-      <Flex direction='column' gap='48px' padding='0 0 24px 0'>
+    <Flex direction='column' width={'100%'} gap='24px' padding='24px 0' maxWidth='400px'>
+      <Flex direction='column' gap='48px'>
         <Flex className={styles.specialties} gap='8px'>
           {principalSpecialities.map(speciality => (
             <Flex className={styles.speciality} key={speciality.name}>

client/src/entities/user/ui/user-card/user-card.tsx

@@ -35,7 +35,7 @@ export const UserCard = forwardRef<HTMLDivElement, UserCardProps>(
         </div>
         <div className={styles.content}>
           <div className={styles.name}>
-            {fullName.split(' ')[0]}, {years}
+            {fullName?.split(' ')[0]}, {years}
             <ImageLoader
               src={countryFlags[country] ?? '/images/placeholder.png'}
               alt={fullName}

client/src/shared/ui/badge/badge-icon/badge-icon.module.scss

@@ -8,8 +8,4 @@
   display: flex;
   justify-content: center;
   align-items: center;
-
-  &:only-child {
-    width: 90px;
-  }
 }

client/src/widgets/modals/info-modal/user/desktop/desktop.tsx

@@ -25,7 +25,7 @@ export const UserDesktop: FC<InfoModalUserProps> = ({ user, isOpenModal, handleC
             <Flex gap='8px' direction='column'>
               <Flex gap='8px' align='center'>
                 <Typography size='heading_s'>
-                  {user?.fullName.split(' ')[0]}, {age}
+                  {user?.fullName?.split(' ')[0]}, {age}
                 </Typography>
                 <ImageLoader
                   width={24}

client/src/widgets/modals/info-modal/user/phone/phone.tsx

@@ -45,7 +45,7 @@ export const UserPhone: FC<InfoModalUserProps> = ({ user, isOpenModal, handleClo
                 <Flex direction='column' gap='8px'>
                   <Flex gap='8px' align='center'>
                     <Typography size='heading_s'>
-                      {user?.fullName.split(' ')[0]}, {age}
+                      {user?.fullName?.split(' ')[0]}, {age}
                     </Typography>
                     <ImageLoader
                       width={24}