Skip to content

Commit 7564378

Browse files
shewa12shewa12
authored
Merge pull request #2675 from themeum/fix-design-related-issues
UI styles, DateFilter option, Table & templates fixes
2 parents b92fe9e + e8150c9 commit 7564378

19 files changed

Lines changed: 112 additions & 138 deletions

File tree

‎assets/core/scss/components/_table.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@
1616
table {
1717
min-width: 600px;
1818
width: 100%;
19-
border: none;
20-
td, th {
21-
border: none;
22-
}
2319
}
2420
}
2521

@@ -28,6 +24,7 @@ table.tutor-table,
2824
@include tutor-typography('small', 'regular', 'secondary');
2925
width: 100%;
3026
margin: 0px;
27+
border: none;
3128
border-collapse: collapse;
3229
border-spacing: 0;
3330
background-color: $tutor-surface-l1;
@@ -39,6 +36,8 @@ table.tutor-table,
3936
@include tutor-typography(tiny, regular, secondary);
4037
text-align: left;
4138
padding: $tutor-spacing-5;
39+
border: none;
40+
white-space: nowrap;
4241
border-bottom: 1px solid $tutor-border-idle;
4342
}
4443
}
@@ -56,7 +55,7 @@ table.tutor-table,
5655
}
5756

5857
&:nth-child(odd) {
59-
>td {
58+
> td {
6059
background-color: transparent;
6160
}
6261
}
@@ -66,12 +65,12 @@ table.tutor-table,
6665
background-color: transparent;
6766
padding: $tutor-spacing-5;
6867
vertical-align: middle;
68+
border: none;
6969
}
7070
}
7171
}
7272

7373
.tutor-table-column-borders {
74-
7574
th,
7675
td {
7776
border-width: 0px 1px 0px 0px;
@@ -81,4 +80,4 @@ table.tutor-table,
8180
border-width: 0px 0px 0px 0px;
8281
}
8382
}
84-
}
83+
}

‎assets/core/scss/utilities/_layout.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,9 @@ $grid-split-utils: (
8585
// Display
8686
@each $name, $value in $display-utils {
8787
.tutor-#{$name} {
88+
display: $value;
89+
}
90+
.tutor-force-#{$name} {
8891
display: $value !important;
8992
}
9093
}
@@ -366,6 +369,9 @@ $overflow-types: auto, hidden, visible, scroll;
366369
// Display utilities
367370
@each $name, $value in $display-utils {
368371
.tutor-#{$breakpoint}-#{$name} {
372+
display: $value;
373+
}
374+
.tutor-force-#{$breakpoint}-#{$name} {
369375
display: $value !important;
370376
}
371377
}

‎assets/icons/ascending.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎assets/icons/descending.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎assets/src/js/v3/entries/course-builder/components/curriculum/QuestionList.tsx‎

