From 211b2534aea43ff0df771fb700688cbf7e35a264 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Fri, 22 Apr 2022 23:29:10 +0200
Subject: Razdvojio css po fajlovima da bi smanjili buduce konflikte.

---
 frontend/src/styles/layout.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 frontend/src/styles/layout.css

(limited to 'frontend/src/styles/layout.css')

diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
new file mode 100644
index 00000000..e24da375
--- /dev/null
+++ b/frontend/src/styles/layout.css
@@ -0,0 +1,13 @@
+/*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/
+
+.align-items-view>*:first-child {
+    transform: perspective(100em) rotateY(25deg) translateZ(1em);
+}
+
+.align-items-view>* {
+    transform: perspective(100em) translateZ(-2em);
+}
+
+.align-items-view>*:last-child {
+    transform: perspective(100em) rotateY(-25deg) translateZ(1em);
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 8497bc988f2a5cbca10ee6870708bd4c06c24dd2 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sun, 24 Apr 2022 21:47:00 +0200
Subject: Promenio temu material-a tako da se poklapa sa nasom temom. Dodao
 responzivnost za eksperiment stranu.

---
 frontend/angular.json                              | 216 ++++++++---------
 .../src/app/_elements/folder/folder.component.css  |   4 +-
 .../src/app/_elements/folder/folder.component.html |   4 +-
 .../src/app/_elements/folder/folder.component.ts   |   1 -
 .../src/app/_elements/navbar/navbar.component.html |   2 +-
 .../app/_pages/experiment/experiment.component.css |  47 ++--
 .../_pages/experiment/experiment.component.html    |  83 ++++---
 .../app/_pages/experiment/experiment.component.ts  |  16 +-
 frontend/src/app/app.component.html                |   6 +-
 frontend/src/app/app.component.ts                  |  18 +-
 frontend/src/custom-theme.scss                     | 267 +++++++++++++++++++--
 frontend/src/styles/layout.css                     |   5 +
 frontend/src/styles/theme.css                      |  18 ++
 13 files changed, 452 insertions(+), 235 deletions(-)

(limited to 'frontend/src/styles/layout.css')

diff --git a/frontend/angular.json b/frontend/angular.json
index d1983d31..13c27f40 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -1,117 +1,113 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "frontend": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/frontend",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/custom-theme.scss",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css",
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
-            ],
-            "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "4mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "10kb",
-                  "maximumError": "15kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "frontend": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:application": {
+                    "strict": true
                 }
-              ],
-              "outputHashing": "all"
             },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "browserTarget": "frontend:build:production"
-            },
-            "development": {
-              "browserTarget": "frontend:build:development"
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/frontend",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "src/styles.css",
+                            "src/custom-theme.scss"
+                        ],
+                        "scripts": [
+                            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [{
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "4mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "10kb",
+                                    "maximumError": "15kb"
+                                }
+                            ],
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                            }],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "frontend:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "frontend:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "frontend:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+                            "src/styles.css"
+                        ],
+                        "scripts": []
+                    }
+                }
             }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "frontend:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
         }
-      }
-    }
-  },
-  "defaultProject": "frontend",
-  "cli": {
-    "warnings": {
-      "versionMismatch": false
+    },
+    "defaultProject": "frontend",
+    "cli": {
+        "warnings": {
+            "versionMismatch": false
+        }
     }
-  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index cfb0d087..a1c1124a 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -55,7 +55,7 @@
 }
 
 .tab-link:active {
-    color: var(--ns-accent) !important;
+    text-decoration: underline !important;
 }
 
 .selected-tab {
@@ -107,7 +107,7 @@
 .folder-bottom-button {
     font-size: large;
     position: relative;
-    background-color: var(--ns-bg-dark-100);
+    background-color: var(--ns-bg-dark-50);
     width: 10rem;
     height: 2.5rem;
     display: flex;
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 11fccc56..895ac84e 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -51,13 +51,13 @@
         {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}
     </div>
     <div id="footer">
-        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="newFileSelected">
+        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="newFileSelected">
             <a class="tab-link stretched-link">Sačuvaj</a>
             <div>
                 <mat-icon>check</mat-icon>
             </div>
         </div>
-        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="!newFileSelected">
+        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="!newFileSelected">
             <a class="tab-link stretched-link">Ok</a>
             <div class="icon-double">
                 <mat-icon>check</mat-icon>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 34c8db82..485a8dd7 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -97,7 +97,6 @@ export class FolderComponent implements OnInit {
   newFileZIndex() {
     return (this.files.length + 1);
   }
-
 }
 
 export enum FolderType {
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 5390136d..09d83bd1 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-<header class="sticky-top p-3 bg-dark text-white">
+<header class="bg-dark text-white">
     <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">
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index 34e412ef..5cb8c325 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -1,37 +1,32 @@
-ul{
+ul {
     list-style: none;
 }
-.navmenu{
-    position: absolute;
-    background-color: var(--ns-bg-dark-50);
-    height: 90%;
-    width: 250px;
+
+.holder {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
 }
-.navmenuwrapper{
-    position: relative;
-    top:40%;
-    transform: translateY(-50%);
+
+.sidenav {
+    width: 250px;
+    background-color: var(--ns-bg-dark-50);
 }
 
+@media only screen and (max-width: 400px) {
+    .sidenav {
+        width: 100%;
+        background-color: var(--ns-bg-dark-100);
+    }
+    .holder {
+        flex-direction: column;
+    }
+}
 
-mat-stepper{
+mat-stepper {
     background-color: transparent;
 }
 
-::ng-deep .mat-step-header .mat-step-icon .mat-step-content{
-    background-color: white;
-    color:var(--ns-primary); 
-  }
-::ng-deep .mat-step-header .mat-step-icon{
-    color:white;
-}
-::ng-deep .mat-step-header .mat-step-icon-state-done{
-    background: var(--ns-primary);
-    color:var(--ns-primary)
-}
-::ng-deep .mat-step-header .mat-step-icon-state-done .label{
-    color:var(--ns-primary)
-}
-.label{
+.label {
     color: white;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 2f1a86fd..2c69ae9c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,46 +1,51 @@
+<!--<div #wrapper class="text-offwhite d-flex flex-row">
+    <div class="navmenu d-flex flex-column flex-shrink-0 p-3">
+        
+    </div>
+
+    <div class="position-relative">
+        <div *ngIf="event==0" class="overflow-y-auto">
+            <app-folder></app-folder>
+        </div>
+        <div *ngIf="event==1">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
+        </div>
+        <div *ngIf="event==2">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
+        </div>
+    </div>
+</div>-->
 
-<div class="wrapper">   
-    
-    <nav class="navmenu">
-        <div class="navmenuwrapper text-offwhite">
-          <mat-stepper orientation="vertical" (selectionChange)="ChangePage($event)">
+<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);">
+    <div class="d-flex flex-colum align-items-center sidenav">
+        <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
-              <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
-              <ng-template matStepContent>
-                <p>Izaberite vas izvor podataka</p>
-              </ng-template>
+                <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Izaberite vas izvor podataka</p>
+                </ng-template>
             </mat-step>
             <mat-step>
-              <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
-              <ng-template matStepContent>
-                <p>Pripremite podatke i izaberite izlazne kolone</p>
-              </ng-template>
+                <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Pripremite podatke i izaberite izlazne kolone</p>
+                </ng-template>
             </mat-step>
-            <mat-step >
-              <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
-              <p>Odaberite parametre i trenirajte model</p>
+            <mat-step>
+                <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
+                <p>Odaberite parametre i trenirajte model</p>
             </mat-step>
-          </mat-stepper>
+        </mat-stepper>
+    </div>
+    <div class="d-flex flex-colum w-100 position-relative">
+        <div *ngIf="event==0">
+            <app-folder></app-folder>
         </div>
-
-          
-
-    </nav>
-    
-    
-
-    
-
-</div>
-
-<div *ngIf="event==0"><app-folder></app-folder></div>
-<div *ngIf="event==1">
-  <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
-</div>
-<div *ngIf="event==2">
-  <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
-</div>
-
-
-
-
+        <div *ngIf="event==1">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
+        </div>
+        <div *ngIf="event==2">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index c8b301ca..2d623709 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,24 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 @Component({
   selector: 'app-experiment',
   templateUrl: './experiment.component.html',
   styleUrls: ['./experiment.component.css']
 })
-export class ExperimentComponent implements OnInit {
-
-event:number=0;
+export class ExperimentComponent {
 
+  event: number = 0;
 
   constructor() { }
 
-  ngOnInit(): void {
-  }
-
-  ChangePage(event:StepperSelectionEvent){
-    this.event=event.selectedIndex;
+  changePage(event: StepperSelectionEvent) {
+    this.event = event.selectedIndex;
     console.log(this.event);
-
   }
 
+
 }
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 8c3f4e9e..d15793e7 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -6,10 +6,8 @@
 <app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="5" [cursorDistance]="0.22" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="100">
 </app-reactive-background>
 <app-navbar></app-navbar>
-<a class="bg-controls" routerLink="playground">
+<a class="bg-controls" style="z-index: 1000;" routerLink="playground">
     <mat-icon color="accent">settings_suggest</mat-icon>
 </a>
-<div class="h-100">
-    <router-outlet></router-outlet>
-</div>
+<router-outlet></router-outlet>
 <app-notifications></app-notifications>
\ No newline at end of file
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 4a0d85c8..f9bc2726 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { filter, map } from 'rxjs';
@@ -11,9 +11,11 @@ import Shared from './Shared';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
   constructor(private router: Router, private titleService: Title, private authService: AuthService, private signalRService: SignalRService, private http: HttpClient) {
 
+  }
+  ngAfterViewInit(): void {
   }
 
   ngOnInit() {
@@ -42,17 +44,5 @@ export class AppComponent implements OnInit {
     }
     this.signalRService.startConnection();
     //this.startHttpRequest();
-
-
-
-
-  }
-  private startHttpRequest = () => {
-    this.http.get('http://localhost:5283/chatHub')
-      .subscribe(res => {
-        console.log(res);
-      })
   }
-
-
 }
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index a6538c37..8f716240 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -1,35 +1,250 @@
+/**
+* Generated theme by Material Theme Generator
+* https://materialtheme.arcsine.dev
+* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwNjNhYiIsIj9lcjwjYjNkMGU2IiwiO2VyPCMwMDQ3OTF$LCIlPmBePCMwMGE4ZTgiLCI~ZXI8I2IzZTVmOCIsIjtlcjwjMDA4ZGRlfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCMwMDQxNjUiLCI~PTwjZGZkN2Q3IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDQxNjV$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
+*/
 
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
-
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
+// Fonts
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+$fontConfig: ( display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
+display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
+display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
+display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
+headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
+title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
+subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px));
+// Foreground Elements
+// Light Theme Text
+$dark-text: #004165;
+$dark-primary-text: rgba($dark-text,
+0.87);
+$dark-accent-text: rgba($dark-primary-text,
+0.54);
+$dark-disabled-text: rgba($dark-primary-text,
+0.38);
+$dark-dividers: rgba($dark-primary-text,
+0.12);
+$dark-focused: rgba($dark-primary-text,
+0.12);
+$mat-light-theme-foreground: ( base : black,
+divider : $dark-dividers,
+dividers : $dark-dividers,
+disabled : $dark-disabled-text,
+disabled-button : rgba($dark-text, 0.26),
+disabled-text : $dark-disabled-text,
+elevation : black,
+secondary-text : $dark-accent-text,
+hint-text : $dark-disabled-text,
+accent-text : $dark-accent-text,
+icon : $dark-accent-text,
+icons : $dark-accent-text,
+text : $dark-primary-text,
+slider-min : $dark-primary-text,
+slider-off : rgba($dark-text, 0.26),
+slider-off-active: $dark-disabled-text,
+);
+// Dark Theme text
+$light-text: #dfd7d7;
+$light-primary-text: $light-text;
+$light-accent-text: rgba($light-primary-text,
+0.7);
+$light-disabled-text: rgba($light-primary-text,
+0.5);
+$light-dividers: rgba($light-primary-text,
+0.12);
+$light-focused: rgba($light-primary-text,
+0.12);
+$mat-dark-theme-foreground: ( base : $light-text,
+divider : $light-dividers,
+dividers : $light-dividers,
+disabled : $light-disabled-text,
+disabled-button : rgba($light-text, 0.3),
+disabled-text : $light-disabled-text,
+elevation : black,
+hint-text : $light-disabled-text,
+secondary-text : $light-accent-text,
+accent-text : $light-accent-text,
+icon : $light-text,
+icons : $light-text,
+text : $light-text,
+slider-min : $light-text,
+slider-off : rgba($light-text, 0.3),
+slider-off-active: rgba($light-text, 0.3),
+);
+// Background config
+// Light bg
+$light-background : #dfd7d7;
+$light-bg-darker-5 : darken($light-background,
+5%);
+$light-bg-darker-10 : darken($light-background,
+10%);
+$light-bg-darker-20 : darken($light-background,
+20%);
+$light-bg-darker-30 : darken($light-background,
+30%);
+$light-bg-lighter-5 : lighten($light-background,
+5%);
+$dark-bg-tooltip : lighten(#004165,
+20%);
+$dark-bg-alpha-4 : rgba(#004165,
+0.04);
+$dark-bg-alpha-12 : rgba(#004165,
+0.12);
+$mat-light-theme-background: ( background : $light-background,
+status-bar : $light-bg-darker-20,
+app-bar : $light-bg-darker-5,
+hover : $dark-bg-alpha-4,
+card : $light-bg-lighter-5,
+dialog : $light-bg-lighter-5,
+tooltip : $dark-bg-tooltip,
+disabled-button : $dark-bg-alpha-12,
+raised-button : $light-bg-lighter-5,
+focused-button : $dark-focused,
+selected-button : $light-bg-darker-20,
+selected-disabled-button: $light-bg-darker-30,
+disabled-button-toggle : $light-bg-darker-10,
+unselected-chip : $light-bg-darker-10,
+disabled-list-option : $light-bg-darker-10,
+);
+// Dark bg
+$dark-background : #004165;
+$dark-bg-lighter-5 : lighten($dark-background,
+5%);
+$dark-bg-lighter-10 : lighten($dark-background,
+10%);
+$dark-bg-lighter-20 : lighten($dark-background,
+20%);
+$dark-bg-lighter-30 : lighten($dark-background,
+30%);
+$light-bg-alpha-4 : rgba(#dfd7d7,
+0.04);
+$light-bg-alpha-12 : rgba(#dfd7d7,
+0.12);
+// Background palette for dark themes.
+$mat-dark-theme-background: ( background : $dark-background,
+status-bar : $dark-bg-lighter-20,
+app-bar : $dark-bg-lighter-5,
+hover : $light-bg-alpha-4,
+card : $dark-bg-lighter-5,
+dialog : $dark-bg-lighter-5,
+tooltip : $dark-bg-lighter-20,
+disabled-button : $light-bg-alpha-12,
+raised-button : $dark-bg-lighter-5,
+focused-button : $light-focused,
+selected-button : $dark-bg-lighter-20,
+selected-disabled-button: $dark-bg-lighter-30,
+disabled-button-toggle : $dark-bg-lighter-10,
+unselected-chip : $dark-bg-lighter-20,
+disabled-list-option : $dark-bg-lighter-10,
+);
+// Compute font config
+@include mat.core($fontConfig);
+// Theme Config
+body {
+    --primary-color: #0063ab;
+    --primary-lighter-color: #b3d0e6;
+    --primary-darker-color: #004791;
+    --text-primary-color: #{$light-primary-text};
+    --text-primary-lighter-color: #{$dark-primary-text};
+    --text-primary-darker-color: #{$light-primary-text};
+}
+
+$mat-primary: ( main: #0063ab,
+lighter: #b3d0e6,
+darker: #004791,
+200: #0063ab, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-primary: mat.define-palette($mat-primary,
+main,
+lighter,
+darker);
+body {
+    --accent-color: #00a8e8;
+    --accent-lighter-color: #b3e5f8;
+    --accent-darker-color: #008dde;
+    --text-accent-color: #{$light-primary-text};
+    --text-accent-lighter-color: #{$dark-primary-text};
+    --text-accent-darker-color: #{$light-primary-text};
+}
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$mat-accent: ( main: #00a8e8,
+lighter: #b3e5f8,
+darker: #008dde,
+200: #00a8e8, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-accent: mat.define-palette($mat-accent,
+main,
+lighter,
+darker);
+body {
+    --warn-color: #f9b7b7;
+    --warn-lighter-color: #fde9e9;
+    --warn-darker-color: #f69f9f;
+    --text-warn-color: #{$dark-primary-text};
+    --text-warn-lighter-color: #{$dark-primary-text};
+    --text-warn-darker-color: #{$dark-primary-text};
+}
 
