From f1d413b6efaad82d0debcaec023bec867b474861 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 5 Jul 2021 16:24:25 +0200
Subject: [PATCH] Fix: Small mobile fixes, paddings
---
src/components/navigation/items/Item.module.scss | 12 ++++++++----
src/pages/settings/GenericSettings.tsx | 4 ++--
src/pages/settings/panes/Panes.module.scss | 9 +++++++++
3 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index 8251d4c..d5e4ff3 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/src/components/navigation/items/Item.module.scss
@@ -147,14 +147,18 @@
@media (pointer: coarse) {
.item {
- height: 55px;
+ height: 40px;
&.compact {
height: 50px;
- div > svg {
- height: 22px;
- width: 22px;
+ > div {
+ gap: 20px;
+
+ > svg {
+ height: 24px;
+ width: 24px;
+ }
}
}
}
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index baea15a..b1206b0 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -85,7 +85,7 @@ export function GenericSettings({
<>
{showExitButton && (
<IconButton onClick={exitSettings}>
- <X size={24} />
+ <X size={27} style={{marginInlineEnd: "8px"}} />
</IconButton>
)}
<Text id="app.settings.title" />
@@ -93,7 +93,7 @@ export function GenericSettings({
) : (
<>
<IconButton onClick={() => switchPage()}>
- <ArrowBack size={24} />
+ <ArrowBack size={24} style={{marginInlineEnd: "10px"}} />
</IconButton>
<Text
id={`app.settings.${category}.${page}.title`}
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 2068102..2b40d27 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -186,12 +186,21 @@
text-transform: unset;
a {
+
opacity: 0.7;
color: var(--accent);
font-weight: 600;
&:hover {
text-decoration: underline;
}
+
+
+ }
+
+ @media only screen and (max-width: 800px) {
+ a {
+ display: block;
+ }
}
}
}
--
GitLab