Browse Source

feat(admin-ui): Add logo and basic branding styles to login & app shell

Michael Bromley 7 years ago
parent
commit
4542a9ede2

+ 9 - 0
admin-ui/src/_variables.scss

@@ -0,0 +1,9 @@
+// colors
+$color-brand: #13b7f3;
+$grey-1: #FAFAFA;
+$grey-2: #EEEEEE;
+$grey-3: #CCCCCC;
+$grey-4: #9A9A9A;
+$grey-5: #565656;
+$grey-6: #313131;
+$grey-7: #111111;

+ 3 - 1
admin-ui/src/app/core/components/app-shell/app-shell.component.html

@@ -4,7 +4,9 @@
     </div>-->
     <header class="header header-6">
         <div class="branding">
-            <a href="#">Vendure</a>
+            <a [routerLink]="['/']">
+                <img src="/assets/cube-logo-75px.png" class="logo">
+            </a>
         </div>
         <div class="header-nav">
             <a href="javascript://" class="active nav-link nav-text">Dashboard</a>

+ 6 - 0
admin-ui/src/app/core/components/app-shell/app-shell.component.scss

@@ -0,0 +1,6 @@
+.branding {
+    min-width: 0;
+}
+.logo {
+    width: 60px;
+}

+ 2 - 1
admin-ui/src/app/login/components/login/login.component.html

@@ -1,8 +1,9 @@
 <div class="login-wrapper">
     <form class="login">
         <label class="title">
+            <img src="/assets/cube-logo-300px.png">
             <h3 class="welcome">Welcome to</h3>
-            Vendure
+            vendure
         </label>
         <div class="login-group">
             <input class="username"

+ 10 - 0
admin-ui/src/app/login/components/login/login.component.scss

@@ -0,0 +1,10 @@
+.login-wrapper {
+    background-image: url("/assets/dark-triangles.png");
+    background-repeat: repeat;
+    background-size: auto;
+    justify-content: center;
+}
+
+.title {
+    text-align: center;
+}

BIN
admin-ui/src/assets/cube-logo-300px.png


BIN
admin-ui/src/assets/cube-logo-75px.png


BIN
admin-ui/src/assets/dark-triangles.png


+ 0 - 1
admin-ui/src/styles.scss

@@ -1,2 +1 @@
 /* You can add global styles to this file, and also import other style files */
-// @import '~@clr/icons/clr-icons.min.css';