diff --git a/src/Components/Board/styles.js b/src/Components/Board/styles.js
index 21dc071..ac53775 100644
--- a/src/Components/Board/styles.js
+++ b/src/Components/Board/styles.js
@@ -25,6 +25,14 @@ export default css`
top: 0;
}
+ :global(.sheets .sheet-collection:first-child .problem:first-child .note) {
+ left: 0;
+ }
+
+ :global(.sheets .sheet-collection:last-child .problem:last-child .note) {
+ right: 0;
+ }
+
.sheets-section .trainee-problems-status {
display: flex;
flex-direction: column;
diff --git a/src/Components/Sheet/Sheet.js b/src/Components/Sheet/Sheet.js
index b07f579..2c0f552 100644
--- a/src/Components/Sheet/Sheet.js
+++ b/src/Components/Sheet/Sheet.js
@@ -31,10 +31,7 @@ class Sheet extends React.Component {
>
+
{`${problem.id}. ${problem.name}`}
diff --git a/src/Components/Sheet/styles.js b/src/Components/Sheet/styles.js
index 071ef9d..1bc2246 100644
--- a/src/Components/Sheet/styles.js
+++ b/src/Components/Sheet/styles.js
@@ -1,5 +1,4 @@
import css from 'styled-jsx/css';
-import { lightgrey, greyborders } from '../common';
export default css`
.sheet .title {
@@ -9,10 +8,16 @@ export default css`
align-items: center;
font-size: 14px;
text-decoration: none;
- color: ${greyborders};
- border-bottom: 1px solid ${greyborders};
- background-color: ${lightgrey};
+ color: #666;
+ border-bottom: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+ background-color: #eee;
box-sizing: border-box;
+ transition: all 100ms;
+ }
+
+ .sheet .title:hover {
+ background-color: #e0e0e0;
}
.sheet .problems {
@@ -27,7 +32,17 @@ export default css`
justify-content: center;
align-items: center;
text-decoration: none;
- background-color: ${lightgrey};
+ background-color: #eee;
+ color: #666;
+ border: 1px solid #ccc;
+ border-left: none;
+ border-top: none;
+ box-sizing: border-box;
+ transition: all 100ms;
+ }
+
+ .sheet .problems .problem:hover {
+ background-color: #e0e0e0;
}
.sheet .problems .problem .status {
@@ -35,28 +50,20 @@ export default css`
color: gray;
}
- .sheet .problems .problem .details {
+ .sheet .problems .problem .note {
position: absolute;
z-index: 10;
white-space: nowrap;
font-size: 10px;
- background-color: lightyellow;
+ color: grey;
+ background: lightyellow;
padding: 3px;
- border: 1px solid darkgray;
opacity: 0;
transition: all 300ms;
visibility: hidden;
}
- .sheet .problems .problem:first-child .details {
- left: 0;
- }
-
- .sheet .problems .problem:last-child .details {
- right: 0;
- }
-
- .sheet .problems .problem:hover .details {
+ .sheet .problems .problem:hover .note {
opacity: 1;
visibility: visible;
}
diff --git a/src/Components/Trainee/styles.js b/src/Components/Trainee/styles.js
index 3bc3587..97a4a16 100644
--- a/src/Components/Trainee/styles.js
+++ b/src/Components/Trainee/styles.js
@@ -94,6 +94,7 @@ export default css`
position: absolute;
top: 12px;
white-space: nowrap;
+ color: grey;
background: lightyellow;
padding: 3px;
transition: all 200ms;
diff --git a/src/Components/TraineeList/TraineeList.js b/src/Components/TraineeList/TraineeList.js
index 5cb9834..dab9827 100644
--- a/src/Components/TraineeList/TraineeList.js
+++ b/src/Components/TraineeList/TraineeList.js
@@ -21,8 +21,17 @@ class TraineeList extends React.Component {
className="header"
style={{ height: sheetNameHeight + sheetProblemIdHeight }}
>
-
Trainee
-
Progress
+
Newcomers Training Board
+
+
+ 🕐
+ {' '}
+ Last update: 3 days ago
+
+