Merge pull request #167 from medyo/develop

Version 1.19.0

Author: medyo

src/assets/App.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/assets/baidu_logo.svg

@@ -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/assets/index.css

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

src/assets/phind_logo.svg

@@ -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/DropDownMenu.js

@@ -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/BottomNavigation/BottomNavigation.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/Elements/SearchBarWithLogo/SearchBarWithLogo.css

@@ -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>
+    </>
   )
 }