UI update

src/app/arena/arena.component.scss

@@ -6,7 +6,7 @@
   padding: 20px;
 
   .card {
-    border: 2px solid var(--color);
+    border-bottom: 1px solid var(--color);
     padding: 20px;
     height: 70vh;
     background: var(--dark);
@@ -35,7 +35,6 @@
       display: inline-block;
       background: transparent;
       color: #ddf;
-      border: 2px solid #ddf;
       margin: 2px;
       cursor: pointer;
       transition: 0.25s all;

src/app/arena/arena.component.ts

@@ -32,9 +32,9 @@ export class ArenaComponent implements OnInit {
     editor.setSize('auto', '70vh');
     editor.setValue(this.problem.default_code[0]);
     Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
-      border: '2px solid #ddf',
+      borderBottom: '1px solid #ddf',
       padding: '20px',
-      fontFamily: '"Anonymous Pro", monospace',
+      fontFamily: '"Space Mono", monospace',
     });
 
     let activeLang = 0;

src/app/file/file.component.html

@@ -3,20 +3,17 @@
     <button (click)="onClick()" id="myBtn" style="margin-left: 10px;">Upload A File</button>
 </div>
 
-<div>
-    All submitted Files are listed Below!
+<div class="container">
+  You have {{files.length}} files stored on the server:
 </div>
 
 <div *ngFor="let file of files" class="card">
-  <div class="title">{{file.filename}}</div>
-  <div class="lang">{{file.language}}</div>
-  <div class="details">{{file.text}}</div>
+  <span class="title">{{file.filename}}{{file.language}}</span>
 
-  <button style="margin-right: 15px;">Run File</button>
-  <button style="margin-left: 15px; margin-right: 15px;">Edit File</button>
-  <button style="margin-left: 15px;">Remove From Database</button>
+  <button>Run File</button>
+  <button>Edit File</button>
+  <button>Remove From Database</button>
 
-  <!-- <button [routerLink]="['/arena', problem.id]" class="attempt">Attempt</button> -->
 </div>
 
 <div id="myModal" class="modal">
@@ -25,28 +22,28 @@
   <div class="modal-content">
     <span (click)="onClick2()" class="close">&times;</span>
 
-    <div class="text-center"> 
-      <input class="form-control" type="file" 
-              (change)="onChange($event)"> 
-    
-      <button (click)="onUpload()"  
-          class="btn btn-success"> 
-          Upload 
-      </button> 
-    </div> 
-    
+    <div class="text-center">
+      <input class="form-control" type="file"
+              (change)="onChange($event)">
+
+      <button (click)="onUpload()"
+          class="btn btn-success">
+          Upload
+      </button>
+    </div>
+
     <!-- Shareable short link of  uoloaded file -->
     <div class="container text-center jumbotron"
-        *ngIf="shortLink"> 
-        <h2> Visit Here</h2> 
-        <a href="{{shortLink}}">{{shortLink}}</a> 
-    </div> 
-      
+        *ngIf="shortLink">
+        <h2> Visit Here</h2>
+        <a href="{{shortLink}}">{{shortLink}}</a>
+    </div>
+
     <!--Flag variable is used here-->
-    <div class="container" *ngIf="loading"> 
-        <h3>Loading ...</h3> 
-    </div> 
-    
+    <div class="container" *ngIf="loading">
+        <h3>Loading ...</h3>
+    </div>
+
   </div>
 
-</div>
\ No newline at end of file
+</div>

src/app/file/file.component.scss

 #tray {
+  text-align: center;
+  width: 100%;
+
+  button {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: inline-block;
     text-align: center;
-    // border: 3px solid white;
-    width: 100%;
-    button {
-        margin-top: 10px;
-        margin-bottom: 10px;
-        display: inline-block;
-        text-align: center;
-        font-size: 1rem;
-    }
+    font-size: 1rem;
+  }
+}
+
+.container {
+  margin-bottom: 20px;
 }
 
 .card {
-    margin: 50px 20px;
-    border: 2px solid var(--color);
-    padding: 15px;
-    background: var(--dark);
-  
-    .title {
-      position: absolute;
-      transform: translateY(calc(-25px - 1.2em));
-      background: var(--color);
-      color: var(--bgcolor);
-      padding: 10px 20px;
-      font-size: 1.1em;
-    }
-  
-    .details {
-      margin: 10px;
-    }
+  padding: 15px;
+  background: var(--dark);
+  border-bottom: 1px solid #fff;
+
+  button {
+    float: right;
+    border:none;
+  }
+
+  .title {
+    padding: 10px 20px;
+    font-size: 1.1em;
+  }
+
+  .details {
+    margin: 10px;
+  }
 
-    .lang {
-        margin: 10px;
-    }
+  .lang {
+    margin: 10px;
+  }
 }
 
 .modal {
@@ -45,8 +49,8 @@
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
+  background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
 }
 
 /* Modal Content */

src/app/header/header.component.scss

