mo/mitlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI styles across multiple pages to enhance consistency and responsiveness. Update background colors to use CSS variables for improved theming in GroupDetailPage, GroupsPage, ListDetailPage, and ListsPage. Ensure all components align with the overall design system for a cohesive user experience.

Browse Source
This commit is contained in:
Mohamad 2025-05-20 10:42:55 +02:00
parent fc355077ab
commit 17bebbfab8
5 changed files with 1112 additions and 1092 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2178
fe/src/assets/valerie-ui.scss
View File

File diff suppressed because it is too large Load Diff

2
fe/src/pages/GroupDetailPage.vue
View File

@ -300,7 +300,7 @@ onMounted(() => {
.neo-card { .neo-card {
border-radius: 18px; border-radius: 18px;
box-shadow: 6px 6px 0 #111; box-shadow: 6px 6px 0 #111;
background: #fff; background: var(--light);
border: 3px solid #111; border: 3px solid #111;
overflow: hidden; overflow: hidden;
} }

7
fe/src/pages/GroupsPage.vue
View File

@ -333,7 +333,8 @@ onMounted(async () => {
min-width: 260px; min-width: 260px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
background: #fff; border: none;
background: var(--light);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -364,8 +365,8 @@ onMounted(async () => {
.neo-create-group-card { .neo-create-group-card {
border: 3px dashed #111; border: 3px dashed #111;
background: #fafafa; background: var(--light);
padding: 2.5rem 0; padding: 2.5rem 0;
text-align: center; text-align: center;
font-weight: 900; font-weight: 900;
font-size: 1.1rem; font-size: 1.1rem;

8
fe/src/pages/ListDetailPage.vue
View File

@ -809,7 +809,7 @@ const editItem = (item: Item) => {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border: 3px solid #111; border: 3px solid #111;
border-radius: 50px; border-radius: 50px;
background: #fff; background: var(--light);
box-shadow: 3px 3px 0 #111; box-shadow: 3px 3px 0 #111;
} }
@ -827,7 +827,7 @@ const editItem = (item: Item) => {
box-shadow: 6px 6px 0 #111; box-shadow: 6px 6px 0 #111;
width: 100%; width: 100%;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
background: #fff; background: var(--light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
@ -840,7 +840,7 @@ const editItem = (item: Item) => {
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
break-inside: avoid; break-inside: avoid;
width: 100%; width: 100%;
background: #fff; background: var(--light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -849,7 +849,7 @@ const editItem = (item: Item) => {
padding: 1.2rem; padding: 1.2rem;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
background: #fff; background: var(--light);
transition: background-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out;
} }

9
fe/src/pages/ListsPage.vue
View File

@ -321,7 +321,7 @@ watch(currentGroupId, () => {
box-shadow: 6px 6px 0 #111; box-shadow: 6px 6px 0 #111;
width: 100%; width: 100%;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
background: #fff; background: var(--light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* padding: 2rem 2rem 1.5rem 2rem; /* padding: 2rem 2rem 1.5rem 2rem;
@ -330,6 +330,7 @@ watch(currentGroupId, () => {
cursor: pointer; cursor: pointer;
/* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */ /* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */
border: 3px solid #111; border: 3px solid #111;
padding-inline: 1rem;
} }
.neo-list-card:hover { .neo-list-card:hover {
@ -392,7 +393,7 @@ watch(currentGroupId, () => {
.neo-create-list-card { .neo-create-list-card {
border: 3px dashed #111; border: 3px dashed #111;
background: #fafafa; background: var(--light);
padding: 2.5rem 0; padding: 2.5rem 0;
text-align: center; text-align: center;
font-weight: 900; font-weight: 900;
@ -448,12 +449,14 @@ watch(currentGroupId, () => {
} }
.neo-new-item-input { .neo-new-item-input {
outline: none;
border: none;
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
background-color: var(--light) !important ;
} }
.neo-new-item-input input[type="text"] { .neo-new-item-input input[type="text"] {
background: transparent;
border: none; border: none;
outline: none; outline: none;
all: unset; all: unset;