Skip to content

Commit 4e33958

Browse files
dineshsutihardineshsutihar
committed
ui: popui is changed with modern desgn
1 parent 66ccdfb commit 4e33958

File tree

3 files changed

+183
-41
lines changed

3 files changed

+183
-41
lines changed

‎frontend/popup.css‎

Lines changed: 126 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,153 @@
1-
/* Styles ONLY for popup.html */
1+
:root {
2+
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
3+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
4+
--bg-color: #f7f7f8;
5+
--text-color: #2c2c2e;
6+
--subtle-text-color: #6a6a6e;
7+
--primary-color: #007aff;
8+
--primary-hover-color: #005ec4;
9+
--container-bg-color: #ffffff;
10+
--border-color: #e5e5e6;
11+
}
12+
13+
body.dark-mode {
14+
--bg-color: #1c1c1e;
15+
--text-color: #f2f2f7;
16+
--subtle-text-color: #98989d;
17+
--primary-color: #0a84ff;
18+
--primary-hover-color: #389dff;
19+
--container-bg-color: #2c2c2e;
20+
--border-color: #3a3a3c;
21+
}
22+
223
body {
3-
font-family: sans-serif;
4-
width: 280px; /* A specific width for the popup window */
5-
padding: 15px;
6-
background-color: #f7f7f7;
24+
font-family: var(--font-sans);
25+
background-color: var(--bg-color);
26+
color: var(--text-color);
27+
width: 300px;
28+
padding: 16px;
29+
margin: 0;
30+
transition: background-color 0.2s ease, color 0.2s ease;
731
}
832

933
.container {
1034
text-align: center;
1135
}
1236

1337
h1 {
14-
font-size: 1.3em; /* Restored font size for better look */
15-
margin-top: 0;
16-
margin-bottom: 10px;
17-
color: #333;
38+
font-size: 1.4em;
39+
margin: 0 0 8px 0;
40+
font-weight: 600;
1841
}
1942

2043
p {
21-
font-size: 0.9em; /* Restored font size */
22-
color: #555;
23-
margin-top: 0;
44+
font-size: 0.9em;
45+
color: var(--subtle-text-color);
46+
margin: 0 0 20px 0;
2447
}
2548

