📝 README updated

Author: marcode24

README.md

@@ -1,27 +1,76 @@
-# Frontend
+# InfoReader Frontend
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.2.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.2
 
-## Development server
+## Get started
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+### Requirements
 
-## Code scaffolding
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [Git](https://git-scm.com/downloads)
+- [NodeJs](https://nodejs.org/en/)
+- [Angular CLI](https://angular.io/cli)
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+### Clone the repo
 
-## Build
+```shell
+git clone https://github.com/marcode24/InfoReader-Frontend
+cd InfoReader-Frontend
+```
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+### Install npm packages
 
-## Running unit tests
+Install the `npm` packages described in the `package.json` and verify that it works.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```shell
+npm install
+ng serve -o
+```
 
-## Running end-to-end tests
+Shut it down manually with `Ctrl+C`
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+## Environments
 
-## Further help
+| Name       | URL                                      | PORT |
+| ---------- | ---------------------------------------- | ---- |
+| Localhost  | [localhost](http://localhost:4200)       | 4200 |
+| Production | [www.domain.com](https://www.domain.com) |
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+## Folder Structure
+
+    .
+    ├── src
+    │ ├── app                 # Source code application
+    │ │ │── auth              # Module for auth feature
+    │ │ ├── core              # Module as a singleton
+    │ │ │ ├── components
+    │ │ │ ├── constants
+    │ │ │ ├── guards
+    │ │ │ ├── interfaces
+    │ │ │ ├── models
+    │ │ │ ├── pipes
+    │ │ │ ├── services
+    │ │ │ └── utils
+    │ │ ├── features          # Module for features which compose the application
+    │ │ ├── shared            # Module for components shared between application modules
+    │ │ │ ├── components
+    │ ├── assets              # Styles, images, icons, fonts etc
+    │ ├── environments        # Config by environment (localhost and production)
+    │ └── styles              # Global styles
+    └── README.md
+
+## Previews
+
+### Desktop
+
+![home-1](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346332/InfoReader/home-1_gpqyqq.png)
+![home-2](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346331/InfoReader/home-2_hpojr8.png)
+![home-3](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346331/InfoReader/home-4_vqxco3.png)
+![home-4](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346331/InfoReader/home-3_qqeh64.png)
+
+### Mobile
+
+![mobile-1](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346331/InfoReader/mobile-1_wjz51l.png)
+![mobile-2](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346331/InfoReader/mobile-2_d7umlp.png)
+![mobile-3](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346332/InfoReader/mobile-4_dbtnph.png)
+![mobile-4](https://res.cloudinary.com/dfeujtobk/image/upload/v1658346331/InfoReader/mobile-3_r1ppv3.png)

src/app/app.component.ts

@@ -7,7 +7,6 @@ import { SettingService } from '@services/setting.service';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'frontend';
   constructor(
     private settingService: SettingService,
   ) {

src/app/core/components/sidebar/sidebar.component.css

@@ -20,17 +20,18 @@ nav .logo-details {
   align-items: center;
   position: relative;
   opacity: 1;
+  gap: 5px;
 }
 
-nav .logo-details .icon {
+nav .logo-details img {
   opacity: 1;
   transition: 0.5s;
-  color: var(--primary-color);
+  max-width: 3.2rem;
 }
 
 nav .logo-details span.logo_name {
   color: var(--primary-color);
-  font-size: 20px;
+  font-size: 30px;
   font-weight: 600;
   opacity: 1;
   transition: 0.5s;
@@ -220,6 +221,11 @@ nav .profile {
     display: block;
   }
 
+  nav .logo-details {
+    gap: 0;
+    justify-content: center;
+  }
+
   nav .logo-details .logo_name,
   nav li a .links_name,
   .profile-details .username,

src/app/core/components/sidebar/sidebar.component.html

@@ -1,6 +1,7 @@
 <nav class="sidebar">
   <div class="logo-details">
-    <i class='bx bx-news icon'></i>
+    <img src="/assets/logo.png" alt="logo" srcset="">
+    <!-- <i class='bx bx-news icon'></i> -->
     <span class="logo_name">InfoReader</span>
   </div>
   <ul class="nav-list">
@@ -41,9 +42,7 @@
     </div>
     <div *ngIf="isAuthenticated" routerLink="/settings" class="profile-details">
       <figure class="box-image">
-        <img
-          src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"
-          alt="img-user">
+        <img src="https://res.cloudinary.com/dfeujtobk/image/upload/v1598123661/user_xzklt6.png" alt="img-user">
       </figure>
       <span class="username"> {{ getName }} </span>
     </div>

src/assets/book.ico

@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Frontend</title>
+  <title>InfoReader</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="./assets/book.ico">
 </head>
 
 <body>

src/assets/logo.png

@@ -33,6 +33,7 @@ body.dark {
   --bg-skeleton: #424449;
   --bg-skeleton-2: #2e2c2c;
   --text-shadow-color: #000000;
+  --bg-blur: hsla(0, 0%, 10%, 0.6);
 }
 
 :root {
@@ -51,6 +52,7 @@ body.dark {
   --bg-skeleton: #fafafa;
   --bg-skeleton-2: #cdcdcd;
   --text-shadow-color: #e6e6e6;
+  --bg-blur: hsla(0, 0%, 100%, 0.8);
 }
 
 ::-webkit-scrollbar {
@@ -235,7 +237,7 @@ section > .title-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: hsla(0, 0%, 100%, 0.6);
+  background: var(--bg-blur);
 }
 
 .title-wrapper > span.title-section {