-// The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$mat-warn: ( main: #f9b7b7,
+lighter: #fde9e9,
+darker: #f69f9f,
+200: #f9b7b7, // For slide toggle,
+contrast: ( main: $dark-primary-text, lighter: $dark-primary-text, darker: $dark-primary-text, ));
+$theme-warn: mat.define-palette($mat-warn,
+main,
+lighter,
+darker);
+;
+$theme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: true,
+foreground: $mat-dark-theme-foreground,
+background: $mat-dark-theme-background,
+);
+$altTheme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: false,
+foreground: $mat-light-theme-foreground,
+background: $mat-light-theme-background,
+);
+// Theme Init
+@include mat.all-component-themes($theme);
+.theme-alternate {
+    @include mat.all-component-themes($altTheme);
+}
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$frontend-theme: mat.define-light-theme((
-  color: (
-    primary: $frontend-primary,
-    accent: $frontend-accent,
-    warn: $frontend-warn,
-  )
-));
+// Specific component overrides, pieces that are not in line with the general theming
+// Handle buttons appropriately, with respect to line-height
+.mat-raised-button,
+.mat-stroked-button,
+.mat-flat-button {
+    padding: 0 1.15em;
+    margin: 0 .65em;
+    min-width: 3em;
+    line-height: 36.4px
+}
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($frontend-theme);
+.mat-standard-chip {
+    padding: .5em .85em;
+    min-height: 2.5em;
+}
 