@@ -2,7 +2,7 @@ nav {
   display: flex;
   justify-content: center;
   background: var(--mix);
-  border-bottom: 2px solid var(--color);
+  border-bottom: 1px solid var(--color);
   user-select: none;
 
   a {
@@ -15,12 +15,12 @@ nav {
     transition: all 0.25s;
 
     &:hover {
-      background: var(--tbg);
+      background: var(--dark);
     }
 
     &.active {
-      background: var(--color);
-      color: var(--bgcolor);
+      background: var(--dark);
+      border-bottom: 1px solid var(--color);
     }
   }
 }

src/app/home/home.component.scss

 .card {
-  margin: 50px 20px;
-  border: 2px solid var(--color);
+  margin: 20px 20px;
+  border-bottom: 1px solid var(--color);
   padding: 15px;
   background: var(--dark);
 
   .title {
-    position: absolute;
-    transform: translateY(calc(-25px - 1.2em));
-    background: var(--color);
-    color: var(--bgcolor);
-    padding: 10px 20px;
-    font-size: 1.1em;
+    padding: 10px 10px;
+    font-size: 1.2em;
   }
 
-  .details {
+  .details, .attempt {
     margin: 10px;
   }
 
-  .attempt {
-    margin: 10px 20px;
-  }
-
   .stats {
     display: inline-block;
     opacity: 0.9;

src/app/ide-compile/ide-compile.component.scss

@@ -3,7 +3,7 @@
   top: calc(40vh - 100px);
   width: 30vw;
   left: calc(35vw - 20px);
-  border: 2px solid #ddf;
+  border-bottom: 1px solid #ddf;
   padding: 20px;
   background: #224;
   transform: scale(0);

src/app/ide/ide.component.scss

@@ -30,7 +30,6 @@
       display: inline-block;
       background: transparent;
       color: #ddf;
-      border: 2px solid #ddf;
       margin: 2px;
       cursor: pointer;
       transition: 0.25s all;

src/app/ide/ide.component.ts

@@ -45,9 +45,9 @@ export class IdeComponent implements OnInit {
     });
     editor.setSize('auto', '70vh');
     Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
-      border: '2px solid #ddf',
+      borderBottom: '1px solid #ddf',
       padding: '20px',
-      fontFamily: '"Anonymous Pro", monospace',
+      fontFamily: '"Space Mono", monospace',
     });
 
     let activeLang = 0;

src/app/input/input.component.scss

@@ -3,7 +3,7 @@
   top: calc(40vh - 100px);
   width: 30vw;
   left: calc(35vw - 20px);
-  border: 2px solid #ddf;
+  border-bottom: 1px solid #ddf;
   padding: 20px;
   background: #224;
   transform: scale(0);
@@ -24,7 +24,7 @@
   font-size: 1.1em;
   background: transparent;
   border: none;
-  font-family: 'Anonymous Pro', monospace;
+  font-family: 'Space Mono', monospace;
   resize: none;
 }
 
@@ -45,3 +45,8 @@
     display: block;
   }
 }
+
+#title {
+  display: block;
+  margin-bottom: 10px;
+}

src/app/save-file/save-file.component.html

@@ -2,7 +2,7 @@
 
 <div id="save-popup" [class.open]="isActive">
   <div *ngIf="!isUploading">
-    <label for="filenameInput">Enter Filename:</label>
+    <label for="filenameInput" id="filenameInputLabel">Enter Filename:</label><br>
     <input id="filenameInput" type="text" name="filenameInput" [(ngModel)]="file.filename">
     <span>{{file.language}}</span>
     <br>

src/app/save-file/save-file.component.scss

@@ -3,7 +3,7 @@
   top: calc(40vh - 100px);
   width: 30vw;
   left: calc(35vw - 20px);
-  border: 2px solid #ddf;
+  border-bottom: 1px solid #ddf;
   padding: 20px;
   background: #224;
   transform: scale(0);
@@ -27,8 +27,14 @@
   font-family: Lato, sans-serif;
 }
 
+#filenameInputLabel {
+  display: block;
+  margin-bottom: 10px;
+}
+
 #save-done, #save-cancel {
   float: right;
+  margin: 0 2px;
 }
 
 #save-cover {

src/app/user/user.component.html

@@ -9,9 +9,8 @@
           <div class="inline-code">{{user.username}}</div>
           <div class="inline-code"><i class="lnr lnr-star"></i> {{user.rating}}</div>
           <div>
-            <a href="" id="edit">Edit Details</a>
-            &nbsp;
-            <a href="" id=" Logout" (click)="logout()">Logout</a>
+            <a href="" id="edit"><button>Edit Details</button></a>
+            <a href="" id=" Logout" (click)="logout()"><button>Logout</button></a>
           </div>
         </div>
       </div>
@@ -35,4 +34,4 @@
       <canvas id="myChart" width="100px" height="100px"></canvas>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>

src/app/user/user.component.scss

@@ -3,7 +3,7 @@
   padding: 20px;
 
   .card {
-    border: 2px solid var(--color);
+    border-bottom: 1px solid var(--color);
     padding: 20px;
     margin: 20px 0;
     background: var(--dark);
@@ -64,6 +64,10 @@
 
 }
 
+a {
+  margin: 2px;
+}
+
 @media screen and (max-width: 800px) {
   #canvas {
     width: 70vw !important;

src/styles.scss

@@ -52,15 +52,32 @@ button {
 }
 
 button {
+  position: relative;
   background: transparent;
-  border: 2px solid var(--color);
+  border: none;
+  border-bottom: 1px solid var(--color);
   padding: 5px 10px;
   cursor: pointer;
-  transition: all 0.25s;
+  transition: all 0.1s;
+
+  &::after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background-color: #ddf;
+    transition: all 0.1s;
+  }
 
   &:hover {
-    background: var(--color);
     color: var(--bgcolor);
+
+    &::after {
+      height: 100%;
+    }
   }
 
   &.disabled {
@@ -70,6 +87,11 @@ button {
     &:hover {
       background: transparent;
       color: #eef;
+
+      &::after {
+        height: 0;
+        opacity: 0;
+      }
     }
   }
 }