Skip to content

Commit

Permalink
feat: implementation of Paragon design tokens
Browse files Browse the repository at this point in the history
refactor: code refactoring

feat: necessary dependencies added

refactor: corrected lint

refactor: corrected sh

refactor: added logs

refactor: added temp frontend-platform dist

refactor: updated run-build-for-gh-deps.sh

refactor: corrected run-build-for-gh-deps.sh

refactor: fixing the problem

refactor: changed run build command

feat: added header

refactor: added dark theme and footer

refactor: code refactoring

refactor: code refactoring

fix: fixed CommentsView button

feat: added brand import

feat: removed brand
  • Loading branch information
PKulkoRaccoonGang committed Jul 3, 2024
1 parent 422fbf6 commit 8720ea3
Show file tree
Hide file tree
Showing 8 changed files with 4,899 additions and 2,400 deletions.
25 changes: 25 additions & 0 deletions env.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
module.exports = {
PARAGON_THEME_URLS: {
core: {
urls: {
default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css',
},
},
defaults: {
light: 'light',
dark: 'dark',
},
variants: {
light: {
urls: {
default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css',
},
},
dark: {
urls: {
default: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css',
},
},
},
},
};
7,108 changes: 4,745 additions & 2,363 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"extends @edx/browserslist-config"
],
"scripts": {
"build": "fedx-scripts webpack",
"build": "sh run-build-for-gh-deps.sh",
"i18n_extract": "fedx-scripts formatjs extract",
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
"lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
Expand Down
100 changes: 100 additions & 0 deletions run-build-for-gh-deps.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
#!/bin/bash

log() {
echo "=============================== $1 ==============================="
}

run_command() {
echo "\$ $1"
eval $1
}

log "Starting deployment script"
run_command "pwd"

# frontend-platform
log "Processing frontend-platform"
run_command "cd node_modules/@edx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-platform"
run_command "mkdir frontend-platform" || exit
run_command "ls -l"
run_command "git clone -b Peter_Kulko/design-tokens-support --single-branch https://github.com/raccoongang/frontend-platform.git frontend-platform-temp"
run_command "cd frontend-platform-temp" || exit
log "Current directory: $(pwd)"
run_command "cat package.json" || exit
run_command "ls -l"
run_command "cp -r dist/. ../frontend-platform/" || exit
run_command "cd .." || exit
run_command "ls -l"
log "Current directory: $(pwd)"
run_command "rm -rf frontend-platform-temp"
run_command "cd frontend-platform" || exit
run_command "ls -l"
run_command "cd ../../.."
log "Current directory: $(pwd)"

# frontend-build
log "Processing frontend-build"
run_command "cd node_modules/@openedx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-build"
run_command "git clone -b dcoa/design-tokens-support --single-branch https://github.com/eduNEXT/frontend-build.git"
run_command "cd frontend-build" || exit
log "Current directory: $(pwd)"
run_command "npm ci"
run_command "cd ../../.." || exit
log "Current directory: $(pwd)"

# paragon
log "Processing paragon"
run_command "ls -l"
run_command "cd node_modules/@openedx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf paragon"
run_command "mkdir -p paragon"
run_command "cd paragon" || exit
log "Current directory: $(pwd)"
run_command "npm pack @openedx/[email protected]"
run_command "tar -xzf openedx-paragon-23.0.0-alpha.2.tgz --strip-components=1"
run_command "rm openedx-paragon-23.0.0-alpha.2.tgz"
run_command "cd ../../.." || exit
log "Current directory: $(pwd)"

# frontend-component-header
log "Processing frontend-component-header"
run_command "cd node_modules/@edx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-component-header"
run_command "mkdir frontend-component-header" || exit
run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-header.git frontend-component-header-temp"
run_command "cd frontend-component-header-temp" || exit
log "Current directory: $(pwd)"
run_command "cp -r dist ../frontend-component-header/" || exit
run_command "cp -r package.json ../frontend-component-header/" || exit
run_command "cd .."
run_command "rm -rf frontend-component-header-temp"
run_command "cd ../.." || exit
log "Current directory: $(pwd)"

# frontend-component-footer
log "Processing frontend-component-footer"
run_command "cd node_modules/@edx/" || exit
log "Current directory: $(pwd)"
run_command "rm -rf frontend-component-footer"
run_command "mkdir frontend-component-footer" || exit
run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-footer.git frontend-component-footer-temp"
run_command "cd frontend-component-footer-temp" || exit
log "Current directory: $(pwd)"
run_command "cp -r dist ../frontend-component-footer/" || exit
run_command "cp -r package.json ../frontend-component-footer/" || exit
run_command "cd .."
run_command "rm -rf frontend-component-footer-temp"
run_command "cd ../.." || exit
log "Current directory: $(pwd)"

# webpack
log "Running webpack"
run_command "fedx-scripts webpack"

log "Deployment script finished."
17 changes: 6 additions & 11 deletions src/components/NavigationBar/navBar.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
@import "~@edx/brand/paragon/fonts.scss";
@import "~@edx/brand/paragon/variables.scss";
@import "~@openedx/paragon/scss/core/core.scss";
@import "~@edx/brand/paragon/overrides.scss";

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

Expand All @@ -12,13 +7,13 @@ $fa-font-path: "~font-awesome/fonts";
.nav a,
.nav button {
&:hover {
background-color: $light-400;
background-color: var(--pgn-color-light-400);
}
}

.nav a {
&:not(.active):hover {
background-color: $light-400;
background-color: var(--pgn-color-light-400);
border-bottom: none;
}
}
Expand All @@ -30,7 +25,7 @@ $fa-font-path: "~font-awesome/fonts";
.nav-link {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
color: $gray-700;
color: var(--pgn-color-gray-700);

// temporary until we can remove .btn class from dropdowns
border-left: 0;
Expand All @@ -40,9 +35,9 @@ $fa-font-path: "~font-awesome/fonts";
&:hover,
&:focus,
&.active {
font-weight: $font-weight-normal;
color: $primary-500;
border-bottom-color: $primary-500;
font-weight: var(--pgn-typography-font-weight-normal);
color: var(--pgn-color-primary-500);
border-bottom-color: var(--pgn-color-primary-500);
}
}
}
2 changes: 1 addition & 1 deletion src/components/TinyMCEEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import 'tinymce/plugins/charmap';
import 'tinymce/plugins/paste';
/* eslint import/no-webpack-loader-syntax: off */
// eslint-disable-next-line import/no-unresolved
import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
import edxBrandCss from '!!raw-loader!../index.scss';
// eslint-disable-next-line import/no-unresolved
import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
// eslint-disable-next-line import/no-unresolved
Expand Down
2 changes: 1 addition & 1 deletion src/discussions/post-comments/comments/CommentsView.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
variant="plain"
block="true"
className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
line-height-24 text-primary-500"
line-height-24 text-primary-500 bg-white"
onClick={handleAddResponse}
data-testid="add-response"
>
Expand Down
43 changes: 20 additions & 23 deletions src/index.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
@import "~@edx/brand/paragon/fonts.scss";
@import "~@edx/brand/paragon/variables.scss";
@import "~@openedx/paragon/scss/core/core.scss";
@import "~@edx/brand/paragon/overrides.scss";
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

