-
-
Config
+
+
+ Config
+
-
-
+
+
+
@@ -32,16 +42,16 @@ Ethereum
Solana
- Used for metadata generation
+ Used for metadata generation
Config
-
-
+
@@ -71,26 +82,26 @@
+
+
Config
[value]="(currentNftImage/generationLimitControl.value)*100">
- Current: {{currentNftImage}} out of {{generationLimitControl.value}}
+ Current: {{currentNftImage}} out of {{generationLimitControl.value}}
+
Config
- Layer Order
+ Layer Order
- help_outline
+ help_outline
-
+
- {{i+1}}
+ {{i+1}}
-
+
{{layer.split('_').join(' ') | titlecase}}
- %
+ %
@@ -107,28 +118,26 @@ Config
-
- Rarity Percentage
+ Rarity Percentage
- help_outline
+ help_outline
-
-
+
+
{{rarityFolder.split('_').join(' ') | titlecase}}
- %
+ %
@@ -139,14 +148,21 @@ ;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ MainButtonComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MainButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/main-button/main-button.component.ts b/src/app/shared/components/main-button/main-button.component.ts
new file mode 100644
index 0000000..0cd7eed
--- /dev/null
+++ b/src/app/shared/components/main-button/main-button.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-main-button',
+ templateUrl: './main-button.component.html',
+ styleUrls: ['./main-button.component.scss']
+})
+export class MainButtonComponent implements OnInit {
+ @Input() buttonText: string = "";
+ @Input() disabled: boolean = false;
+ @Output() customClick = new EventEmitter();
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ onClick() {
+ this.customClick.emit();
+ }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index d155ca8..4aa7396 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -18,6 +18,8 @@ import {MatSelectModule} from '@angular/material/select';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatIconModule} from '@angular/material/icon';
+import { MainButtonComponent } from './components/main-button/main-button.component';
+import {MatRippleModule} from '@angular/material/core';
const modules = [
CommonModule,
@@ -33,14 +35,22 @@ const modules = [
MatSelectModule,
MatProgressBarModule,
MatTooltipModule,
- MatIconModule
+ MatIconModule,
+ MatRippleModule
+
+]
+
+const components = [
+ PageNotFoundComponent,
+ WebviewDirective,
+ MainButtonComponent
]
@NgModule({
- declarations: [PageNotFoundComponent, WebviewDirective],
+ declarations: [...components],
imports: [...modules],
- exports: [...modules],
+ exports: [...modules, ...components],
providers: [TitleCasePipe]
})
export class SharedModule {}
diff --git a/src/styles.scss b/src/styles.scss
index 3204519..69c39ad 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -31,11 +31,16 @@ $default-theme: mat-light-theme($default-primary, $default-accent, $default-warn
// that you are using.
@include angular-material-theme($default-theme);
+$darkest-blue: #1C1922;
+$whitish: #F0F0F0;
+$light-blue: #6fbbee;
+$main-blue: #047ef0;
+
/* You can add global styles to this file, and also import other style files */
html, body {
margin: 0;
padding: 0;
- background-color: #eeeeee;
+ background-color: $darkest-blue;;
height: 100%;
font-family: 'Noto Sans', sans-serif;
}
@@ -45,3 +50,50 @@ html, body {
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
+.light-text{
+ color: $whitish;
+}
+
+// non focused label color
+.mat-form-field-label {
+
+ color: $whitish;
+ }
+
+// input color
+input.mat-input-element {
+ color: $whitish;
+}
+
+/* Change label color on focused */
+.mat-form-field.mat-focused .mat-form-field-label {
+ color: $light-blue;
+}
+
+// hover underline color
+.mat-form-field-underline .mat-form-field-ripple{
+ background:linear-gradient(to right, $light-blue 0%, $main-blue 100%);
+}
+
+// focused underline color
+.mat-focused .mat-form-field-underline .mat-form-field-ripple{
+ background:linear-gradient(to right, $light-blue 0%, $main-blue 100%);
+}
+
+// focused placeholder color
+.mat-input-element::placeholder{
+ color: gray;
+}
+
+
+// MAT SELECT STYLE
+
+// selected text color
+.mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
+ color: $whitish;
+}
+
+.mat-blueGrad {
+ background-color: $main-blue;
+ color: white;
+}
\ No newline at end of file
Config
-
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index 8112483..c77e3b7 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -1,31 +1,34 @@
-.container{
- // background-color: #181818;
- height: 100%;
+
+$darkest-blue: #1C1922;
+$gray-blue: #2F3250;
+$light-blue: #6fbbee;
+$main-blue: #047ef0;
+
+
+.config-container{
+ background-color: $gray-blue;
+ padding: 16px;
}
.example-list {
width: 240px;
max-width: 100%;
- border: solid 1px #ccc;
+ // border: solid 1px $main-blue;
// min-height: 60px;
display: block;
- background: white;
+ background: #2f3240;
border-radius: 15px;
overflow: hidden;
}
.example-box {
- padding: 12px 6px;
- border-bottom: solid 1px #ccc;
+ padding: 12px 24px;
+ border-bottom: solid 1px $main-blue;
color: rgba(0, 0, 0, 0.87);
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- box-sizing: border-box;
cursor: move;
- background: white;
+ // background: $darkest-blue;
+ background: #2f3240;
font-size: 14px;
}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 88746a9..60cc4e2 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -1 +1,2 @@
export * from './page-not-found/page-not-found.component';
+export * from './main-button/main-button.component';
\ No newline at end of file
diff --git a/src/app/shared/components/main-button/main-button.component.html b/src/app/shared/components/main-button/main-button.component.html
new file mode 100644
index 0000000..c9f5c1e
--- /dev/null
+++ b/src/app/shared/components/main-button/main-button.component.html
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/components/main-button/main-button.component.scss b/src/app/shared/components/main-button/main-button.component.scss
new file mode 100644
index 0000000..cab0897
--- /dev/null
+++ b/src/app/shared/components/main-button/main-button.component.scss
@@ -0,0 +1,70 @@
+.btn {
+ background: linear-gradient(to right, #6fbbee 0%, #047ef0 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ color: transparent;
+ font-weight: 600;
+ border-radius: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ font-size: 0.9rem;
+ margin: 0 auto;
+ outline: none;
+ position: relative;
+ z-index: 0;
+ text-decoration: none;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ button {
+ outline:none;
+ border: none;
+ }
+
+
+
+ .btn::before {
+ content:"";
+ position:absolute;
+ z-index:-1;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+ border-radius: 40px;
+ border: 2px solid transparent;
+ border-radius: 40px;
+ background: inherit;
+ background-origin:border-box;
+ background-clip:border-box;
+ -webkit-mask:
+ linear-gradient(#fff 0 0) padding-box,
+ linear-gradient(#fff 0 0);
+ -webkit-mask-composite:destination-out;
+ mask-composite: exclude;
+ -webkit-mask-repeat:no-repeat;
+ }
+ /**/
+ .btn:hover:enabled {
+ color: #fff;
+ -webkit-text-fill-color: #fff;
+ -webkit-background-clip: border-box;
+ background-clip: border-box;
+ }
+
+ .btn:disabled {
+ color: gray;
+ border: 2px solid gray;
+ background: transparent;
+ -webkit-text-fill-color: gray;
+ -webkit-background-clip: border-box;
+ background-clip: border-box;
+ }
+
+ .btn:hover::before {
+ -webkit-mask:none;
+ }
\ No newline at end of file
diff --git a/src/app/shared/components/main-button/main-button.component.spec.ts b/src/app/shared/components/main-button/main-button.component.spec.ts
new file mode 100644
index 0000000..a1bb416
--- /dev/null
+++ b/src/app/shared/components/main-button/main-button.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainButtonComponent } from './main-button.component';
+
+describe('MainButtonComponent', () => {
+ let component: MainButtonComponent;
+ let fixture: ComponentFixture
+
+ Preview: {{NftBaseName.value}}{{currentNftImage}}
- Preview: {{NftBaseName.value}}{{currentNftImage}}
+ ![]()
- ![]()
+