feat(styles): Refined global styling and color selections.

spaship · Apr 4, 2022 · 1bc06d5 · 1bc06d5
1 parent 8a59dec
commit 1bc06d5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/components/layout/index.tsx b/components/layout/index.tsx
@@ -4,7 +4,6 @@ import Footer from "./footer";
 import Sidebar from "./sidebar";
 import styled from "styled-components";
 import React from "react";
-import Header from "./header";
 
 interface LayoutProps {
   skipLayout: boolean
@@ -37,7 +36,6 @@ const LayoutDefinition: FunctionComponent<{}> = ({ children }) => {
         <SidebarArea><Sidebar></Sidebar></SidebarArea>
         <ContentArea isFilled>
           <Stack>
-            <Header breadcrumbs={[{title: "test1", path: "/test1"},{title: "test2", path: "/test2"}]} buttons={[{title: "test1", path: "/test1"},{title: "test2", path: "/test2"}]} previous={"/prev"} settings={"/settings"} title="test"></Header>
             <BodyArea isFilled>{children}</BodyArea>
             <FooterArea><Footer></Footer></FooterArea>
           </Stack>

diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
@@ -8,12 +8,12 @@ import UserStatus from "./user-status";
 
 interface SidebarProps {}
 
-const StyledStack = styled(Stack) ({
-  background: "black",  
-  height: "100%",
-  position: "fixed",
-  width: "250px",
-});
+const StyledStack = styled(Stack) `
+  background: black;
+  height: 100%;
+  position: fixed;
+  width: 250px;
+`;
 
 const BrandItem = styled(StackItem) `
   margin: auto;
@@ -32,7 +32,7 @@ const StyledNavItem = styled(NavItem) `
   --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--spaship-global--Color--amarillo-flare);
   --pf-c-nav__link--m-current--after--BorderColor: var(--spaship-global--Color--amarillo-flare);
   --pf-c-nav__link--m-current--Color:  var(--spaship-global--Color--amarillo-flare);
-  --pf-c-nav__link--before--BorderColor:  black;
+  --pf-c-nav__link--before--BorderColor:  var(--spaship-global--Color--spaship-gray);
 `
 
 const NavButton = styled.a`

diff --git a/components/layout/user-status.tsx b/components/layout/user-status.tsx
@@ -7,15 +7,12 @@ import styled from "styled-components";
 interface UserStatusProps {}
 
 const StyledAccordion = styled(Accordion) `
---pf-c-accordion--BackgroundColor: #333;
---pf-c-accordion__toggle--active--BackgroundColor: var(--spaship-global--Color--amarillo-flare);
+--pf-c-accordion--BackgroundColor: var(--spaship-global--Color--spaship-gray);
+--pf-c-accordion__toggle--active--BackgroundColor: var(--spaship-global--Color--solar-orange);
 --pf-c-accordion__toggle--hover--BackgroundColor: var(--spaship-global--Color--spaship-gray);
 --pf-c-accordion__toggle--focus--BackgroundColor: var(--spaship-global--Color--spaship-gray);
 
 --pf-c-accordion__toggle--m-expanded__toggle-text--Color: white;
-
---pf-c-accordion__toggle--hover__toggle-text--Color: var(--spaship-global--Color--amarillo-flare);
---pf-c-accordion__toggle--active__toggle-text--Color: white;
 --pf-c-accordion__toggle--focus__toggle-text--Color: white;
 
 --pf-c-accordion__expanded-content--Color: var(--spaship-global--Color--bright-gray);
@@ -32,6 +29,17 @@ const StyledAccordion = styled(Accordion) `
 .pf-c-accordion__toggle :hover{
   color: var(--spaship-global--Color--amarillo-flare);
   outline: none;
+
+  .pf-l-split__item, .pf-l-split {
+    color: var(--spaship-global--Color--amarillo-flare);
+    outline: none;
+  }
+  :active {
+    color: var(--spaship-global--Color--text-black);
+    .pf-l-split__item, .pf-l-split {
+      color: var(--spaship-global--Color--text-black);
+    }
+  }
 }
 
 .pf-c-accordion__toggle-text > .pf-l-split {
@@ -41,6 +49,7 @@ const StyledAccordion = styled(Accordion) `
 .pf-c-page__sidebar-body .pf-c-accordion {
   background-color: #f3f3f3;
   --pf-c-button--m-primary--BackgroundColor: #f0392f;
+  --pf-c-button--m-primary--Color: #333;
 }
 `
 

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -157,15 +157,15 @@ const Login: NextPage = () => {
       <Footer variant={PageSectionVariants.darker} isFilled={false}>
         Brought to you by the{" "}
         <Link href="https://github.com/spaship/spaship/graphs/contributors" passHref>
-          <a className='amarillo-flare' target="_blank" rel="noreferrer noopener">Wizards <OptimizeIcon /></a>
+          <a className='solar-orange' target="_blank" rel="noreferrer noopener">Wizards <OptimizeIcon /></a>
         </Link>{" "}
         of the{" "}
         <Link href="https://github.com/spaship/spaship">
-          <a className='amarillo-flare' target="_blank" rel="noreferrer noopener">SPAship</a>
+          <a className='solar-orange' target="_blank" rel="noreferrer noopener">SPAship</a>
         </Link>{" "}
         project. <br /> Code licensed under the{" "}
         <Link href="https://github.com/spaship/spaship/blob/master/LICENSE">
-          <a className='amarillo-flare' target="_blank" rel="noreferrer noopener">
+          <a className='solar-orange' target="_blank" rel="noreferrer noopener">
             MIT License
           </a>
         </Link>

diff --git a/styles/globals.css b/styles/globals.css
@@ -57,7 +57,7 @@ button.spaship_btn {
 }
 
 .spaship_btn:hover {
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--spaship-global--Color--munsell-yellow) !important;
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--spaship-global--Color--solar-orange) !important;
 }
 
 .spaship_btn:focus {