Lines changed: 7 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { useQuizModalContext } from '@CourseBuilderContexts/QuizModalContext';
3333
import { type QuizForm } from '@CourseBuilderServices/quiz';
3434
import { tutorConfig } from '@TutorShared/config/config';
3535
import { Addons, CURRENT_VIEWPORT } from '@TutorShared/config/constants';
36-
import { borderRadius, Breakpoint, colorTokens, shadow, spacing } from '@TutorShared/config/styles';
36+
import { borderRadius, Breakpoint, colorTokens, spacing } from '@TutorShared/config/styles';
3737
import { typography } from '@TutorShared/config/typography';
3838
import For from '@TutorShared/controls/For';
3939
import Show from '@TutorShared/controls/Show';
@@ -475,12 +475,14 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => {
475475
<Show when={contentType !== 'tutor_h5p_quiz'}>
476476
<GenerateQuizWithAi />
477477
</Show>
478-
<button
478+
<Button
479+
type="button"
480+
size="small"
479481
data-cy="add-question"
480-
data-add-question-button
481482
ref={addButtonRef}
482-
type="button"
483483
aria-label={__('Add question', 'tutor')}
484+
isIconOnly
485+
icon={<SVGIcon name="plus" width={20} height={20} />}
484486
onClick={() => {
485487
if (contentType === 'tutor_h5p_quiz') {
486488
showModal({
@@ -498,9 +500,7 @@ const QuestionList = ({ isEditing }: { isEditing: boolean }) => {
498500
setIsOpen(true);
499501
}
500502
}}
501-
>
502-
<SVGIcon name="plusSquareBrand" width={32} height={32} />
503-
</button>
503+
/>
504504
</div>
505505
</div>
506506

@@ -746,46 +746,8 @@ const styles = {
746746
align-items: center;
747747
gap: ${spacing[4]};
748748
749-
[data-add-question-button],
750-
[data-generate-quiz-button] {
751-
${styleUtils.resetButton};
752-
width: 32px;
753-
height: 32px;
754-
border-radius: ${borderRadius[6]};
755-
display: inline-flex;
756-
align-items: center;
757-
justify-content: center;
758-
759-
&:focus,
760-
&:active,
761-
&:hover {
762-
background: none;
763-
}
764-
765-
svg {
766-
color: ${colorTokens.action.primary.default};
767-
width: 100%;
768-
height: 100%;
769-
}
770-
771-
&:focus {
772-
box-shadow: ${shadow.focus};
773-
}
774-
775-
:focus-visible {
776-
box-shadow: none;
777-
outline: 2px solid ${colorTokens.stroke.brand};
778-
outline-offset: 1px;
779-
}
780-
}
781-
782749
[data-generate-quiz-button] {
783750
border: 1px solid ${colorTokens.stroke.divider};
784-
785-
svg {
786-
width: 24px;
787-
height: 24px;
788-
}
789751
}
790752
`,
791753
questionList: css`

‎assets/src/scss/frontend/components/_upcoming-lesson-card.scss‎

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,38 @@
55
@use '@Core/scss/mixins' as *;
66

77
.tutor-upcoming-lesson-card {
8+
background-color: $tutor-surface-l1;
89
padding: $tutor-spacing-6;
910
border: 1px solid $tutor-border-idle;
1011
border-radius: $tutor-radius-2xl;
1112

1213
&:hover {
1314
background-color: $tutor-surface-l1-hover;
14-
@include tutor-breakpoint-up(sm) {
15-
.tutor-upcoming-lesson-card-live-tag-badge {
16-
opacity: 0;
17-
visibility: hidden;
18-
}
19-
.tutor-upcoming-lesson-card-action {
20-
opacity: 1;
21-
visibility: visible;
22-
pointer-events: auto;
23-
}
24-
}
15+
@include tutor-breakpoint-up(sm) {
16+
.tutor-upcoming-lesson-card-live-tag-badge {
17+
opacity: 0;
18+
visibility: hidden;
19+
}
20+
.tutor-upcoming-lesson-card-action {
21+
opacity: 1;
22+
visibility: visible;
23+
pointer-events: auto;
24+
}
25+
}
2526
}
2627

2728
&:focus-within {
28-
@include tutor-breakpoint-up(sm) {
29-
.tutor-upcoming-lesson-card-live-tag-badge {
30-
opacity: 0;
31-
visibility: hidden;
32-
}
33-
.tutor-upcoming-lesson-card-action {
34-
opacity: 1;
35-
visibility: visible;
36-
pointer-events: auto;
37-
}
38-
}
29+
@include tutor-breakpoint-up(sm) {
30+
.tutor-upcoming-lesson-card-live-tag-badge {
31+
opacity: 0;
32+
visibility: hidden;
33+
}
34+
.tutor-upcoming-lesson-card-action {
35+
opacity: 1;
36+
visibility: visible;
37+
pointer-events: auto;
38+
}
39+
}
3940
}
4041

4142
&-header {
@@ -54,42 +55,41 @@
5455
@include tutor-flex-center;
5556
}
5657

57-
&-live-tag {
58-
position: relative;
59-
58+
&-live-tag {
59+
position: relative;
6060

61-
&-badge {
62-
@include tutor-flex(row, center, center);
63-
opacity: 1;
64-
visibility: visible;
65-
z-index: $tutor-z-positive;
66-
@include tutor-transition((opacity, visibility));
67-
}
68-
}
61+
&-badge {
62+
@include tutor-flex(row, center, center);
63+
opacity: 1;
64+
visibility: visible;
65+
z-index: $tutor-z-positive;
66+
@include tutor-transition((opacity, visibility));
67+
}
68+
}
6969

70-
&-action {
71-
@include tutor-flex(row, center, center);
72-
position: absolute;
73-
top: 0;
74-
right: 0;
75-
opacity: 0;
76-
visibility: hidden;
77-
pointer-events: none;
78-
z-index: $tutor-z-dropdown;
79-
@include tutor-transition((opacity, visibility));
70+
&-action {
71+
@include tutor-flex(row, center, center);
72+
position: absolute;
73+
top: 0;
74+
right: 0;
75+
opacity: 0;
76+
visibility: hidden;
77+
pointer-events: none;
78+
z-index: $tutor-z-dropdown;
79+
@include tutor-transition((opacity, visibility));
8080

81-
&:hover {
82-
color: $tutor-text-primary-inverse;
83-
}
84-
}
81+
&:hover {
82+
color: $tutor-text-primary-inverse;
83+
}
84+
}
8585

8686
&-title {
8787
@include tutor-typography('small', 'medium', 'primary', 'body');
8888
margin: 0 0 $tutor-spacing-5 0;
8989

9090
@include tutor-breakpoint-down(sm) {
91-
color: $tutor-text-brand;
92-
}
91+
color: $tutor-text-brand;
92+
}
9393
}
9494

9595
&-course {

‎assets/src/scss/frontend/dashboard/_profile.scss‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,10 @@
22
@use '@Core/scss/tokens' as *;
33

44
.tutor-user-profile {
5-
.tutor-profile-header {
6-
@include tutor-breakpoint-down(sm) {
7-
display: none;
8-
}
9-
}
10-
11-
.tutor-profile-page-title {
12-
@include tutor-typography(h4, semibold, primary, heading);
13-
14-
@include tutor-breakpoint-up(sm) {
15-
display: none;
16-
}
17-
}
18-
195
.tutor-profile-card {
206
@include tutor-card-base;
217
border-radius: $tutor-radius-2xl;
228
padding: $tutor-spacing-6;
23-
margin-top: $tutor-spacing-9;
24-
25-
@include tutor-breakpoint-down(sm) {
26-
margin-top: $tutor-spacing-6;
27-
}
289
}
2910

3011
.tutor-profile-card-header {
@@ -73,6 +54,7 @@
7354

7455
.tutor-user-profile-title {
7556
@include tutor-typography(h3, semibold, primary, heading);
57+
margin-top: $tutor-spacing-none;
7658
margin-bottom: $tutor-spacing-2;
7759

7860
@include tutor-breakpoint-down(sm) {
@@ -160,6 +142,7 @@
160142

161143
.tutor-statistic-title {
162144
@include tutor-typography(h5, semibold, primary, heading);
145+
margin-top: $tutor-spacing-none;
163146
margin-bottom: $tutor-spacing-4;
164147
}
165148

‎assets/src/scss/frontend/dashboard/layout/_header.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
top: 0;
1010
height: 80px;
1111
z-index: $tutor-z-header;
12-
background-color: $tutor-surface-sidebar-l1;
12+
background-color: $tutor-surface-base;
1313
border-bottom: 1px solid $tutor-border-idle;
1414
padding: $tutor-spacing-6 $tutor-spacing-8;
1515

‎assets/src/scss/frontend/learning-area/_quiz.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -825,7 +825,7 @@ $tutor-quiz-content-bottom-offset: calc(
825825
box-shadow: none;
826826

827827
button {
828-
display: flex;
828+
display: flex !important;
829829
}
830830

831831
&:hover {

0 commit comments

Comments
 (0)