Match settings modal to design nuances better
This commit is contained in:
parent
eeb1f4baaf
commit
cf1a7f2e21
7 changed files with 25 additions and 21 deletions
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -22,8 +22,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-subtitle);
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue