Match settings modal to design nuances better

This commit is contained in:
Robin Townsend 2023-05-22 12:54:26 -04:00
parent eeb1f4baaf
commit cf1a7f2e21
7 changed files with 25 additions and 21 deletions

View file

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

View file

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

View file

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

View file

@ -22,8 +22,6 @@ limitations under the License.
}
.label {
font-weight: 600;
font-size: var(--font-size-subtitle);
margin-top: 0;
margin-bottom: 12px;
}

View file

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

View file

@ -195,7 +195,7 @@ export const SettingsModal = (props: Props) => {
key="profile"
title={
<>
<UserIcon width={16} height={16} />
<UserIcon width={15} height={15} />
<span>{t("Profile")}</span>
</>
}

View file

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