Merge pull request #339 from CTemplar/dev

v1.1.9

src/app/mail/mail-settings/custom-domains/custom-domains.component.scss

@@ -0,0 +1,259 @@
+@import '../../../../styles/base/variables';
+@import '../../../../styles/vendors/include-media/include-media';
+@import '../../../../styles/config/include-media-config';
+@import '../../../../styles/vendors/ceaser/ceaser-easing';
+
+.domain-body {
+  padding-left: 1.563rem;
+  padding-right: 1.563rem;
+  @include media("<ipad", ">sm") {
+    padding-left: 0.938rem;
+    padding-right: 0.938rem;
+  }
+  @include media("<=sm") {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .btn-create-domain {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    @include media("<=sm") {
+      margin: 1.875rem 0.75rem;
+    }
+  }
+
+  .btn-add-domain {
+    margin-top: 1.5rem;
+    @include media("<=sm") {
+      margin: 1.25rem 0.75rem;
+    }
+  }
+
+  .domains-list {
+    margin-top: 1.875rem;
+    @include media("<=sm") {
+      margin-top: 0;
+    }
+
+    .row {
+      margin-left: 0;
+      margin-right: 0;
+
+      &:not(:first-child) {
+        padding-top: 12px;
+        margin-bottom: -1px;
+        border: 1px solid #f5f5f5;
+      }
+
+      .text-domain {
+        font-size: 14px;
+      }
+
+      .domain-status {
+        div {
+          padding: 7px 12px;
+          border-radius: 14px;
+          line-height: 1;
+          margin-right: 5px;
+          margin-bottom: 10px;
+          cursor: pointer;
+
+          border: 1px solid;
+          border-color: #2c3e50;
+          color: $brand-secondary;
+
+          &:hover {
+            background-color: #ebebeb;
+          }
+
+          .fa-check,
+          .fa-exclamation {
+            display: none;
+            margin-right: 5.3px;
+          }
+
+          &.verified {
+            border: none;
+            background-color: #3ab05d !important;
+            color: white;
+            opacity: 0.6;
+
+            &:hover {
+              opacity: 0.8;
+            }
+
+            .fa-check {
+              display: inline-block;
+            }
+          }
+
+          &.failed {
+            border: none;
+            background-color: #e74c3c;
+            color: white;
+            opacity: 0.6;
+
+            &:hover {
+              opacity: 0.8;
+            }
+
+            .fa-exclamation {
+              display: inline-block;
+            }
+          }
+        }
+      }
+
+      .actions {
+        margin-top: -9px;
+
+        .action {
+          width: 44px;
+          height: 44px;
+          cursor: pointer;
+          color: $gray-9e9e9e;
+
+          .action-normal {
+            opacity: 0.6;
+
+          }
+
+          &:hover {
+            opacity: 1;
+            background-color: $brand-faded;
+            color: #949494;
+          }
+        }
+      }
+    }
+  }
+}
+
+.stepper-form {
+  padding: 1.5625rem 1.875rem 2.5rem 1.875rem;
+  font-size: 0.875rem;
+  background-color: #fafafa;
+
+  .domain-input {
+    width: 28.125rem;
+    padding: 0.75rem 0.8125rem;
+    @include media("<=sm") {
+      width: 100%;
+    }
+  }
+
+  @include media("<=sm") {
+    padding: 0;
+  }
+}
+
+.dropdown-toggle::before {
+  display: none;
+}
+
+.btn-group-controls {
+  display: flex;
+  justify-content: flex-end;
+
+  @include media("<ipad", ">sm") {
+    justify-content: flex-start;
+  }
+
+  @include media("<=sm") {
+    justify-content: center;
+  }
+}
+
+.record-status {
+  border-radius: 14px;
+  background-color: #3ab05d
+}
+
+/deep/ .mat-stepper-vertical, .mat-stepper-horizontal {
+  font-family: "Lato", Helvetica, Arial, sans-serif;
+  word-break: break-all;
+}
+
+/deep/ .mat-step {
+  &:nth-of-type(1) {
+    .mat-step-header .mat-step-icon {
+      background-color: #e74c3c;
+    }
+  }
+  &:nth-of-type(2) {
+    .mat-step-header .mat-step-icon {
+      background-color: #e74c3c;
+    }
+  }
+  &:nth-of-type(3) {
+    .mat-step-header .mat-step-icon {
+      background-color: #e74c3c;
+    }
+  }
+}
+
+/deep/ .mat-step-header .mat-step-icon {
+  width: 1.875rem;
+  height: 1.875rem;
+  background-color: rgba(0, 0, 0, 0.38);
+
+  @include media("<=sm") {
+    width: 1.5625rem;
+    height: 1.5625rem;
+  }
+}
+
+.green {
+  color: #3ab05d !important;
+}
+
+/deep/ .mat-vertical-content-container.mat-stepper-vertical-line {
+  margin-left: 36px;
+  @include media("<=sm") {
+    margin-left: 0;
+  }
+}
+
+/deep/ div.mat-vertical-content-container {
+  margin-left: 36px;
+  @include media("<=sm") {
+    margin-left: 0;
+  }
+}
+
+/deep/ .mat-vertical-stepper-header.mat-step-header {
+  pointer-events: none !important;
+}
+
+/deep/ .mat-step-header .mat-step-icon-not-touched {
+  width: 1.875rem;
+  height: 1.875rem;
+  @include media("<=sm") {
+    width: 1.5625rem;
+    height: 1.5625rem;
+  }
+}
+
+/deep/ .mat-step-header .mat-step-label {
+  font-size: 1.125rem;
+  width: 100%;
+  @include media("<=sm") {
+    font-size: 1rem;
+  }
+}
+
+/deep/ .mat-step-header .mat-step-label {
+  color: rgba(0, 0, 0, 0.87);
+
+  &.mat-step-label-active {
+    &.mat-step-label-selected {
+      color: #e74c3c;
+    }
+  }
+}
+
+.copy-btn {
+  float: right !important;
+  margin-top: -10px;
+}

src/app/mail/mail-settings/custom-domains/custom-domains.component.spec.ts

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