New welcome content for users not logged in. Visual update to currenc…

…y detail

Front/kantor-angular/src/app/app.component.html

@@ -1,16 +1,10 @@
-<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
+<div class="app-container">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
-<!--<div class="app">-->
-<!--  <app-contents/>-->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
-
-<!--</div>-->
-
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-
-<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-
-<div class="app">
-  <app-contents/>
+  <div class="app">
+    <app-contents/>
+  </div>
 </div>

Front/kantor-angular/src/app/app.component.scss

@@ -0,0 +1,8 @@
+// // ustawienie szerokości aplikacji na max 1800px i wyśrodkowanie
+//  //zawartości - bez tego strona może wyglądać na rozciągniętą na ultrawide
+
+//.app-container {
+//  max-width: 1800px;
+//  margin-left: auto;
+//  margin-right: auto;
+//}

Front/kantor-angular/src/app/currency-detail/currency-detail.component.html

@@ -1,3 +1,6 @@
-<p>Code: {{ currencyDetails.code }}</p>
-<p>Currency: {{ currencyDetails.currency }}</p>
-<p>Mid: {{ currencyDetails.rates[0].mid }}</p>
+<div class="currency-details">
+    <h3>Informacje o walucie <br> <b>{{ '&nbsp;'+currencyDetails.currency }}</b> </h3>
+    <p>Kod waluty: {{ currencyDetails.code }}</p>
+    <p>Cena (Mid): {{ currencyDetails.rates[0].mid + ' PLN'}}</p>
+</div>
+

Front/kantor-angular/src/app/currency-detail/currency-detail.component.scss

@@ -0,0 +1,14 @@
+.currency-details {
+  display: block;
+  width: 20%; // or any specific width
+  margin-left: 120px;
+  margin-right: auto;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+
+}

Front/kantor-angular/src/app/welcome-content/welcome-content.component.html

@@ -4,4 +4,12 @@
 
 <ng-template #notLoggedIn>
   <p>Niezalogowany</p>
+
+  <div class="not-logged-welcome">
+    <h1>Wielowalutowy kantor online</h1>
+
+    <p>Witaj w kantorze online, gdzie możesz wymieniać waluty w korzystnych kursach.</p>
+    <p>Jeśli nie masz jeszcze konta, <a routerLink="/register">zarejestruj się już teraz!</a></p>
+
+  </div>
 </ng-template>

Front/kantor-angular/src/app/welcome-content/welcome-content.component.scss

@@ -0,0 +1,24 @@
+.not-logged-welcome {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 40%;
+  background-color: #f5f5f5;
+  color: #333;
+  font-size: 1.5em;
+  font-weight: 300;
+  text-align: center;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  &:hover {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  }
+
+
+}