@import "~@edx/frontend-component-footer/dist/footer";
@import "~@edx/frontend-component-header/dist/index";
Expand Down Expand Up @@ -41,23 +38,23 @@ body,
}

.text-staff-color {
color: $warning-700;
color: var(--pgn-color-warning-700);
}

.outline-staff-color {
outline: $warning-700 solid 2px;
outline: var(--pgn-color-warning-700) solid 2px;
}

.text-TA-color {
color: $success-700;
color: var(--pgn-color-success-700);
}

.outline-TA-color {
outline: $success-700 solid 2px;
outline: var(--pgn-color-success-700) solid 2px;
}

.outline-anonymous {
outline: $light-400 solid 2px;
outline: var(--pgn-color-light-400) solid 2px;
}

.font-size-8 {
Expand Down Expand Up @@ -173,7 +170,7 @@ body,
}

.learner > a:hover {
background-color: $light-300;
background-color: var(--pgn-color-light-300);
}

.py-10px {
Expand Down Expand Up @@ -252,12 +249,12 @@ header {
}

.border-light-400-2 {
border: 2px solid $light-400 !important;
border: 2px solid var(--pgn-color-light-400) !important;
border-width: 2px !important;
}

.border-primary-500-2 {
border: 2px solid $primary-500 !important;
border: 2px solid var(--pgn-color-primary-500) !important;
border-width: 2px !important;
}

Expand Down Expand Up @@ -383,8 +380,8 @@ header {
}

.btn-icon.btn-icon-primary:hover {
background-color: $light-300 !important;
color: $primary-500 !important
background-color: var(--pgn-color-light-300) !important;
color: var(--pgn-color-primary-500) !important
}


Expand Down Expand Up @@ -427,38 +424,38 @@ header {
}

.hover-button:hover {
background-color: $light-300 !important;
background-color: var(--pgn-color-light-300) !important;
height: 36px !important;
border: none !important;
}

.btn-tertiary:hover {
background-color: $light-300 !important;
background-color: var(--pgn-color-light-300) !important;
}

.nav-button-group {
.nav-link {
&:hover {
background-color: $light-300 !important;
background-color: var(--pgn-color-light-300) !important;
}
}

.nav-link.active,
.show>.nav-link {
background-color: $primary-500 !important;
background-color: var(--pgn-color-primary-500) !important;
}
}

.course-tabs-navigation {
.nav a {
&:hover {
background-color: $light-300 !important;;
background-color: var(--pgn-color-light-300) !important;;
}
}
}

.btn-tertiary:disabled {
color: $gray-700 !important;
color: var(--pgn-color-gray-700) !important;
background-color: transparent !important;
}

Expand Down Expand Up @@ -535,14 +532,14 @@ code {
.post-preview,
.discussion-comments {
blockquote {
border-left: 2px solid $gray-200;
border-left: 2px solid var(--pgn-color-gray-200);
margin-left: 1.5rem;
padding-left: 1rem;
}
}

.add-comment-btn {
border: 1px solid $light-300 !important;
border: 1px solid var(--pgn-color-light-300) !important;
}

.icon-size-24 {
Expand Down Expand Up @@ -588,7 +585,7 @@ code {
}

th, td {
border: 1px dashed $gray-200;
border: 1px dashed var(--pgn-color-gray-200);
padding: 0.4rem;
white-space: nowrap;
}
Expand Down

0 comments on commit 8720ea3

Please sign in to comment.