marufsiddiqui
diff --git a/‎lib/components/page/page.js
Lines changed: 1 addition & 1 deletion b/‎lib/components/page/page.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎lib/reducers/task-tests/tasks/tasks.js
Lines changed: 1 addition & 0 deletions b/‎lib/reducers/task-tests/tasks/tasks.js
Lines changed: 1 addition & 0 deletions
diff --git a/‎styles/styles.less
Lines changed: 33 additions & 9 deletions b/‎styles/styles.less
Lines changed: 33 additions & 9 deletions
@@ -5,33 +5,44 @@
   font-family: @font-family;
   font-size: @font-size;
 }
-
 pre {
   margin-bottom: 10px !important;
   padding-bottom: 0;
 }
-
+@pass: rgb(115, 201, 144);
+@fail: rgb(255, 64, 129);
+@note: #9DA5B4;
 .cr-alert.pass {
   button {
     span {
-      color: rgb(115, 201, 144);
+      color: @pass;
     }
   }
 }
 .cr-alert.fail {
   button {
     span {
-      color: rgb(255, 64, 129);
+      color: @fail;
     }
   }
 }
-
+.cr-alert.note {
+  button {
+    span {
+      color: @note;
+    }
+  }
+}
+.cr-alert-replay {
+  display: inline-block;
+  margin-left: 10px;
+  margin-right: 10px;
+}
 .cr {
   .cr-menu-bar {
     z-index: 999 !important;
   }
 }
-
 .cr {
   &-chapter {
     border: 2px solid red; // testing
@@ -45,7 +56,6 @@ pre {
     text-align: center;
   }
 }
-
 .cr-page {
   position: relative;
   width: 400px;
@@ -89,7 +99,22 @@ pre {
     }
   }
 }
-
+.cr-task-hint {
+  &-index {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+  }
+  &-description {
+    padding-top: -10px;
+    padding-left: 35px;
+  }
+  .cr-task-hint-box {
+    div > div {
+      padding: 0 10px;
+    }
+  }
+}
 .cr {
   &-progress {
     .chapter {
@@ -111,7 +136,6 @@ pre {
     }
   }
 }
-
 .cr {
   &-projects {
     height: 100%;
Original file line number	Diff line number	Diff line change
`@@ -5,33 +5,44 @@`
`5`	`5`	`font-family: @font-family;`
`6`	`6`	`font-size: @font-size;`
`7`	`7`	`}`
`8`		`-`
`9`	`8`	`pre {`
`10`	`9`	`margin-bottom: 10px !important;`
`11`	`10`	`padding-bottom: 0;`
`12`	`11`	`}`
`13`		`-`
	`12`	`+@pass: rgb(115, 201, 144);`
	`13`	`+@fail: rgb(255, 64, 129);`
	`14`	`+@note: #9DA5B4;`
`14`	`15`	`.cr-alert.pass {`
`15`	`16`	`button {`
`16`	`17`	`span {`
`17`		`- color: rgb(115, 201, 144);`
	`18`	`+ color: @pass;`
`18`	`19`	`}`
`19`	`20`	`}`
`20`	`21`	`}`
`21`	`22`	`.cr-alert.fail {`
`22`	`23`	`button {`
`23`	`24`	`span {`
`24`		`- color: rgb(255, 64, 129);`
	`25`	`+ color: @fail;`
`25`	`26`	`}`
`26`	`27`	`}`
`27`	`28`	`}`
`28`		`-`
	`29`	`+.cr-alert.note {`
	`30`	`+ button {`
	`31`	`+ span {`
	`32`	`+ color: @note;`
	`33`	`+ }`
	`34`	`+ }`
	`35`	`+}`
	`36`	`+.cr-alert-replay {`
	`37`	`+ display: inline-block;`
	`38`	`+ margin-left: 10px;`
	`39`	`+ margin-right: 10px;`
	`40`	`+}`
`29`	`41`	`.cr {`
`30`	`42`	`.cr-menu-bar {`
`31`	`43`	`z-index: 999 !important;`
`32`	`44`	`}`
`33`	`45`	`}`
`34`		`-`
`35`	`46`	`.cr {`
`36`	`47`	`&-chapter {`
`37`	`48`	`border: 2px solid red; // testing`
`@@ -45,7 +56,6 @@ pre {`
`45`	`56`	`text-align: center;`
`46`	`57`	`}`
`47`	`58`	`}`
`48`		`-`
`49`	`59`	`.cr-page {`
`50`	`60`	`position: relative;`
`51`	`61`	`width: 400px;`
`@@ -89,7 +99,22 @@ pre {`
`89`	`99`	`}`
`90`	`100`	`}`
`91`	`101`	`}`
`92`		`-`
	`102`	`+.cr-task-hint {`
	`103`	`+ &-index {`
	`104`	`+ position: absolute;`
	`105`	`+ top: 20px;`
	`106`	`+ left: 20px;`
	`107`	`+ }`
	`108`	`+ &-description {`
	`109`	`+ padding-top: -10px;`
	`110`	`+ padding-left: 35px;`
	`111`	`+ }`
	`112`	`+ .cr-task-hint-box {`
	`113`	`+ div > div {`
	`114`	`+ padding: 0 10px;`
	`115`	`+ }`
	`116`	`+ }`
	`117`	`+}`
`93`	`118`	`.cr {`
`94`	`119`	`&-progress {`
`95`	`120`	`.chapter {`
`@@ -111,7 +136,6 @@ pre {`
`111`	`136`	`}`
`112`	`137`	`}`
`113`	`138`	`}`
`114`		`-`
`115`	`139`	`.cr {`
`116`	`140`	`&-projects {`
`117`	`141`	`height: 100%;`