Enhance styling in CodeChallenge component for improved UI and readability

Frontend/src/components/CodeChallenge.css

@@ -12,15 +12,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
+  padding: 20px 20px;
   background-color: #1e1e1e;
   border-bottom: 1px solid #333;
 }
 
 .code-challenge-header h1 {
   margin: 0;
-  font-size: 18px;
+  font-size: 25px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .sign-in-btn {
@@ -43,7 +43,7 @@
 
 .problem-number {
   margin: 0;
-  font-size: 16px;
+  font-size: 10px;
   font-weight: 500;
 }
 
@@ -62,15 +62,14 @@
 }
 
 .problem-tabs {
-  display: flex;
   width: 100%;
   height: 40px;
   border-bottom: 1px solid #333;
 }
 
 .problem-tabs button {
-  min-width: 120px;
+  min-width: 70px;
-  padding: 0 20px;
+  padding: 0 15px;
   background-color: #252526;
   color: #d4d4d4;
   border: none;
@@ -219,6 +218,7 @@
 .editor-container {
   flex: 1;
   overflow: hidden;
+  background-color: #000000;
 }
 
 .terminal-section {

Frontend/src/components/CodeChallenge.jsx

@@ -522,9 +522,9 @@ int main() {
         <button className="sign-in-btn">Sign In</button>
       </header>
       
-      <div className="code-challenge-problem-nav">
+      {/* <div className="code-challenge-problem-nav">
         <h3 className="problem-number">1. {problems["Q.1"].title}</h3>
-      </div>
+      </div> */}
       
       <div className="code-challenge-main">
         <div className="problem-tabs">
@@ -567,12 +567,7 @@ int main() {
                 <option value="C">C</option>
               </select>
               
-              <button 
+              
-                className={`auto-btn ${autoSelected ? 'auto-selected' : ''}`}
-                onClick={() => setAutoSelected(!autoSelected)}
-              >
-                Auto
-              </button>
             </div>
             
             <div className="editor-actions">
@@ -619,7 +614,7 @@ int main() {
               language={language.toLowerCase() === 'c++' ? 'cpp' : language.toLowerCase()}
               value={code}
               onChange={(value) => setCode(value)}
-              theme="vs-dark"
+              theme="hc-black"
               options={{
                 fontSize: 14,
                 minimap: { enabled: false },
@@ -634,11 +629,11 @@ int main() {
       <div className="terminal-section">
         <div className="terminal-header">
           <span>Terminal</span>
-          <div className="terminal-controls">
+          {/* <div className="terminal-controls">
             <button className="terminal-btn">⊞</button>
             <button className="terminal-btn">□</button>
             <button className="terminal-btn">✕</button>
-          </div>
+          </div> */}
         </div>
         <div className="terminal-content">
           {terminalOutput.map((line, index) => (

Frontend/src/index.css

@@ -1,17 +1,17 @@
 :root {
-  --vscode-background: #1e1e1e;
+  --vscode-background: #000000;
   --vscode-foreground: #d4d4d4;
   --vscode-activityBar-background: #333333;
   --vscode-activityBar-foreground: #ffffff;
   --vscode-activityBar-inactiveForeground: #ffffff80;
   --vscode-sideBar-background: #252526;
   --vscode-sideBar-foreground: #cccccc;
-  --vscode-editor-background: #1e1e1e;
+  --vscode-editor-background: #000000;
   --vscode-statusBar-background: #007acc;
   --vscode-statusBar-foreground: #ffffff;
-  --vscode-panel-background: #1e1e1e;
+  --vscode-panel-background: #000000;
   --vscode-panel-border: #80808059;
-  --vscode-tab-activeBackground: #1e1e1e;
+  --vscode-tab-activeBackground: #000000;
   --vscode-tab-inactiveBackground: #2d2d2d;
   --vscode-tab-activeForeground: #ffffff;
   --vscode-tab-inactiveForeground: #ffffff80;
@@ -1040,15 +1040,17 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 16px;
+  padding: 12px 16px;
   background-color: var(--vscode-background);
   border-bottom: 1px solid rgba(128, 128, 128, 0.35);
+  
 }
 
 .code-challenge-header h1 {
   margin: 0;
-  font-size: 18px;
+  font-size: 25px;
   font-weight: 400;
+  font-weight: bold;
 }
 
 .sign-in-btn {
@@ -1085,7 +1087,7 @@ body {
 .problem-tabs {
   display: flex;
   flex-direction: column;
-  width: 130px;
+  width: 80px;
   border-right: 1px solid rgba(128, 128, 128, 0.35);
 }