Begin fixing design to match new colors

DaneEveritt · DaneEveritt · commit a9fda520653a · 2019-02-09T15:17:38.000-08:00
diff --git a/resources/assets/scripts/components/core/Navigation.ts b/resources/assets/scripts/components/core/Navigation.ts
@@ -98,10 +98,10 @@ export default Vue.component('navigation', {
                     />
                     <div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
                         <div v-if="loadingResults">
-                            <a href="#">
+                            <a href="#" class="no-hover cursor-default">
                                 <div class="flex items-center">
                                     <div class="flex-1">
-                                        <span class="text-sm text-neutral-800">Loading...</span>
+                                        <span class="text-sm text-neutral-500">Loading...</span>
                                     </div>
                                     <div class="flex-none">
                                         <span class="spinner spinner-relative"></span>
@@ -114,10 +114,10 @@ export default Vue.component('navigation', {
                                 <div class="flex items-center">
                                     <div class="flex-1">
                                         <span class="font-bold text-neutral-900">{{ server.name }}</span><br />
-                                        <span class="font-light text-neutral-600 text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
+                                        <span class="text-neutral-600 text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
                                     </div>
                                     <div class="flex-none">
-                                        <span class="pillbox bg-indigo">{{ server.node }}</span>
+                                        <span class="pillbox bg-neutral-900">{{ server.node }}</span>
                                     </div>
                                 </div>
                             </router-link>
diff --git a/resources/assets/styles/components/buttons.css b/resources/assets/styles/components/buttons.css
diff --git a/resources/assets/styles/components/forms.css b/resources/assets/styles/components/forms.css
@@ -21,7 +21,7 @@ input[type=number] {
 }
 
 .input-open > .input {
-    @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
+    @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-200 .py-3 .mb-3;
 
     &:focus {
         @apply .border-primary-400;
@@ -49,8 +49,8 @@ input[type=number] {
  * Styling for other forms throughout the Panel.
  */
 .input:not(.open-label) {
-    @apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full;
-    transition: all 100ms linear;
+    @apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
+    transition: border 150ms linear;
 
     &:focus {
         @apply .border-primary-400;
@@ -66,13 +66,83 @@ input[type=number] {
 }
 
 .input-label {
-    @apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2;
+    @apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold .mb-2;
 }
 
 .input-help {
-    @apply .text-xs .text-neutral-500 .pt-2;
+    @apply .text-xs .text-neutral-400 .pt-2;
 
     &.error {
         @apply .text-red-600;
     }
 }
+
+.btn {
+    @apply .rounded .p-2;
+    transition: all 150ms linear;
+
+    /**
+     * Button Colors
+     */
+    &.btn-primary {
+        @apply .bg-primary-500 .border-primary-600 .border .text-white;
+
+        &:hover:enabled {
+            @apply .bg-primary-600 .border-primary-800;
+        }
+    }
+
+    &.btn-green {
+        @apply .bg-green-500 .border-green-600 .border .text-white;
+
+        &:hover:enabled {
+            @apply .bg-green-600 .border-green-800;
+        }
+    }
+
+    &.btn-red {
+        &:not(.btn-secondary) {
+            @apply .bg-red-500 .border-red-600 .border .text-white;
+        }
+
+        &:hover:enabled {
+            @apply .bg-red-600 .border-red-800;
+        }
+    }
+
+    &.btn-secondary {
+        @apply .border .border-neutral-400 .text-neutral-600;
+
+        &:hover:enabled {
+            @apply .border-neutral-500 .text-neutral-800;
+        }
+
+        &.btn-red:hover:enabled {
+            @apply .bg-red-600 .border-red-800 .text-white;
+        }
+    }
+
+    /**
+     * Button Sizes
+     */
+    &.btn-jumbo {
+        @apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
+    }
+
+    &.btn-lg {
+        @apply .p-4 .uppercase .tracking-wide .text-sm;
+    }
+
+    &.btn-sm {
+        @apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
+    }
+
+    &.btn-xs {
+        @apply .py-2 .px-2 .uppercase .text-xs;
+    }
+
+    &:disabled, &.disabled {
+        opacity: 0.55;
+        cursor: default;
+    }
+}
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
@@ -1,5 +1,5 @@
 .nav {
-    @apply .bg-primary-600 .border-b .border-t .border-primary-900;
+    @apply .bg-primary-600 .border-b .border-t .border-primary-700;
     height: 56px;
 
     & .logo {
@@ -19,29 +19,26 @@
         @apply .mr-2;
 
         & > .search-input {
-            @apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-800 .bg-neutral-50 .text-neutral-900 .w-96;
-            opacity: 0.9;
-            transition: ease-in-out opacity 150ms;
+            @apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-600 .bg-white .text-neutral-900 .w-96;
+            transition: border 150ms ease-in;
 
             &:focus {
-                @apply .border-primary-900;
-                opacity: 1;
+                @apply .border-primary-700;
             }
 
             &.has-search-results {
                 @apply .border-b-0 .rounded-b-none;
-                opacity: 1 !important;
             }
         }
 
         & .search-results {
-            @apply .absolute .bg-neutral-50 .border .border-primary-900 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
+            @apply .absolute .bg-white .border .border-primary-700 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
 
             & a {
                 @apply .block .no-underline .p-2 .rounded;
 
-                &:hover {
-                    @apply .bg-neutral-100;
+                &:not(.no-hover):hover {
+                    @apply .bg-neutral-50;
                 }
             }
         }
@@ -51,10 +48,11 @@
         @apply .flex .h-full .items-center;
 
         & > a {
-            @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
+            transition: background-color 150ms linear;
+            @apply .block .flex .self-stretch .items-center .no-underline .text-white .font-light .text-sm .px-5;
 
             &:hover {
-                @apply .bg-primary-600;
+                @apply .bg-primary-700;
             }
         }
     }
diff --git a/resources/assets/styles/main.css b/resources/assets/styles/main.css
@@ -11,7 +11,6 @@
  */
 @import "components/animations.css";
 @import "components/authentication.css";
-@import "components/buttons.css";
 @import "components/forms.css";
 @import "components/miscellaneous.css";
 @import "components/modal.css";
diff --git a/resources/themes/pterodactyl/templates/base/core.blade.php b/resources/themes/pterodactyl/templates/base/core.blade.php
@@ -1,62 +1,13 @@
 @extends('templates/wrapper')
 
-{{--
-=======
-@section('above-container')
-    <header class="bg-primary-500 text-white text-xl rounded-b fixed pin-t w-full z-40 shadow-md">
-        <div class="container h-16 mx-auto flex">
-            <img class="h-12 mt-2 mr-3" src="/assets/img/pterodactyl-flat.svg">
-            <div class="py-6">PTERODACTYL</div>
-            <div class="flex-grow"></div>
-            <nav class="nav text-lg">
-                <router-link to="/"><font-awesome-icon class="mr-2" fixed-with icon="server"></font-awesome-icon>Servers</router-link>
-                <a href="#"><font-awesome-icon class="mr-2" fixed-with icon="cogs"></font-awesome-icon>Admin</a>
-                <a href="#"><font-awesome-icon class="mr-2" fixed-with icon="user"></font-awesome-icon>schrej</a>
-                <a href="/auth/logout"><font-awesome-icon fixed-with icon="sign-out-alt"></font-awesome-icon></a>
-            </nav>
-        </div>
-    </header>
-    <div class="h-16 mb-6"></div>
-    {{--<div class="nav">
-        <div class="logo">
-            Pterodactyl
-        </div>
-        <div class="menu">
-            <ul>
-                <li>
-                    <router-link to="/">
-                        <span>Your Servers</span>
-                    </router-link>
-                </li>
-                <li>
-                    <a href="#">
-                        <span>Admin</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <span>dane</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="{{ route('auth.logout') }}">
-                        <span>Logout</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-@endsection
---}}
-
 @section('container')
     <router-view></router-view>
 @endsection
 
 @section('below-container')
     <div class="flex-grow"></div>
     <div class="w-full m-auto mt-0 container">
-        <p class="text-center sm:text-right text-neutral-600 text-xs">
+        <p class="text-center sm:text-right text-neutral-300 text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>
     </div>

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.nav {`
`2`		`- @apply .bg-primary-600 .border-b .border-t .border-primary-900;`
	`2`	`+ @apply .bg-primary-600 .border-b .border-t .border-primary-700;`
`3`	`3`	`height: 56px;`
`4`	`4`
`5`	`5`	`& .logo {`
`@@ -19,29 +19,26 @@`
`19`	`19`	`@apply .mr-2;`
`20`	`20`
`21`	`21`	`& > .search-input {`
`22`		`- @apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-800 .bg-neutral-50 .text-neutral-900 .w-96;`
`23`		`- opacity: 0.9;`
`24`		`- transition: ease-in-out opacity 150ms;`
	`22`	`+ @apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-600 .bg-white .text-neutral-900 .w-96;`
	`23`	`+ transition: border 150ms ease-in;`
`25`	`24`
`26`	`25`	`&:focus {`
`27`		`- @apply .border-primary-900;`
`28`		`- opacity: 1;`
	`26`	`+ @apply .border-primary-700;`
`29`	`27`	`}`
`30`	`28`
`31`	`29`	`&.has-search-results {`
`32`	`30`	`@apply .border-b-0 .rounded-b-none;`
`33`		`- opacity: 1 !important;`
`34`	`31`	`}`
`35`	`32`	`}`
`36`	`33`
`37`	`34`	`& .search-results {`
`38`		`- @apply .absolute .bg-neutral-50 .border .border-primary-900 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;`
	`35`	`+ @apply .absolute .bg-white .border .border-primary-700 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;`
`39`	`36`
`40`	`37`	`& a {`
`41`	`38`	`@apply .block .no-underline .p-2 .rounded;`
`42`	`39`
`43`		`- &:hover {`
`44`		`- @apply .bg-neutral-100;`
	`40`	`+ &:not(.no-hover):hover {`
	`41`	`+ @apply .bg-neutral-50;`
`45`	`42`	`}`
`46`	`43`	`}`
`47`	`44`	`}`
`@@ -51,10 +48,11 @@`
`51`	`48`	`@apply .flex .h-full .items-center;`
`52`	`49`
`53`	`50`	`& > a {`
`54`		`- @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;`
	`51`	`+ transition: background-color 150ms linear;`
	`52`	`+ @apply .block .flex .self-stretch .items-center .no-underline .text-white .font-light .text-sm .px-5;`
`55`	`53`
`56`	`54`	`&:hover {`
`57`		`- @apply .bg-primary-600;`
	`55`	`+ @apply .bg-primary-700;`
`58`	`56`	`}`
`59`	`57`	`}`
`60`	`58`	`}`