From 1909b1af5ad920b996b95c7e9e5c41ef8d5a3ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Sun, 10 Sep 2023 10:46:49 -0300 Subject: [PATCH] footer are created and buttom for dark and light mode alternate --- src/app/app.component.css | 50 +++++++++++++++++++ src/app/app.component.html | 21 ++++++-- src/app/app.component.ts | 18 ++++++- src/app/app.module.ts | 5 +- .../components/footer/footer.component.css | 0 .../components/footer/footer.component.html | 3 ++ .../footer/footer.component.spec.ts | 23 +++++++++ src/app/components/footer/footer.component.ts | 13 +++++ .../menu-bar/menu-bar.component.css | 2 - .../menu-bar/menu-bar.component.html | 1 + .../menu-title/menu-title.component.css | 4 +- src/app/services/theme.service.ts | 11 ++++ src/styles.css | 10 +++- 13 files changed, 148 insertions(+), 13 deletions(-) create mode 100644 src/app/components/footer/footer.component.css create mode 100644 src/app/components/footer/footer.component.html create mode 100644 src/app/components/footer/footer.component.spec.ts create mode 100644 src/app/components/footer/footer.component.ts create mode 100644 src/app/services/theme.service.ts 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 @@
+
  • Linkedin
  • •
    • diff --git a/src/app/components/menu-title/menu-title.component.css b/src/app/components/menu-title/menu-title.component.css index ae7c6866..306a10b8 100644 --- a/src/app/components/menu-title/menu-title.component.css +++ b/src/app/components/menu-title/menu-title.component.css @@ -1,6 +1,4 @@ -.container__menu-title{ - color: white; -} + .container__menu-title > h1{ margin-top: 15px; diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts new file mode 100644 index 00000000..787a728b --- /dev/null +++ b/src/app/services/theme.service.ts @@ -0,0 +1,11 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class ThemeService { + isDarkMode = false; + toggleMode() { + this.isDarkMode = !this.isDarkMode; + } +} diff --git a/src/styles.css b/src/styles.css index b69d6a91..a461f186 100644 --- a/src/styles.css +++ b/src/styles.css @@ -3,11 +3,17 @@ margin:0; padding:0; box-sizing: border-box; - background-color: #111111; - color:white; font-family: 'Segoe UI'; } a{ text-decoration: none; } +a { + color: #007bff; /* Defina a cor desejada para os links */ + text-decoration: none; /* Remova ou ajuste a decoração do link, se necessário */ +} + +a:hover { + text-decoration: underline; /* Adicione um estilo de sublinhado ao passar o mouse sobre os links, se desejado */ +}