UI Revamp #398

Updated the challange card component style Updated latest logos for angular and react
sadanandpai · Oct 11, 2024 · dad57bb · dad57bb
1 parent 32a546f
commit dad57bb
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 40 deletions.
diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.module.scss b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.module.scss
@@ -88,28 +88,52 @@
 
 .challengeCard {
   position: relative;
-  padding: 10px;
-  overflow: hidden;
-  background-color: white;
-  border: 1px solid var(--card-shadow);
-  box-shadow: 0 6px 8px 0 var(--card-shadow);
+  padding: 1rem;
+  border: 1px solid var(--card-border);
+  border-radius: 1rem;
+  box-shadow: 0 0 1rem 0 var(--card-shadow);
   transition: all 0.2s ease-in-out;
-  background-color: var(--bg-body);
-  color: var(--text-body);
+  background: var(--card-body);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 
   &:hover {
-    box-shadow: 0 6px 8px 0 rgb(0 0 0 / 30%);
+    box-shadow: 0 6px 8px 0 var(--card-shadow-hover);
     transform: scale(1.05);
   }
 
+  // for only new
+  &.new {
+    background:
+      linear-gradient(var(--card-body), var(--card-body)) padding-box,
+      rgb(88, 7, 250)
+        linear-gradient(
+          60deg,
+          rgba(88, 7, 250, 1) 25%,
+          rgba(180, 111, 255, 1) 67%,
+          rgba(113, 0, 252, 1) 94%
+        )
+        border-box;
+    box-shadow: 0 0 1rem 0 #e2c7ff;
+    border: 0.2rem solid transparent;
+    border-image-slice: 1;
+
+    &:hover {
+      box-shadow: 0 6px 8px 0 #d7b2ff;
+    }
+  }
+
   .avatarContainer > *:not(:first-child) {
     margin-top: 0.5rem;
   }
 
   h3 {
     font-size: 1.25rem;
-    font-weight: 500;
-    color: green;
+    font-weight: 600;
+    color: var(--text-body);
+    margin: 0px;
   }
 
   &.disabled h3 {
@@ -130,17 +154,6 @@
     text-decoration: none;
   }
 
-  .new {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 4rem;
-    font-size: 1rem;
-    color: white;
-    text-align: center;
-    background-color: rgb(84 84 84);
-  }
-
   .developer {
     display: flex;
     align-items: center;
@@ -160,12 +173,35 @@
     color: var(--text-body);
   }
 
-  &.medium h3 {
-    color: rgb(75 75 255);
+  .difficultyBadge {
+    padding: 0.1rem 0.6rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    border: 2px solid;
+    border-radius: 5rem;
+    font-weight: bold;
+    color: var(--difficulty-color);
+  }
+
+  .ellips {
+    width: 0.4rem;
+    height: 0.4rem;
+    border: 1px solid;
+    border-radius: 50%;
+    background-color: var(--difficulty-color);
+  }
+
+  &.Easy {
+    --difficulty-color: #10b981;
   }
 
-  &.hard h3 {
-    color: orangered;
+  &.Medium {
+    --difficulty-color: #ffc01e;
+  }
+
+  &.Hard {
+    --difficulty-color: #ff375f;
   }
 }
 
@@ -184,3 +220,26 @@
   }
   cursor: pointer;
 }
+
+.newTag {
+  padding: 0.25rem 1rem;
+  color: #ffffff;
+  font-size: small;
+  font-weight: bold;
+  position: absolute;
+  top: -0.9rem;
+  z-index: 1;
+  left: 50%;
+  transform: translate(-50%);
+  border-radius: 10rem;
+  background: rgb(96, 44, 253)
+    linear-gradient(90deg, rgba(96, 44, 253, 1) 9%, rgba(123, 0, 255, 1) 55%);
+}
+
+.interviewBadge {
+  padding: 0.2rem 0.75rem;
+  color: #ffffff;
+  border-radius: 5rem;
+  background: rgb(255, 173, 79)
+    linear-gradient(60deg, rgba(255, 173, 79, 1) 0%, rgba(222, 120, 3, 1) 83%);
+}
diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-grid.tsx
@@ -10,9 +10,10 @@ interface Props {
   challenges: IChallenge[];
   linkPrefix: string;
   links: { tech: string; imgSrc: string; active: boolean }[];
+  techImg: string;
 }
 
-function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
+function ChallengeGrid({ challenges, linkPrefix, links, techImg }: Props) {
   const initialFilters = filtersHelper();
 
   const [searchInput, setSearchInput] = useState(initialFilters.searchInput);
@@ -88,6 +89,7 @@ function ChallengeGrid({ challenges, linkPrefix, links }: Props) {
               link={linkPrefix + challenge.link}
               contributor={contributors.get(challenge.developer)}
               challenge={challenge}
+              techImg={techImg}
             />
           ))}
         </div>

diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge.tsx
@@ -6,28 +6,46 @@ interface Props {
   link: string;
   contributor?: IContributor;
   challenge: IChallenge;
+  techImg: string;
 }
 
-const Challenge = ({ link, contributor, challenge }: Props) => {
+const Challenge = ({ link, contributor, challenge, techImg }: Props) => {
+  console.log(challenge.tags);
+
   return (
     <a
       key={challenge.title}
-      className={`${styles.challengeCard} ${styles[challenge.difficulty]}`}
+      className={`${styles.challengeCard} ${styles[challenge.difficulty]} ${challenge.isNew && styles.new}`}
       href={link}
     >
-      {challenge.isNew && <span className={styles.new}>New</span>}
-      <div>
-        <h3>{challenge.title}</h3>
-
-        <div className={styles.avatarContainer}>
+      {challenge.isNew && <div className={styles.newTag}>NEW</div>}
+      <div className="flex-space-between">
+        <div className="flex-space-between">
+          <div>
+            <img src={techImg} alt={'alt'} width="30px" />
+          </div>
+          <h3>{challenge.title}</h3>
+        </div>
+        <div className={styles.difficultyBadge}>
+          <div className={styles.ellips}></div>
+          {challenge.difficulty}
+        </div>
+      </div>
+      <div className="flex-space-between">
+        <div className="flex-space-between">
           {challenge.developer && (
             <div className={styles.developer}>
               <img src={contributor?.pic} alt="" />
               <span className={styles.name}>{contributor?.name}</span>
             </div>
           )}
-          {challenge.contributors && <AvatarGroup contributorNames={challenge.contributors} />}
+          <div>
+            {challenge.contributors && <AvatarGroup contributorNames={challenge.contributors} />}
+          </div>
         </div>
+        {challenge.tags!.find((e) => e === 'interview') && (
+          <div className={styles.interviewBadge}>Interview</div>
+        )}
       </div>
     </a>
   );

diff --git a/apps/host/src/pages/challenges.tsx b/apps/host/src/pages/challenges.tsx
@@ -106,6 +106,7 @@ function Challenges() {
           challenges={[...techMap.get(techParam)!.challenges.values()]}
           linkPrefix={techMap.get(techParam)!.link}
           links={links}
+          techImg={techMap.get(techParam)!.imgSrc}
         />
         <ScrollBtn />
       </div>

diff --git a/shared/assets/tech/angular.png b/shared/assets/tech/angular.png
diff --git a/shared/assets/tech/react.png b/shared/assets/tech/react.png
diff --git a/shared/data/types/challenge.ts b/shared/data/types/challenge.ts
@@ -1,9 +1,9 @@
 import { OptionType } from '.';
 
 export const enum EDifficulty {
-  Easy = 'easy',
-  Medium = 'medium',
-  Hard = 'hard',
+  Easy = 'Easy',
+  Medium = 'Medium',
+  Hard = 'Hard',
 }
 
 export enum ETag {

diff --git a/shared/styles/theme.css b/shared/styles/theme.css
@@ -3,7 +3,7 @@
   --bg-body: #f3f4f6;
   --text-body: #111827;
 
-  --bg-navbar: #f9fafb;
+  --bg-navbar: #ffffff;
   --shadow-navbar: rgba(0 0 0 / 0.1);
   --bg-navbar-logo-img: transparent;
 
@@ -15,7 +15,11 @@
   --text-link: blue;
 
   /* Challenge Card */
-  --card-shadow: rgb(0 0 0 / 15%);
+  --card-body: #ffffff;
+  --card-shadow: rgb(226, 226, 226);
+  --card-shadow-hover: rgba(0, 0, 0, 0.3);
+  --card-border: rgb(250, 250, 250);
+  --difficulty-color: '';
 }
 
 /* Dark override for above variables */
@@ -36,7 +40,10 @@
   --text-link: #6366f1;
 
   /* Challenge Card */
-  --card-shadow: rgb(150 150 150/ 20%);
+  --card-body: #000000;
+  --card-shadow: rgb(51, 51, 51);
+  --card-shadow-hover: rgba(255, 255, 255, 0.2);
+  --card-border: rgb(70, 70, 70);
 
   color-scheme: dark;
 }
diff --git a/shared/styles/utilities.css b/shared/styles/utilities.css
@@ -8,6 +8,13 @@
   justify-content: center;
 }
 
+.flex-space-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
 .grid {
   display: grid;
 }