From 714d2613d5b853a2fe234824b206dfaa65f42234 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Mon, 30 Oct 2023 02:33:06 -0300 Subject: [PATCH] Further UI improvements --- .husky/pre-commit | 4 ++- src/css/_layout.scss | 38 +++++++++++++++++++++++----- src/css/components/Select.scss | 3 ++- src/css/themes/blue/_layout.scss | 8 ++++++ src/css/themes/green.scss | 1 - src/css/themes/green/_colors.scss | 2 +- src/css/themes/green/_layout.scss | 9 +++++++ src/js/components/LanguageSelect.tsx | 8 ++++-- src/js/pages/SurahIndex.tsx | 2 +- src/js/pages/SurahStream.tsx | 2 +- 10 files changed, 63 insertions(+), 14 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 979cf92..8abc52a 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -5,7 +5,9 @@ files=$(git --no-pager diff --cached --name-only | grep -E -e "${pattern}") if [ "$?" = "0" ]; then npm run prettier -- ${files} || exit 1 npm run eslint -- --fix --exit-on-fatal-error ${files} || exit 1 - git add "${files}" + for f in $files; do + git add "${f}" + done exit 0 else exit 0 diff --git a/src/css/_layout.scss b/src/css/_layout.scss index 5da6870..245abe3 100644 --- a/src/css/_layout.scss +++ b/src/css/_layout.scss @@ -56,15 +56,31 @@ body .root .content.theme { align-items: center; } .react-select.theme { - justify-content: flex-start; + justify-content: flex-end; } .react-select.language { - justify-content: flex-end; - min-width: 70px; + justify-content: flex-start; + min-width: 50px; text-align: right; - ul li { - align-items: flex-start; - font-family: "Kanit Regular"; + ul { + position:relative; + top: 15px; + li { + align-items: center; + font-family: "Kanit Regular"; + span { + display: flex; + height: 100%; + align-items: center; + padding-right: 7px; + } + &:hover { + text-decoration: underline; + } + } + li.en { + font-size: medium; + } } } .br { @@ -102,6 +118,16 @@ body .root .content.en { } header { nav, div { + .react-select.language { + ul { + position: relative; + top: 5px; + li.ar span { + position: relative; + bottom: 8px; + } + } + } } } } diff --git a/src/css/components/Select.scss b/src/css/components/Select.scss index d54aa92..24827a5 100644 --- a/src/css/components/Select.scss +++ b/src/css/components/Select.scss @@ -79,7 +79,8 @@ ul li { display: flex; height: 20px; - align-items: end; + align-items: flex-end; + justify-content: flex-end; .circle { display: block; width: 16px; diff --git a/src/css/themes/blue/_layout.scss b/src/css/themes/blue/_layout.scss index 04c97d4..503d6fb 100644 --- a/src/css/themes/blue/_layout.scss +++ b/src/css/themes/blue/_layout.scss @@ -6,5 +6,13 @@ nav .react-select { color: $gold1; } + nav .react-select.language { + ul li { + background: $blue1; + color: $white; + border: 2px solid $black; + border-radius: 5px; + } + } } } diff --git a/src/css/themes/green.scss b/src/css/themes/green.scss index 298d526..f351cb9 100644 --- a/src/css/themes/green.scss +++ b/src/css/themes/green.scss @@ -11,6 +11,5 @@ direction: rtl; .react-select.language { .selected-option { color: $green1; } - ul li { color: $green1; } } } diff --git a/src/css/themes/green/_colors.scss b/src/css/themes/green/_colors.scss index bdd8247..fa2a675 100644 --- a/src/css/themes/green/_colors.scss +++ b/src/css/themes/green/_colors.scss @@ -1,2 +1,2 @@ -$green1: #606850; +$green1: lighten(#606850, 20%); $white: #FFF; diff --git a/src/css/themes/green/_layout.scss b/src/css/themes/green/_layout.scss index c2fe0b3..7d94797 100644 --- a/src/css/themes/green/_layout.scss +++ b/src/css/themes/green/_layout.scss @@ -8,5 +8,14 @@ background-color: transparent; color: $green1; } + nav .react-select.language { + ul li { + background-color: $green1; + color: $white; + border: 2px solid darken($green1, 25%); + border-radius: 5px; + } + } } + } diff --git a/src/js/components/LanguageSelect.tsx b/src/js/components/LanguageSelect.tsx index b4083b6..2c82876 100644 --- a/src/js/components/LanguageSelect.tsx +++ b/src/js/components/LanguageSelect.tsx @@ -25,8 +25,12 @@ export function LanguageSelect({ locale, path = "" }: Props) { location.replace(`/${locale}/${newPath}`); }} > - - + + ); } diff --git a/src/js/pages/SurahIndex.tsx b/src/js/pages/SurahIndex.tsx index de7db89..76123e5 100644 --- a/src/js/pages/SurahIndex.tsx +++ b/src/js/pages/SurahIndex.tsx @@ -36,8 +36,8 @@ function SurahIndex({ locale, surahs, t }: Props) { {t(locale, "TheNobleQuran")}