Submission css

resources/submission.scss

@@ -5,64 +5,58 @@
     width: 20%;
 }
 
-#submissions-table {
-    background: white;
-}
-
 .submission-row {
     display: flex;
-    border-left: #ccc 1px solid;
-    border-right: #ccc 1px solid;
     transition: background-color linear 0.2s;
-
-    &:hover {
-        background: #F2F2F2;
-    }
-
-    &:first-of-type {
-        border-top: #ccc 1px solid;
-        border-top-left-radius: $widget_border_radius;
-        border-top-right-radius: $widget_border_radius;
-        .sub-result {
-            border-top-left-radius: $widget_border_radius;
-        }
-    }
-
-    > div {
-        padding: 7px 5px;
-        vertical-align: middle;
-        border-bottom: #ccc 1px solid;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
+    margin-bottom: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    align-items: center;
+    padding: 10px;
+    background: white;
 
     .sub-result {
-        min-width: 80px;
-        width: 80px;
-        text-align: center;
-        border-bottom-color: white;
-        border-right: #ccc 1px solid;
+        display: flex;
+        align-items: center;
+        font-size: 0.9em;
+        font-weight: 600;
+        gap: 10px;
 
         .state {
-            font-size: 0.7em;
-            font-weight: bold;
-            padding-top: 0.5em;
+            font-size: 0.9em;
+            padding: 5px 10px;
+            border-radius: 15px;
+        }
+
+        .language {
+            background-color: #e1e1e1;
+            border-radius: 5px;
+            padding: 2px 8px;
         }
 
         .score {
-            font-size: 1.3em;
-            color: #000;
+            font-size: 1.2em;
         }
     }
 
+    .sub-details {
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
     .sub-info {
         flex: 1;
-        padding-left: 20px !important;
+        display: flex;
+        gap: 5px;
+        font-size: 1.2em;
+        margin-bottom: 5px;
 
         .name {
             font-weight: 700;
-            font-size: 1.2em;
+        }
+
+        .name:hover {
+            text-decoration: underline;
         }
     }
 
@@ -78,16 +72,31 @@
     }
 
     .sub-usage {
-        min-width: 70px;
-        width: 70px;
+        margin-left: auto;
         white-space: nowrap;
-        text-align: center;
-        border-left: #ccc 1px solid;
+        text-align: right;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
 
         .time {
             font-weight: bold;
         }
     }
+    .sub-user-img {
+        flex-shrink: 0;
+        width: 50px;
+        height: 50px;
+        background-color: #ddd;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
 }
 
 .sub-prop .fa {