fix terminal warnings

Author: medyo

src/App.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import './App.css'
+import 'src/assets/App.css'
 import { Footer, Header } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
 import { MarketingBanner } from 'src/components/Elements'

src/App.css src/assets/App.csssrc/App.css renamed to src/assets/App.css

@@ -1,13 +1,13 @@
 @font-face {
   font-family: 'Nunito';
-  src: url("assets/fonts/nunito/nunito-regular.woff2") format('woff2');
+  src: url("fonts/nunito/nunito-regular.woff2") format('woff2');
 }
 
 @font-face {
   font-family: 'Nunito';
   font-weight: 600;
   font-style: normal;
-  src: url("assets/fonts/nunito/nunito-semibold.woff2") format('woff2');
+  src: url("fonts/nunito/nunito-semibold.woff2") format('woff2');
 }
 
 html.dark {

src/index.css src/assets/index.csssrc/index.css renamed to src/assets/index.css

@@ -0,0 +1,29 @@
+import React from 'react'
+import ClickableItem from '../../ClickableItem'
+
+type CardLinkProps = {
+  link: string
+  children: React.ReactNode
+  className?: string
+  appendRef?: boolean
+  analyticsAttributes: {
+    [key: string]: string | number | undefined
+  }
+}
+export const CardLink = ({
+  link,
+  children,
+  className = '',
+  appendRef = true,
+  analyticsAttributes,
+}: CardLinkProps) => {
+  return (
+    <ClickableItem
+      link={link}
+      className={'rowTitle' + (className ? ` ${className}` : '')}
+      analyticsAttributes={analyticsAttributes}
+      appendRef={appendRef}>
+      {children}
+    </ClickableItem>
+  )
+}

src/variables.css src/assets/variables.csssrc/variables.css renamed to src/assets/variables.css

@@ -0,0 +1 @@
+export * from "./CardLink"

src/components/CardLink.js

@@ -3,4 +3,5 @@ export * from "./Card"
 export * from "./MarketingBanner"
 export * from "./SearchBar"
 export * from "./UserTags"
-export * from "./BottomNavigation"
+export * from "./BottomNavigation"
+export * from "./CardLink"

src/components/Elements/CardLink/CardLink.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react'
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'
 import { maxCardsPerRow } from 'src/config'
 import { useUserPreferences } from 'src/stores/preferences'
@@ -17,13 +17,13 @@ function ScrollCardsNavigator() {
     setRightButtonVisible(scrollRight > 0)
   }
 
-  const handleKeyboardKeys = (e) => {
+  const handleKeyboardKeys = useCallback((e) => {
     if (e.keyCode === 37) {
       scrollTo('left')
     } else if (e.keyCode === 39) {
       scrollTo('right')
     }
-  }
+  }, [])
 
   useLayoutEffect(() => {
     scrollBarContainer.current = document.querySelector('.AppContent')
@@ -36,7 +36,7 @@ function ScrollCardsNavigator() {
       window.removeEventListener('keydown', handleKeyboardKeys)
       scrollBarContainer.current.removeEventListener('scroll', handleScroll)
     }
-  }, [])
+  }, [handleKeyboardKeys])
 
   useEffect(() => {
     setLeftButtonVisible(false)

src/components/Elements/CardLink/index.ts

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react'
+import { useCallback, useLayoutEffect } from 'react'
 import DropDownMenu from './DropDownMenu'
 import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config'
 import { useUserPreferences } from 'src/stores/preferences'
@@ -20,35 +20,40 @@ function SelectableCard({
     mergedTags = [...userSelectedTags, GLOBAL_TAG, MY_LANGUAGES_TAG]
   }
 
-  const getInitialSelectedTagValue = () => {
+  const findTagByValue = useCallback(
+    (value) => {
+      if (!value) {
+        return null
+      }
+
+      return mergedTags.find((t) => t.value === value)
+    },
+    [mergedTags]
+  )
+
+  const findTagByLabel = useCallback(
+    (name) => {
+      if (!name) {
+        return null
+      }
+
+      return mergedTags.find((t) => t.label === name)
+    },
+    [mergedTags]
+  )
+  const getInitialSelectedTagValue = useCallback(() => {
     if (isLanguage) {
       return findTagByLabel(cardSettings) ?? fallbackTag
     } else {
       return findTagByValue(cardSettings) ?? fallbackTag
     }
-  }
-
-  const findTagByValue = (value) => {
-    if (!value) {
-      return null
-    }
-
-    return mergedTags.find((t) => t.value === value)
-  }
-
-  const findTagByLabel = (name) => {
-    if (!name) {
-      return null
-    }
-
-    return mergedTags.find((t) => t.label === name)
-  }
+  }, [cardSettings, fallbackTag, findTagByLabel, findTagByValue, isLanguage])
 
   useLayoutEffect(() => {
     if (selectedTag == null) {
       setSelectedTag(getInitialSelectedTagValue())
     }
-  }, [])
+  }, [getInitialSelectedTagValue, selectedTag, setSelectedTag])
 
   return (
     <DropDownMenu