Draft review (#2416)

frontend/src/css/layout.css

@@ -1,4 +1,4 @@
-#wrapper {
+#wrapper, .wrapper {
   width: 100%;
   height: 100%;
   display: flex;
@@ -7,7 +7,6 @@
 
 /* for top bottom layout*/
 #header {
-  height: 49px;
   display: flex;
 }
 
@@ -112,4 +111,82 @@
 [role=group] {
   display: flex;
   flex: 1;
-}
+}
+
+.header {
+  padding: 0.625rem;
+  display: flex;
+  flex-shrink:0;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
+}
+
+.header .cur-file-info {
+  display: flex;
+  margin-left: 0.5rem;
+}
+
+.header .info-item {
+  display: flex;
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-right: 0.5rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.header .file-copywriting {
+  margin-left: 0.5rem;
+  font-size: 1rem;
+  font-weight: normal;
+  color: #999;
+}
+
+.header .file-feature {
+  width: 2.9375rem;
+  height: 2.9375rem;
+  font-size: 1.8rem;
+  background-color: #fbcb09;
+  color: #fff;
+}
+
+.header .file-operation-btn {
+  margin-right: 0.25rem;
+}
+
+.review {
+  padding: 0;
+}
+
+.review .cur-file-info {
+  margin: 0;
+}
+
+.review .file-feature {
+  width: 4.1875rem;
+  height: 4.1875rem;
+  font-size: 2rem;
+}
+
+.review-state {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin: auto 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.review-state-finished {
+  color: #316100;
+  background-color: #dff1cc;
+  border-color: #d2ecb8;
+}
+
+.review-state-closed {
+  color: #6b1110;
+  background-color: #f5d2d2;
+  border-color: #f1c1c0;
+}