diff --git a/src/Modal.module.css b/src/Modal.module.css
index 30c8af04..5143f8b5 100644
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -40,7 +40,7 @@ limitations under the License.
.modalHeader {
display: flex;
justify-content: space-between;
- padding: 34px 34px 0 34px;
+ padding: 34px 32px 0 32px;
}
.modalHeader h3 {
@@ -72,7 +72,7 @@ limitations under the License.
.modalHeader {
display: flex;
justify-content: space-between;
- padding: 24px 24px 0 24px;
+ padding: 32px 20px 0 20px;
}
.modal.mobileFullScreen {
diff --git a/src/button/Button.module.css b/src/button/Button.module.css
index eb8f0b1b..b19db46f 100644
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -39,10 +39,10 @@ limitations under the License.
.secondaryHangup,
.button,
.copyButton {
- padding: 7px 15px;
+ padding: 8px 20px;
border-radius: 8px;
font-size: var(--font-size-body);
- font-weight: 700;
+ font-weight: 600;
}
.button {
diff --git a/src/index.css b/src/index.css
index fbc9d1a6..f9e00ef3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -180,10 +180,16 @@ h2 {
/* Subtitle */
h3 {
- font-weight: 400;
+ font-weight: 600;
font-size: var(--font-size-subtitle);
}
+/* Body Semi Bold */
+h4 {
+ font-weight: 600;
+ font-size: var(--font-size-body);
+}
+
h1,
h2,
h3 {
diff --git a/src/input/SelectInput.module.css b/src/input/SelectInput.module.css
index 727ede0a..086be826 100644
--- a/src/input/SelectInput.module.css
+++ b/src/input/SelectInput.module.css
@@ -22,8 +22,6 @@ limitations under the License.
}
.label {
- font-weight: 600;
- font-size: var(--font-size-subtitle);
margin-top: 0;
margin-bottom: 12px;
}
diff --git a/src/settings/SettingsModal.module.css b/src/settings/SettingsModal.module.css
index 1e44dad7..864d7954 100644
--- a/src/settings/SettingsModal.module.css
+++ b/src/settings/SettingsModal.module.css
@@ -19,6 +19,10 @@ limitations under the License.
height: 480px;
}
+.settingsModal p {
+ color: var(--secondary-content);
+}
+
.tabContainer {
padding: 27px 20px;
}
@@ -26,12 +30,3 @@ limitations under the License.
.fieldRowText {
margin-bottom: 0;
}
-
-/*
-This style guarantees a fixed width of the tab bar in the settings window.
-The "Developer" item in the tab bar can be toggled.
-Without a defined width activating the developer tab makes the tab container jump to the right.
-*/
-.tabLabel {
- min-width: 80px;
-}
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index b3d25a54..03dd2acf 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -195,7 +195,7 @@ export const SettingsModal = (props: Props) => {
key="profile"
title={
<>
-
+
{t("Profile")}
>
}
diff --git a/src/tabs/Tabs.module.css b/src/tabs/Tabs.module.css
index 188747cc..9ba61048 100644
--- a/src/tabs/Tabs.module.css
+++ b/src/tabs/Tabs.module.css
@@ -25,12 +25,14 @@ limitations under the License.
list-style: none;
padding: 0;
margin: 0 auto 24px auto;
+ gap: 16px;
+ overflow: scroll;
+ max-width: 100%;
}
.tab {
- max-width: 190px;
- min-width: fit-content;
height: 32px;
+ box-sizing: border-box;
border-radius: 8px;
background-color: transparent;
display: flex;
@@ -38,6 +40,7 @@ limitations under the License.
padding: 0 8px;
border: none;
cursor: pointer;
+ font-size: var(--font-size-body);
}
.tab > * {
@@ -78,17 +81,18 @@ limitations under the License.
@media (min-width: 800px) {
.tab {
+ width: 200px;
padding: 0 16px;
}
.tab > * {
- margin: 0 16px 0 0;
+ margin: 0 12px 0 0;
}
.tabContainer {
width: 100%;
flex-direction: row;
- padding: 27px 20px;
+ padding: 20px 18px;
box-sizing: border-box;
overflow: hidden;
}
@@ -96,6 +100,7 @@ limitations under the License.
.tabList {
flex-direction: column;
margin-bottom: 0;
+ gap: 0;
}
.tabPanel {