change empty tips (#6565)

* [draft] change empty tips

* remove useless codes

frontend/src/css/dingtalk-departments.css

@@ -1,6 +1,7 @@
 .cur-view-content {
   position: relative;
 }
+
 .dir-content-main {
   position: absolute;
   right: 0;
@@ -9,27 +10,25 @@
   overflow-y: hidden;
   padding-right: 1rem;
 }
+
 .dir-content-main:hover {
   overflow-y: auto;
 }
+
 .dir-content-main table td {
   line-height: 2rem;
 }
-.dir-content-main .empty-tip {
-  box-shadow: none;
-}
-.dir-content-main .empty-tip img {
-  width: 140px;
-  height: 140px;
-}
+
 .dir-content-nav {
   position: absolute;
   overflow: hidden;
   width: 24%;
 }
+
 .dir-content-nav:hover {
   overflow: auto;
 }
+
 .dir-content-resize {
   position: absolute;
   left: 25%;
@@ -37,42 +36,51 @@
   width: 1%;
   border-left: 1px solid #eee;
 }
+
 .department-children {
   padding-left: 1rem;
   position: relative;
 }
+
 .tree-node-inner {
   position: relative;
   display: flex;
   padding-right: 1rem;
 }
+
 .tree-node-inner i {
   position: absolute;
   top: 20%;
   left: 0.3rem;
   color: silver;
 }
+
 .tree-node-inner-hover {
   background-color: #FFEFB2;
   border-radius: 0.25rem;
   cursor: pointer;
 }
+
 .tree-node-hight-light {
   color: #fff;
   border-radius: 4px;
   background-color: #feac74 !important;
 }
+
 .tree-node-hight-light i {
   color: #fff;
 }
+
 .tree-node-hight-light .attr-action-icon,
 .tree-node-hight-light .attr-action-icon:focus,
 .tree-node-hight-light .attr-action-icon:hover {
   color: #fff !important;
 }
+
 .tree-node-icon {
   padding-right: 1.5rem;
 }
+
 .tree-node-text {
   width: calc(100% - 2.5rem);
   font-size: 14px;
@@ -81,6 +89,7 @@
   text-overflow: ellipsis;
   line-height: 24px;
 }
+
 .tree-view {
   padding: 12px 12px 12px 0;
   flex: 1 1;

frontend/src/css/empty-tip.css

@@ -0,0 +1,31 @@
+.empty-tip {
+  margin: 5.5em 1em;
+  padding: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.empty-tip .no-items-img-tip {
+  display: inline-block;
+  margin-bottom: 10px; 
+}
+
+.empty-tip .empty-tip-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #212529;
+}
+
+.empty-tip .empty-tip-text {
+  font-size: 14px;
+  font-weight: normal;
+  color: #666;
+}
+
+@media (min-width: 768px) {
+  .empty-tip {
+    padding: 30px 80px;
+  }
+}

frontend/src/css/my-deleted-repos.css

@@ -1,35 +1,29 @@
 .my-deleted-repos-dialog {
-    max-width: 720px;
+  max-width: 720px;
 }
 
 .my-deleted-repos-container {
-    min-height: 200px;
-    max-height: 500px;
-    overflow: auto;
+  min-height: 200px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 .my-deleted-repos-empty-tip {
-    text-align: center;
-    margin: 20px 0;
-}
-
-.my-deleted-repos-empty-tip .empty-explanation {
-    color: #666;
-    font-size: .875rem;
-    margin: 0;
+  text-align: center;
+  margin: 20px 0;
 }
 
 @media (min-width: 768px) {
-    .my-deleted-repos-empty-tip {
-        margin: 104px 0 216px;
-    }
+  .my-deleted-repos-empty-tip {
+    margin: 104px 0 216px;
+  }
 
-    .my-deleted-repos-empty-tip .empty-explanation {
-        margin: 0 7rem;
-    }
+  .my-deleted-repos-empty-tip .empty-explanation {
+    margin: 0 7rem;
+  }
 }
 
 .my-deleted-repos-tip {
-    font-size: .8125rem;
-    color: #9c9c9c;
+  font-size: .8125rem;
+  color: #9c9c9c;
 }

frontend/src/css/repo-seatable-integration-dialog.css

@@ -140,19 +140,6 @@
   font-weight: normal;
 }
 
-.accounts-manage .no-accounts {
-  height: 400px;
-}
-
-.accounts-manage .no-accounts img {
-  width: 120px;
-}
-
-.accounts-manage .no-accounts p {
-  margin-top: 1rem;
-  color: #afafaf;
-}
-
 .accounts-manage .accounts-list-body {
   max-height: 400px;
   overflow-y: auto;

frontend/src/css/user-notifications.css

@@ -120,22 +120,3 @@
   color: #666;
   font-size: 14px;
 }
-
-.notification-dialog-body .empty-tip {
-  margin: 5.5em 1em;
-  border-radius: 3px;
-  padding: 30px;
-  background-color: #fff;
-  text-align: center;
-}
-
-.notification-dialog-body .empty-tip .no-items-img-tip {
-  width: 100px;
-  height: 100px;
-}
-
-@media (min-width: 768px) {
-  .notification-dialog-body .empty-tip {
-    padding: 30px 80px;
-  }
-}

frontend/src/css/work-weixin-departments.css

@@ -1,6 +1,7 @@
 .cur-view-content {
   position: relative;
 }
+
 .dir-content-main {
   position: absolute;
   right: 0;
@@ -9,27 +10,25 @@
   overflow-y: hidden;
   padding-right: 1rem;
 }
+
 .dir-content-main:hover {
   overflow-y: auto;
 }
+
 .dir-content-main table td {
   line-height: 2rem;
 }
-.dir-content-main .empty-tip {
-  box-shadow: none;
-}
-.dir-content-main .empty-tip img {
-  width: 140px;
-  height: 140px;
-}
+
 .dir-content-nav {
   position: absolute;
   overflow: hidden;
   width: 24%;
 }
+
 .dir-content-nav:hover {
   overflow: auto;
 }
+
 .dir-content-resize {
   position: absolute;
   left: 25%;
@@ -37,42 +36,51 @@
   width: 1%;
   border-left: 1px solid #eee;
 }
+
 .department-children {
   padding-left: 1rem;
   position: relative;
 }
+
 .tree-node-inner {
   position: relative;
   display: flex;
   padding-right: 1rem;
 }
+
 .tree-node-inner i {
   position: absolute;
   top: 20%;
   left: 0.3rem;
   color: silver;
 }
+
 .tree-node-inner-hover {
   background-color: #FFEFB2;
   border-radius: 0.25rem;
   cursor: pointer;
 }
+
 .tree-node-hight-light {
   color: #fff;
   border-radius: 4px;
   background-color: #feac74 !important;
 }
+
 .tree-node-hight-light i {
   color: #fff;
 }
+
 .tree-node-hight-light .attr-action-icon,
 .tree-node-hight-light .attr-action-icon:focus,
 .tree-node-hight-light .attr-action-icon:hover {
   color: #fff !important;
 }
+
 .tree-node-icon {
   padding-right: 1.5rem;
 }
+
 .tree-node-text {
   width: calc(100% - 2.5rem);
   font-size: 14px;
@@ -81,6 +89,7 @@
   text-overflow: ellipsis;
   line-height: 24px;
 }
+
 .tree-view {
   padding: 12px 12px 12px 0;
   flex: 1 1;