420 judging app scoring

app/(pages)/_components/RadioSelect/RadioSelect.module.scss → app/(pages)/judges/(app)/_components/RadioSelect/RadioSelect.module.scss

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     border-radius: 12px;
-    box-shadow: 0px 4px 4px 0px rgba(98, 88, 88, 0.08);
     padding: 24px 32px;
     gap: 20px;
     background-color: white;
@@ -14,7 +13,7 @@
 }
 
 .question {
-    font-size: 1.125rem;
+    font-size: 1.375rem; //22px
     font-weight: 400;
     color: black;
     font-family: var(--font-dm-sans);
@@ -44,7 +43,7 @@
     p {
         font-size: 0.875rem;
         font-weight: 400;
-        color: #A1A1A3;
+        color: #707070;
         font-family: var(--font-jakarta);
         font-style: italic;
     }
@@ -68,11 +67,11 @@
     width: 40px;
     height: 40px;
     border-radius: 20px;
-    border: 2px solid black;
+    border: 1px solid black;
     cursor: pointer;
 
     &.active {
-        background-color: #005271;
+        background-color: #3F3F3F;
         color: white;
     }
 }

app/(pages)/_components/ScoringForm/ScoringForm.module.scss → app/(pages)/judges/(app)/_components/ScoringForm/ScoringForm.module.scss

@@ -13,6 +13,11 @@
     display: flex;
     flex-direction: column;
     gap: 24px;
+    color: #000;
+    font-family: "Plus Jakarta Sans";
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
 }
 
 .comment_box {
@@ -21,11 +26,12 @@
     padding: 1rem;
     min-height: 170px;
     margin-top: 16px;
+    border-radius: 20px;
 }
 
 .submit_button {
-    background-color: #005271;
-    border-radius: 8px;
+    background-color: #121212;
+    border-radius: 30px;
     color: white;
     padding: 15px;
     font-weight: 600;

app/(pages)/_components/ScoringForm/ScoringForm.tsx → app/(pages)/judges/(app)/_components/ScoringForm/ScoringForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 import styles from './ScoringForm.module.scss';
-import RadioSelect from '@components/RadioSelect/RadioSelect';
+import RadioSelect from '@pages/judges/(app)/_components/RadioSelect/RadioSelect';
 import { optedHDTracks } from '@data/tracks';
 import Submission from '@typeDefs/submission';
 import Team from '@typeDefs/team';
@@ -128,7 +128,7 @@ export default function ScoringForm({ team, submission }: ScoringFormProps) {
     <form onSubmit={onSubmit} className={styles.form}>
       <div className={styles.comments_container}>
         <h2 className={styles.category_header}>Comments</h2>
-        <p>Write down some thoughts here!</p>
+        <p style={{ color: '#5E5E65' }}>Write down some thoughts here!</p>
         <textarea
           className={styles.comment_box}
           name="comments"
@@ -177,7 +177,7 @@ export default function ScoringForm({ team, submission }: ScoringFormProps) {
         </div>
       ))}
       <button type="submit" className={styles.submit_button}>
-        {isEditMode ? 'Edit' : 'Submit'} Scores
+        {isEditMode ? 'Edit' : 'Submit'}
       </button>
     </form>
   );

app/(pages)/judges/(app)/score/[team-id]/page.module.scss

@@ -1,11 +1,10 @@
 .container {
     margin-left: auto;
     margin-right: auto;
-    max-width: 464px;
     padding: 40px 24px;
     display: flex;
     flex-direction: column;
-    background-color: #F2F2F7;
+    background-color: #FAFAFF;   // changed
     min-height: 100vh;
 }
 
@@ -16,17 +15,24 @@
 }
 
 .tab {
-    padding: 4px 24px;
+    padding: 12px 24px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 20px;
-    border: 1.5px solid var(--teal-1, #005271);
+
+    border-radius: 40px;            
+    border: 1px dashed #3F3F3F;     
+    background-color: transparent;      
+    color: #3F3F3F;
+    font-weight: 600;
+
     height: auto;
-    background-color: white;
+    cursor: pointer;
 
     &.active {
-        background: var(--cow, linear-gradient(180deg, #9EE7E5 0%, #9EE7E5 100%));
+        background: #3F3F3F;               // changed
+        color: white;
+        border: none;
     }
 }
 
@@ -35,33 +41,41 @@
     font-size: 3rem;
     font-weight: 700;
     margin: 12px 0;
+    border-radius: 20px;                   // added
 }
 
 .back_button {
     display: flex;
     align-items: center;
     gap: 12px;
-    color: #005271;
     font-size: 1.125rem;
+    color: #121212;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%; /* 18px */
+    letter-spacing: 0.36px;
     padding: 12px 0;
     background: transparent;
     box-shadow: none;
+    border-radius: 20px;                   // added
 }
 
 .info_container {
     display: none;
     flex-direction: column;
     gap: 16px;
+    border-radius: 20px;
+    color: #5E5E65;
 
     &.show {
         display: flex;
     }
 }
 
 .category_card {
-    padding: 16px 20px;
-    border-radius: 8px;
-    background: linear-gradient(180deg, #9EE7E5 0%, #9EE7E5 100%);
-    box-shadow: 0px 4px 8px 4px rgba(195, 194, 194, 0.08);
+    padding: 8px 24px;
+    border-radius: 50px;                    
+    background: #9EE7E5;  
+    color: #123041;    
     width: fit-content;
 }

app/(pages)/judges/(app)/score/[team-id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import styles from './page.module.scss';
-import ScoringForm from '@components/ScoringForm/ScoringForm';
+import ScoringForm from '@pages/judges/(app)/_components/ScoringForm/ScoringForm';
 import Loader from '@components/Loader/Loader';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -67,7 +67,7 @@ export default function ScoreTeam({ params }: ScoringFormProps) {
       <div
         className={`${styles.info_container} ${showInfo ? styles.show : null}`}
       >
-        <p>Judging categories Table {team.body.tableNumber} signed up for:</p>
+        <p>Judging categories Table {team.body.tableNumber} signed up for</p>
         {team.body.tracks.map((category: string) => (
           <p key={category} className={styles.category_card}>
             {category}