26-
select,
27-
button {
49+
.select-wrapper {
50+
position: relative;
51+
}
52+
53+
select {
2854
width: 100%;
29-
padding: 10px;
30-
margin-top: 15px;
31-
box-sizing: border-box;
32-
border-radius: 5px;
55+
padding: 12px 16px;
3356
font-size: 1em;
57+
background-color: var(--container-bg-color);
58+
color: var(--text-color);
59+
border: 1px solid var(--border-color);
60+
border-radius: 8px;
61+
-webkit-appearance: none;
62+
-moz-appearance: none;
63+
appearance: none;
64+
cursor: pointer;
3465
}
3566

36-
select {
37-
border: 1px solid #ccc;
67+
.select-wrapper::after {
68+
content: "▼";
69+
font-size: 0.8em;
70+
position: absolute;
71+
top: 50%;
72+
right: 16px;
73+
transform: translateY(-50%);
74+
pointer-events: none;
75+
color: var(--subtle-text-color);
3876
}
3977

4078
button {
41-
background-color: #007bff;
79+
width: 100%;
80+
padding: 12px;
81+
margin-top: 16px;
82+
background-color: var(--primary-color);
4283
color: white;
4384
border: none;
85+
border-radius: 8px;
4486
cursor: pointer;
45-
font-weight: bold;
87+
font-weight: 600;
88+
font-size: 1em;
89+
transition: background-color 0.2s ease;
4690
}
4791

4892
button:hover {
49-
background-color: #0056b3;
93+
background-color: var(--primary-hover-color);
94+
}
95+
96+
.theme-switcher {
97+
display: flex;
98+
justify-content: space-between;
99+
align-items: center;
100+
margin-top: 24px;
101+
padding-top: 16px;
102+
border-top: 1px solid var(--border-color);
103+
}
104+
105+
.theme-label {
106+
font-size: 0.9em;
107+
color: var(--subtle-text-color);
108+
}
109+
110+
.toggle-switch {
111+
position: relative;
112+
display: inline-block;
113+
width: 50px;
114+
height: 28px;
115+
}
116+
117+
.toggle-switch input {
118+
opacity: 0;
119+
width: 0;
120+
height: 0;
121+
}
122+
123+
.slider {
124+
position: absolute;
125+
cursor: pointer;
126+
top: 0;
127+
left: 0;
128+
right: 0;
129+
bottom: 0;
130+
background-color: #ccc;
131+
border-radius: 28px;
132+
transition: 0.4s;
133+
}
134+
135+
.slider:before {
136+
position: absolute;
137+
content: "";
138+
height: 20px;
139+
width: 20px;
140+
left: 4px;
141+
bottom: 4px;
142+
background-color: white;
143+
border-radius: 50%;
144+
transition: 0.4s;
145+
}
146+
147+
input:checked + .slider {
148+
background-color: var(--primary-color);
149+
}
150+
151+
input:checked + .slider:before {
152+
transform: translateX(22px);
50153
}

‎frontend/popup.html‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,35 @@
88
<body>
99
<div class="container">
1010
<h1>CodeTranslateAI</h1>
11-
<p>Select your target language and enable the picker.</p>
11+
<p>Select a language and enable the picker.</p>
1212

13-
<select id="language-select">
14-
<option value="Java">Java</option>
15-
<option value="Python">Python</option>
16-
<option value="JavaScript">JavaScript</option>
17-
<option value="C++">C++</option>
18-
<option value="Ruby">Ruby</option>
19-
</select>
13+
<div class="select-wrapper">
14+
<select id="language-select">
15+
<option value="C">C</option>
16+
<option value="C#">C#</option>
17+
<option value="C++">C++</option>
18+
<option value="Go">Go</option>
19+
<option value="Java">Java</option>
20+
<option value="Kotlin">Kotlin</option>
21+
<option value="Rust">Rust</option>
22+
<option value="Swift">Swift</option>
23+
<option value="TypeScript">TypeScript</option>
24+
<option value="JavaScript">JavaScript</option>
25+
<option value="PHP">PHP</option>
26+
<option value="Python">Python</option>
27+
<option value="Ruby">Ruby</option>
28+
</select>
29+
</div>
2030

2131
<button id="enable-picker-btn">Enable Code Selector</button>
32+
33+
<div class="theme-switcher">
34+
<span class="theme-label">Dark Mode</span>
35+
<label class="toggle-switch">
36+
<input type="checkbox" id="theme-toggle" />
37+
<span class="slider"></span>
38+
</label>
39+
</div>
2240
</div>
2341
<script src="popup.js"></script>
2442
</body>

‎frontend/popup.js‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,45 @@
11
const enablePickerBtn = document.getElementById('enable-picker-btn');
22
const languageSelect = document.getElementById('language-select');
3+
const themeToggle = document.getElementById('theme-toggle');
4+
const body = document.body;
35

46
enablePickerBtn.addEventListener('click', () => {
5-
const targetLanguage = languageSelect.value;
6-
7-
chrome.storage.sync.set({ targetLanguage: targetLanguage });
8-
97
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
10-
const activeTab = tabs[0];
11-
chrome.tabs.sendMessage(activeTab.id, {
12-
type: "ENABLE_PICKER"
13-
});
8+
chrome.tabs.sendMessage(tabs[0].id, { type: "ENABLE_PICKER" });
149
window.close();
1510
});
1611
});
1712

18-
document.addEventListener('DOMContentLoaded', () => {
13+
languageSelect.addEventListener('change', () => {
14+
chrome.storage.sync.set({ targetLanguage: languageSelect.value });
15+
});
16+
17+
themeToggle.addEventListener('change', () => {
18+
if (themeToggle.checked) {
19+
body.classList.add('dark-mode');
20+
chrome.storage.sync.set({ theme: 'dark' });
21+
} else {
22+
body.classList.remove('dark-mode');
23+
chrome.storage.sync.set({ theme: 'light' });
24+
}
25+
});
26+
27+
function initializePopup() {
1928
chrome.storage.sync.get(['targetLanguage'], (result) => {
2029
if (result.targetLanguage) {
2130
languageSelect.value = result.targetLanguage;
2231
}
2332
});
24-
});
33+
34+
chrome.storage.sync.get(['theme'], (result) => {
35+
if (result.theme === 'dark') {
36+
body.classList.add('dark-mode');
37+
themeToggle.checked = true;
38+
} else {
39+
body.classList.remove('dark-mode');
40+
themeToggle.checked = false;
41+
}
42+
});
43+
}
44+
45+
document.addEventListener('DOMContentLoaded', initializePopup);

0 commit comments

Comments
 (0)