Feature/components button

.editorconfig

@@ -5,7 +5,7 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
-insert_final_newline = true
+# insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.ts]

angular.json

@@ -31,7 +31,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles/main.scss"],
             "scripts": []
           },
           "configurations": {
@@ -83,7 +83,7 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles/main.scss"],
             "scripts": []
           }
         },
@@ -97,6 +97,7 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
   }
 }

src/app/app.module.ts

@@ -4,9 +4,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { SharedModule } from './shared/shared.module';
+import { CoreModule } from './core/core.module';
+import { PagesModule } from './pages/pages.module';
+
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule],
+  imports: [BrowserModule, AppRoutingModule, SharedModule, CoreModule, PagesModule],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/core/core.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+})
+export class CoreModule {}

src/app/pages/pages.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+})
+export class PagesModule {}

src/app/shared/components/button/button.component.html

@@ -0,0 +1,3 @@
+<button [ngClass]="variant" [disabled]="isDisabled" [style.width]="width" [style.height]="height">
+  <ng-content></ng-content>
+</button>

src/app/shared/components/button/button.component.scss

@@ -0,0 +1,64 @@
+@import '../../../../styles/themes/_colors';
+@import '../../../../styles/utilities/_mixins';
+
+.primary {
+  @include buttons();
+  background-color: $primary-color-btn;
+  color: neutral-coor-1000;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 100px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $primary-color-500;
+    color: white;
+  }
+
+  &:focus {
+    background-color: $primary-color-400;
+    outline: none;
+  }
+
+  &:active {
+    background-color: $primary-color-300;
+    color: neutral-coor-1000;
+  }
+
+  &:disabled {
+    background-color: $primary-color-100;
+    cursor: not-allowed;
+  }
+}
+
+.secondary {
+  @include buttons();
+  background: transparent;
+  color: $secondary-color-500;
+  border: 2px solid $secondary-color-500;
+  padding: 10px 24px;
+  border-radius: 100px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $secondary-color-100;
+  }
+
+  &:focus {
+    background-color: $secondary-color-200;
+    color: white;
+    outline: none;
+  }
+
+  &:active {
+    background-color: $secondary-color-200;
+    color: white;
+  }
+
+  &:disabled {
+    background: transparent;
+    cursor: not-allowed;
+    color: $secondary-color-100;
+    border: 2px solid $secondary-color-100;
+  }
+}

src/app/shared/components/button/button.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/button/button.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss',
+})
+export class ButtonComponent {
+  @Input() variant: 'primary' | 'secondary' = 'primary';
+  @Input() isDisabled: boolean = false;
+  @Input() width: string = 'auto';
+  @Input() height: string = 'auto';
+}

src/app/shared/shared.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from './components/button/button.component';
+
+@NgModule({
+  declarations: [ButtonComponent],
+  imports: [CommonModule],
+  exports: [ButtonComponent],
+})
+export class SharedModule {}

src/styles/base/_fonts.scss

@@ -0,0 +1,2 @@
+$primary-font: 'Quicksand', sans-serif;
+$secondary-font: 'Monstserrat', sans-serif;

src/styles/base/_reset.scss

@@ -0,0 +1,25 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  background-color: #f4f4f4;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+}
+
+li {
+  text-decoration: none;
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}

src/styles/components/_components.scss

@@ -0,0 +1,14 @@
+// Botões
+$btn-color-primary-active: #56b172;
+$btn-color-primary-hover: #367147;
+$btn-color-primary-focused: #3d8852;
+$btn-color-primary-pressed: #76be8c;
+$btn-color-primary-disabled: #d3eada;
+
+$btn-color-secundary-active: #70532c;
+$btn-color-secundary-hover: #70532c;
+$btn-color-secundary-focused: #69563a;
+$btn-color-secundary-pressed: #9e753e;
+$btn-color-secundary-disabled: #c0965dcc;
+
+$btn-register: #f4f4f4;

src/styles/main.scss

@@ -0,0 +1,6 @@
+@import 'base/_fonts';
+@import 'base/_reset';
+@import 'components/_components';
+@import 'themes/_colors';
+@import 'themes/_spacing';
+@import 'utilities/_mixins';

