add codecard embellishments to table view in my projects (#11264)

Author: riknoll

theme/home.less

@@ -473,11 +473,158 @@
             box-shadow: 0 0 0 3px var(--pxt-neutral-alpha20);
         }
     }
+}
 
+.projectsdialog, .project-row-name {
     .tutorial-progress.not-finished {
         background-color: var(--pxt-primary-background) !important;
         color: var(--pxt-primary-foreground) !important;
     }
+
+    .tutorial-progress i {
+        margin-right: 0 !important;
+        background-color: unset !important;
+        color: var(--pxt-primary-foreground) !important;
+    }
+}
+
+.project-row-name .meta {
+    margin-left: 1rem;
+}
+
+.project-row-time .meta > :not(:first-child) {
+    margin-left: 1rem;
+}
+
+/* File card for the Home screen */
+
+.ui.card.file {
+    .fileimage {
+        position: absolute;
+        top: 0.7rem;
+        left: 0.7rem;
+        width: 4rem;
+        height: 3rem;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-image: @blocksIcon;
+        filter: @logoFilter;
+    }
+
+    .content {
+        margin-left: 4rem;
+        min-width: 5rem;
+        height: 8rem;
+
+        .header {
+            word-break: break-all;
+            overflow: hidden;
+            height: 6.5rem;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .meta {
+        height: 4rem;
+        padding: 1rem;
+        text-align: right;
+    }
+
+    &.blocksprj .fileimage {
+        background-size: 85%;
+    }
+
+    &.tsprj .fileimage {
+        background-size: 65%;
+    }
+}
+
+.ui.table .project-row {
+    .fileimage {
+        filter: @logoFilter;
+        background-size: contain;
+        background-repeat: no-repeat;
+
+        display: inline-block;
+        margin-left: 0.7rem;
+        margin-right: 1rem;
+
+        height: 1.5rem;
+        width: 1.5rem;
+    }
+
+    td.project-row-name {
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        height: 3rem;
+        align-items: center;
+    }
+}
+
+.ui.card.file.github,
+.project-row.github {
+    .fileimage {
+        background-image: @githubFileLogo;
+    }
+}
+
+.ui.card.file.test,
+.project-row.test {
+    .fileimage {
+        background-image: @testFileLogo;
+    }
+}
+
+.ui.card.file.board,
+.project-row.board {
+    .fileimage {
+        background-image: unset;
+    }
+}
+
+.ui.card.file.blocksprj,
+.project-row.blocksprj {
+    .fileimage {
+        background-image: @blocksIcon;
+        background-position-y: 50%;
+    }
+}
+
+.ui.card.file.pyprj,
+.project-row.pyprj {
+    .fileimage {
+        background-image: @pyIcon;
+    }
+}
+
+.ui.card.file.tsprj,
+.project-row.tsprj {
+    .fileimage {
+        background-image: @jsIcon;
+        background-position-y: 50%;
+    }
+}
+
+.ui.card.file.positive,
+.ui.card.file.positive:focus {
+    border-color: var(--pxt-colors-green-background);
+}
+
+.ui.card.file.warning {
+    border-color: @warningBackgroundColor;
+}
+
+.ui.card.file .selected-label {
+    border-color: transparent !important;
+    cursor: pointer;
+
+    i.icon {
+        cursor: pointer;
+        font-size: 2rem;
+        left: 0;
+        top: 1rem;
+    }
 }
 
 .scriptmanager .ui.cards, .projectsdialog {