diff --git a/src/components/chatrow/chatrow.css b/src/components/chatrow/chatrow.css index 695a52f..e69de29 100644 --- a/src/components/chatrow/chatrow.css +++ b/src/components/chatrow/chatrow.css @@ -1,3 +0,0 @@ -.people-row:hover { - background-color: var(--hover-background-color); -} \ No newline at end of file diff --git a/src/components/chatrow/chatrow.jsx b/src/components/chatrow/chatrow.jsx index b8e8153..60dcf9d 100644 --- a/src/components/chatrow/chatrow.jsx +++ b/src/components/chatrow/chatrow.jsx @@ -3,7 +3,7 @@ import './chatrow.css'; const ChatRow = () => { return ( <> - +
diff --git a/src/components/friendrow/friendrow.css b/src/components/friendrow/friendrow.css index e69de29..7a87108 100644 --- a/src/components/friendrow/friendrow.css +++ b/src/components/friendrow/friendrow.css @@ -0,0 +1,7 @@ +.btn-delete-from-friends svg { + transition: .3s; +} + +.btn-delete-from-friends:hover svg { + fill: red; +} \ No newline at end of file diff --git a/src/components/friendrow/friendrow.jsx b/src/components/friendrow/friendrow.jsx index 4a2a72e..286624b 100644 --- a/src/components/friendrow/friendrow.jsx +++ b/src/components/friendrow/friendrow.jsx @@ -1,9 +1,10 @@ +import { Trash } from 'react-bootstrap-icons'; import './friendrow.css' const FriendRow = () => { return ( <> -
+
@@ -15,7 +16,9 @@ const FriendRow = () => {
- +
); diff --git a/src/components/leftmenu/leftmenu.css b/src/components/leftmenu/leftmenu.css index d317222..fa061e4 100644 --- a/src/components/leftmenu/leftmenu.css +++ b/src/components/leftmenu/leftmenu.css @@ -7,8 +7,4 @@ border-style: solid; border-width: 1px; border-color: rgba(0, 0, 0, 0); -} - -.left-menu-item:hover { - background-color: var(--hover-background-color); } \ No newline at end of file diff --git a/src/components/leftmenu/leftmenu.jsx b/src/components/leftmenu/leftmenu.jsx index 25af5aa..7c080be 100644 --- a/src/components/leftmenu/leftmenu.jsx +++ b/src/components/leftmenu/leftmenu.jsx @@ -11,7 +11,7 @@ const LeftMenu = ({ routes }) => { > { routes.map((route) => - + {route.menuIcon} {route.title} ) diff --git a/src/components/post/post.jsx b/src/components/post/post.jsx index 5c29b68..a43adf2 100644 --- a/src/components/post/post.jsx +++ b/src/components/post/post.jsx @@ -4,13 +4,12 @@ const Post = () => { return ( <>
-
- +
+
- +
-
+
Алексей Смирнов
@@ -44,60 +43,29 @@ const Post = () => {
-
- +
+ - + 734
-
- +
+ - + 344
-
- +
+ - + 1 diff --git a/src/components/postinputform/postinputform.css b/src/components/postinputform/postinputform.css index 222fe85..cbae08a 100644 --- a/src/components/postinputform/postinputform.css +++ b/src/components/postinputform/postinputform.css @@ -4,4 +4,9 @@ #title-image-block * { --bs-border-color: var(--alternative-font-color); +} + +#post-publication-button { + --bs-btn-bg: var(--dark-background-color); + --bs-btn-border-color: var(--dark-background-color); } \ No newline at end of file diff --git a/src/components/searchgroup/searchgroup.css b/src/components/searchgroup/searchgroup.css new file mode 100644 index 0000000..e535231 --- /dev/null +++ b/src/components/searchgroup/searchgroup.css @@ -0,0 +1,4 @@ +#button-addon:hover svg { + fill: white; + transition: .3s; +} \ No newline at end of file diff --git a/src/components/searchgroup/searchgroup.jsx b/src/components/searchgroup/searchgroup.jsx new file mode 100644 index 0000000..4926a0f --- /dev/null +++ b/src/components/searchgroup/searchgroup.jsx @@ -0,0 +1,17 @@ +import { Search } from "react-bootstrap-icons"; +import './searchgroup.css'; + +const SearchGroup = () => { + return ( + <> +
+ + +
+ + ); +}; + +export default SearchGroup; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 69bfd3e..c72f1c6 100644 --- a/src/index.css +++ b/src/index.css @@ -26,7 +26,7 @@ --light-font-color: var(--color-black); --alternative-font-color: var(--color-black); --alternative-backgrond-color: var(--light-background-color); - --hover-background-color: rgba(0, 0, 0, 0.05); + --hover-background-color: rgba(0, 0, 0, 0.08); } * { @@ -51,6 +51,11 @@ a { --dark-font-color: var(--color-white); --alternative-font-color: var(--color-gray); --alternative-backgrond-color: var(--color-black); - --hover-background-color: rgba(255, 255, 255, 0.05); + --hover-background-color: rgba(255, 255, 255, 0.2); } +} + +.hoverable:hover { + background-color: var(--hover-background-color); + cursor: pointer; } \ No newline at end of file diff --git a/src/pages/FriendsPage.jsx b/src/pages/FriendsPage.jsx index 1093aab..72d9181 100644 --- a/src/pages/FriendsPage.jsx +++ b/src/pages/FriendsPage.jsx @@ -1,6 +1,6 @@ import Wrapper from "../components/wrapper/wrapper"; import Center from "../components/center/center"; -import { Search } from "react-bootstrap-icons"; +import SearchGroup from "../components/searchgroup/searchgroup"; import FriendRow from "../components/friendrow/friendrow"; const FriendsPage = () => { @@ -8,12 +8,7 @@ const FriendsPage = () => { <>
-
- - -
+