feat: enhance sheets styles

icpc-scu-community · Feb 9, 2020 · 3b15c1e · 3b15c1e
1 parent e9cf31d
commit 3b15c1e
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 43 deletions.
diff --git 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
@@ -31,10 +31,7 @@ class Sheet extends React.Component {
               >
                 <div className="id">{problem.id}</div>
                 <div className="status">(999/999)</div>
-                <div
-                  className="details"
-                  style={{ top: sheetProblemIdHeight - 5 }}
-                >
+                <div className="note" style={{ top: sheetProblemIdHeight - 5 }}>
                   {`${problem.id}. ${problem.name}`}
                 </div>
               </a>

diff --git 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,36 +32,38 @@ 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 {
     font-size: 10px;
     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
@@ -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
@@ -21,8 +21,17 @@ class TraineeList extends React.Component {
             className="header"
             style={{ height: sheetNameHeight + sheetProblemIdHeight }}
           >
-            <div>Trainee</div>
-            <div style={{ width: progressWidth }}>Progress</div>
+            <div className="title">Newcomers Training Board</div>
+            <div className="last-update">
+              <span role="img" aria-label="">
+                🕐
+              </span>{' '}
+              Last update: 3 days ago
+            </div>
+            <div className="list-desc">
+              <div>Trainee</div>
+              <div style={{ width: progressWidth }}>Progress</div>
+            </div>
           </div>
           <div
             className="trainees"

diff --git a/src/Components/TraineeList/styles.js b/src/Components/TraineeList/styles.js
@@ -1,5 +1,4 @@
 import css from 'styled-jsx/css';
-import { lightgrey, greyborders } from '../common';
 
 export const progressWidth = 75;
 const listItemPadding = 10;
@@ -10,27 +9,42 @@ export default css`
     flex-direction: column;
     background: white;
     box-sizing: border-box;
-    border-right: 1px solid ${greyborders};
+    border-right: 1px solid #ccc;
   }
 
   .trainee-list .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-end;
-    text-transform: uppercase;
-    font-size: 14px;
-    cursor: default;
-    background: white;
     position: sticky;
     top: 0;
     z-index: 10;
-    padding: 0 ${listItemPadding}px;
-    background: ${lightgrey};
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: #eee;
+    cursor: default;
+    padding: ${listItemPadding}px;
     padding-bottom: 5px;
     box-sizing: border-box;
-    border-bottom: 1px solid ${greyborders};
-    color: ${greyborders};
+    border-bottom: 1px solid #ddd;
+  }
+
+  .header .title {
+    font-size: 16px;
+  }
+
+  .header .last-update {
+    font-size: 12px;
+    margin-top: -5px;
+    color: #666;
+  }
+
+  .header .list-desc {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: #939393;
   }
 
   .list-item .list-item-content {
@@ -67,7 +81,7 @@ export default css`
     width: ${progressWidth}px;
     height: 70%;
     z-index: 0;
-    background-color: lightgray;
+    background-color: #ddd;
     border: 1px solid green;
     box-sizing: border-box;
     border-radius: 3px;

diff --git a/src/Components/common.js b/src/Components/common.js
@@ -1,7 +1,4 @@
-export const sheetNameHeight = 25;
-export const sheetProblemIdHeight = 35;
+export const sheetNameHeight = 30;
+export const sheetProblemIdHeight = 40;
 export const blockSize = 55;
 export const paddingBetweenRows = 3;
-
-export const lightgrey = '#e1e1e1';
-export const greyborders = '#939393';