Skip to content

Commit ea78f7b

Browse files
shweta2101shweta2101
committed
Introduce SCSS variables for project edit styles
Refactor styling by introducing numerous SCSS variables for the project edit page and replacing hard-coded values with those variables. Updates cover padding, gaps, font sizes, radii, avatar sizes, sidebar min/max widths, grid columns, buttons, cards and mobile header/title sizes to improve maintainability and responsiveness. No behavioral changes—purely a style/structure refactor.
1 parent d1e69c0 commit ea78f7b

1 file changed

Lines changed: 79 additions & 44 deletions

File tree

  • pages/workspace/[id]/projects/[projectId]

‎pages/workspace/[id]/projects/[projectId]/edit.vue‎

Lines changed: 79 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -849,6 +849,39 @@ function getInitial(value: string) {
849849
<style lang="scss" scoped>
850850
@import "~/assets/scss/theme.scss";
851851
852+
$project-edit-header-padding: 1.25rem 1.75rem 1.2rem;
853+
$project-edit-header-padding-mobile: 1.25rem 1rem;
854+
$project-edit-breadcrumb-gap: 0.45rem;
855+
$project-edit-breadcrumb-spacing: 0.75rem;
856+
$project-edit-nav-gap: 0.3rem;
857+
$project-edit-nav-padding: 1.25rem 1rem 1rem;
858+
$project-edit-nav-item-padding: 0.65rem 1rem;
859+
$project-edit-footer-padding: 1rem 1.25rem;
860+
$project-edit-content-padding: 1.5rem 2rem 2.25rem;
861+
$project-edit-card-padding: 1rem 1.1rem;
862+
$project-edit-row-padding: 0.9rem 1rem;
863+
$project-edit-sidebar-min-width: 14rem;
864+
$project-edit-sidebar-max-width: 19rem;
865+
$project-edit-content-max-width: 60rem;
866+
$project-edit-nav-item-min-height: 3rem;
867+
$project-edit-control-min-height: 2.75rem;
868+
$project-edit-save-min-width: 5rem;
869+
$project-edit-avatar-size: 2.5rem;
870+
$project-edit-avatar-font-size: 1.25rem;
871+
$project-edit-title-font-size: clamp(1.45rem, 1.8vw, 1.85rem);
872+
$project-edit-title-font-size-mobile: 1.5rem;
873+
$project-edit-heading-font-size: 1.05rem;
874+
$project-edit-body-font-size: 0.92rem;
875+
$project-edit-control-font-size: 0.95rem;
876+
$project-edit-small-font-size: 0.9rem;
877+
$project-edit-nav-radius: 0.7rem;
878+
$project-edit-card-radius: 0.75rem;
879+
$project-edit-panel-gap: 1.25rem;
880+
$project-edit-field-gap: 0.55rem;
881+
$project-edit-row-gap: 0.75rem;
882+
$project-edit-action-gap: 0.9rem;
883+
$project-edit-action-spacing: 1.5rem;
884+
852885
.project-edit-page {
853886
height: calc(100vh - #{$navbar-height});
854887
padding-top: 1rem !important;
@@ -867,17 +900,17 @@ function getInitial(value: string) {
867900
}
868901
869902
.project-edit-header {
870-
padding: 2rem 2.25rem 1.9rem;
903+
padding: $project-edit-header-padding;
871904
border-bottom: 1px solid rgba($text-navy, 0.08);
872905
}
873906
874907
.project-edit-breadcrumbs {
875908
display: flex;
876909
flex-wrap: wrap;
877-
gap: 0.55rem;
878-
margin-bottom: 1.2rem;
910+
gap: $project-edit-breadcrumb-gap;
911+
margin-bottom: $project-edit-breadcrumb-spacing;
879912
color: #757d98;
880-
font-size: 1rem;
913+
font-size: $project-edit-small-font-size;
881914
}
882915
883916
.project-edit-breadcrumbs a {
@@ -889,7 +922,7 @@ function getInitial(value: string) {
889922
margin: 0;
890923
color: #1a1e3d;
891924
font-family: var(--secondary-font-family);
892-
font-size: clamp(1.8rem, 2.4vw, 2.35rem);
925+
font-size: $project-edit-title-font-size;
893926
font-weight: 600;
894927
line-height: 1.15;
895928
letter-spacing: -0.03em;
@@ -899,7 +932,9 @@ function getInitial(value: string) {
899932
min-height: 0;
900933
flex: 1;
901934
display: grid;
902-
grid-template-columns: minmax(15rem, 25%) minmax(0, 1fr);
935+
grid-template-columns:
936+
minmax($project-edit-sidebar-min-width, $project-edit-sidebar-max-width)
937+
minmax(0, 1fr);
903938
}
904939
905940
.project-edit-sidebar {
@@ -913,23 +948,23 @@ function getInitial(value: string) {
913948
.project-edit-nav {
914949
min-height: 0;
915950
flex: 1;
916-
padding: 2rem 1.35rem 1.25rem;
951+
padding: $project-edit-nav-padding;
917952
display: grid;
918953
align-content: start;
919-
gap: 0.8rem;
954+
gap: $project-edit-nav-gap;
920955
overflow-y: auto;
921956
}
922957
923958
.project-edit-nav-item {
924-
min-height: 4.5rem;
925-
padding: 0.85rem 1.55rem;
959+
min-height: $project-edit-nav-item-min-height;
960+
padding: $project-edit-nav-item-padding;
926961
color: #29314f;
927-
font-size: 1.05rem;
962+
font-size: $project-edit-control-font-size;
928963
font-weight: 500;
929964
text-align: left;
930965
background: transparent;
931966
border: 0;
932-
border-radius: 1rem;
967+
border-radius: $project-edit-nav-radius;
933968
}
934969
935970
.project-edit-nav-item-active {
@@ -943,23 +978,23 @@ function getInitial(value: string) {
943978
align-items: center;
944979
justify-content: space-between;
945980
gap: 1rem;
946-
padding: 1.5rem 2rem 1.6rem;
981+
padding: $project-edit-footer-padding;
947982
border-top: 1px solid rgba($text-navy, 0.08);
948983
}
949984
950985
.project-edit-cancel {
951986
padding: 0;
952987
color: #505977;
953-
font-size: 1rem;
988+
font-size: $project-edit-control-font-size;
954989
font-weight: 600;
955990
text-decoration: none;
956991
}
957992
958993
.project-edit-save {
959-
min-width: 5.75rem;
960-
min-height: 3.2rem;
994+
min-width: $project-edit-save-min-width;
995+
min-height: $project-edit-control-min-height;
961996
color: #ffffff;
962-
font-size: 1.05rem;
997+
font-size: $project-edit-control-font-size;
963998
font-weight: 700;
964999
background: #4d158d;
9651000
border: 1px solid #4d158d;
@@ -984,13 +1019,13 @@ function getInitial(value: string) {
9841019
}
9851020
9861021
.project-edit-content-inner {
987-
max-width: 55rem;
988-
padding: 2.2rem 3rem 3rem;
1022+
max-width: $project-edit-content-max-width;
1023+
padding: $project-edit-content-padding;
9891024
}
9901025
9911026
.project-edit-panel {
9921027
display: grid;
993-
gap: 1.75rem;
1028+
gap: $project-edit-panel-gap;
9941029
}
9951030
9961031
.project-edit-panel-header {
@@ -1003,7 +1038,7 @@ function getInitial(value: string) {
10031038
.project-edit-action-copy h2 {
10041039
margin: 0;
10051040
color: #273156;
1006-
font-size: 1.2rem;
1041+
font-size: $project-edit-heading-font-size;
10071042
font-weight: 700;
10081043
}
10091044
@@ -1012,18 +1047,18 @@ function getInitial(value: string) {
10121047
.project-edit-action-copy p {
10131048
margin: 0;
10141049
color: #6d7494;
1015-
font-size: 0.98rem;
1050+
font-size: $project-edit-body-font-size;
10161051
line-height: 1.55;
10171052
}
10181053
10191054
.project-edit-field {
10201055
display: grid;
1021-
gap: 0.75rem;
1056+
gap: $project-edit-field-gap;
10221057
}
10231058
10241059
.project-edit-label {
10251060
color: #273156;
1026-
font-size: 1.1rem;
1061+
font-size: $font-size-base;
10271062
font-weight: 700;
10281063
}
10291064
@@ -1141,8 +1176,8 @@ function getInitial(value: string) {
11411176
width: 100%;
11421177
display: grid;
11431178
align-items: center;
1144-
gap: 0.9rem;
1145-
padding: 1.15rem 1.35rem;
1179+
gap: $project-edit-row-gap;
1180+
padding: $project-edit-row-padding;
11461181
background: #ffffff;
11471182
}
11481183
@@ -1222,13 +1257,13 @@ function getInitial(value: string) {
12221257
}
12231258
12241259
.project-edit-avatar {
1225-
width: 3rem;
1226-
height: 3rem;
1260+
width: $project-edit-avatar-size;
1261+
height: $project-edit-avatar-size;
12271262
display: inline-flex;
12281263
align-items: center;
12291264
justify-content: center;
12301265
color: #5a5574;
1231-
font-size: 1.5rem;
1266+
font-size: $project-edit-avatar-font-size;
12321267
background: linear-gradient(180deg, #f3dbfe, #e3d9ff);
12331268
border: 1px solid #dbc8f1;
12341269
border-radius: 999px;
@@ -1357,10 +1392,10 @@ function getInitial(value: string) {
13571392
.project-edit-message-card {
13581393
display: grid;
13591394
grid-template-columns: auto minmax(0, 1fr);
1360-
gap: 0.9rem;
1361-
padding: 1.35rem 1.45rem;
1395+
gap: $project-edit-row-gap;
1396+
padding: $project-edit-card-padding;
13621397
border: 1px solid rgba($text-navy, 0.08);
1363-
border-radius: 1rem;
1398+
border-radius: $project-edit-card-radius;
13641399
}
13651400
13661401
.project-edit-message-card-muted {
@@ -1372,8 +1407,8 @@ function getInitial(value: string) {
13721407
}
13731408
13741409
.project-edit-message-icon {
1375-
width: 3rem;
1376-
height: 3rem;
1410+
width: $project-edit-avatar-size;
1411+
height: $project-edit-avatar-size;
13771412
display: inline-flex;
13781413
align-items: center;
13791414
justify-content: center;
@@ -1394,14 +1429,14 @@ function getInitial(value: string) {
13941429
13951430
.project-edit-message-copy strong {
13961431
color: #273156;
1397-
font-size: 1rem;
1432+
font-size: $project-edit-control-font-size;
13981433
font-weight: 700;
13991434
}
14001435
14011436
.project-edit-message-copy p {
14021437
margin: 0;
14031438
color: #657091;
1404-
font-size: 0.98rem;
1439+
font-size: $project-edit-small-font-size;
14051440
line-height: 1.5;
14061441
}
14071442
@@ -1411,8 +1446,8 @@ function getInitial(value: string) {
14111446
14121447
.project-edit-action-block {
14131448
display: grid;
1414-
gap: 1.2rem;
1415-
padding-bottom: 2rem;
1449+
gap: $project-edit-action-gap;
1450+
padding-bottom: $project-edit-action-spacing;
14161451
border-bottom: 1px dashed rgba($text-navy, 0.18);
14171452
}
14181453
@@ -1423,13 +1458,13 @@ function getInitial(value: string) {
14231458
14241459
.project-edit-action-button {
14251460
width: fit-content;
1426-
min-height: 3.3rem;
1461+
min-height: $project-edit-control-min-height;
14271462
display: inline-flex;
14281463
align-items: center;
14291464
justify-content: center;
14301465
gap: 0.45rem;
1431-
padding-inline: 1.3rem;
1432-
font-size: 1rem;
1466+
padding-inline: $spacer;
1467+
font-size: $project-edit-control-font-size;
14331468
font-weight: 700;
14341469
opacity: 1;
14351470
}
@@ -1496,7 +1531,7 @@ function getInitial(value: string) {
14961531
}
14971532
14981533
.project-edit-nav-item {
1499-
min-height: 3.65rem;
1534+
min-height: $project-edit-nav-item-min-height;
15001535
}
15011536
15021537
.project-edit-sidebar-footer {
@@ -1551,11 +1586,11 @@ function getInitial(value: string) {
15511586
15521587
@include media-breakpoint-down(sm) {
15531588
.project-edit-header {
1554-
padding: 1.5rem 1rem;
1589+
padding: $project-edit-header-padding-mobile;
15551590
}
15561591
15571592
.project-edit-title {
1558-
font-size: 1.8rem;
1593+
font-size: $project-edit-title-font-size-mobile;
15591594
}
15601595
15611596
.project-edit-nav,

0 commit comments

Comments
 (0)