Merge pull request #252 from universi-me/feat#246/editar-criar-conteu…

…dos-materiais

FEAT #246 & CHANGE #238: Editar e criar Conteúdos e Materiais & Mudança de design em tela de grupo e em header

---------

Co-authored-by: Lucas Perônico Barbotin <[email protected]>

src/components/ActionButton/ActionButton.less

@@ -0,0 +1,20 @@
+.action-button-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    border-radius: 0.5rem;
+    color: var(--font-color-v1);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); 
+    cursor: pointer;
+
+    i{
+        padding: 2px;
+        font-size: larger;
+    }
+
+    .action-button-name{
+        text-align: center;
+        padding: 0.5rem;
+    }
+}

src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from "react"
+import "./ActionButton.less"
+
+export interface ActionButtonProps{
+    name : string
+    buttonProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+export function ActionButton(props : ActionButtonProps){
+    const className = ["action-button-container", props.buttonProps?.className]
+        .filter(c => !!c && c.length > 0)
+        .join(" ");
+
+
+    return(
+        <div {...props.buttonProps} className={className}>
+            <i className="bi bi-plus"></i>
+            <div className="action-button-name">
+                {props.name}
+            </div>
+        </div>
+    )
+
+
+}

src/components/Filter/Filter.less

@@ -0,0 +1,37 @@
+
+#filter-wrapper {
+    border-radius: .5rem;
+    border: 2px solid var(--primary-color);
+    outline: 0px solid var(--primary-color);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: .25em;
+
+    color: var(--primary-color);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); 
+    width: 16.5rem;
+
+    .filter-icon {
+        margin-left: .15em;
+        margin-right: .5em;
+        width: 4rem;
+    }
+
+    .filter-input {
+        border: none;
+        background-color: transparent;
+        outline: none;
+
+        color: var(--primary-color);
+        font-weight: var(--font-weight-default);
+
+        width: 25em;
+
+        &::placeholder {
+            color: inherit;
+            opacity: 50%;
+        }
+    }
+}

src/components/Filter/Filter.tsx

@@ -0,0 +1,21 @@
+
+import { setStateAsValue } from "@/utils/tsxUtils";
+import "./Filter.less"
+
+interface FilterProps{
+    setter: React.Dispatch<React.SetStateAction<string>>,
+    placeholderMessage : string
+}
+
+export function Filter({setter, placeholderMessage} : FilterProps){
+
+    return(
+        <div id="filter-wrapper">
+            <i className="bi bi-search filter-icon"/>
+            <input type="search" name="filter-groups" id="filter-groups" className="filter-input"
+                onChange={setStateAsValue(setter)} placeholder={placeholderMessage}
+            />
+        </div>
+    )
+
+}

src/components/GroupTabButton/GroupTabButton.tsx

@@ -0,0 +1,13 @@
+export interface TabButtonProps{
+    executeFunction: () => void,
+    text : string
+
+}
+
+export function GroupTabButton({executeFunction, text} : TabButtonProps){
+
+    return(
+        <></>
+    )
+
+}

src/components/ProfileImage/ProfileImage.tsx

@@ -16,6 +16,6 @@ export function ProfileImage(props: ProfileImageProps) {
     return (
         imageUrl
             ? <img {...genericElementProps} className={className} src={imageUrl} />
-            : <div {...genericElementProps} className={className} style={{...genericElementProps.style, backgroundColor: DEFAULT_NO_IMAGE_COLOR}} />
+            : <img {...genericElementProps} className={className} src={"/assets/imgs/default_avatar.png"} />
     );
 }

src/components/ProfileInfo/ProfileBio/ProfileBio.less

@@ -2,12 +2,14 @@
 @import url(/src/layouts/colors.less);
 
 .profile-bio-component {
-    background-color: transparent !important;
+    background-color: white !important;
     border: solid #0091b8 1px !important;
-    border-radius: 10px !important;
+    border-radius: var(--border-radius) !important;
     margin-bottom: 30px !important;
     width: 100%;
 
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));  
+
     .edit-button {
         display: flex;
         flex-direction: row-reverse;
@@ -17,12 +19,12 @@
     }
 
     .image {
-        width: 6em;
-        border: 2px solid #FFF;
+        width: 7em;
+        border: 3px solid #FFF;
     }
 
     .name {
-        margin-top: .25em;
+        margin: 0.44rem 0;
         text-align: center;
 
         font-size: 1.25rem;
@@ -48,7 +50,7 @@
 
         width: 100%;
         padding: 0  !important;
-        margin-top: -3em;
+        margin-top: -3.5em;
         margin-bottom: 1rem;
 
         font-size: 0.8rem;
@@ -60,15 +62,18 @@
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
-        border-radius: 10px 10px 0px 0px;
+        border-radius: var(--border-radius) var(--border-radius) 0px 0px;
     }
 
     .content-count{
         border-top: solid 1px var(--primary-color);
-        padding: 1rem 1rem;
+        padding: 0.7rem 0.7rem;
 
         .links-wrapper {
             width: fit-content;
+            display: flex;
+            justify-content: center;
+            width: 100%;
 
             .profile-bio-link {
                 color: @font-color-v2;
@@ -79,6 +84,8 @@
 
                 will-change: text-decoration;
 
+                height: 1rem;
+
                 &:hover {
                     text-decoration: underline;
                 }