Merge pull request #480 from G-Core/rebranding

made rebranding twiks
G-Core · Oct 19, 2023 · 97b5511 · 97b5511
2 parents f70f239 + 4ad501a
commit 97b5511
Show file tree

Hide file tree

Showing 36 changed files with 431 additions and 240 deletions.
diff --git a/src/app/components/bread-crumbs/bread-crumbs.component.scss b/src/app/components/bread-crumbs/bread-crumbs.component.scss
@@ -29,6 +29,6 @@
     }
 
     &:active {
-        color: $contentSecondaryActive;
+        color: $contentSecondary;
     }
 }
diff --git a/src/app/components/documentation/documentation.component.scss b/src/app/components/documentation/documentation.component.scss
@@ -147,7 +147,7 @@ gcore-loader {
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 2rem;
-            color: $secondaryContrastFocus;
+            color: $actionPrimary;
             margin-top: 1.5rem;
         }
 
@@ -157,36 +157,46 @@ gcore-loader {
             margin-top: 1.25rem;
 
             .doc-estimate-button {
-                width: 3rem;
-                height: 2.25rem;
-                border: 1px solid $secondaryContrastFocus;
-                border-radius: 0.25rem;
+                width: 3.5rem;
+                height: 2.5rem;
+                border: 1px solid $actionPrimary;
+                border-radius: $borderButtonRadius;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                transition: all 0.3s ease-in-out;
+                transition: 0.15s;
                 background: transparent;
                 cursor: pointer;
 
                 &:nth-child(1) {
-                    margin-right: 1rem;
+                    margin-right: 0.5rem;
                 }
 
                 svg {
                     path {
-                        fill: $secondaryContrastFocus;
-                        transition: all 0.3s ease-in-out;
+                        fill: $actionPrimary;
+                        transition: 0.15s;
                     }
                 }
 
-                &.active {
-                    background: $secondaryContrastFocus;
-                    transition: all 0.3s ease-in-out;
+                &:hover {
+                    border: 1px solid $actionPrimaryHover;
 
                     svg {
                         path {
-                            fill: $secondaryContrastActive;
-                            transition: all 0.3s ease-in-out;
+                            fill: $actionPrimaryHover;
+                        }
+                    }
+                }
+
+                &.active,
+                &:active {
+                    background: $actionPrimaryActive;
+                    border: 1px solid $actionPrimaryActive;
+
+                    svg {
+                        path {
+                            fill: $contentContrastPrimary;
                         }
                     }
                 }
@@ -269,7 +279,7 @@ gcore-loader {
         top: 0;
         width: 1px;
         height: 100%;
-        background: $greyPurple;
+        background: $bgSurfaceLight2;
         position: absolute;
     }
 

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -7,22 +7,22 @@
     <img src="{{ baseHref + 'assets/logo.svg' }}" alt="Gcore Docs" />
 </a>
 <a class="home-page-link" [href]="'https://gcore.com/'">
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            d="M20 18V11C20 10.3705 19.7036 9.77771 19.2 9.4L13.2 4.9C12.4889 4.36667 11.5111 4.36667 10.8 4.9L4.8 9.4C4.29639 9.77771 4 10.3705 4 11V18C4 19.1046 4.89543 20 6 20H8C9.10457 20 10 19.1046 10 18V17C10 15.8954 10.8954 15 12 15C13.1046 15 14 15.8954 14 17V18C14 19.1046 14.8954 20 16 20H18C19.1046 20 20 19.1046 20 18Z"
-            stroke="white"
-            stroke-width="2"
+            d="M33.3333 31.3333V17.6667C33.3333 17.0372 33.0369 16.4444 32.5333 16.0667L21.2 7.56667C20.4889 7.03333 19.5111 7.03333 18.8 7.56667L7.46666 16.0667C6.96305 16.4444 6.66666 17.0372 6.66666 17.6667V31.3333C6.66666 32.4379 7.56209 33.3333 8.66666 33.3333H14.6667C15.7712 33.3333 16.6667 32.4379 16.6667 31.3333V27C16.6667 25.8954 17.5621 25 18.6667 25H21.3333C22.4379 25 23.3333 25.8954 23.3333 27V31.3333C23.3333 32.4379 24.2288 33.3333 25.3333 33.3333H31.3333C32.4379 33.3333 33.3333 32.4379 33.3333 31.3333Z"
+            stroke="#ffffff"
+            stroke-width="3"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
     </svg>
 </a>
 <a class="gc-search-button-mobile" routerLink="search"
-    ><svg class="search-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    ><svg class="search-icon" width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            d="M16.6673 16.6667L13.2921 13.2914M13.2921 13.2914C14.3477 12.2358 15.0006 10.7775 15.0006 9.16666C15.0006 5.945 12.389 3.33333 9.16732 3.33333C5.94566 3.33333 3.33398 5.945 3.33398 9.16666C3.33398 12.3883 5.94566 15 9.16732 15C10.7781 15 12.2365 14.3471 13.2921 13.2914Z"
-            stroke="white"
-            stroke-width="2"
+            d="M33.3333 33.3333L26.5829 26.5829M26.5829 26.5829C28.6942 24.4717 30 21.555 30 18.3333C30 11.89 24.7767 6.66667 18.3333 6.66667C11.89 6.66667 6.66667 11.89 6.66667 18.3333C6.66667 24.7767 11.89 30 18.3333 30C21.555 30 24.4717 28.6942 26.5829 26.5829Z"
+            stroke="#ffffff"
+            stroke-width="3"
             stroke-linecap="round"
             stroke-linejoin="round"
         /></svg
@@ -40,11 +40,15 @@
 </button>
 <div class="header-actions">
     <gc-search-box class="search-box" [(ngModel)]="searchKey" (search)="search()"></gc-search-box>
-    <gc-redirect-link-button class="header-button" [label]="'API'" [href]="'https://api.gcore.com/docs'">
-    </gc-redirect-link-button>
-    <button (click)="login()" *ngIf="!isHosting" class="sign-in header-button">Sign in</button>
+    <gc-redirect-link-button
+        class="header-button"
+        variant="contrast-secondary"
+        [label]="'API'"
+        [href]="'https://api.gcore.com/docs'"
+    ></gc-redirect-link-button>
+    <button (click)="login()" *ngIf="!isHosting" class="button button_primary header-button">Sign in</button>
     <a
-        class="sign-in header-button"
+        class="button button_primary"
         *ngIf="isHosting"
         [href]="'https://hosting.gcore.com/billmgr?func=logon&lang=en'"
         target="_blank"

diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -6,20 +6,21 @@
     top: 0;
     z-index: 10;
     align-items: center;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-        linear-gradient(113.42deg, #22174a 0.05%, #232432 106.1%);
+    background: $bgSurfaceDark2;
     padding: 1rem 1.5rem;
 }
 
 .logo {
     img {
+        vertical-align: middle;
         width: 12.5rem;
     }
 }
 
 .header-actions {
     display: flex;
     flex: 1;
+    align-items: center;
 }
 
 .header-button {
@@ -42,19 +43,19 @@
     font-size: 0.875rem;
     line-height: 1.25rem;
     border-radius: 6px;
-    background-color: $contentLink;
+    background-color: $actionPrimary;
     font-weight: 600;
     white-space: nowrap;
-    color: #fff;
+    color: $contentContrastPrimary;
     text-decoration: none;
     cursor: pointer;
     border: none;
 
     &:hover {
-        background-color: $contentLinkHover;
+        background-color: $actionPrimaryHover;
     }
     &:active {
-        background-color: $contentLinkActive;
+        background-color: $actionPrimaryActive;
     }
 }
 
@@ -67,18 +68,23 @@
 .home-page-link {
     padding: 0.25rem 1.5rem;
     margin: 0 2rem;
-    border-left: 1px solid $secondaryContrast;
-    border-right: 1px solid $secondaryContrast;
+    border-left: 1px solid $borderDark;
+    border-right: 1px solid $borderDark;
+    svg {
+        path {
+            transition: 0.15s;
+        }
+    }
 
     &:hover {
         svg > path {
-            stroke: $secondaryContrastHover;
+            stroke: $borderDark;
         }
     }
 
     &:active {
         svg > path {
-            stroke: $secondaryContrast;
+            stroke: $borderDark;
         }
     }
 }
@@ -109,13 +115,13 @@
 
         &:hover {
             svg > path {
-                stroke: $secondaryContrastHover;
+                stroke: $contentSecondaryHover;
             }
         }
 
         &:active {
             svg > path {
-                stroke: $secondaryContrast;
+                stroke: $contentSecondary;
             }
         }
     }

diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
@@ -1,7 +1,7 @@
 @import '../../../scss/variables';
 
 .categories-section {
-    background-color: $lightGreyBG;
+    background-color: $bgSurfaceLight1;
 
     .categories-section-menu {
         display: none;
@@ -26,10 +26,11 @@
         font-size: 4.5rem;
         font-weight: 600;
         margin: 0;
-        line-height: 5rem;
+        line-height: 105%;
+        letter-spacing: -1px;
 
         &.gc-title {
-            background: linear-gradient(360deg, #ffffff -20%, #ff5700 95%);
+            background: $actionPrimary;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
@@ -78,8 +79,11 @@
                 border-radius: 6px;
                 color: $contentPrimary;
                 text-decoration: none;
+                transition: 0.15s;
 
                 img {
+                    width: 2rem;
+                    height: 2rem;
                     margin-right: 0.75rem;
                 }
 
@@ -177,17 +181,17 @@
         }
 
         .apidocs-link {
-            color: $contentLink;
+            color: $actionPrimary;
             text-decoration: none;
             font-size: 1rem;
             font-weight: 600;
 
             &:hover {
-                color: $contentLinkHover;
+                color: $actionPrimaryHover;
             }
 
             &:active {
-                color: $contentLinkActive;
+                color: $actionPrimaryActive;
             }
         }
     }

diff --git a/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss b/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss
@@ -34,7 +34,7 @@
     .menu-dropdown-arrow {
         width: 1.25rem;
         height: 1.25rem;
-        background: $greyPurple;
+        background: $bgSurfaceLight2;
         border-radius: 100%;
         display: flex;
         align-items: center;
@@ -70,6 +70,6 @@
     }
 
     &.active {
-        color: $contentLinkActive;
+        color: $actionPrimaryActive;
     }
 }
diff --git a/src/app/components/left-bar-menu/left-bar-menu.component.html b/src/app/components/left-bar-menu/left-bar-menu.component.html
@@ -49,20 +49,20 @@
     <div class="side-nav-list-bottom {{ isHomePage ? 'side-nav-list-bottom_full' : '' }}">
         <gc-redirect-link-button
             class="side-nav-list-button"
-            [variant]="'white'"
+            [variant]="'secondary'"
             [label]="'Support'"
             [href]="'https://gcore.com/docs'"
         ></gc-redirect-link-button>
         <gc-redirect-link-button
             class="side-nav-list-button"
-            [variant]="'white'"
+            [variant]="'secondary'"
             [label]="'API'"
             [href]="'https://api.gcore.com/docs'"
         >
         </gc-redirect-link-button>
-        <button (click)="openModal()" *ngIf="!isHosting" class="sign-in header-button">Sign in</button>
+        <button (click)="openModal()" *ngIf="!isHosting" class="button button_primary header-button">Sign in</button>
         <a
-            class="sign-in header-button"
+            class="button button_primary header-button"
             *ngIf="isHosting"
             [href]="'https://hosting.gcore.com/billmgr?func=logon&lang=en'"
             target="_blank"

diff --git a/src/app/components/left-bar-menu/left-bar-menu.component.scss b/src/app/components/left-bar-menu/left-bar-menu.component.scss
@@ -53,7 +53,7 @@
 }
 
 .side-nav-list {
-    background-color: $sidebarPurple;
+    background-color: $bgSurfaceLight1;
     padding: 1rem 1.5rem;
     border-radius: 0 0.75rem 0.75rem 0;
 
@@ -77,6 +77,12 @@
         }
     }
 
+    .side-nav-list-close {
+        svg {
+            vertical-align: middle;
+        }
+    }
+
     .side-nav-list-middle {
         @media (max-width: 800px) {
             padding: 1.5rem;
@@ -149,7 +155,7 @@
         }
 
         &.active {
-            color: $contentLinkActive;
+            color: $actionPrimaryActive;
         }
     }
 }