src/styles/themes/_colors.scss

@@ -0,0 +1,67 @@
+// Primary Colors
+$primary-color-100: #d3eada;
+$primary-color-200: #a6d5b4;
+$primary-color-300: #76be8c;
+$primary-color-400: #4ca166;
+$primary-color-500: #367147;
+$primary-alpha-10: #a6d5b41a;
+$primary-color-btn: #56b172;
+
+// Secondary Colors
+$secondary-color-100: #e8d9c5;
+$secondary-color-200: #d2b48c;
+$secondary-color-300: #c0965d;
+$secondary-color-400: #9e753e;
+$secondary-color-500: #70532c;
+$secondary-color-nilu: #96653e;
+$secondary-color-nilu2: #a06e46;
+
+// Neutral Colors
+$neutral-color-100: #f4f2ef;
+$neutral-color-200: #e1dcd7;
+$neutral-color-300: #cbbfae;
+$neutral-color-400: #b7a68c;
+$neutral-color-500: #a58d69;
+$neutral-color-600: #89724f;
+$neutral-color-700: #69563a;
+$neutral-color-800: #201a13;
+$neutral-color-900: #1a140d;
+$neutral-coor-1000: #020201;
+$neutral-bg-light: #fefefe;
+$neutral-nilor-darkskin: #a06e46;
+
+// Tertiary Colors
+$tertiary-color-100: #ffc5b4;
+$tertiary-color-200: #ff8c69;
+$tertiary-color-300: #ff5926;
+$tertiary-color-400: #e23500;
+$tertiary-color-500: #9f2500;
+$tertiary-color-alpha-10: #ff8c691a;
+$tertiary-color-alpha-50: #ff8c6980;
+$tertiary-color-salmon: #ffd9ce;
+$tertiary-color-pomodoro: #ffefea;
+
+// Alternative Background Colors
+$bg-color-alternative-1: #d0ecf3;
+$bg-color-alternative-2: #a0d9e7;
+$bg-color-alternative-3: #66c2d8;
+$bg-color-alternative-4: #31a7c3;
+$bg-color-alternative-5: #237589;
+$bg-color-alternative-alpha-10: #a0d9e71a;
+$bg-color-alternative-alpha-30: #a0d9e780;
+$bg-color-alternative-pomodoro: #def8ff;
+
+// Feedback Colors
+$red-color-100: #fb3748;
+$red-color-200: #d00416;
+$red-color-alpha-10: #fb37481a;
+
+$yellow-color-100: #ffdb43;
+$yellow-color-200: #dfb400;
+$yellow-color-alpha-10: #ffdb431a;
+
+$green-color-100: #84ebb4;
+$green-color-200: #1fc16b;
+$green-color-alpha-10: #1fc16b1a;
+$green-color-feedback-success: #d8ffea;
+$bg-green-color-pomodoro: #e4ffed;

src/styles/themes/_spacing.scss

@@ -0,0 +1,9 @@
+$padding-small: 8px;
+$padding-small-medium: 12px;
+$padding-medium: 16px;
+$padding-large: 24px;
+
+$border-radius-none: 4px;
+$border-radius-small: 8px;
+$border-radius-medium: 16px;
+$border-radius-large: 24px;

src/styles/utilities/_mixins.scss

@@ -0,0 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:[email protected]&display=swap');
+
+@import '../base/_fonts';
+
+//mixins
+@mixin headings-font($font-size, $line-height) {
+  font-family: $primary-font;
+  font-weight: bold;
+  font-size: $font-size;
+  line-height: $line-height;
+}
+
+@mixin body-font($font-weight) {
+  font-family: $secondary-font;
+  font-weight: $font-weight;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+@mixin buttons() {
+  font-family: $secondary-font;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+@mixin input() {
+  $input-background-color: #f4f4f5;
+  border: 0.5px solid;
+  color: #69563a;
+}
+
+@mixin breakpoint($point) {
+  @if $point == mobile {
+    @media (min-width: 375px) {
+      @content;
+    }
+  } @else if $point == tablet {
+    @media (min-width: 836px) {
+      @content;
+    }
+  } @else if $point == desktop {
+    @media (min-width: 1440px) {
+      @content;
+    }
+  }
+}