Changeset f5d4792 for reactapp/src/Components/OpinionCard.style.js

Timestamp:

07/30/22 23:57:30 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

ad40ec0

Parents:

5347491

Message:

styled professor page

File:

• reactapp/src/Components/OpinionCard.style.js (modified) (1 diff)

reactapp/src/Components/OpinionCard.style.js

@@ -1 +1 @@
 import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const OpinionCard = styled.div`
   background-color: papayawhip;
-  width: fit-content;
+  width: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 10px;
+  border: 1px solid black;
+`;
+
+export const OpinionCardContent = styled.div`
+  padding: 5px;
+  transition: 0.5s;
+  &:hover {
+    background-color: seashell;
+  }
+  position: relative;
+`;
+
+export const OpinionCardContentTitle = styled.p`
+  font-weight: bold;
+`;
+
+export const OpinionCardContentTime = styled.p`
+  font-size: small;
+  font-style: italic;
 `;
 
 export const OpinionReplyCard = styled.div`
-  background-color: lavender;
-  width: fit-content;
-  margin-top: 7px;
-  margin-bottom: 7px;
+  background-color: papayawhip;
+  width: auto;
   margin-left: ${(props) => props.indent};
+  padding: 10px;
+  border-left: thick solid tan;
 `;
+
+export const OpinionReplyCardContent = styled.div`
+  padding: 5px;
+  transition: 0.5s;
+  &:hover {
+    background-color: seashell;
+  }
+  position: relative;
+`;
+
+export const OpinionReplyCardContentTime = styled.p`
+  font-size: small;
+  font-style: italic;
+`;
+
+export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  color: darkgrey;
+  display: block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: ${(props) => props.indent};
+`;