Dodatne stranice i komponente tako da su vise u skladu sa novom temom (navbar, home, archive).

16 files changed, 156 insertions, 76 deletions

diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index 137c383c..0745f73d 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -45,7 +45,7 @@ export class ColumnTableComponent implements AfterViewInit {
 
       this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => {
         if (response && this.dataset != undefined) {
-          this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter);
+          this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter.toString() == "") ? "," : this.dataset.delimiter);
         }
       });
     });
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 1ce4e6a3..458e6b4f 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -64,10 +64,6 @@
     background-color: var(--ns-primary);
 }
 
-#search ::ng-deep .mat-form-field-wrapper {
-    margin-top: -2.1rem;
-}
-
 #searchbar {
     height: 2.5rem;
     background-color: var(--ns-bg-dark-100);
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
index 56eb3cef..da31cfcb 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
@@ -1,46 +1,48 @@
 .folderBox {
     width: 100%;
-    height: 90%;
+    height: 100%;
     position: relative;
 }
 
-.file-container{
+.file-container {
     border: 4px solid transparent;
     position: relative;
     margin-left: 3%;
     margin-top: 3rem;
     width: 94%;
-    min-height: 500px;
+    min-height: 300px;
+    height: 75%;
 }
-.fileButton{
+
+.fileButton {
     position: absolute;
     margin-top: -3rem;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
-.fileButton label{
+
+.fileButton label {
     margin-left: 10px;
 }
-.dottedClass
-{
+
+.dottedClass {
     border: 4px dotted white;
     border-radius: 25px;
 }
 
-.hidden{
+.hidden {
     visibility: hidden;
 }
 
 .file {
     position: absolute;
-   width: 100%;
-   height: 100%;
-   opacity: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
 }
 
-.file input{
-
+.file input {
     border-radius: 4px;
     margin-top: -15px;
     width: 100%;
@@ -55,9 +57,9 @@
 }
 
 .bottomBar {
-    position: absolute;
-    bottom: -6%;
-    left: 5%;
+    width: 50%;
+    margin: 1rem;
+    align-items: flex-start;
 }
 
 #bottomButton {
diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css
index 5776085f..8c279523 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -21,7 +21,6 @@ mat-form-field {
 hr {
     color: var(--offwhite) !important;
     margin-bottom: 30px;
-    
 }
 
 .neuron {
@@ -33,16 +32,14 @@ hr {
     background-color: var(--ns-bg-dark-100) !important;
     min-width: none;
     max-width: 12.5rem;
-
 }
 
-
 .row {
     margin: 0;
     padding: 0;
 }
 
-::ng-deep .mat-form-field-wrapper {
+.mat-fix ::ng-deep .mat-form-field-wrapper {
     margin-bottom: -1.85em;
 }
 
@@ -70,12 +67,21 @@ hr {
     margin: 5px;
     padding: 0px;
     width: 12rem;
-    height: 13.5rem;
+    height: 11.1rem;
+}
+
+.tm {
+    margin-left: 10px;
+}
+
+.layer>* {
+    margin-top: 0;
 }
 
 .layer>mat-form-field {
     margin-left: 0;
 }
-.m-2{
+
+.m-2 {
     max-height: 20 rem;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 2139a1c0..f11b609d 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -2,13 +2,13 @@
     <div class="ns-row">
 
         <div class="ns-col">
-            <mat-form-field class="example-full-width" appearance="fill">
+            <mat-form-field class="example-full-width" appearance="fill" class="mat-fix">
                 <mat-label>Naziv</mat-label>
                 <input type="text" matInput [(ngModel)]="newModel.name">
             </mat-form-field>
         </div>
         <div class="ns-col">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" class="mat-fix">
                 <mat-label>Tip problema</mat-label>
                 <mat-select [(ngModel)]="newModel.type">
                     <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option">
@@ -21,7 +21,7 @@
         <div class="break-1"></div>
 
         <div class="ns-col">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" class="mat-fix">
                 <mat-label>Optimizacija</mat-label>
                 <mat-select [(ngModel)]="newModel.optimizer">
                     <mat-option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option">
@@ -32,21 +32,20 @@
             </mat-form-field>
         </div>
         <div class="ns-col">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" class="mat-fix">
                 <mat-label>Funkcija troška</mat-label>
                 <mat-select [(ngModel)]="newModel.lossFunction">
                     <mat-option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" [value]="option">
                         {{ optionName }}
                     </mat-option>
                 </mat-select>
-
             </mat-form-field>
         </div>
 
         <div class="break-2"></div>
 
         <div class="ns-col">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" class="mat-fix">
                 <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
                 <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
                     <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option">
@@ -56,7 +55,7 @@
             </mat-form-field>
         </div>
         <div class="ns-col">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" class="mat-fix">
                 <mat-label>Stopa učenja</mat-label>
                 <mat-select [(ngModel)]="newModel.learningRate">
                     <mat-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option">
@@ -69,13 +68,13 @@
         <div class="break-1"></div>
 
         <div class="ns-col">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" class="mat-fix">
                 <mat-label>Broj epoha</mat-label>
                 <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000">
             </mat-form-field>
         </div>
         <div class="ns-col">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" class="mat-fix">
                 <mat-label>Broj uzoraka po iteraciji</mat-label>
 
                 <mat-select matNativeControl required [(value)]="newModel.batchSize">
@@ -108,7 +107,7 @@
     </div>
     <div class="break-1"></div>
     <div class="ns-col">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="mat-fix">
             <mat-label>Aktivaciona funkcija svih slojeva</mat-label>
 
             <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()">
@@ -120,14 +119,14 @@
     </div>
 
     <div class="ns-col">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="mat-fix">
             <mat-label>Broj Neurona svih slojeva</mat-label>
             <input matInput type="number" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()">
         </mat-form-field>
     </div>
     <div class="break-2"></div>
     <div class="ns-col">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="mat-fix">
             <mat-label>Regularizacija svih slojeva</mat-label>
             <mat-select [(ngModel)]="selectedRegularisation" (selectionChange)="changeAllRegularisation()">
                 <mat-option *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)" [value]="option">
@@ -138,7 +137,7 @@
     </div>
 
     <div class="ns-col">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="mat-fix">
             <mat-label>Stopa regularizacije svih slojeva</mat-label>
             <mat-select [(ngModel)]="selectedRegularisationRate" (selectionChange)="changeAllRegularisationRate()">
                 <mat-option *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)" [value]="option">
@@ -152,13 +151,12 @@
 </div>
 
 <!--kraj selectall**********************************************************************************-->
-<hr>
 <div id="layers">
 
     <div class="layer" *ngFor="let item of newModel.layers; let i=index">
 
 
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="mat-fix">
             <mat-label>Aktivacija</mat-label>
             <button matPrefix class="btn-clear center-center text-offwhite">        
                 <div>
@@ -172,7 +170,7 @@
             </mat-select>
         </mat-form-field>
 
-        <div class="d-flex flex-row align-items-center justify-content-center m-1">
+        <div class="d-flex flex-row align-items-center justify-content-center tm">
             <div class="col-6" style="font-size: 13px;">Broj čvorova</div>
             <button class="btn-clear btn-icon" (click)="addNeuron(i)">
                 <mat-icon>add</mat-icon>
@@ -183,7 +181,7 @@
             </button>
         </div>
 
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="mat-fix">
             <mat-label>Regularizacija</mat-label>
             <mat-select [(ngModel)]="newModel.layers[i].regularisation">
                 <mat-option *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)" [value]="option">
@@ -192,7 +190,7 @@
             </mat-select>
         </mat-form-field>
 
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="mat-fix">
             <mat-label>Stopa regularizacije</mat-label>
             <mat-select [(ngModel)]="newModel.layers[i].regularisationRate">
                 <mat-option *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)" [value]="option">
diff --git a/frontend/src/app/_elements/navbar/navbar.component.css b/frontend/src/app/_elements/navbar/navbar.component.css
index e69de29b..fcfad876 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.css
+++ b/frontend/src/app/_elements/navbar/navbar.component.css
@@ -0,0 +1,8 @@
+.dropdown-item:hover {
+    background-color: var(--ns-primary);
+}
+
+h4 {
+    margin-top: 0.82rem;
+    margin-right: 10px;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 9a54a9de..105151aa 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -2,11 +2,11 @@
     <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
             <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
-                <img src="../../../assets/images/logo_igrannonica_temp.png" class="bi me-2" width="64" height="64">
+                <img src="../../../assets/images/logo.png" class="bi me-2" width="64" height="64">
+                <h4>Igr<span class="highlight">ann</span>onica</h4>
             </a>
 
             <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
-                <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-primary' : 'text-offwhite'">Početna</a></li>
                 <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-primary' : 'text-offwhite'">Napravi eksperiment</a>
                 </li>
                 <li><a routerLink="archive" class="nav-link px-2" [class]="(currentUrl === '/archive') ? 'text-primary' : 'text-offwhite'">Arhiva</a>
@@ -17,7 +17,7 @@
                 <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                     <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle">
                 </a>
-                <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end">
+                <ul class="dropdown-menu text-small ns-bg-dark-100" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end">
                     <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li>
                     <li>
                         <hr class="dropdown-divider">
@@ -26,10 +26,10 @@
                 </ul>
             </div>
             <div *ngIf="!shared.loggedIn" class="dropdown text-end">
-                <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin">
+                <button type="button" mat-raised-button color="accent" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin">
                     Prijavi se
                 </button>
-                <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" data-bs-target="#modalForRegister">
+                <button type="button" mat-raised-button color="accent" data-bs-toggle="modal" data-bs-target="#modalForRegister">
                     Registruj se
                 </button>
             </div>
diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts
index 368508ed..e2551f7a 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.ts
+++ b/frontend/src/app/_elements/navbar/navbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Location } from '@angular/common';
 import { AuthService } from '../../_services/auth.service';
 import shared from 'src/app/Shared';
@@ -8,7 +8,8 @@ import { MatDialog } from '@angular/material/dialog';
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.css']
+  styleUrls: ['./navbar.component.css'],
+  encapsulation: ViewEncapsulation.Emulated
 })
 export class NavbarComponent implements OnInit {
 
diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts
index 74527b39..7529b36b 100644
--- a/frontend/src/app/_elements/playlist/playlist.component.ts
+++ b/frontend/src/app/_elements/playlist/playlist.component.ts
@@ -37,7 +37,7 @@ export class PlaylistComponent implements OnInit {
             tableData.loaded = true;
             tableData.numRows = dataset.rowCount;
             tableData.numCols = dataset.columnInfo.length;
-            tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
+            tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter.toString() == "") ? "," : dataset.delimiter);
             this.tableDatas!.push(tableData);
           }
         });
diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html
index 1d5d144f..8cc7f0fd 100644
--- a/frontend/src/app/_pages/archive/archive.component.html
+++ b/frontend/src/app/_pages/archive/archive.component.html
@@ -1,17 +1,23 @@
 <div class="d-flex flex-column align-items-center">
-    <div *ngIf="publicDatasets.length > 0" class="my-5">
+    <div class="my-5" style="height: fit-content;">
         <app-playlist [datasets]="publicDatasets"></app-playlist>
-
-        <div class="rounded-pill bg-light p-4 m-2 text-center position-relative">
-            <a routerLink="browse-datasets" class="stretched-link">Pogledaj sve javne izvore podataka...</a>
-        </div>
     </div>
 
     <div id="cards" class="row align-items-view align-items-stretch justify-content-center">
         <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;">
             <div class="card-body">
+                <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training
+                </mat-icon>
+                <h3 class="card-title my-2">Moji eksperimenti</h3>
+                <p class="card-text">
+                    <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.
+                </p>
+            </div>
+        </div>
+        <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;">
+            <div class="card-body">
                 <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon>
-                <h3 class="card-title my-2">Moji izvori podataka</h3>
+                <h3 class="card-title my-2">Izvori podataka</h3>
                 <p class="card-text">
                     <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore podataka, ili dodajte novi.
                 </p>
@@ -21,7 +27,7 @@
             <div class="card-body">
                 <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training
                 </mat-icon>
-                <h3 class="card-title my-2">Moji modeli</h3>
+                <h3 class="card-title my-2">Modeli</h3>
                 <p class="card-text">
                     <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.
                 </p>
diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css
index e69de29b..22137c24 100644
--- a/frontend/src/app/_pages/home/home.component.css
+++ b/frontend/src/app/_pages/home/home.component.css
@@ -0,0 +1,20 @@
+.logo {
+    margin: 0 !important;
+}
+
+#title {
+    color: var(--offwhite);
+}
+
+h1 {
+    font-size: 64px !important;
+    font-weight: 900 !important;
+    margin-top: 1rem;
+    margin-bottom: 2.5rem;
+}
+
+.card {
+    margin: 2.5rem !important;
+    padding: 3rem;
+    width: 26rem !important;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index e682d8dd..508382da 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -1,20 +1,32 @@
 <div class="d-flex flex-column align-items-center">
-    <div class="ann-logo">
-        <img src="../../../assets/images/logo_igrannonica_temp.png" class="bi me-2" width="256" height="256" role="img">
+    <div class="logo">
+        <img src="../../../assets/images/logo.png" class="bi me-2" width="256" height="256" role="img">
     </div>
 
-    <div class="d-flex flex-column align-items-center">
+    <div id="title">
+        <h1>Igr<span class="highlight">ann</span>onica</h1>
+    </div>
 
-        <div class="rounded-pill bg-light px-4 m-4 shadow-accent position-relative">
-            <a routerLink="experiment" class="stretched-link">
-                <h2 class="my-4">Započnite sa eksperimentisanjem!
-                    <mat-icon>lightbulb</mat-icon>
-                </h2>
-            </a>
+    <div id="cards" class="row align-items-view align-items-stretch justify-content-center">
+        <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;">
+            <div class="card-body">
+                <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training</mat-icon>
+                <h3 class="card-title my-2">Experimentiši</h3>
+                <p class="card-text">
+                    U tri koraka <a class="stretched-link" routerLink="experiment">napravite novu neuronsku mrežu</a>. Koristite postojeće izvore podataka, modele, itd.
+                </p>
+            </div>
+        </div>
+        <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;">
+            <div class="card-body">
+                <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage
+                </mat-icon>
+                <h3 class="card-title my-2">Arhiva</h3>
+                <p class="card-text">
+                    <a class="stretched-link" routerLink="archive">Upravljajte</a> izvorima podataka, eksperimentima, modelima, i rezultatima treniranja. Pogledajte podatke koje su podelili drugi korisnici.
+                </p>
+            </div>
         </div>
-
-
-
     </div>
 
 </div>
\ No newline at end of file
diff --git a/frontend/src/assets/images/logo.png b/frontend/src/assets/images/logo.png
index 2e15550a..dc8830de 100644
--- a/frontend/src/assets/images/logo.png
+++ b/frontend/src/assets/images/logo.png
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index c8d240f6..d4772134 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -32,7 +32,6 @@
     text-align: center;
 }
 
-
 .row-height {
     white-space: nowrap;
     height: 1rem;
@@ -131,4 +130,15 @@
     position: absolute;
     top: 5px;
     right: 5px;
+}
+
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px var(--ns-bg) inset !important;
+    -webkit-text-fill-color: var(--ns-accent) !important;
+}
+
+a {
+    color: var(--ns-accent) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index 676bec32..c0af31c3 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -31,9 +31,26 @@ body {
     padding: 2px;
     margin-bottom: 0;
     padding-bottom: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 50%;
+}
+
+@media screen and (min-width: 1200px) {
+    .ns-col {
+        flex-basis: 25%;
+    }
 }
 
-.break-1,
+@media screen and (min-width: 1600px) {
+    .ns-col {
+        flex-basis: 12.5%;
+        width: 10%;
+    }
+}
+
+*/
+/*.break-1,
 .break-2 {
     height: 1px;
     width: 100%;
@@ -45,11 +62,11 @@ body {
     }
 }
 
-@media screen and (min-width: 2175px) {
+@media screen and (min-width: 1600px) {
     .break-2 {
         display: none;
     }
-}
+}*/
 
 .center-center {
     text-align: center;
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index c517e885..a76f4714 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -45,6 +45,10 @@ a {
     color: var(--offwhite) !important;
 }
 
+.highlight {
+    color: var(--ns-accent);
+}
+
 
 /* Ripple effect */