feat: new branding changes

pyrohost · Aug 16, 2024 · 4d9bb43 · 4d9bb43
1 parent 4b15d38
commit 4d9bb43
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 18 deletions.
diff --git a/.github/banner.png b/.github/banner.png
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 <p align="center">
   <a href="https://panel.pyro.host">
-    <img src="https://i.imgur.com/Xyyb4IJ.png" alt="Logo Image">
+    <img src="https://i.imgur.com/R10ivg9.png" alt="Banner with Pyrodactyl Logo">
   </a>
 
 </p>
 
 <p align="center">
- <a aria-label="Pyro logo" href="https://pyro.host"><img src="https://i.imgur.com/uvIy6cI.png"></a>
+ <a aria-label="Made by Pyro" href="https://pyro.host"><img src="https://i.imgur.com/uvIy6cI.png"></a>
  <a aria-label="Join the Pyro community on Discord" href="https://discord.gg/fxeRFRbhQh?utm_source=githubreadme&utm_medium=readme&utm_campaign=OSSLAUNCH&utm_id=OSSLAUNCH"><img alt="" src="https://i.imgur.com/qSfKisV.png"></a>
 </p>
 

diff --git a/public/themes/pterodactyl/css/pterodactyl.css b/public/themes/pterodactyl/css/pterodactyl.css
@@ -526,6 +526,14 @@ body {
 .skin-blue .main-sidebar,
 .skin-blue .main-header .logo {
     border-right: 1px solid #222222;
+    display: flex;
+    align-items: center;
+
+    .innerLogo {
+        min-width: 100%;
+        min-height: 100%;
+        padding: 8px;
+    }
 }
 
 .skin-blue .main-header .logo {

diff --git a/public/themes/pterodactyl/vendor/adminlte/admin.min.css b/public/themes/pterodactyl/vendor/adminlte/admin.min.css
@@ -588,7 +588,9 @@ a:focus {
         -webkit-transform: translateZ(0);
     }
     .sidebar-mini.sidebar-collapse .main-header .logo {
-        width: 50px;
+        position: absolute;
+        width: 140px;
+        padding: unset;
     }
     .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
         display: block;

diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
@@ -13,6 +13,7 @@ import Field from '@/components/elements/Field';
 import login from '@/api/auth/login';
 
 import useFlash from '@/plugins/useFlash';
+import Logo from '../elements/PyroLogo';
 
 interface Values {
     username: string;
@@ -87,7 +88,23 @@ function LoginContainer() {
         >
             {({ isSubmitting, setSubmitting, submitForm }) => (
                 <LoginFormContainer className={`w-full flex`}>
-                    <div className='flex items-start h-12 w-fit mb-4'></div>
+                    <div className='flex h-12 mb-4 items-center w-full'>
+                        {/* temp src */}
+                        {/* <img
+                            className='w-full max-w-full h-full'
+                            loading='lazy'
+                            decoding='async'
+                            alt=''
+                            aria-hidden
+                            style={{
+                                color: 'transparent',
+                            }}
+                            src='https://i.imgur.com/Hbum4fc.png'
+                        /> */}
+                        {/* <NavLink to={'/'} className='flex shrink-0 h-full w-fit'> */}
+                        <Logo />
+                    </div>
+                    <div aria-hidden className='my-8 bg-[#ffffff33] min-h-[1px]'></div>
                     <h2 className='text-xl font-extrabold mb-2'>Login</h2>
                     <Field
                         id='usernameOrEmail'

diff --git a/resources/scripts/components/elements/PyroLogo.tsx b/resources/scripts/components/elements/PyroLogo.tsx
@@ -0,0 +1,46 @@
+// million-ignore
+const Logo = () => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className='flex h-full w-full shrink-0'
+            width="284"
+            height="61"
+            fill="none"
+            viewBox="0 0 284 61"
+        >
+            <path
+                fill="url(#paint0_radial_10_136)"
+                fillRule="evenodd"
+                d="M.221 5.894c2.105 4.942 3.762 10.569 3.518 15.349-.124 2.415 2.375 5.89 4.683 6.683 2.568.881 4.998 2.762 6.208 6.329.66 1.942 3.005 3.258 4.995 2.696 4.253-1.203 9.98-1.256 14.475 3.247.529.53.764 1.286.597 2.012a15.343 15.343 0 01-10.022 10.946c-1.798.623-2.37 2.472-.468 2.575 2.41.13 6.157-.897 11.586-4.603.3-.205.71-.175.968.08.228.225.284.57.14.854l-.644 1.276c-.47.93-.358 2.043.287 2.864l.73.93c.431.549.54 1.28.285 1.928l-.192.49c-.14.353-.077.754.162 1.05.485.6 1.434.51 1.793-.172l.329-.623c.187-.355.445-.597.801-.407.717.382 2.333.346 2.279-.458l-.002-.029a.74.74 0 00-.22-.5L40.47 56.33a2.679 2.679 0 01-.396-3.238l.93-1.579a1.478 1.478 0 00-.104-1.656 1.48 1.48 0 01.292-2.097l.93-.69a1.89 1.89 0 012.297.036c.71.562.91 1.548.474 2.339l-.027.05a1.909 1.909 0 00.22 2.162l1.67 1.958c.405.476.502 1.139.25 1.709l-.165.375a.974.974 0 00.155 1.032.997.997 0 001.656-.232l.312-.68c.136-.296.445-.486.761-.398.091.026.186.057.282.095.69.27 2.127.084 2.052-.647a.675.675 0 00-.2-.402l-2.52-2.423a2.68 2.68 0 01-.523-3.172l.414-.796c.417-.802.408-1.762-.115-2.502a19.405 19.405 0 00-.56-.752c-.843-1.077-1.013-2.612-.04-3.576 3.14-3.11 8.802-6.355 15.662-4.248 2.002.614 4.458-.647 5.178-2.596.796-2.157 2.177-4.31 4.396-5.684 2.262-1.4 6.302-6.74 6.465-9.377.228-3.701 1.408-8.64 4.302-14.947 1.104-2.407-1.49-5.198-3.953-4.176C75.77 2.205 69.92 4.458 64.573 6.11c-1.138.352-1.935 1.377-1.96 2.557l-.183 8.996c-.008.393-.095.781-.308 1.112-1.138 1.767-4.333 5.01-10.452 7.749-1.31.586-2.828-.035-3.426-1.33l-.826-1.79c-1.06-2.565.04-5.525 6.322-6.655l.017-.003c.025-.004.04-.007.068-.017l.033-.012c.565-.203 1.4-.503 1.43-1.086.061-1.177-.167-2.505-1.224-2.907a1.529 1.529 0 00-.547-.078h-9.795c-.212 0-.424.02-.626.087-1.419.465-3.466 1.923-5.226 3.175-1.36.967-2.547 1.813-3.14 1.983a.5.5 0 01-.142.017c-.54 0-.847.572-.46.943.823.788 2.085 1.456 3.651 1.142 1.366-.274 2.94-.274 3.674.9 1.309 2.095 2.165 4.855.056 6.647-.361.307-.835.439-1.31.433-4.32-.057-12.867-1.902-18.27-9.031a2.514 2.514 0 01-.496-1.523v-8.77c0-1.227-.833-2.297-2.025-2.636A156.196 156.196 0 014.896 1.071C2.294.032-.869 3.334.221 5.894zM43.993 15.92a.823.823 0 00.827-.82.823.823 0 00-.827-.818.823.823 0 00-.827.819c0 .452.37.819.827.819z"
+                clipRule="evenodd"
+            ></path>
+            <path
+                fill="#F3B4A6"
+                fillOpacity="0.06"
+                fillRule="evenodd"
+                d="M.221 5.894c2.105 4.942 3.762 10.569 3.518 15.349-.124 2.415 2.375 5.89 4.683 6.683 2.568.881 4.998 2.762 6.208 6.329.66 1.942 3.005 3.258 4.995 2.696 4.253-1.203 9.98-1.256 14.475 3.247.529.53.764 1.286.597 2.012a15.343 15.343 0 01-10.022 10.946c-1.798.623-2.37 2.472-.468 2.575 2.41.13 6.157-.897 11.586-4.603.3-.205.71-.175.968.08.228.225.284.57.14.854l-.644 1.276c-.47.93-.358 2.043.287 2.864l.73.93c.431.549.54 1.28.285 1.928l-.192.49c-.14.353-.077.754.162 1.05.485.6 1.434.51 1.793-.172l.329-.623c.187-.355.445-.597.801-.407.717.382 2.333.346 2.279-.458l-.002-.029a.74.74 0 00-.22-.5L40.47 56.33a2.679 2.679 0 01-.396-3.238l.93-1.579a1.478 1.478 0 00-.104-1.656 1.48 1.48 0 01.292-2.097l.93-.69a1.89 1.89 0 012.297.036c.71.562.91 1.548.474 2.339l-.027.05a1.909 1.909 0 00.22 2.162l1.67 1.958c.405.476.502 1.139.25 1.709l-.165.375a.974.974 0 00.155 1.032.997.997 0 001.656-.232l.312-.68c.136-.296.445-.486.761-.398.091.026.186.057.282.095.69.27 2.127.084 2.052-.647a.675.675 0 00-.2-.402l-2.52-2.423a2.68 2.68 0 01-.523-3.172l.414-.796c.417-.802.408-1.762-.115-2.502a19.405 19.405 0 00-.56-.752c-.843-1.077-1.013-2.612-.04-3.576 3.14-3.11 8.802-6.355 15.662-4.248 2.002.614 4.458-.647 5.178-2.596.796-2.157 2.177-4.31 4.396-5.684 2.262-1.4 6.302-6.74 6.465-9.377.228-3.701 1.408-8.64 4.302-14.947 1.104-2.407-1.49-5.198-3.953-4.176C75.77 2.205 69.92 4.458 64.573 6.11c-1.138.352-1.935 1.377-1.96 2.557l-.183 8.996c-.008.393-.095.781-.308 1.112-1.138 1.767-4.333 5.01-10.452 7.749-1.31.586-2.828-.035-3.426-1.33l-.826-1.79c-1.06-2.565.04-5.525 6.322-6.655l.017-.003c.025-.004.04-.007.068-.017l.033-.012c.565-.203 1.4-.503 1.43-1.086.061-1.177-.167-2.505-1.224-2.907a1.529 1.529 0 00-.547-.078h-9.795c-.212 0-.424.02-.626.087-1.419.465-3.466 1.923-5.226 3.175-1.36.967-2.547 1.813-3.14 1.983a.5.5 0 01-.142.017c-.54 0-.847.572-.46.943.823.788 2.085 1.456 3.651 1.142 1.366-.274 2.94-.274 3.674.9 1.309 2.095 2.165 4.855.056 6.647-.361.307-.835.439-1.31.433-4.32-.057-12.867-1.902-18.27-9.031a2.514 2.514 0 01-.496-1.523v-8.77c0-1.227-.833-2.297-2.025-2.636A156.196 156.196 0 014.896 1.071C2.294.032-.869 3.334.221 5.894zM43.993 15.92a.823.823 0 00.827-.82.823.823 0 00-.827-.818.823.823 0 00-.827.819c0 .452.37.819.827.819z"
+                clipRule="evenodd"
+            ></path>
+            <path
+                fill="#fff"
+                d="M102.914 44.556v-25.29h9.699c1.741 0 3.278.305 4.612.916 1.356.611 2.419 1.516 3.188 2.716.768 1.2 1.153 2.682 1.153 4.447 0 1.72-.396 3.18-1.187 4.38-.769 1.199-1.832 2.115-3.188 2.749-1.334.611-2.86.917-4.578.917h-4.443v9.166h-5.256zm5.256-13.748h4.477c.746 0 1.39-.148 1.933-.442.542-.294.96-.701 1.254-1.222.317-.52.475-1.12.475-1.799 0-.702-.158-1.313-.475-1.833a3.112 3.112 0 00-1.254-1.222c-.543-.294-1.187-.442-1.933-.442h-4.477v6.96zM127.446 52.093a9.285 9.285 0 01-1.594-.136 4.546 4.546 0 01-1.322-.441V47.34c.316.09.689.17 1.119.238.43.068.825.102 1.187.102.995 0 1.707-.238 2.136-.713.43-.475.78-1.019 1.052-1.63l1.254-2.885-.067 4.243-8.139-20.674h5.459l5.392 14.7h-2.034l5.392-14.7h5.46l-7.936 20.267c-.497 1.29-1.108 2.365-1.831 3.225-.724.86-1.549 1.505-2.476 1.935-.904.43-1.921.645-3.052.645zM144.964 44.556V26.021h4.748v4.447l-.34-.645c.407-1.561 1.074-2.614 2.001-3.157.95-.566 2.069-.849 3.357-.849h1.086v4.413h-1.594c-1.244 0-2.25.385-3.018 1.155-.769.747-1.153 1.81-1.153 3.19v9.981h-5.087zM167.235 44.964c-1.831 0-3.504-.419-5.019-1.256a9.858 9.858 0 01-3.594-3.429c-.882-1.471-1.323-3.134-1.323-4.99 0-1.879.441-3.542 1.323-4.99a9.858 9.858 0 013.594-3.43c1.515-.837 3.188-1.255 5.019-1.255s3.493.418 4.985 1.256a9.598 9.598 0 013.561 3.428c.904 1.449 1.356 3.112 1.356 4.99 0 1.857-.452 3.52-1.356 4.991a9.598 9.598 0 01-3.561 3.429c-1.492.837-3.154 1.256-4.985 1.256zm0-4.583c.927 0 1.73-.215 2.408-.645a4.333 4.333 0 001.628-1.8c.407-.769.61-1.651.61-2.647 0-.996-.203-1.867-.61-2.614a4.334 4.334 0 00-1.628-1.8c-.678-.452-1.481-.678-2.408-.678-.927 0-1.741.226-2.441.678a4.564 4.564 0 00-1.662 1.8c-.384.747-.577 1.618-.577 2.614 0 .996.193 1.878.577 2.648.407.77.961 1.369 1.662 1.799.7.43 1.514.645 2.441.645zM188.85 44.964c-1.809 0-3.426-.43-4.85-1.29a9.49 9.49 0 01-3.391-3.497c-.814-1.47-1.221-3.1-1.221-4.888 0-1.81.418-3.44 1.255-4.889a9.49 9.49 0 013.391-3.496c1.424-.86 3.018-1.29 4.782-1.29 1.356 0 2.554.26 3.594.78 1.063.498 1.899 1.211 2.51 2.14l-.78 1.018V18.858h5.087v25.698h-4.748v-3.394l.475 1.052c-.633.905-1.492 1.596-2.578 2.07-1.085.454-2.26.68-3.526.68zm.61-4.583c.927 0 1.741-.215 2.442-.645a4.33 4.33 0 001.627-1.8c.407-.769.611-1.651.611-2.647 0-.996-.204-1.879-.611-2.648a4.331 4.331 0 00-1.627-1.8c-.701-.43-1.515-.644-2.442-.644-.927 0-1.763.226-2.51.678a4.488 4.488 0 00-1.695 1.8c-.407.747-.611 1.618-.611 2.614 0 .996.204 1.878.611 2.648.407.77.972 1.369 1.695 1.799.747.43 1.583.645 2.51.645zM208.683 44.964c-1.334 0-2.487-.215-3.459-.645-.972-.43-1.718-1.041-2.238-1.833-.52-.815-.78-1.777-.78-2.886 0-1.04.237-1.958.712-2.75.475-.814 1.198-1.493 2.17-2.037.995-.543 2.227-.927 3.697-1.154l5.663-.916v3.734l-4.748.849c-.723.135-1.277.373-1.661.712-.385.317-.577.781-.577 1.392 0 .566.215 1.008.644 1.324.43.317.961.476 1.594.476.837 0 1.572-.181 2.205-.543a3.767 3.767 0 001.458-1.46 4.113 4.113 0 00.542-2.071v-4.82c0-.702-.282-1.29-.847-1.766-.543-.475-1.289-.713-2.239-.713-.904 0-1.707.25-2.407.747a4.322 4.322 0 00-1.492 1.969l-4.07-1.935a6.616 6.616 0 011.73-2.682c.791-.747 1.74-1.324 2.848-1.731 1.108-.408 2.318-.611 3.629-.611 1.56 0 2.939.282 4.137.848 1.198.566 2.125 1.358 2.781 2.377.678.995 1.017 2.161 1.017 3.496v12.221h-4.748V41.57l1.153-.204c-.542.815-1.141 1.494-1.797 2.037-.655.52-1.39.906-2.204 1.154-.814.272-1.718.408-2.713.408zM231.811 44.964c-1.854 0-3.527-.419-5.019-1.256a9.863 9.863 0 01-3.527-3.497c-.859-1.47-1.288-3.123-1.288-4.956 0-1.833.429-3.474 1.288-4.923a9.26 9.26 0 013.527-3.462c1.492-.838 3.165-1.256 5.019-1.256 1.379 0 2.656.237 3.832.712a8.692 8.692 0 013.018 2.003 7.21 7.21 0 011.798 2.988l-4.409 1.9c-.316-.927-.859-1.662-1.628-2.206-.746-.543-1.616-.814-2.611-.814-.882 0-1.673.215-2.374.645-.678.43-1.221 1.03-1.628 1.799-.384.77-.576 1.652-.576 2.648 0 .996.192 1.878.576 2.648.407.77.95 1.369 1.628 1.799.701.43 1.492.645 2.374.645 1.017 0 1.899-.272 2.645-.815.746-.543 1.278-1.279 1.594-2.206l4.409 1.935c-.34 1.086-.927 2.06-1.764 2.92-.836.86-1.842 1.538-3.018 2.036-1.176.475-2.464.713-3.866.713zM252.373 44.76c-2.238 0-3.979-.6-5.223-1.799-1.22-1.222-1.831-2.92-1.831-5.092v-7.435h-3.12v-4.413h.17c.949 0 1.673-.238 2.17-.713.52-.475.78-1.188.78-2.139v-1.358h5.087v4.21h4.341v4.413h-4.341v7.095c0 .634.113 1.166.339 1.596.226.407.577.713 1.051.916.475.204 1.063.306 1.764.306.158 0 .339-.011.542-.034.204-.023.419-.045.645-.068v4.312c-.34.045-.724.09-1.153.135-.43.046-.837.068-1.221.068zM260.61 52.093a9.277 9.277 0 01-1.594-.136 4.563 4.563 0 01-1.323-.441V47.34c.317.09.69.17 1.12.238.429.068.825.102 1.187.102.994 0 1.706-.238 2.136-.713a6.11 6.11 0 001.051-1.63l1.255-2.885-.068 4.243-8.139-20.674h5.46l5.392 14.7h-2.035l5.392-14.7h5.46l-7.935 20.267c-.498 1.29-1.108 2.365-1.831 3.225-.724.86-1.549 1.505-2.476 1.935-.904.43-1.922.645-3.052.645zM278.128 44.556V18.858h5.086v25.698h-5.086z"
+            ></path>
+            <defs>
+                <radialGradient
+                    id="paint0_radial_10_136"
+                    cx="0"
+                    cy="0"
+                    r="1"
+                    gradientTransform="matrix(0 62.83 -291.711 0 141.607 -1.83)"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#FF343C"></stop>
+                    <stop offset="1" stopColor="#F06F53"></stop>
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+export default Logo;
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
@@ -14,6 +14,7 @@ import {
 } from '@/components/elements/DropdownMenu';
 import MainSidebar from '@/components/elements/MainSidebar';
 import MainWrapper from '@/components/elements/MainWrapper';
+import Logo from '@/components/elements/PyroLogo';
 import { NotFound } from '@/components/elements/ScreenBlock';
 import HugeIconsDashboardSettings from '@/components/elements/hugeicons/DashboardSettings';
 import HugeIconsHome from '@/components/elements/hugeicons/Home';
@@ -88,21 +89,22 @@ export default () => {
                 />
                 <div className='relative flex flex-row items-center justify-between h-8'>
                     <NavLink to={'/'} className='flex shrink-0 h-full w-fit'>
-                        <h1 className='text-[35px] font-semibold leading-[98%] tracking-[-0.05rem] mb-8'>Panel</h1>
+                        {/* <h1 className='text-[35px] font-semibold leading-[98%] tracking-[-0.05rem] mb-8'>Panel</h1> */}
+                        <Logo />
                     </NavLink>
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
-                            <button className='w-8 h-8 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-1'>
+                            <button className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2'>
                                 <svg
                                     xmlns='http://www.w3.org/2000/svg'
-                                    width='32'
-                                    height='32'
+                                    width='16'
+                                    height='15'
                                     fill='currentColor'
-                                    viewBox='0 0 256 256'
+                                    viewBox='0 0 16 15'
                                     className='flex shrink-0 h-full w-full'
                                 >
                                     {/* @ts-ignore */}
-                                    <path d='M138,128a10,10,0,1,1-10-10A10,10,0,0,1,138,128ZM60,118a10,10,0,1,0,10,10A10,10,0,0,0,60,118Zm136,0a10,10,0,1,0,10,10A10,10,0,0,0,196,118Z'></path>
+                                    <path d="M8.9375 7.3775C8.9375 7.56341 8.88252 7.74515 8.7795 7.89974C8.67649 8.05432 8.53007 8.1748 8.35877 8.24595C8.18746 8.31709 7.99896 8.33571 7.8171 8.29944C7.63525 8.26317 7.4682 8.17364 7.33709 8.04218C7.20598 7.91072 7.11669 7.74323 7.08051 7.56088C7.04434 7.37854 7.06291 7.18954 7.13386 7.01778C7.20482 6.84601 7.32498 6.69921 7.47915 6.59592C7.63332 6.49263 7.81458 6.4375 8 6.4375C8.24864 6.4375 8.4871 6.53654 8.66291 6.71282C8.83873 6.8891 8.9375 7.1282 8.9375 7.3775ZM1.625 6.4375C1.43958 6.4375 1.25832 6.49263 1.10415 6.59592C0.949982 6.69921 0.829821 6.84601 0.758863 7.01778C0.687906 7.18954 0.669341 7.37854 0.705514 7.56088C0.741688 7.74323 0.830976 7.91072 0.962088 8.04218C1.0932 8.17364 1.26025 8.26317 1.4421 8.29944C1.62396 8.33571 1.81246 8.31709 1.98377 8.24595C2.15507 8.1748 2.30149 8.05432 2.4045 7.89974C2.50752 7.74515 2.5625 7.56341 2.5625 7.3775C2.5625 7.1282 2.46373 6.8891 2.28791 6.71282C2.1121 6.53654 1.87364 6.4375 1.625 6.4375ZM14.375 6.4375C14.1896 6.4375 14.0083 6.49263 13.8542 6.59592C13.7 6.69921 13.5798 6.84601 13.5089 7.01778C13.4379 7.18954 13.4193 7.37854 13.4555 7.56088C13.4917 7.74323 13.581 7.91072 13.7121 8.04218C13.8432 8.17364 14.0102 8.26317 14.1921 8.29944C14.374 8.33571 14.5625 8.31709 14.7338 8.24595C14.9051 8.1748 15.0515 8.05432 15.1545 7.89974C15.2575 7.74515 15.3125 7.56341 15.3125 7.3775C15.3125 7.1282 15.2137 6.8891 15.0379 6.71282C14.8621 6.53654 14.6236 6.4375 14.375 6.4375Z"/>
                                 </svg>
                             </button>
                         </DropdownMenuTrigger>