Enable tab navigation

Author: victor-duarte

src/assets/App.css

@@ -122,10 +122,6 @@ a {
   align-content: center;
   order: 2;
 }
-.darkModeBtn {
-  background-color: var(--dark-mode-background-color) !important;
-  color: var(--dark-mode-text-color) !important;
-}
 .extraBtn {
   background-color: var(--button-background-color);
   color: var(--button-text-color);
@@ -137,7 +133,6 @@ a {
   text-align: center;
   border: 0;
   border-radius: 20px;
-  outline: none;
   cursor: pointer;
   position: relative;
   display: inline-flex;
@@ -154,6 +149,11 @@ a {
   font-weight: bold;
 }
 
+.darkModeBtn {
+  background-color: var(--dark-mode-background-color);
+  color: var(--dark-mode-text-color);
+}
+
 .badgeCount {
   width: 20px;
   height: 20px;
@@ -199,6 +199,7 @@ a {
   flex-direction: column;
   flex: 0 0 auto;
   height: calc(100% - 54px);
+  overflow: hidden;
   padding-bottom: 56px;
   scroll-snap-align: start;
   width: 100vw;
@@ -242,17 +243,23 @@ a {
 }
 
 .blockHeader {
-  text-align: center;
-  vertical-align: baseline;
+  align-items: center;
   color: var(--card-header-text-color);
+  display: flex;
+  font-size: 16px;
   font-weight: 400;
+  gap: 6px;
   height: 30px;
-  font-size: 16px;
-  padding-top: 16px;
-  padding-bottom: 8px;
+  justify-content: center;
+  padding-bottom: 12px;
+  padding-top: 12px;
   position: relative;
 }
 
+.blockHeader:hover {
+  background: linear-gradient(90deg, var(--card-actions-background-shadow) 0%, transparent 34%);
+}
+
 .blockHeader .maxTitle {
   margin: 0;
   padding: 0;
@@ -266,29 +273,31 @@ a {
   opacity: 1;
 }
 .blockHeaderLink {
-  display: inline-block;
-  margin-left: 8px;
+  align-items: center;
   color: #96a2ae;
-  vertical-align: middle;
+  display: flex;
+  justify-content: center;
   opacity: 0;
   transition: opacity 0.2s linear;
 }
+.blockHeaderLink:focus {
+  opacity: 1;
+}
 .blockHeaderDragButton {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: linear-gradient(to left, transparent, var(--card-actions-background-shadow));
-  border: none;
-  height: 100%;
-  padding: 0 12px;
-  width: 32%;
   align-items: center;
-  justify-content: start;
-  z-index: 1;
+  background: transparent;
+  border: none;
+  color: #96a2ae;
   cursor: grab;
   display: none;
-  color: #96a2ae;
   font-size: 24px;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 50px;
 }
 
 .blockHeader:hover .blockHeaderDragButton {
@@ -300,84 +309,84 @@ a {
 }
 
 .blockHeaderIcon {
-  position: relative;
-  top: 4px;
-  margin-right: 6px;
+  display: flex;
+  height: 16px;
+  width: 16px;
 }
 .blockHeaderIcon img {
-  width: 18px;
-  height: 18px;
+  display: block;
 }
 .blockHeaderIcon .rss {
   color: #ee802f;
 }
-.blockRow {
-  scroll-snap-align: start;
-  padding: 8px 16px;
-  position: relative;
-}
 
 /* Actions */
 .blockActions {
+  align-items: flex-end;
+  display: flex;
+  height: 100%;
+  justify-content: flex-end;
+  pointer-events: none;
   position: absolute;
-  transition: right 0.2s ease;
+  right: 0;
   top: 0;
-  right: -100%;
-  background: linear-gradient(to right, transparent, var(--card-actions-background-shadow));
-  height: 100%;
   width: 26%;
-  justify-content: flex-end;
-  align-items: flex-end;
-  display: flex;
 }
+
 .blockActions.active {
-  right: 0;
+  background: linear-gradient(to right, transparent, var(--card-actions-background-shadow));
 }
 
-.blockRow:hover .blockActions {
-  right: 0;
-}
-.blockActionButton.active {
-  background-color: var(--card-active-action-button-background);
-  color: var(--card-active-action-button-color);
-}
 .blockActionButton {
-  margin: 16px;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 40px;
-  display: block;
-  text-align: center;
   background-color: var(--card-action-button-background);
+  border-radius: 40px;
+  border: none;
+  bottom: 8px;
+  box-shadow: 0 0 15px 2px var(--card-actions-background-shadow);
   color: var(--card-action-button-color);
-  line-height: 12px;
   cursor: pointer;
+  display: block;
+  font-size: 18px;
+  height: 28px;
+  line-height: 12px;
+  opacity: 1;
   padding: 0;
+  pointer-events: all;
+  position: absolute;
+  right: 8px;
+  text-align: center;
+  transition: opacity 0.3s ease, right 0.3s ease;
+  width: 28px;
 }
 
-.blockRow:hover {
-  background-color: var(--card-background-focus-color);
+.blockActionButton.active {
+  background-color: var(--card-active-action-button-background);
+  color: var(--card-active-action-button-color);
 }
 
-.bookmarkBtnWrapper {
-  display: flex;
-  align-items: center;
-  padding-left: 4;
-  padding-right: 4;
-}
+@media (hover: hover) {
+  .blockActionButton {
+    opacity: 0;
+    right: -16px;
+  }
 
-.bookmarkBtn {
-  /* visibility: hidden; */
-  cursor: pointer;
+  .blockRow:hover .blockActionButton,
+  .blockActionButton:focus-visible,
+  .blockActionButton.active {
+    opacity: 1;
+    right: 8px;
+  }
 }
 
-.bookmarkBtn.active {
-  color: #3572a5;
+/* Card (element) */
+.blockRow {
+  padding: 8px 16px;
+  position: relative;
+  scroll-snap-align: start;
 }
 
-.blockRow:hover .bookmarkBtn {
-  visibility: visible;
+.blockRow:hover {
+  background-color: var(--card-background-focus-color);
 }
 
 /* .blockContent > div > div > div:not(:last-child), .blockRow:not(:last-child) */
@@ -596,12 +605,13 @@ Github languages colors
 }
 
 .headerSelect {
-  align-self: center;
-  text-align: center;
-  font-weight: bold;
+  background-color: transparent;
+  border: 0;
   border-bottom: 2px solid var(--app-name-text-color);
+  color: inherit;
   cursor: pointer;
-  margin: auto 5px;
+  font-weight: bold;
+  padding: 0;
 }
 
 .headerSelectIcon {
@@ -706,14 +716,15 @@ Producthunt item
 }
 
 .navigationItem {
+  background-color: transparent;
+  border: none;
+  color: var(--primary-text-color);
+  cursor: pointer;
   flex-grow: 1;
+  font-size: 24px;
   height: 100%;
   line-height: 56px;
-  font-size: 24px;
   margin: 0;
-  border: none;
-  background: none;
-  color: var(--primary-text-color);
 }
 .navigationItem img {
   width: 18px;
@@ -972,17 +983,19 @@ Producthunt item
 }
 
 .floatingFilter {
-  background: rgb(44, 128, 232);
+  align-items: center;
+  background-color: rgb(44, 128, 232);
+  border-radius: 48px;
   border: transparent;
-  width: 48px;
+  bottom: 68px;
+  box-shadow: 0 2px 8px var(--card-actions-background-shadow);
+  display: flex;
   height: 48px;
-  border-radius: 48px;
+  justify-content: center;
   position: fixed;
-  bottom: 78px;
+  right: 16px;
+  width: 48px;
   z-index: 2;
-  right: 32px;
-  display: none;
-  box-shadow: 0 2px 8px var(--card-actions-background-shadow);
 }
 .floatingFilterBottomSheet .title {
   font-size: 22px;
@@ -993,13 +1006,13 @@ Producthunt item
   color: white;
   font-size: 24px;
 }
-@media only screen and (max-width: 600px) {
-  .floatingFilter {
-    display: block;
-  }
-}
+
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
+  .floatingFilter {
+    display: none;
+  }
+
   .block {
     border-radius: 10px;
     height: 100%;

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 />}