diff --git a/src/app/app.component.css b/src/app/app.component.css index c190d592..e311001a 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,5 +1,55 @@ + +.app-container { + display: flex; + flex-direction: column; + min-height: 100vh; +} header { margin-top: 15px; display: flex; justify-content: center; } + +.content { + + flex-grow: 1 +} + +app-footer { + background-color: #333; + color: #fff; + padding: 2px; + margin: 5px; + text-align: center; + height: 10%; +} + +.light-mode { + background-color: #fff; + color: #000; +} + +/* Modo escuro (estilos existentes) */ +.dark-mode { + background-color: #111111; + color: white; +} + +/* app.component.css */ +button.toggle-mode { + position: absolute; + top: 10px; + right: 10px; + background-color: var(--bg-color-dark); + color: var(--text-color-dark); + border: none; + padding: 10px 20px; + cursor: pointer; +} + +/* Estilos para o modo claro */ +.light-mode button.toggle-mode { + background-color: var(--bg-color-light); + color: var(--text-color-light); +} + diff --git a/src/app/app.component.html b/src/app/app.component.html index dfc8f0a4..10cb8def 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,17 @@ -
- -
- +
+ +
+
+ +
+ +
+ +
+ + +
+
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5ce4826e..a2ea3cbb 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, Renderer2 } from '@angular/core'; +import { ThemeService } from './services/theme.service'; @Component({ selector: 'app-root', @@ -7,4 +8,19 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'angular-blog'; + darkModeStyles = { + 'background-color': 'black', + 'color': 'white' + }; + + lightModeStyles = { + 'background-color': 'white', + 'color': 'black ' + }; + + constructor(public themeService: ThemeService) {} + + toggleTheme() { + this.themeService.toggleMode(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e17988a2..fe39ee7e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,8 @@ import { BigCardComponent } from './components/big-card/big-card.component'; import { SmallCardComponent } from './components/small-card/small-card.component'; import { HomeComponent } from './pages/home/home.component'; import { ContentComponent } from './pages/content/content.component'; +import { FooterComponent } from './components/footer/footer.component'; + @NgModule({ @@ -19,7 +21,8 @@ import { ContentComponent } from './pages/content/content.component'; BigCardComponent, SmallCardComponent, HomeComponent, - ContentComponent + ContentComponent, + FooterComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html new file mode 100644 index 00000000..50a5f38d --- /dev/null +++ b/src/app/components/footer/footer.component.html @@ -0,0 +1,3 @@ +
+

© 2023 DIO

+
diff --git a/src/app/components/footer/footer.component.spec.ts b/src/app/components/footer/footer.component.spec.ts new file mode 100644 index 00000000..953b22cc --- /dev/null +++ b/src/app/components/footer/footer.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FooterComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts new file mode 100644 index 00000000..488fa056 --- /dev/null +++ b/src/app/components/footer/footer.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.css'] +}) +export class FooterComponent implements OnInit { + + ngOnInit(): void { + } + +} diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css index 8505635b..cd3a5ee4 100644 --- a/src/app/components/menu-bar/menu-bar.component.css +++ b/src/app/components/menu-bar/menu-bar.component.css @@ -1,5 +1,3 @@ - - .container__menu-bar > ul{ display: flex; flex-direction: row; diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html index f435f231..41aedf56 100644 --- a/src/app/components/menu-bar/menu-bar.component.html +++ b/src/app/components/menu-bar/menu-bar.component.html @@ -1,4 +1,5 @@
+