diff --git a/frontend/src/components/favorites/FavoritesSmallList.js b/frontend/src/components/favorites/FavoritesSmallList.js index 9e998316..0f354ed8 100644 --- a/frontend/src/components/favorites/FavoritesSmallList.js +++ b/frontend/src/components/favorites/FavoritesSmallList.js @@ -1,5 +1,5 @@ import React, { useContext, useMemo, useRef, useState } from 'react'; -import { MdAdd } from 'react-icons/md'; +import { MdAdd, MdDeleteForever } from 'react-icons/md'; import { Link } from 'react-router-dom'; import SearchList from '../sharedComponents/SearchList'; @@ -210,7 +210,9 @@ export default ({ listName, videos, style }) => { removeFavoriteVideo(lists, setLists, listName, v.id)} - /> + > + + diff --git a/frontend/src/components/favorites/StyledComponents.js b/frontend/src/components/favorites/StyledComponents.js index c52160bb..35753491 100644 --- a/frontend/src/components/favorites/StyledComponents.js +++ b/frontend/src/components/favorites/StyledComponents.js @@ -180,10 +180,11 @@ export const RemoveItemBtn = styled(MdStar)` } `; -export const ListActionButton = styled.p` +export const ListActionButton = styled.div` color: rgb(200, 200, 200); transition: color 250ms; cursor: pointer; + display: flex; svg { color: rgb(150, 150, 150); diff --git a/frontend/src/components/twitch/StyledComponents.js b/frontend/src/components/twitch/StyledComponents.js index e688450e..6f250bb7 100644 --- a/frontend/src/components/twitch/StyledComponents.js +++ b/frontend/src/components/twitch/StyledComponents.js @@ -6,8 +6,7 @@ import FeedsContext from '../feed/FeedsContext'; export const StyledLoadmore = styled.div` width: 100%; - display: grid; - grid-template-columns: auto min-content auto min-content; + display: flex; align-items: center; max-width: 100%; padding-bottom: 10px; @@ -24,6 +23,7 @@ export const StyledLoadmore = styled.div` height: 1px; opacity: 0.75; transition: opacity 200ms; + flex-grow: 1; } div.button { @@ -35,6 +35,7 @@ export const StyledLoadmore = styled.div` color: var(--textColor2); padding: 0px 15px; transition: color 200ms, padding 200ms; + white-space: nowrap; &:hover { color: white;