Version 1.18.3

src/assets/index.css

@@ -1,18 +1,13 @@
-@import "variables.css";
-
-:focus { outline: none; }
+@import 'variables.css';
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/components/DropDownMenu.js

@@ -1,5 +1,5 @@
+import { Item, Menu, animation, useContextMenu } from 'react-contexify'
 import { RiArrowDownSFill } from 'react-icons/ri'
-import { Menu, Item, animation, useContextMenu } from 'react-contexify'
 
 const DropDownMenu = ({ data, tagId, label, setSelectedDropDownItem }) => {
   const { show: showMenu } = useContextMenu()
@@ -17,10 +17,10 @@ const DropDownMenu = ({ data, tagId, label, setSelectedDropDownItem }) => {
 
   return (
     <>
-      <span onClick={displayMenu} className="headerSelect" data-target-id={tagId}>
+      <button onClick={displayMenu} className="headerSelect" data-target-id={tagId}>
         {label}
         <RiArrowDownSFill className="headerSelectIcon" />
-      </span>
+      </button>
       <Menu id={tagId} animation={animation.fade}>
         {data &&
           data.map((tag) => {

src/components/Elements/BottomNavigation/BottomNavigation.tsx

@@ -38,6 +38,7 @@ export const BottomNavigation = ({
       })}
       {
         <button
+          aria-label="Open settings"
           className={'navigationItem '}
           onClick={() => setShowSettings((prev: boolean) => !prev)}>
           {<AiOutlineMenu />}

src/components/Elements/SearchBarWithLogo/SearchBarWithLogo.css

@@ -1,5 +1,6 @@
 .searchBarWithLogo {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   row-gap: 24px;
   align-items: center;
@@ -16,3 +17,7 @@
   width: 100%;
   height: 100%;
 }
+
+.dark .searchEngineLogo .themeAdaptiveFillColor {
+  fill: white;
+}

src/components/Elements/SearchBarWithLogo/SearchBarWithLogo.tsx

@@ -11,9 +11,9 @@ export const SearchBarWithLogo = () => {
 
   return (
     <div className="searchBarWithLogo">
-      {userSearchEngine && userSearchEngine.logo && (
+      {userSearchEngine?.logo && (
         <div className="searchEngineLogo">
-          <userSearchEngine.logo />
+          <userSearchEngine.logo className={userSearchEngine?.className} />
         </div>
       )}
       <SearchBar />

src/components/Elements/UserTags/UserTags.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TiPlus } from 'react-icons/ti'
 import { useUserPreferences } from 'src/stores/preferences'
 
@@ -10,15 +9,15 @@ export const UserTags = ({ onAddClicked }: UserTagsProps) => {
   const { userSelectedTags } = useUserPreferences()
 
   return (
-    <nav className="tags">
+    <div className="tags">
       {userSelectedTags.map((tag, index) => (
         <span key={index} className="tag">
           {tag.value}
         </span>
       ))}
-      <span className="tag tagHoverable" onClick={onAddClicked}>
+      <button aria-label="Open settings" className="tag tagHoverable" onClick={onAddClicked}>
         <TiPlus className="tagIcon" />
-      </span>
-    </nav>
+      </button>
+    </div>
   )
 }

src/components/Layout/AppContentLayout.tsx

@@ -15,13 +15,13 @@ export const AppContentLayout = ({
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
   return (
-    <section>
+    <>
       <main className="AppContent">
         <ScrollCardsNavigator />
         {isDesktop ? (
           <DesktopCards cards={cards} userCustomCards={userCustomCards} />
         ) : (
-          <div className="HorizontalScroll">
+          <div className="Cards HorizontalScroll">
             <MobileCards selectedCard={selectedCard} />
           </div>
         )}
@@ -31,6 +31,6 @@ export const AppContentLayout = ({
         setSelectedCard={setSelectedCard}
         setShowSettings={setShowSettings}
       />
-    </section>
+    </>
   )
 }

src/components/Layout/DNDLayout/DNDLayout.css

@@ -1,23 +1,19 @@
-.dndState .AppHeader .searchBar {
-  visibility: hidden;
-  transform: translate(0, 10px);
-  opacity: 0;
-}
+.dndState .AppHeader .searchBar,
 .dndState .tags {
-  visibility: hidden;
   opacity: 0;
-  transform: translate(0, 10px);
-  filter: blur(1px);
+  transform: translate(0, 5px);
+  visibility: hidden;
 }
 .dndState .blockContent {
   scroll-snap-type: none;
 }
 .DNDContent {
-  min-height: 100%;
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
+  margin: 0 1%;
+  min-height: 100%; /* Same as AppContent */
 }
 .dndState .scrollToCardsLayout {
   visibility: visible;
@@ -33,11 +29,17 @@
   background: none;
   color: var(--primary-text-color);
   cursor: pointer;
-  padding: 20px 0;
+  padding: 20px 0 70px;
   visibility: hidden;
   transition: all 0.2s ease-in;
 }
 
+@media (min-width: 600px) {
+  .scrollToCardsLayout {
+    padding-bottom: 20px;
+  }
+}
+
 .scrollToCardsLayout:hover .icon {
   transform: translate(0, 10px);
   animation-iteration-count: revert;
@@ -49,6 +51,13 @@
 
 .searchWidget {
   flex-grow: 1;
+  justify-content: center;
   display: flex;
   align-items: center;
+  width: 100%;
+}
+
+.searchWidget form {
+  max-width: 480px;
+  width: 100%;
 }

src/components/Layout/Header.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
-import { BsFillBookmarksFill, BsFillGearFill, BsMoon } from 'react-icons/bs'
+import { useEffect, useState } from 'react'
+import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
@@ -25,8 +25,7 @@ export const Header = ({
   showSettings,
   setShowSettings,
 }: HeaderProps) => {
-  const [themeIcon, setThemeIcon] = useState(<BsMoon />)
-  const isFirstRun = useRef(true)
+  const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
   const { userBookmarks } = useBookmarks()
 
@@ -36,17 +35,9 @@ export const Header = ({
   }, [])
 
   useEffect(() => {
-    if (isFirstRun.current) {
-      isFirstRun.current = false
-    } else {
-      if (!document.documentElement.classList.contains('transitionBgColor')) {
-        document.documentElement.classList.add('transitionBgColor')
-      }
-    }
-
     if (theme === 'light') {
       document.documentElement.classList.replace('dark', theme)
-      setThemeIcon(<BsMoon />)
+      setThemeIcon(<BsMoonFill />)
     } else if (theme === 'dark') {
       document.documentElement.classList.replace('light', theme)
       setThemeIcon(<IoMdSunny />)
@@ -88,7 +79,7 @@ export const Header = ({
           <i className="logo">
             <CgTab />
           </i>{' '}
-          <HackertabLogo className="logoText" />
+          <HackertabLogo aria-label="hackertab.dev" className="logoText" />
           <Changelog />
         </span>
         <SearchBar />
@@ -99,18 +90,23 @@ export const Header = ({
               &nbsp;Unpause
             </button>
           )}
-          <button className="extraBtn" onClick={onSettingsClick}>
+          <button aria-label="Open settings" className="extraBtn" onClick={onSettingsClick}>
             <BsFillGearFill />
           </button>
-          <button className="extraBtn darkModeBtn" onClick={onThemeChange}>
+          <button
+            aria-label="Toggle theme"
+            className="extraBtn darkModeBtn"
+            onClick={onThemeChange}>
             {themeIcon}
           </button>
-          <button className="extraBtn" onClick={() => setShowSideBar(!showSideBar)}>
+          <button
+            aria-label="Open bookmarks"
+            className="extraBtn"
+            onClick={() => setShowSideBar(!showSideBar)}>
             <BsFillBookmarksFill />
             <BookmarksBadgeCount />
           </button>
         </div>
-        <div className="break"></div>
         <UserTags onAddClicked={onSettingsClick} />
       </header>
     </>

src/components/Layout/ScrollCardsNavigator.tsx

@@ -6,16 +6,24 @@ import { useUserPreferences } from 'src/stores/preferences'
 
 export const ScrollCardsNavigator = () => {
   const { cards } = useUserPreferences()
-  const [leftButtonVisible, setLeftButtonVisible] = useState(true)
-  const [rightButtonVisible, setRightButtonVisible] = useState(true)
+  const [leftButtonVisible, setLeftButtonVisible] = useState(false)
+  const [rightButtonVisible, setRightButtonVisible] = useState(false)
   const scrollBarContainer = useRef<HTMLElement | null>(null)
+  const CARDS = 'Cards'
 
   const handleScroll = (e: Event) => {
+    const target = e.target as HTMLElement
+
+    // Prevent scrolling conflicts between CARDS and children
+    if (!target.classList.contains(CARDS)) {
+      return
+    }
+
     if (cards.length <= maxCardsPerRow) {
       setLeftButtonVisible(false)
       setRightButtonVisible(false)
     } else {
-      const { scrollLeft, scrollWidth, offsetWidth } = e.target as HTMLElement
+      const { scrollLeft, scrollWidth, offsetWidth } = target
       setLeftButtonVisible(scrollLeft > 100)
       const scrollRight = scrollWidth - offsetWidth - Math.abs(scrollLeft)
       setRightButtonVisible(scrollRight > 100)
@@ -27,15 +35,11 @@ export const ScrollCardsNavigator = () => {
       scrollTo('left')
     } else if (e.key === 'ArrowRight') {
       scrollTo('right')
-    } else if (e.key === 'Tab') {
-      e.preventDefault()
-      e.stopPropagation()
     }
   }, [])
 
   useLayoutEffect(() => {
-    setLeftButtonVisible(false)
-    scrollBarContainer.current = document.querySelector('.Cards')
+    scrollBarContainer.current = document.querySelector(`.${CARDS}`)
   }, [])
 
   useEffect(() => {
@@ -70,12 +74,20 @@ export const ScrollCardsNavigator = () => {
   return (
     <div className="scrollCardsNavigator">
       {leftButtonVisible && (
-        <button onClick={() => scrollTo('left')} className="scrollButton" style={{ left: 0 }}>
+        <button
+          aria-label="Previous cards"
+          className="scrollButton"
+          onClick={() => scrollTo('left')}
+          style={{ left: 0 }}>
           <FiChevronLeft size={32} />
         </button>
       )}
       {rightButtonVisible && (
-        <button onClick={() => scrollTo('right')} className="scrollButton" style={{ right: 0 }}>
+        <button
+          aria-label="Next cards"
+          className="scrollButton"
+          onClick={() => scrollTo('right')}
+          style={{ right: 0 }}>
           <FiChevronRight size={32} />
         </button>
       )}

src/config/index.tsx

@@ -8,6 +8,7 @@ import { ReactComponent as DuckDuckGoLogo } from 'src/assets/duckduckgo_logo.svg
 import { ReactComponent as GoogleLogo } from 'src/assets/google_logo.svg'
 import HashNodeIcon from 'src/assets/icon_hashnode.png'
 import LobstersIcon from 'src/assets/icon_lobsters.png'
+import { ReactComponent as PhindLogo } from 'src/assets/phind_logo.svg'
 import { ReactComponent as StartPageLogo } from 'src/assets/startpage_logo.svg'
 import { ReactComponent as YahooLogo } from 'src/assets/yahoo_logo.svg'
 import { ReactComponent as YandexLogo } from 'src/assets/yandex_logo.svg'
@@ -74,12 +75,19 @@ export const SUPPORTED_SEARCH_ENGINES = [
     label: 'Yandex',
     url: 'https://yandex.ru/search/?text=',
     logo: YandexLogo,
+    className: 'themeAdaptiveFillColor',
   },
   {
     label: 'Startpage',
     url: 'https://www.startpage.com/sp/search?query=',
     logo: StartPageLogo,
   },
+  {
+    label: 'Phind',
+    url: 'https://phind.com/search?q=',
+    logo: PhindLogo,
+    className: 'themeAdaptiveFillColor',
+  },
 ]
 export const SUPPORTED_CARDS: SupportedCardType[] = [
   {