Further UI improvements

This commit is contained in:
0x1eef 2023-10-30 02:33:06 -03:00
parent af0f1dd3fa
commit 714d2613d5
10 changed files with 63 additions and 14 deletions

View file

@ -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

View file

@ -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;
}
}
}
}
}
}

View file

@ -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;

View file

@ -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;
}
}
}
}

View file

@ -11,6 +11,5 @@
direction: rtl;
.react-select.language {
.selected-option { color: $green1; }
ul li { color: $green1; }
}
}

View file

@ -1,2 +1,2 @@
$green1: #606850;
$green1: lighten(#606850, 20%);
$white: #FFF;

View file

@ -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;
}
}
}
}

View file

@ -25,8 +25,12 @@ export function LanguageSelect({ locale, path = "" }: Props) {
location.replace(`/${locale}/${newPath}`);
}}
>
<option value="ar">عربي</option>
<option value="en">English</option>
<option value="ar">
<span>عربي</span>
</option>
<option value="en">
<span>English</span>
</option>
</Select>
);
}

View file

@ -36,8 +36,8 @@ function SurahIndex({ locale, surahs, t }: Props) {
<a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
</h1>
<nav>
<ThemeSelect theme={theme} setTheme={setTheme} />
<LanguageSelect locale={locale} />
<ThemeSelect theme={theme} setTheme={setTheme} />
</nav>
</header>
<ul className="body index scroll-y">

View file

@ -64,8 +64,8 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
<a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
</h1>
<nav>
<ThemeSelect theme={theme} setTheme={setTheme} />
<LanguageSelect locale={locale} path={surah.slug} />
<ThemeSelect theme={theme} setTheme={setTheme} />
</nav>
<div>
<span className="localized-name" lang={locale}>