Merge branch 'issue-289/ADD-profile-icons' into 'develop'

Issue #289: ADD Icons on profile page (verified)

See merge request !270

public/ocupacao.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #b9cccc;
+      }
+
+      .cls-2 {
+        clip-path: url(#clip-path);
+      }
+
+      .cls-3 {
+        fill: none;
+      }
+    </style>
+    <clipPath id="clip-path">
+      <circle id="Ellipse_112" data-name="Ellipse 112" class="cls-1" cx="14" cy="14" r="14" transform="translate(563 361)"/>
+    </clipPath>
+  </defs>
+  <g id="Mask_Group_22" data-name="Mask Group 22" class="cls-2" transform="translate(-563 -361)">
+    <g id="_3c465226d6ca6573adddd4eb85572565" data-name="3c465226d6ca6573adddd4eb85572565" transform="translate(563 361)">
+      <path id="Path_203" data-name="Path 203" class="cls-3" d="M0,0H28V28H0Z"/>
+      <path id="Path_204" data-name="Path 204" class="cls-1" d="M23.333,7H18.667V4.667a2.325,2.325,0,0,0-2.333-2.333H11.667A2.325,2.325,0,0,0,9.333,4.667V7H4.667A2.315,2.315,0,0,0,2.345,9.333L2.333,22.167A2.325,2.325,0,0,0,4.667,24.5H23.333a2.325,2.325,0,0,0,2.333-2.333V9.333A2.325,2.325,0,0,0,23.333,7Zm-7,0H11.667V4.667h4.667Z"/>
+    </g>
+  </g>
+</svg>

public/usuario-perfil.svg

+<svg id="seguir" xmlns="http://www.w3.org/2000/svg" width="28.003" height="28.004" viewBox="0 0 28.003 28.004">
+  <circle id="Ellipse_118" data-name="Ellipse 118" cx="7.239" cy="7.239" r="7.239" transform="translate(6.763 0)" fill="#b9cccc"/>
+  <path id="Path_46" data-name="Path 46" d="M28,30.189c0,5.313-28,5.313-28,0S6.266,20.57,14,20.57,28,24.875,28,30.189Z" transform="translate(0 -6.17)" fill="#b9cccc"/>
+</svg>

public/usuario-verificado.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #b9cccc;
+      }
+
+      .cls-2 {
+        clip-path: url(#clip-path);
+      }
+    </style>
+    <clipPath id="clip-path">
+      <circle id="Ellipse_111" data-name="Ellipse 111" class="cls-1" cx="14" cy="14" r="14" transform="translate(563 309)"/>
+    </clipPath>
+  </defs>
+  <g id="Mask_Group_21" data-name="Mask Group 21" class="cls-2" transform="translate(-563 -309)">
+    <g id="_0a659199c9168d499819ff89c5c39cc1" data-name="0a659199c9168d499819ff89c5c39cc1" transform="translate(563.016 309.02)">
+      <path id="Path_202" data-name="Path 202" class="cls-1" d="M26.766,11.2q-.871-.843-1.744-1.7Q25,8.322,24.96,7.138A4.228,4.228,0,0,0,23.687,4.29a4.226,4.226,0,0,0-2.853-1.27q-1.186-.037-2.372-.061-.855-.871-1.7-1.739a3.805,3.805,0,0,0-5.566,0q-.845.87-1.7,1.743-1.186.024-2.372.061A4.37,4.37,0,0,0,3,7.142Q2.964,8.326,2.939,9.51q-.874.855-1.744,1.7a3.787,3.787,0,0,0,0,5.55q.871.842,1.748,1.7.023,1.185.061,2.37A4.361,4.361,0,0,0,7.129,24.94Q8.315,24.978,9.5,25q.855.87,1.7,1.738a3.811,3.811,0,0,0,5.57,0q.844-.869,1.7-1.741,1.186-.025,2.372-.062a4.369,4.369,0,0,0,4.126-4.118q.037-1.183.061-2.367.874-.855,1.745-1.7a3.779,3.779,0,0,0-.008-5.551ZM20.933,12.21c-2.358,2.45-4.754,4.955-7.11,7.44a2.051,2.051,0,0,1-1.489.643h-.009a2.089,2.089,0,0,1-1.491-.64Q8.944,17.7,7.042,15.765a2.04,2.04,0,0,1,.042-2.918,2.1,2.1,0,0,1,2.949.037q1.13,1.158,2.263,2.323c1.87-1.96,3.75-3.932,5.6-5.873a2.076,2.076,0,0,1,2.938-.043A2.046,2.046,0,0,1,20.933,12.21Z"/>
+    </g>
+  </g>
+</svg>

src/app/components/Overlay.js

@@ -76,7 +76,7 @@ export default function Overlay({
             // Passar o parâmetro type={twoColumns} para páginas que possuem duas colunas (ex: InfiniteScroll, Perfil)
             type === "twoColumns" ?
               <div className="flex w-full">
-                <div className="fixed pt-[160px] w-[150px] overflow-y-auto h-screen">
+                <div className="fixed pt-[160px] w-[150px] overflow-y-auto h-screen  scrollbar-none">
                   <SideBar setFilterState={setFilterState} filterState={filterState} />
                 </div>
 
@@ -89,7 +89,7 @@ export default function Overlay({
               <div
                 className="grid w-full  pt-[160px] h-dvh text-base 2xl:grid-cols-[150px_minmax(0,1fr)_500px] xl:grid-cols-[150px_minmax(0,1fr)_400px] grid-cols-[150px_minmax(0,1fr)]"
               >
-                <div className="min-h-0 overflow-y-auto">
+                <div className="min-h-0 overflow-y-auto scrollbar-none">
                   <SideBar setFilterState={setFilterState} filterState={filterState} />
                 </div>
                 {children}

src/app/perfil/[id]/components/UserCard.js

@@ -18,6 +18,7 @@ import FollowingCards from "./FollowingCards";
 import FollowersCards from "./FollowersCards";
 import ProfileComplaints from "./ProfileComplaints";
 import ProfileAchievementsMenu from "./ProfileAchievementsMenu";
+import { Person } from "@mui/icons-material";
 
 const roles = [
     {
@@ -232,7 +233,8 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
                             <div className='flex flex-row max-sm:flex-col-reverse'>
 
                                 <div className='flex flex-row w-2/3 max-sm:w-full  items-center text-darkGray-HC-white font-bold max-sm:text-3xl text-4xl max-sm:mr-5 max-sm:mb-6'>
-                                    <div className='bg-lightGray-HC-white  shrink-0 rounded-full max-lg:w-[20px] max-lg:h-[20px] w-[28px] h-[28px] mx-4 aspect-square p-0 m-0' /> {profileData["name"]}
+                                    <img src="/usuario-perfil.svg" alt="perfil" className='flex aspect-square mr-4 max-lg:mx-4 w-[28px] h-[28px] rounded-full' />
+                                    <div className='shrink-0 max-lg:w-[20px] max-lg:h-[20px] h-[28px] p-0 m-0' /> {profileData["name"]}
 
                                 </div>
                                 {/* Medalhas de conquistas do usuário*/}
@@ -242,7 +244,8 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
 
                             {profileData["email"] && profileData["id"] !== 35342 && (
                                 <div className='mb-3 truncate flex flex-row items-center text-darkGray-HC-white max-sm:text-base text-2xl'>
-                                    <div className='bg-lightGray-HC-white  shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
+                                    <img src="/usuario-verificado.svg" alt="ocupacao" className='flex aspect-square mr-4 max-lg:mx-4 w-[28px] h-[28px] rounded-full' />
+                                    <div className='shrink-0 h-[28px] max-lg:w-[20px] max-lg:h-[20px]  max-lg:mx-4' />
                                     {profileData["email"]}
                                 </div>
                             )}
@@ -250,8 +253,10 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
                             <div className='mb-3'>
                                 {translateItems &&
                                     <div className='flex flex-row items-center mt-1 text-darkGray-HC-white max-sm:text-base text-xl'>
-                                        <div className='bg-lightGray-HC-white  shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
-                                        {translateItems}</div>
+                                        <img src="/ocupacao.svg" alt="verificado" className='flex aspect-square mr-4 max-lg:mx-4 w-[28px] h-[28px] rounded-full' />
+                                        <div className='shrink-0 h-[28px] max-lg:w-[20px] max-lg:h-[20px]' />
+                                        {translateItems}
+                                    </div>
                                 }
                             </div>
                         </div>