From 3497c3f92d1316d9b4aa1c2f5aadccf06b329c34 Mon Sep 17 00:00:00 2001 From: Sonny Date: Tue, 7 Nov 2023 17:54:51 +0100 Subject: [PATCH] feat: improve & fix some styles --- .../BlockWrapper/block-wrapper.module.scss | 4 +-- src/components/Links/Links.tsx | 25 ++++++++----------- src/components/Links/links.module.scss | 4 ++- src/components/QuickActions/Search.tsx | 4 +-- .../SideMenu/Categories/CategoryItem.tsx | 1 + .../Categories/categories.module.scss | 17 +++++-------- .../SideMenu/Favorites/FavoriteItem.tsx | 6 ++--- .../SideMenu/Favorites/favorites.module.scss | 17 +++++++++++-- src/styles/globals.scss | 22 ++++++++++++---- 9 files changed, 60 insertions(+), 40 deletions(-) diff --git a/src/components/BlockWrapper/block-wrapper.module.scss b/src/components/BlockWrapper/block-wrapper.module.scss index e6ab0d4..da8b4c5 100644 --- a/src/components/BlockWrapper/block-wrapper.module.scss +++ b/src/components/BlockWrapper/block-wrapper.module.scss @@ -24,9 +24,9 @@ cursor: pointer; height: fit-content; width: 100%; + font-size: 0.9em; background-color: $white; - padding: 7px 12px; - border: 1px solid $lightest-grey; + padding: 0.5em 1em; border-bottom: 2px solid $lightest-grey; border-radius: 3px; transition: 0.15s; diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx index 86d9529..f87d1cb 100644 --- a/src/components/Links/Links.tsx +++ b/src/components/Links/Links.tsx @@ -39,20 +39,17 @@ export default function Links({ return (

- - {isMobile && ( - - - - )} + {isMobile && ( + + + + )} + {name} {links.length > 0 && ( — {links.length} diff --git a/src/components/Links/links.module.scss b/src/components/Links/links.module.scss index df2d5ed..0fdd617 100644 --- a/src/components/Links/links.module.scss +++ b/src/components/Links/links.module.scss @@ -23,7 +23,7 @@ } .links-wrapper { - height: calc(100% - 54px); // FIXME: eurk + height: calc(100%); // FIXME: eurk min-width: 0; padding: 10px; display: flex; @@ -45,10 +45,12 @@ .category-header { display: flex; + gap: 0.25em; align-items: center; justify-content: space-between; & .category-name { + min-width: 0; width: 100%; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/QuickActions/Search.tsx b/src/components/QuickActions/Search.tsx index f741c2f..a41121e 100644 --- a/src/components/QuickActions/Search.tsx +++ b/src/components/QuickActions/Search.tsx @@ -1,5 +1,5 @@ import ButtonLink from "components/ButtonLink"; -import { BsSearch } from "react-icons/bs"; +import { BiSearchAlt } from "react-icons/bi"; import styles from "./quickactions.module.scss"; @@ -10,7 +10,7 @@ export default function QuickActionSearch({ }) { return ( - + ); } diff --git a/src/components/SideMenu/Categories/CategoryItem.tsx b/src/components/SideMenu/Categories/CategoryItem.tsx index 9bf9256..cd2cacb 100644 --- a/src/components/SideMenu/Categories/CategoryItem.tsx +++ b/src/components/SideMenu/Categories/CategoryItem.tsx @@ -51,6 +51,7 @@ export default function CategoryItem({ gap: ".25em", transition: "none", }} + title={category.name} > {category.id === categoryActive.id ? ( diff --git a/src/components/SideMenu/Categories/categories.module.scss b/src/components/SideMenu/Categories/categories.module.scss index 9dca78c..23f01b9 100644 --- a/src/components/SideMenu/Categories/categories.module.scss +++ b/src/components/SideMenu/Categories/categories.module.scss @@ -11,25 +11,23 @@ } .items { - padding-right: 5px; - overflow-y: scroll; + overflow-y: auto; + overflow-x: hidden; } .item { + border-bottom: 2px solid transparent !important; display: flex; align-items: center; justify-content: space-between; &.active { - color: $white; - background: $blue; - border-color: $blue; + color: $blue; + border-bottom: 2px solid $lightest-grey !important; } &:hover:not(.active) { color: $blue; - background: $white; - border-bottom: 2px solid $blue; } &.active .menu-item .option-edit svg { @@ -37,7 +35,7 @@ } & .content { - width: 100%; + width: calc(100% - 42px); display: flex; flex: 1; align-items: center; @@ -55,9 +53,6 @@ color: $grey; } } - &:hover .content { - width: calc(100% - 42px); - } & .menu-item { height: 100%; diff --git a/src/components/SideMenu/Favorites/FavoriteItem.tsx b/src/components/SideMenu/Favorites/FavoriteItem.tsx index 4d154b1..804c015 100644 --- a/src/components/SideMenu/Favorites/FavoriteItem.tsx +++ b/src/components/SideMenu/Favorites/FavoriteItem.tsx @@ -9,9 +9,9 @@ export default function FavoriteItem({ link }: { link: Link }): JSX.Element { const { name, url, category } = link; return (
  • - - - {name} + + + {name} - {category.name}
    • diff --git a/src/components/SideMenu/Favorites/favorites.module.scss b/src/components/SideMenu/Favorites/favorites.module.scss index 29a1704..c45f619 100644 --- a/src/components/SideMenu/Favorites/favorites.module.scss +++ b/src/components/SideMenu/Favorites/favorites.module.scss @@ -27,16 +27,29 @@ & a { width: 100%; color: inherit; - padding: 0.65em 1.15em; + padding: 0.5em 1em; border: 0 !important; display: flex; align-items: center; gap: 0.25em; } + & .link-name { + display: block; + white-space: nowrap; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + & .category { - color: $grey; + max-width: 75px; font-size: 0.85em; + text-overflow: ellipsis; + white-space: nowrap; + color: $grey; + display: block; + overflow: hidden; } &:not(:last-child) { diff --git a/src/styles/globals.scss b/src/styles/globals.scss index d90b23d..6ef5771 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -1,11 +1,12 @@ @import "keyframes.scss"; @import "colors.scss"; -* { - box-sizing: border-box; +*:not(html) { outline: 0; margin: 0; padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; } html, @@ -13,13 +14,24 @@ body { height: 100dvh; width: 100dvw; color: $black; - background-color: $light-grey; font-family: "Poppins", sans-serif; - padding: 0; - margin: 0; + background-color: $light-grey; +} + +html { overflow: hidden; } +body { + overflow: auto; + scrollbar-gutter: stable both-edges; + + &.lock-scroll { + scrollbar-gutter: unset; + overflow: hidden; + } +} + #__next { height: 100%; width: 100%;