+.material-icons {
+    font-size: 24px;
+    font-family: 'Material Icons', 'Material Icons';
+    .mat-badge-content {
+        font-family: 'Roboto';
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index e24da375..33f4cf2b 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -1,5 +1,10 @@
 /*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/
 
+html,
+body {
+    height: 100%;
+}
+
 .align-items-view>*:first-child {
     transform: perspective(100em) rotateY(25deg) translateZ(1em);
 }
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index d0ccc935..f2e84e8b 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -35,4 +35,22 @@ a {
 
 .text-offwhite {
     color: var(--offwhite) !important;
+}
+
+
+/* Ripple effect */
+
+.bubble {
+    background-position: center;
+    transition: background 0.8s;
+}
+
+.bubble:hover {
+    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
+}
+
+.bubble:active {
+    background-color: #6eb9f7;
+    background-size: 100%;
+    transition: background 0s;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 9d5603c5e9b5b2a0d71cd72401fb7e0d91dc74c7 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Wed, 27 Apr 2022 23:17:18 +0200
Subject: Promenio layout za neke kolone tako da su responzivnije.

---
 .../column-table/column-table.component.html       | 19 ++++++------
 .../_elements/form-model/form-model.component.css  | 34 ----------------------
 frontend/src/styles/layout.css                     | 34 ++++++++++++++++++++++
 3 files changed, 43 insertions(+), 44 deletions(-)

(limited to 'frontend/src/styles/layout.css')

diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
index 5f4412a1..0c33786e 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -186,8 +186,8 @@
 </div>
 
 <div class="container-fluid text-offwhite belowColumn">
-    <div class="row ">
-        <div class="col-sm-3 slider rounded" style="border:1px solid var(--ns-primary)">
+    <div class="ns-row">
+        <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary)">
 
             <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
             <div class="text-center pt-0 mt-0">Trening
@@ -195,14 +195,15 @@
                 Test</div>
 
         </div>
-        <div class="col-sm-3 slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
+        <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
             <div class="text-center text-offwhite justify-content-center align-items-center">
-                <mat-checkbox class="pt-4" color="accent">Nasumicni redosled podataka</mat-checkbox>
+                <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox>
             </div>
         </div>
 
-        <div class="col-sm-2 rounded">
+        <div class="break-2"></div>
 
+        <div class="ns-col rounded">
             <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
                 <mat-label>Tip problema</mat-label>
                 <mat-select value="ToDo1">
@@ -211,19 +212,17 @@
                     <mat-option value="ToDo3">Multi-Klasifikacioni</mat-option>
                 </mat-select>
             </mat-form-field>
-
         </div>
-        <div class="col-sm-2 rounded">
-
+        <div class="ns-col rounded">
             <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
                 <mat-label>Izlazna kolona</mat-label>
                 <mat-select>
                     <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option>
                 </mat-select>
             </mat-form-field>
-
         </div>
-        <div class="col-sm-1 d-flex align-items-center justify-content-center">
+        <div class="break-1"></div>
+        <div class="ns-col d-flex align-items-center justify-content-center">
             <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom">
                 <div class="f-row" style="justify-content: space-around;">
                     <div>Potvrdi</div>
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 c0ae9365..b69b2dbb 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -44,44 +44,10 @@ col-1 {
     padding: 0;
 }
 
-.ns-row {
-    width: 98%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-}
-
-.ns-col {
-    flex-grow: 1;
-    padding: 2px;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-
 ::ng-deep .mat-form-field-wrapper {
     margin-bottom: -1.85em;
 }
 
-.break-1,
-.break-2 {
-    height: 1px;
-    width: 100%;
-}
-
-@media screen and (min-width: 1200px) {
-    .break-1 {
-        display: none;
-    }
-}
-
-@media screen and (min-width: 2175px) {
-    .break-2 {
-        display: none;
-    }
-}
-
 #layers-control {
     display: flex;
     flex-direction: row;
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index 33f4cf2b..9dd146b2 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -15,4 +15,38 @@ body {
 
 .align-items-view>*:last-child {
     transform: perspective(100em) rotateY(-25deg) translateZ(1em);
+}
+
+.ns-row {
+    width: 98%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+}
+
+.ns-col {
+    flex-grow: 1;
+    padding: 2px;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.break-1,
+.break-2 {
+    height: 1px;
+    width: 100%;
+}
+
+@media screen and (min-width: 1200px) {
+    .break-1 {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 2175px) {
+    .break-2 {
+        display: none;
+    }
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 6eb541aa0cf268c41bf8638b73bf764d717be80b Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Thu, 28 Apr 2022 01:22:42 +0200
Subject: Ispravio BUG sa stilom search bar-a u folderu. Smanjio visinu slojeva
 u form-model. Ispravio material temu.

---
 .../src/app/_elements/folder/folder.component.css  |  4 ++
 .../_elements/form-model/form-model.component.html | 11 ++++--
 frontend/src/custom-theme.scss                     | 46 +++++++++++-----------
 frontend/src/styles/layout.css                     |  9 +++++
 4 files changed, 43 insertions(+), 27 deletions(-)

(limited to 'frontend/src/styles/layout.css')

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 458e6b4f..1ce4e6a3 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -64,6 +64,10 @@
     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-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 2a8d79a8..33ec85de 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -156,12 +156,15 @@
 <div id="layers">
 
     <div class="layer" *ngFor="let item of newModel.layers; let i=index">
-        <div class="text-center">
-            #{{i+1}}
-        </div>
+
 
         <mat-form-field appearance="fill">
-            <mat-label>Aktivaciona funkcija</mat-label>
+            <mat-label>Aktivacija</mat-label>
+            <button matPrefix class="btn-clear center-center text-offwhite">        
+                <div>
+                    #{{i+1}}
+                </div>
+            </button>
             <mat-select [(ngModel)]="newModel.layers[i].activationFunction">
                 <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option">
                     {{ optionName }}
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index 8f716240..e8626080 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -1,7 +1,7 @@
 /**
 * Generated theme by Material Theme Generator
 * https://materialtheme.arcsine.dev
-* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwNjNhYiIsIj9lcjwjYjNkMGU2IiwiO2VyPCMwMDQ3OTF$LCIlPmBePCMwMGE4ZTgiLCI~ZXI8I2IzZTVmOCIsIjtlcjwjMDA4ZGRlfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCMwMDQxNjUiLCI~PTwjZGZkN2Q3IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDQxNjV$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
+* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwYThlOCIsIj9lcjwjYjNlNWY4IiwiO2VyPCMwMDhkZGV$LCIlPmBePCMwMDYzYWIiLCI~ZXI8I2IzZDBlNiIsIjtlcjwjMDA0Nzkxfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCNkZmQ3ZDciLCI~PTwjMDAzNDU5IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDM0NTl$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
 */
 
 @use '@angular/material' as mat;
@@ -25,7 +25,7 @@ caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
 input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px));
 // Foreground Elements
 // Light Theme Text
-$dark-text: #004165;
+$dark-text: #dfd7d7;
 $dark-primary-text: rgba($dark-text,
 0.87);
 $dark-accent-text: rgba($dark-primary-text,
@@ -83,7 +83,7 @@ slider-off-active: rgba($light-text, 0.3),
 );
 // Background config
 // Light bg
-$light-background : #dfd7d7;
+$light-background : #003459;
 $light-bg-darker-5 : darken($light-background,
 5%);
 $light-bg-darker-10 : darken($light-background,
@@ -94,11 +94,11 @@ $light-bg-darker-30 : darken($light-background,
 30%);
 $light-bg-lighter-5 : lighten($light-background,
 5%);
-$dark-bg-tooltip : lighten(#004165,
+$dark-bg-tooltip : lighten(#003459,
 20%);
-$dark-bg-alpha-4 : rgba(#004165,
+$dark-bg-alpha-4 : rgba(#003459,
 0.04);
-$dark-bg-alpha-12 : rgba(#004165,
+$dark-bg-alpha-12 : rgba(#003459,
 0.12);
 $mat-light-theme-background: ( background : $light-background,
 status-bar : $light-bg-darker-20,
@@ -117,7 +117,7 @@ unselected-chip : $light-bg-darker-10,
 disabled-list-option : $light-bg-darker-10,
 );
 // Dark bg
-$dark-background : #004165;
+$dark-background : #003459;
 $dark-bg-lighter-5 : lighten($dark-background,
 5%);
 $dark-bg-lighter-10 : lighten($dark-background,
@@ -126,9 +126,9 @@ $dark-bg-lighter-20 : lighten($dark-background,
 20%);
 $dark-bg-lighter-30 : lighten($dark-background,
 30%);
-$light-bg-alpha-4 : rgba(#dfd7d7,
+$light-bg-alpha-4 : rgba(#003459,
 0.04);
-$light-bg-alpha-12 : rgba(#dfd7d7,
+$light-bg-alpha-12 : rgba(#003459,
 0.12);
 // Background palette for dark themes.
 $mat-dark-theme-background: ( background : $dark-background,
@@ -151,36 +151,36 @@ disabled-list-option : $dark-bg-lighter-10,
 @include mat.core($fontConfig);
 // Theme Config
 body {
-    --primary-color: #0063ab;
-    --primary-lighter-color: #b3d0e6;
-    --primary-darker-color: #004791;
+    --primary-color: #00a8e8;
+    --primary-lighter-color: #b3e5f8;
+    --primary-darker-color: #008dde;
     --text-primary-color: #{$light-primary-text};
     --text-primary-lighter-color: #{$dark-primary-text};
     --text-primary-darker-color: #{$light-primary-text};
 }
 
-$mat-primary: ( main: #0063ab,
-lighter: #b3d0e6,
-darker: #004791,
-200: #0063ab, // For slide toggle,
+$mat-primary: ( main: #00a8e8,
+lighter: #b3e5f8,
+darker: #008dde,
+200: #00a8e8, // For slide toggle,
 contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
 $theme-primary: mat.define-palette($mat-primary,
 main,
 lighter,
 darker);
 body {
-    --accent-color: #00a8e8;
-    --accent-lighter-color: #b3e5f8;
-    --accent-darker-color: #008dde;
+    --accent-color: #0063ab;
+    --accent-lighter-color: #b3d0e6;
+    --accent-darker-color: #004791;
     --text-accent-color: #{$light-primary-text};
     --text-accent-lighter-color: #{$dark-primary-text};
     --text-accent-darker-color: #{$light-primary-text};
 }
 
-$mat-accent: ( main: #00a8e8,
-lighter: #b3e5f8,
-darker: #008dde,
-200: #00a8e8, // For slide toggle,
+$mat-accent: ( main: #0063ab,
+lighter: #b3d0e6,
+darker: #004791,
+200: #0063ab, // For slide toggle,
 contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
 $theme-accent: mat.define-palette($mat-accent,
 main,
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index 9dd146b2..676bec32 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -49,4 +49,13 @@ body {
     .break-2 {
         display: none;
     }
+}
+
+.center-center {
+    text-align: center;
+    margin-right: 10px;
+    padding-right: 10px;
+    padding-bottom: 15px;
+    font-size: 20px;
+    font-weight: 600;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 1b9e3a2470d1123b362ad47725bd76b2eb7b39eb Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Thu, 28 Apr 2022 22:09:08 +0200
Subject: Dodatne stranice i komponente tako da su vise u skladu sa novom temom
 (navbar, home, archive).

---
 docs/logo/logo.png                                 | Bin 13315 -> 11962 bytes
 .../column-table/column-table.component.ts         |   2 +-
 .../src/app/_elements/folder/folder.component.css  |   4 ---
 .../form-dataset/form-dataset.component.css        |  34 ++++++++++---------
 .../_elements/form-model/form-model.component.css  |  18 +++++++----
 .../_elements/form-model/form-model.component.html |  34 +++++++++----------
 .../src/app/_elements/navbar/navbar.component.css  |   8 +++++
 .../src/app/_elements/navbar/navbar.component.html |  10 +++---
 .../src/app/_elements/navbar/navbar.component.ts   |   5 +--
 .../app/_elements/playlist/playlist.component.ts   |   2 +-
 .../src/app/_pages/archive/archive.component.html  |  20 ++++++++----
 frontend/src/app/_pages/home/home.component.css    |  20 ++++++++++++
 frontend/src/app/_pages/home/home.component.html   |  36 ++++++++++++++-------
 frontend/src/assets/images/logo.png                | Bin 13315 -> 11962 bytes
 frontend/src/styles/helper.css                     |  12 ++++++-
 frontend/src/styles/layout.css                     |  23 +++++++++++--
 frontend/src/styles/theme.css                      |   4 +++
 17 files changed, 156 insertions(+), 76 deletions(-)

(limited to 'frontend/src/styles/layout.css')

diff --git a/docs/logo/logo.png b/docs/logo/logo.png
index 2e15550a..dc8830de 100644
Binary files a/docs/logo/logo.png and b/docs/logo/logo.png differ
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
Binary files a/frontend/src/assets/images/logo.png and b/frontend/src/assets/images/logo.png differ
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 */
 
-- 
cgit v1.2.3