Change#309/mudanças em css

src/components/ProfileInfo/ProfileGroups/ProfileGroups.less

@@ -10,31 +10,50 @@
     height: fit-content;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); 
 
+    .header-container{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: var(--primary-color);
+        max-height: 5rem;
+        justify-content: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .group-background-image{
+        opacity: 30%;
+        max-width: 10rem;
+        max-height: 10rem;
+        align-self: flex-start;
+        margin-left: -2rem;
+        margin-top: 1rem;
+    }
+
     .groups-name {
         text-align: center;
         padding: 1.15rem;
-        background-color: var(--primary-color);
         color: white;
         font-weight: var(--font-weight-bold);
         font-style: normal;
-        margin-bottom: 20px;
         font-size: 1.25rem;
+        position: absolute;
     }
 
     .items-wrapper {
-        margin: 0 auto;
-        width: 90%;
+        display: flex;
+        justify-content: center;
 
         .show-items {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            column-gap: 1em;
-            row-gap: 1em;
+            display: flex;
+            flex-wrap:wrap;
+            max-width: 80%;
+            column-gap: 1rem;
+            justify-content: space-evenly;
 
             .group-item img {
                 border-radius: 5px;
                 border: solid 1px var(--primary-color);
-                width: 60px;
+                width: 4em;
                 aspect-ratio: 1;
                 display: flex;
                 align-items: center;

src/components/ProfileInfo/ProfileGroups/ProfileGroups.tsx

@@ -12,7 +12,10 @@ export type ProfileGroupsProps = {
 export function ProfileGroups(props: ProfileGroupsProps) {
     return (
         <div className="profile-groups-component">
-            <h1 className="groups-name">Meus grupos</h1>
+            <div className="header-container">
+                <img src="/assets/imgs/group2.png" className="group-background-image"></img>
+                <h1 className="groups-name">Meus grupos</h1>
+            </div>
             <div className="items-wrapper">
                 {
                     props.groups.length <= 0

src/components/UniversiForm/UniversiForm.less

@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex-wrap: wrap;
 
     .image-preview {
         height: 5rem;
@@ -53,9 +54,11 @@
     background-color: white;
     border-radius: var(--border-radius);
 
-    width: 45rem;
+    width: 80vw;
     overflow: hidden;
 
+    max-height: 90vh;
+
     box-sizing: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
 
     @header-padding: 1rem;

src/components/UniversiHeader/components/WelcomeUser/WelcomeUser.less

@@ -55,6 +55,8 @@ img.logged-user-image {
     cursor: pointer;
     overflow: hidden;
     margin-top: 3.5rem;
+    z-index: 9999;
+    margin-right: 2rem;
 }
 
 .submenu-item{

src/pages/Group/GroupTabs/GroupFeed/GroupFeed.less

@@ -8,17 +8,29 @@
             display: flex;
             flex-direction: row;
             align-items: start;
+            flex-wrap: wrap;
+            justify-content: space-between;
 
             height: fit-content;
 
             width: 100%;
+
+            .feed-user-info{
+                text-decoration: none;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                color: var(--font-color-v2);
+                gap: 1rem;
+                font-weight: bold;
+            }
 
             &:not(:last-of-type) {
                 margin-bottom: 1.5rem;
             }
 
             .feed-image {
-                @side: 8rem !important;
+                @side: 3em !important;
                 width: @side;
                 height: @side;
                 aspect-ratio: 1;
@@ -28,23 +40,24 @@
             }
 
             .info {
-                margin-left: 3rem;
 
                 color: @font-color-v2;
                 display: flex;
                 flex-direction: row;
                 width: 100%;
                 justify-content: space-between;
+                margin-top: 1rem;
+
                 .group-name {
                     color: inherit;
                     text-decoration: none;
                     font-weight: @font-weight-semibold;
                     font-size: 1.5rem;
                 }
 
-                .group-description {
+                .feed-description {
                     margin-top: .75rem;
-                    text-align: justify;
+                    text-align: left;
                 }
             }
             .options-button {

src/pages/Group/GroupTabs/GroupFeed/GroupFeed.tsx

@@ -132,15 +132,12 @@
             <div className="feed-item tab-item">
                 {
                     author
-                    ?
-                        <Link to={`/profile/${author?.user.name}`}>
+                    ?   
+                    <>
+                        <Link to={`/profile/${author?.user.name}`} className="feed-user-info">
                             <img className="feed-image" src={author.imageUrl} />
+                            <p>{post.author.firstname} {post.author.lastname}</p>
                         </Link>
-                    : <></>
-                }
-
-                <div className="info">
-                    <p className="group-description">{post.content}</p>
                         { !hasAvailableOption(OPTIONS_DEFINITION) || !canSeeMenu(post) ? null :
                             <DropdownMenu.Root>
                                 <DropdownMenu.Trigger asChild>
@@ -163,6 +160,12 @@
                                 </DropdownMenu.Content>
                             </DropdownMenu.Root>
                         }
+                    </>
+                    : <></>
+                }
+
+                <div className="info">
+                    <p className="feed-description">{post.content}</p>
                 </div>
             </div>
         )

src/pages/Group/GroupTabs/GroupPeople/GroupPeople.less

@@ -2,18 +2,18 @@
 @import url(/src/layouts/fonts.less);
 
 #group-page #people .people-list {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     row-gap: 1.5rem;
-    row-gap: 1rem;
-    column-gap: .5rem;
+    column-gap: 1.5rem;
+    justify-content: center;
 
     .person-item {
         display: flex;
         flex-direction: row;
-        align-items: start;
 
-        width: 95%;
+        width: 25rem;
 
         text-align: center;
 

src/pages/Group/GroupTabs/GroupTabs.less

@@ -87,6 +87,9 @@
             display: flex;
             gap: 1rem;
 
+            flex-wrap: wrap;
+            justify-content: right;
+
         }
     }
 

src/pages/singin/Singin.tsx

@@ -11,6 +11,16 @@ export default function Singin() {
 
     return (
     <div>
+      <footer className="waves-footer">
+        <div className="waves">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+            <path
+              fill-opacity="1"
+              d="M0,160L60,133.3C120,107,240,53,360,74.7C480,96,600,192,720,245.3C840,299,960,309,1080,309.3C1200,309,1320,299,1380,293.3L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
+            ></path>
+          </svg>
+        </div>
+      </footer>
       <div className="signin-container">
         <div className="logo">
           {/* <UniversiLogo /> */}
@@ -22,16 +32,6 @@ export default function Singin() {
         <div className="signin">
           <SinginForm></SinginForm>
         </div>
-        <footer className="waves-footer">
-          <div className="waves">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
-              <path
-                fill-opacity="1"
-                d="M0,160L60,133.3C120,107,240,53,360,74.7C480,96,600,192,720,245.3C840,299,960,309,1080,309.3C1200,309,1320,299,1380,293.3L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
-              ></path>
-            </svg>
-          </div>
-        </footer>
       </div>
     </div>
   );

src/pages/singin/signin.css

@@ -3,8 +3,16 @@
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
-    margin-top: 10rem;
     gap: 5rem;
+
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+
+    flex-direction: row;
+    width: 100%;
 }
 
 .logo {
@@ -16,7 +24,6 @@
     letter-spacing: 2px;
     gap: 2px;
 
-    margin-right: 3rem;
 }
 
 .logo img {
@@ -30,11 +37,15 @@
     text-align: 10px;
     color: var(--font-color-v2);
 
+    margin-left: 2rem;
+
     margin-top: 1em;
 }
 
 footer {
     width: 100vw;
+    position: fixed;
+    top: 100%;
 }
 
 .waves svg {
@@ -49,4 +60,4 @@ footer {
         position: relative;
         margin-bottom: -10px;
     }
-}
+}

src/pages/singin/signinForm.css

@@ -1,6 +1,4 @@
 .container {
-    width: fit-content;
-    height: fit-content;
     background-color: white;
     display: flex;
     align-items: center;

src/services/UniversimeApi/Feed.ts

@@ -12,6 +12,7 @@ export type GetGroupPost_RequestDTO = {
     groupId : string;
 }
 
+
 export type DeleteGroupPost_RequestDTO = {
         postId  : string;
         groupId : string;