Added missing delete icon from favorite popup list items.

Fixed <LoadMore> styling for when two buttons exists.
mambans · Apr 18, 2021 · 0f02c0d · 0f02c0d
1 parent a25ef6b
commit 0f02c0d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git 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 }) => {
                     <ListActionButton
                       size={16}
                       onClick={() => removeFavoriteVideo(lists, setLists, listName, v.id)}
-                    />
+                    >
+                      <MdDeleteForever size={20} />
+                    </ListActionButton>
                   </StyledGameListElement>
                 </ToolTip>
               </CSSTransition>

diff --git 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
@@ -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;