Skip to content

Commit 3c7f153

Browse files
KManolov3KManolov3
committed
fix: uepr-38: style updates
1 parent 703907f commit 3c7f153

File tree

2 files changed

+138
-128
lines changed

2 files changed

+138
-128
lines changed

‎src/components/debug-modal/debug-modal.css

Lines changed: 134 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../../css/colors.css";
22

3-
.modal-overlay {
3+
.debug-modal-overlay {
44
position: fixed;
55
top: 0;
66
left: 0;
@@ -13,7 +13,7 @@
1313
z-index: 510;
1414
}
1515

16-
.modal-container {
16+
.debug-modal-container {
1717
background: white;
1818
border-radius: 8px;
1919
width: 1000px;
@@ -23,127 +23,137 @@
2323
position: relative;
2424
overflow-x: visible;
2525
box-shadow: 0 4px 4px 0 $ui-black-transparent-10;
26+
outline: none;
27+
28+
.modal-header {
29+
display: flex;
30+
border-radius: 8px 8px 0 0;
31+
justify-content: space-between;
32+
align-items: center;
33+
padding: 10px;
34+
background-color: $ui-green;
35+
}
36+
37+
.header-title {
38+
display: flex;
39+
gap: 8px;
40+
align-items: center;
41+
font-size: 1rem;
42+
line-height: 1.25rem;
43+
font-weight: 700;
44+
color: white;
45+
}
46+
.debug-icon {
47+
height: 22px;
48+
width: 22px;
49+
}
50+
51+
.hidden {
52+
display: none;
53+
}
54+
55+
.close-button {
56+
display: flex;
57+
background: none;
58+
border: none;
59+
cursor: pointer;
60+
width: 32px;
61+
height: 32px;
62+
}
63+
64+
.modal-content {
65+
display: flex;
66+
width: 100%;
67+
flex-grow: 1;
68+
overflow-y: scroll;
69+
}
70+
71+
.modal-content::-webkit-scrollbar-track {
72+
background: transparent;
73+
}
74+
75+
.modal-content::-webkit-scrollbar {
76+
width: 8px;
77+
}
78+
79+
.previousIcon {
80+
position: absolute;
81+
cursor: pointer;
82+
top: 50%;
83+
}
84+
85+
.nextIcon {
86+
position: absolute;
87+
cursor: pointer;
88+
right: -26px;
89+
top: 50%;
90+
}
91+
92+
.topic-list {
93+
width: 30%;
94+
border-right: 1px solid $ui-green;;
95+
}
96+
97+
.topic-item {
98+
display: flex;
99+
gap: 8px;
100+
align-items: center;
101+
padding: 10px;
102+
font-size: 1rem;
103+
line-height: 1.5rem;
104+
color: $ui-green;;
105+
cursor: pointer;
106+
}
107+
108+
.topic-item.active {
109+
background-color: #D1FAEE;
110+
font-weight: bold;
111+
}
112+
113+
.info-container {
114+
flex-direction: column;
115+
width: 70%;
116+
display: flex;
117+
padding: 20px;
118+
color: $text-primary;
119+
}
120+
121+
.text-container {
122+
flex: 1;
123+
margin-left: 70px;
124+
}
125+
126+
.title-text {
127+
font-size: 24px;
128+
line-height: 32px;
129+
font-weight: 700;
130+
}
131+
132+
.description {
133+
font-size: 16px;
134+
line-height: 28px;
135+
}
136+
137+
.imageContainer {
138+
display: flex;
139+
justify-content: center;
140+
align-items: center;
141+
padding: 10px;
142+
margin-top: 10px;
143+
}
144+
145+
.topicImage {
146+
max-width: 100%;
147+
max-height: 100%;
148+
object-fit: contain; /* Ensures image scales proportionally */
149+
}
150+
151+
.navigation-buttons {
152+
margin-top: 20px;
153+
}
154+
155+
button {
156+
margin: 5px;
157+
}
26158
}
27159

28-
.modal-header {
29-
display: flex;
30-
border-radius: 8px 8px 0 0;
31-
justify-content: space-between;
32-
align-items: center;
33-
padding: 10px;
34-
background-color: $ui-green;
35-
}
36-
37-
.header-title {
38-
display: flex;
39-
gap: 8px;
40-
align-items: center;
41-
font-size: 1rem;
42-
line-height: 1.25rem;
43-
font-weight: 700;
44-
color: white;
45-
}
46-
.debug-icon {
47-
height: 22px;
48-
width: 22px;
49-
}
50-
51-
.hidden {
52-
display: none;
53-
}
54-
55-
.close-button {
56-
display: flex;
57-
background: none;
58-
border: none;
59-
cursor: pointer;
60-
width: 32px;
61-
height: 32px;
62-
}
63-
64-
.modal-content {
65-
display: flex;
66-
width: 100%;
67-
flex-grow: 1;
68-
overflow-y: scroll;
69-
}
70-
71-
.previousIcon {
72-
position: absolute;
73-
cursor: pointer;
74-
top: 50%;
75-
}
76-
77-
.nextIcon {
78-
position: absolute;
79-
cursor: pointer;
80-
right: -30px;
81-
top: 50%;
82-
}
83-
84-
.topic-list {
85-
width: 30%;
86-
border-right: 1px solid $ui-green;;
87-
}
88-
89-
.topic-item {
90-
display: flex;
91-
gap: 8px;
92-
align-items: center;
93-
padding: 10px;
94-
font-size: 1rem;
95-
line-height: 1.5rem;
96-
color: $ui-green;;
97-
cursor: pointer;
98-
}
99-
100-
.topic-item.active {
101-
background-color: #D1FAEE;
102-
font-weight: bold;
103-
}
104-
105-
.info-container {
106-
flex-direction: column;
107-
width: 70%;
108-
display: flex;
109-
padding: 20px;
110-
color: $text-primary;
111-
}
112-
113-
.text-container {
114-
flex: 1;
115-
margin-left: 70px;
116-
}
117-
118-
.title-text {
119-
font-size: 24px;
120-
line-height: 32px;
121-
font-weight: 700;
122-
}
123-
124-
.description {
125-
font-size: 16px;
126-
line-height: 28px;
127-
}
128-
129-
.imageContainer {
130-
display: flex;
131-
justify-content: center;
132-
align-items: center;
133-
padding: 10px;
134-
margin-top: 10px;
135-
}
136-
137-
.topicImage {
138-
max-width: 100%;
139-
max-height: 100%;
140-
object-fit: contain; /* Ensures image scales proportionally */
141-
}
142-
143-
.navigation-buttons {
144-
margin-top: 20px;
145-
}
146-
147-
button {
148-
margin: 5px;
149-
}

‎src/components/debug-modal/debug-modal.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ const DebugModal = ({isOpen, onClose = () => {}}) => {
7979
<ReactModal
8080
isOpen={isOpen}
8181
onRequestClose={handleClose}
82-
className={styles.modalContainer}
83-
overlayClassName={styles.modalOverlay}
82+
className={styles.debugModalContainer}
83+
overlayClassName={styles.debugModalOverlay}
8484
>
8585
<div className={styles.modalHeader}>
8686
<div className={styles.headerTitle}>
@@ -147,15 +147,15 @@ const DebugModal = ({isOpen, onClose = () => {}}) => {
147147
src={prevIcon}
148148
alt="Previous"
149149
onClick={handlePrevious}
150-
className={classNames(styles.navigationIcon, styles.previousIcon, {
150+
className={classNames(styles.previousIcon, {
151151
[styles.hidden]: selectedTopicIndex === 0
152152
})}
153153
/>
154154
<img
155155
src={nextIcon}
156156
alt="Next"
157157
onClick={handleNext}
158-
className={classNames(styles.navigationIcon, styles.nextIcon, {
158+
className={classNames(styles.nextIcon, {
159159
[styles.hidden]: selectedTopicIndex === sections.length - 1
160160
})}
161161
/>

0 commit comments

Comments
 (0)