Changeset ad40ec0

Timestamp:

07/31/22 01:04:27 (23 months ago)

Author:

Viktor <mlviktor23@…>

Branches:

main

Children:

a6dcc46

Parents:

f5d4792

Message:

styled professor page

Location:

reactapp/src/Components

Files:

• OpinionCard.style.js (modified) (1 diff)
• OpinionTree.js (modified) (2 diffs)
• ProfessorCard.style.js (modified) (1 diff)

reactapp/src/Components/OpinionCard.style.js

@@ -57 +57 @@
   top: 50%;
   transform: translateY(-50%);
-  right: ${(props) => props.indent};
+  right: ${(props) => props.right};
+  transition: 0.5s;
+  &:hover {
+    color: ${(props) => props.color};
+  }
 `;

reactapp/src/Components/OpinionTree.js

@@ -41 +41 @@
               icon={solid("thumbs-up")}
               right={50 + "px"}
+              color="greenyellow"
             />
             <StyledFontAwesomeIcon
               icon={solid("thumbs-down")}
               right={10 + "px"}
+              color="indianred"
             />
-            <StyledFontAwesomeIcon icon={solid("reply")} right={90 + "px"} />
+            <StyledFontAwesomeIcon
+              icon={solid("reply")}
+              right={90 + "px"}
+              color="black"
+            />
           </OpinionReplyCardContent>
           {child.children.map((childOfChild) =>
@@ -84 +90 @@
                     icon={solid("thumbs-up")}
                     right={50 + "px"}
+                    color="greenyellow"
                   />
                   <StyledFontAwesomeIcon
                     icon={solid("thumbs-down")}
                     right={10 + "px"}
+                    color="indianred"
                   />
                   <StyledFontAwesomeIcon
                     icon={solid("reply")}
                     right={90 + "px"}
+                    color="black"
                   />
                 </OpinionCardContent>

reactapp/src/Components/ProfessorCard.style.js

@@ -3 +3 @@
 export const ProfessorCard = styled.div`
   background-color: papayawhip;
-  width: fit-content;
+  width: auto;
   padding: 10px;
   margin-bottom: 30px;