abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-09 18:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): UI improvements (#448)

Browse Source 
* Fixed CSS for Settings.tsx + new Theme Shop design

* reformat

* More changes to UI CSS

* Small CSS fixes for Settings.tsx, Account, Bots

* Updated theme shop, settings pages, cleanup

* chore: force sync language submodule

* fix(sidebar): prevent items from shrinking

* fix(push): fix timestamp and icon for push notifications

* fix(voice): hide grant permission button after grant

* chore: hide new shop / chevron before merge

* chore(ci): bump node to v16 in dockerfile

* fix(sidebar): change width of channel sidebar

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>
This commit is contained in:
Paul Makles
2021-12-20 13:37:21 +00:00
committed by GitHub
parent abefaca143
commit 3ee0c37a60
23 changed files with 744 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/pages/settings/panes/Panes.module.scss
View File

@@ -19,6 +19,21 @@
width: 100%;
}
.userContainer {
display: flex;
align-items: center;
gap: 8px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.username {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.userDetail {
display: flex;
flex-grow: 1;
@@ -48,13 +63,35 @@
gap: 4px;
color: var(--tertiary-foreground);
> :nth-child(2) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
a {
color: inherit;
cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
@media only screen and (max-width: 300px) {
.avatar {
display: none;
}
}
@media only screen and (min-width: 300px) {
.tinyavatar {
display: none;
}
}
.details {
display: flex;
padding: 1em 0;
@@ -87,11 +124,15 @@
}
.preview {
background: var(--background);
border-radius: var(--border-radius);
width: 100%;
display: flex;
display: grid;
place-items: center;
grid-template-columns: minmax(auto, 100%);
padding-bottom: 30px;
padding: 20px;
margin-bottom: 30px;
> div {
width: 100%;
@@ -99,18 +140,71 @@
}
}
@media only screen and (max-width: 600px) {
.preview {
background: none;
padding: 0;
}
}
.badgePicker {
display: flex;
gap: 10px;
margin-bottom: 20px;
.check {
cursor: pointer;
height: 50px;
width: 50px;
background: var(--secondary-background);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
&:nth-child(2) {
border: 3px solid var(--accent);
}
&:nth-child(1) {
opacity: 0.5;
cursor: not-allowed;
}
}
}
.row {
gap: 20px;
display: flex;
.pfp {
display: flex;
flex-shrink: 0;
align-items: center;
flex-direction: column;
}
.background {
flex-grow: 1;
width: 100%;
}
}
.markdown {
display: flex;
align-items: center;
margin-top: 8px;
gap: 4px;
h5 {
margin: 0;
}
}
@media only screen and (max-width: 600px) {
.row {
align-items: flex-start;
flex-direction: column;
}
}
@@ -135,16 +229,34 @@
}
.audio {
.grant_permission {
margin-bottom: 18px;
.description {
font-weight: 400;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
font-size: 12px;
margin-bottom: 8px;
.audioRow {
margin-top: 20px;
display: flex;
gap: 20px;
.select {
flex-direction: column;
width: 50%;
}
}
.audioBox {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
> button {
width: 100%;
}
}
@media only screen and (max-width: 800px) {
.audioRow {
flex-direction: column;
.select {
width: 100%;
}
}
}
}
@@ -160,6 +272,7 @@
gap: 8px;
display: flex;
width: 100%;
margin-bottom: 15px;
img {
cursor: pointer;
@@ -541,6 +654,9 @@
.myBots {
.botCard {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--secondary-background);
margin: 8px 0;
padding: 12px;
@@ -566,6 +682,13 @@
}
}
.infocontainer {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.infoheader {
gap: 8px;
width: 100%;
@@ -581,6 +704,10 @@
align-items: center;
flex-direction: row;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.userDetail {
@@ -593,9 +720,13 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.userName {
.username {
display: flex;
flex-direction: row;
align-items: center;
@@ -619,9 +750,23 @@
gap: 4px;
color: var(--tertiary-foreground);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
> :nth-child(2) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
a {
color: inherit;
cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
@@ -631,6 +776,20 @@
flex-direction: row;
gap: 10px;
}
@media only screen and (max-width: 800px) {
.infocontainer {
flex-direction: column;
> button {
width: 100%;
}
}
.buttonRow {
flex-direction: column;
}
}
}
section {