mirror of
https://github.com/penpot/penpot.git
synced 2025-07-24 13:17:18 +02:00
🐛 Fix several fronted errors related with new UI (#3691)
* 🐛 Fix title toggle arrow without content * 🐛 Fix export dropdowns * 🐛 Fix colorpicker eyedrop * 🐛 Fix hover state on color row * 🐛 Fix color bullet on color row * 🐛 Fix some css errors in new UI * 🐛 Fix text and typography component * 🐛 Fix some icons * 💄 Update ui in feedback page, webhooks page and access token page
This commit is contained in:
parent
25c60f3e0f
commit
c9ba4aea46
75 changed files with 896 additions and 454 deletions
|
@ -353,7 +353,10 @@
|
|||
color: $df-secondary;
|
||||
}
|
||||
.form-container {
|
||||
width: 800px;
|
||||
margin: 80px auto auto 120px;
|
||||
form {
|
||||
width: 468px;
|
||||
.fields-row {
|
||||
.custom-input,
|
||||
.custom-select {
|
||||
|
@ -364,6 +367,7 @@
|
|||
color: $df-primary;
|
||||
font-size: 11px;
|
||||
margin-bottom: 12px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
|
@ -411,8 +415,43 @@
|
|||
border: 1px solid $da-primary;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: 1px solid $da-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.field-title {
|
||||
color: $df-primary;
|
||||
}
|
||||
.field-title:not(:first-child) {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.field-text {
|
||||
color: $df-secondary;
|
||||
}
|
||||
button,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
margin-top: 12px;
|
||||
|
@ -420,6 +459,156 @@
|
|||
}
|
||||
}
|
||||
|
||||
//Access tokens
|
||||
.dashboard-access-tokens {
|
||||
width: 800px;
|
||||
margin-left: 120px;
|
||||
margin-top: 80px;
|
||||
.access-tokens-hero-container {
|
||||
background-color: transparent;
|
||||
.access-tokens-hero {
|
||||
width: 468px;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.desc {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
h2 {
|
||||
color: $df-primary;
|
||||
font-size: 24px;
|
||||
font-weight: regular;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
p {
|
||||
color: $df-secondary;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-table {
|
||||
width: 800px;
|
||||
.table-rows {
|
||||
padding-top: 0;
|
||||
.table-row {
|
||||
font-size: 14px;
|
||||
min-height: 40px;
|
||||
height: fit-content;
|
||||
.name {
|
||||
color: $df-primary;
|
||||
max-width: 480px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.expiration-date {
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.access-tokens-empty {
|
||||
width: 468px;
|
||||
border: 1px solid $db-cuaternary;
|
||||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Team webhooks
|
||||
&.dashboard-team-webhooks {
|
||||
width: 800px;
|
||||
margin-left: 120px;
|
||||
margin-top: 80px;
|
||||
border: none;
|
||||
align-items: flex-start;
|
||||
.webhooks-hero-container {
|
||||
width: 468px;
|
||||
background-color: transparent;
|
||||
.webhooks-hero {
|
||||
width: 468px;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.desc {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
h2 {
|
||||
color: $df-primary;
|
||||
font-size: 24px;
|
||||
font-weight: regular;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
p {
|
||||
color: $df-secondary;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-table {
|
||||
width: 800px;
|
||||
.table-rows {
|
||||
padding-top: 0;
|
||||
.table-row {
|
||||
font-size: 14px;
|
||||
min-height: 40px;
|
||||
height: fit-content;
|
||||
.name {
|
||||
color: $df-primary;
|
||||
max-width: 480px;
|
||||
}
|
||||
.expiration-date {
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.webhooks-empty {
|
||||
width: 468px;
|
||||
border: 1px solid $db-cuaternary;
|
||||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Members section
|
||||
.dashboard-table {
|
||||
.table-header {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue