Skip to content

Commit

Permalink
perf: add support of css-variables to quince
Browse files Browse the repository at this point in the history
  • Loading branch information
@bra-i-am
bra-i-am committed Apr 26, 2024
1 parent 90ed944 commit 29617b5
Show file tree
Hide file tree
Showing 6 changed files with 4,002 additions and 4,767 deletions.
8,705 changes: 3,960 additions & 4,745 deletions package-lock.json
View file

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"snapshot": "fedx-scripts jest --updateSnapshot",
"start": "fedx-scripts webpack-dev-server --progress",
"test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
"stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
"stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000",
"replace-variables": "paragon replace-variables -p src -t usage"
},
"bugs": {
"url": "https://github.com/openedx/frontend-app-profile/issues"
Expand All @@ -29,10 +30,10 @@
],
"dependencies": {
"@edx/brand": "npm:@edx/[email protected]",
"@edx/frontend-component-footer": "12.3.0",
"@edx/frontend-component-header": "4.7.1",
"@edx/frontend-platform": "5.5.4",
"@edx/paragon": "^20.44.0",
"@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@12.2.1-alpha.2",
"@edx/frontend-component-header": "npm:@edunext/frontend-component-header@^4.6.0-alpha.2",
"@edx/frontend-platform": "npm:@edunext/frontend-platform@5.5.4-alpha.4",
"@edx/paragon": "npm:@openedx/[email protected]",
"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/free-brands-svg-icons": "5.15.4",
"@fortawesome/free-regular-svg-icons": "5.15.4",
Expand Down Expand Up @@ -66,7 +67,7 @@
"@commitlint/cli": "17.7.2",
"@commitlint/config-angular": "17.7.0",
"@edx/browserslist-config": "^1.1.1",
"@edx/frontend-build": "12.9.17",
"@edx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.0.1",
"@edx/reactifex": "2.2.0",
"@testing-library/react": "12.1.5",
"@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
Expand Down
6 changes: 2 additions & 4 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
@import "~@edx/brand/paragon/fonts";
@import "~@edx/brand/paragon/variables";
@import "~@edx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";
@use "@edx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

@import "~@edx/frontend-component-header/dist/index";
@import "~@edx/frontend-component-footer/dist/footer";

Expand Down
21 changes: 21 additions & 0 deletions src/profile/__snapshots__/ProfilePage.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -223,6 +224,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -2371,6 +2373,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -2528,6 +2531,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -2606,6 +2610,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -3548,6 +3553,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -3705,6 +3711,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -3783,6 +3790,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -5600,6 +5608,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -5762,6 +5771,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -5868,6 +5878,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -6242,6 +6253,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -6320,6 +6332,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -7135,6 +7148,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -7292,6 +7306,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -7370,6 +7385,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -8252,6 +8268,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -8409,6 +8426,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -8487,6 +8505,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -9377,6 +9396,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down Expand Up @@ -10337,6 +10357,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
>
<span
className="pgn__icon"
data-testid="hyperlink-icon"
style={
Object {
"height": "1em",
Expand Down
24 changes: 12 additions & 12 deletions src/profile/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
position: absolute;
left: 1.5rem;
top: 5.25rem;
color: $gray-500;
color: var(--pgn-color-gray-500);
line-height: 0.9rem;
font-size: 0.8rem;
font-style: normal;
Expand All @@ -42,24 +42,24 @@

.icon-visibility-off {
height: 1rem;
color: $gray-500;
color: var(--pgn-color-gray-500);
}

.profile-page {
.edit-section-header {
@extend .h6;
font-size: var(--pgn-typography-font-size-h6);
display: block;
font-weight: normal;
letter-spacing: 0;
margin: 0;
}

label.edit-section-header {
margin-bottom: $spacer * .5;
margin-bottom: var(--pgn-spacing-spacer-2);
}

.profile-avatar-wrap {
@include media-breakpoint-up(md) {
@media (--pgn-size-breakpoint-min-width-md ) {
max-width: 12rem;
margin-right: 0;
margin-top: -8rem;
Expand All @@ -77,25 +77,25 @@
align-items: center;
border-radius: 50%;

@include media-breakpoint-up(md) {
@media (--pgn-size-breakpoint-min-width-md ) {
background: linear-gradient(to top, rgba(0,0,0,.65) 4rem, rgba(0,0,0,0) 4rem);
align-items: flex-end;
}

.btn {
text-decoration: none;
@include media-breakpoint-up(md) {
@media (--pgn-size-breakpoint-min-width-md ) {
margin-bottom: 1.2rem;
}
}

.dropdown {
@include media-breakpoint-up(md) {
@media (--pgn-size-breakpoint-min-width-md ) {
margin-bottom: 1.2rem;
}

.btn {
color: $white;
color: var(--pgn-color-white);
background: transparent;
border-color: transparent;
margin: 0;
Expand All @@ -108,7 +108,7 @@
height: 5rem;
position: relative;

@include media-breakpoint-up(md) {
@media (--pgn-size-breakpoint-min-width-md ) {
width: 12rem;
height: 12rem;
}
Expand All @@ -128,7 +128,7 @@
border-radius:0;
transition: opacity 200ms ease;

@include media-breakpoint-up(md) {
@media (--pgn-size-breakpoint-min-width-md ) {
height: 4rem;
}

Expand All @@ -142,7 +142,7 @@
position: relative;

.certificate-title {
font-family: $font-family-serif;
font-family: var(--pgn-typography-font-family-serif);
font-weight: 400;
}

Expand Down
Empty file added webpack.dev-tutor.config.js
View file
Empty file.

0 comments on commit 29617b5

Please sign in to comment.