Environment Type
@@ -175,107 +175,7 @@ const Environment = ({ environment }) => {
);
}}
-
-
+
);
};
diff --git a/src/components/Environments/StyledEnvironments.tsx b/src/components/Environments/StyledEnvironments.tsx
new file mode 100644
index 00000000..91cbc0b2
--- /dev/null
+++ b/src/components/Environments/StyledEnvironments.tsx
@@ -0,0 +1,176 @@
+import styled from "styled-components";
+import { bp, color, fontSize } from "lib/variables";
+
+export const StyledEnvironments = styled.div`
+ display: block;
+ @media ${bp.tinyUp} {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ &::after {
+ content: "";
+ flex: auto;
+ }
+ }
+
+ .environment {
+ width: 100%;
+ @media ${bp.xs_smallUp} {
+ margin-left: 48px;
+ min-width: calc(50% - 24px);
+ width: calc(50% - 24px);
+ }
+ @media ${bp.xs_small} {
+ &:nth-child(2n + 1) {
+ margin-left: 0;
+ }
+ }
+ @media ${bp.tabletUp} {
+ margin-left: 0;
+ min-width: 100%;
+ width: 100%;
+ }
+ @media ${bp.desktopUp} {
+ margin-left: 48px;
+ min-width: calc(50% - 24px);
+ width: calc(50% - 24px);
+ }
+ @media ${bp.desktop_extrawide} {
+ &:nth-child(2n + 1) {
+ margin-left: 0;
+ }
+ }
+ @media ${bp.extraWideUp} {
+ min-width: calc((100% / 3) - 32px);
+ width: calc((100% / 3) - 32px);
+ &:nth-child(3n + 1) {
+ margin-left: 0;
+ }
+ }
+ }
+
+ .productionLabel {
+ color: ${color.green};
+ ${fontSize(13)};
+ position: absolute;
+ right: -38px;
+ text-transform: uppercase;
+ top: 50%;
+ transform: translateY(-50%) rotate(-90deg);
+
+ &::after {
+ border-top: 1px solid ${color.grey};
+ content: "";
+ display: block;
+ position: relative;
+ right: 12px;
+ top: -12px;
+ width: calc(100% + 26px);
+ z-index: -1;
+ }
+
+ span {
+ background-color: ${color.white};
+ padding: 0 16px;
+ z-index: 0;
+ }
+ }
+
+ .standbyLabel {
+ color: ${color.blue};
+ ${fontSize(13)};
+ position: absolute;
+ right: 0px;
+ text-transform: uppercase;
+ top: 50%;
+ transform: translateY(-50%) rotate(-90deg);
+
+ &::after {
+ border-top: 1px solid ${color.grey};
+ content: "";
+ display: block;
+ position: relative;
+ right: 12px;
+ top: -12px;
+ width: calc(100% + 26px);
+ z-index: -1;
+ }
+
+ span {
+ background-color: ${color.white};
+ padding: 0 16px;
+ z-index: 0;
+ }
+ }
+
+ .activeLabel {
+ color: ${color.green};
+ ${fontSize(13)};
+ position: absolute;
+ right: 0px;
+ text-transform: uppercase;
+ top: 50%;
+ transform: translateY(-50%) rotate(-90deg);
+
+ &::after {
+ border-top: 1px solid ${color.grey};
+ content: "";
+ display: block;
+ position: relative;
+ right: 12px;
+ top: -12px;
+ width: calc(100% + 26px);
+ z-index: -1;
+ }
+
+ span {
+ background-color: ${color.white};
+ padding: 0 16px;
+ z-index: 0;
+ }
+ }
+
+ label {
+ ${fontSize(10)};
+ background-color: ${color.lightestGrey};
+ border-bottom-right-radius: 15px;
+ border-top-right-radius: 15px;
+ margin-left: -25px;
+ padding: 3px 15px 2px;
+ }
+
+ .clusterLabel {
+ ${fontSize(10)};
+ background-color: ${color.lightestGrey};
+ border-bottom-right-radius: 15px;
+ border-top-right-radius: 15px;
+ margin-left: -25px;
+ padding: 3px 15px 2px;
+ }
+
+ .regionLabel {
+ ${fontSize(10)};
+ background-color: ${color.lightestGrey};
+ border-bottom-right-radius: 15px;
+ border-top-right-radius: 15px;
+ margin-left: -25px;
+ padding: 3px 15px 2px;
+ }
+
+ .routeLink {
+ position: absolute;
+ top: 8px;
+ right: 50px;
+ }
+ .box {
+ margin-bottom: 35px;
+ .content {
+ background-position: right 32px bottom -6px;
+ background-repeat: no-repeat;
+ background-size: 40px 50px;
+ min-height: 122px;
+ padding: 10px 15px;
+ }
+ }
+`;
diff --git a/src/components/Environments/index.js b/src/components/Environments/index.js
index 1dffbcfa..4d59727f 100644
--- a/src/components/Environments/index.js
+++ b/src/components/Environments/index.js
@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
import * as R from 'ramda';
-import css from 'styled-jsx/css';
import EnvironmentLink from 'components/link/Environment';
import Box from 'components/Box';
-import { bp, color, fontSize } from 'lib/variables';
import { makeSafe } from 'lib/util';
+import {StyledEnvironments} from "./StyledEnvironments";
const bgImages = {
branch: {
@@ -21,48 +20,25 @@ const bgImages = {
}
};
-const { className: boxClassName, styles: boxStyles } = css.resolve`
- .box {
- margin-bottom: 35px;
-
- .content {
- background-position: right 32px bottom -6px;
- background-repeat: no-repeat;
- background-size: 40px 50px;
- min-height: 122px;
- padding: 10px 15px;
- }
- }
-`;
-
const Environments = ({ environments = [], project }) => {
if (environments.length === 0) {
return null;
}
return (
-
+
{environments.map(environment => {
const bgImage = R.propOr(
bgImages.none,
environment.deployType,
bgImages
);
- const { className: bgClassName, styles: bgStyles } = css.resolve`
- .content {
- background-image: ${bgImage.normal};
-
- &:hover {
- background-image: ${bgImage.hover};
- }
- }
- `;
const activeEnvironment = project.productionEnvironment && project.standbyProductionEnvironment && project.productionEnvironment == makeSafe(environment.name);
const standbyEnvironment = project.productionEnvironment && project.standbyProductionEnvironment && project.standbyProductionEnvironment == makeSafe(environment.name);
return (
-
+
{
: ''
}
- {bgStyles}
);
})}
-
- {boxStyles}
-
+
);
};
diff --git a/src/components/Facts/StyledFacts.js b/src/components/Facts/StyledFacts.js
new file mode 100644
index 00000000..a10d9c69
--- /dev/null
+++ b/src/components/Facts/StyledFacts.js
@@ -0,0 +1,132 @@
+import styled from "styled-components";
+import { bp, color } from "lib/variables";
+
+export const StyledFacts = styled.div`
+ input#filter {
+ width: 100%;
+ border: none;
+ padding: 10px 20px;
+ margin: 0;
+ font-style: italic;
+ }
+
+ .button-sort {
+ color: #5f6f7a;
+ position: relative;
+ font-family: "source-code-pro", sans-serif;
+ font-size: 13px;
+ font-size: 0.8125rem;
+ line-height: 1.4;
+ text-transform: uppercase;
+ padding-left: 20px;
+ border: none;
+ background: none;
+ cursor: pointer;
+
+ &:after {
+ position: absolute;
+ right: -18px;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ }
+
+ &.ascending:after {
+ content: " \\25B2";
+ }
+
+ &.descending:after {
+ content: " \\25BC";
+ }
+
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+
+ .expanded-wrapper {
+ padding: 20px;
+ background: ${color.lightestGrey};
+ .fieldWrapper {
+ padding-bottom: 20px;
+ }
+ }
+
+ .data-row {
+ display: flex;
+ justify-content: space-between;
+ border: 1px solid ${color.white};
+ border-bottom: 1px solid ${color.lightestGrey};
+ border-radius: 0;
+ line-height: 1.5rem;
+
+ @media ${bp.smallOnly} {
+ padding: 10px;
+ }
+
+ @media ${bp.wideUp} {
+ padding: 15px 0;
+ }
+
+ &:hover {
+ border: 1px solid ${color.brightBlue};
+ }
+
+ &:first-child {
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
+
+ .col {
+ @media ${bp.wideUp} {
+ padding: 0 20px;
+ }
+ width: 33.33%;
+ }
+
+ .col-2 {
+ text-align: center;
+ }
+
+ .col-3 {
+ text-align: end;
+ }
+
+ .description {
+ font-style: italic;
+ font-size: 12px;
+ }
+ }
+
+ .row-heading {
+ background: ${color.white};
+ }
+`;
+
+export const Header = styled.div`
+ @media ${bp.smallOnly} {
+ flex-wrap: wrap;
+ margin: 10px;
+ }
+ @media ${bp.wideUp} {
+ align-items: center;
+ display: flex;
+ margin: 15px 20px 10px;
+ }
+
+ display: flex;
+ justify-content: space-between;
+
+ label {
+ display: none;
+ padding-left: 20px;
+ @media ${bp.wideUp} {
+ display: block;
+ }
+ }
+`;
diff --git a/src/components/Facts/index.js b/src/components/Facts/index.js
index cdba14fb..70c5b653 100644
--- a/src/components/Facts/index.js
+++ b/src/components/Facts/index.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
-import { bp, color, fontSize } from 'lib/variables';
import useSortableData from '../../lib/withSortedItems';
+import { Header, StyledFacts } from './StyledFacts';
const Facts = ({ facts }) => {
const { sortedItems, getClassNamesFor, requestSort } = useSortableData(facts, {key: 'name', direction: 'ascending'});
@@ -36,14 +36,14 @@ const Facts = ({ facts }) => {
};
return (
-
+
-
+
handleSort('name')}
@@ -65,7 +65,7 @@ const Facts = ({ facts }) => {
>
Value
-
+
{!sortedItems.filter(fact => filterResults(fact)).length &&
No Facts
}
{sortedItems.filter(fact => filterResults(fact)).map((fact) => {
@@ -81,136 +81,7 @@ const Facts = ({ facts }) => {
);
})}
-
-
+
);
};
diff --git a/src/components/Filters/StyledFilters.js b/src/components/Filters/StyledFilters.js
new file mode 100644
index 00000000..3eb90310
--- /dev/null
+++ b/src/components/Filters/StyledFilters.js
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { bp } from "lib/variables";
+
+export const FiltersTitle = styled.label`
+ margin: auto 0;
+ @media ${bp.wideUp} {
+ margin: auto 15px;
+ }
+`;
+
+export const Filter = styled.div`
+ margin-bottom: 1em;
+
+ @media ${bp.wideUp} {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ flex: 2 1 auto;
+ margin: 0;
+ }
+`;
diff --git a/src/components/Filters/index.js b/src/components/Filters/index.js
index e3ad4278..35860ce8 100644
--- a/src/components/Filters/index.js
+++ b/src/components/Filters/index.js
@@ -1,7 +1,6 @@
import React from 'react';
import Select from 'react-select';
-import { bp } from 'lib/variables';
-import { color } from 'lib/variables';
+import { Filter, FiltersTitle } from './StyledFilters';
/**
* Displays a select filter and sends state back to parent in a callback.
@@ -31,8 +30,8 @@ const SelectFilter = ({ title, options, onFilterChange, loading, defaultValue, i
};
return (
-
- {title}
+
+ {title}
-
-
+
);
};
diff --git a/src/components/Footer/StyledFooter.tsx b/src/components/Footer/StyledFooter.tsx
new file mode 100644
index 00000000..ef82242b
--- /dev/null
+++ b/src/components/Footer/StyledFooter.tsx
@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { color } from "lib/variables";
+
+export const StyledFooter = styled.footer`
+ background: ${color.brightBlue} ${color.lightBlue};
+ background: ${color.lightBlue};
+ background: -moz-linear-gradient(left, ${color.brightBlue} 0%, ${color.lightBlue} 25%);
+ background: -webkit-linear-gradient(left, ${color.brightBlue} 0%,${color.lightBlue} 25%);
+ background: linear-gradient(to right, ${color.brightBlue} 0%,${color.lightBlue} 25%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='${color.brightBlue}', endColorstr='${color.lightBlue}',GradientType=1 );
+ display: flex;
+ justify-content: space-between;
+
+ span {
+ color: ${color.almostWhite};
+ padding: 10px 20px;
+ &.version {
+ background: ${color.blue};
+ position: relative;
+ img {
+ display: block;
+ height: 28px;
+ width: auto;
+ }
+ &::after {
+ background: ${color.blue};
+ clip-path: polygon(0 0,100% 0,0 105%,0 100%);
+ content: '';
+ display: block;
+ height: 100%;
+ position: absolute;
+ right: -13px;
+ top: 0;
+ width: 14px;
+ }
+ }
+ }
+
+`;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 47ed56c8..090565a2 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -1,49 +1,14 @@
-import React from 'react';
-import { color } from 'lib/variables';
-import getConfig from 'next/config';
+import React from "react";
+import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
+import { StyledFooter } from "./StyledFooter";
const Footer = () => (
-
- Lagoon {`${publicRuntimeConfig.LAGOON_VERSION}`}
-
-
+
+
+ Lagoon {`${publicRuntimeConfig.LAGOON_VERSION}`}
+
+
);
export default Footer;
diff --git a/src/components/Header/StyledHeader.tsx b/src/components/Header/StyledHeader.tsx
new file mode 100644
index 00000000..ee0d0329
--- /dev/null
+++ b/src/components/Header/StyledHeader.tsx
@@ -0,0 +1,63 @@
+import styled from "styled-components";
+import { color } from "lib/variables";
+
+export const StyledHeader = styled.header`
+ background: ${color.brightBlue} ${color.lightBlue};
+ background: ${color.lightBlue};
+ background: -moz-linear-gradient(left, ${color.brightBlue} 0%, ${color.lightBlue} 25%);
+ background: -webkit-linear-gradient(left, ${color.brightBlue} 0%,${color.lightBlue} 25%);
+ background: linear-gradient(to right, ${color.brightBlue} 0%,${color.lightBlue} 25%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='${color.brightBlue}', endColorstr='${color.lightBlue}',GradientType=1 );
+ display: flex;
+ justify-content: space-between;
+
+ .authContainer {
+ display: flex;
+ }
+
+ a {
+ color: ${color.almostWhite};
+ padding: 10px 20px;
+ &.home {
+ background: ${color.blue};
+ position: relative;
+ img {
+ display: block;
+ height: 28px;
+ width: auto;
+ }
+ &::after {
+ background: ${color.blue};
+ clip-path: polygon(0 0,100% 0,0 105%,0 100%);
+ content: '';
+ display: block;
+ height: 100%;
+ position: absolute;
+ right: -13px;
+ top: 0;
+ width: 14px;
+ }
+ }
+ &.navitem {
+ align-items: center;
+ border-left: 1px solid ${color.blue};
+ cursor: pointer;
+ display: flex;
+ &::before {
+ background-position: center center;
+ background-repeat: no-repeat;
+ content: '';
+ display: block;
+ height: 35px;
+ transition: all 0.3s ease-in-out;
+ width: 0px;
+ background-size: 18px;
+ }
+ }
+ &.logout {
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ }
+ }
+`;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index c4c046b8..aa49a029 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -2,9 +2,9 @@ import React from 'react';
import Link from 'next/link';
import getConfig from 'next/config';
import { AuthContext } from 'lib/Authenticator';
-import { color } from 'lib/variables';
import lagoonLogo from '!svg-inline-loader?classPrefix!./lagoon.svg';
import HeaderMenu from 'components/HeaderMenu';
+import {StyledHeader} from "./StyledHeader";
const { publicRuntimeConfig } = getConfig();
@@ -12,10 +12,10 @@ const { publicRuntimeConfig } = getConfig();
* Displays the header using the provided logo.
*/
const Header = ({ logo }) => (
-
+
);
export default Header;
\ No newline at end of file
diff --git a/src/components/HeaderMenu/StyledHeaderMenu.tsx b/src/components/HeaderMenu/StyledHeaderMenu.tsx
new file mode 100644
index 00000000..d22b0f83
--- /dev/null
+++ b/src/components/HeaderMenu/StyledHeaderMenu.tsx
@@ -0,0 +1,107 @@
+import styled from "styled-components";
+import { bp, color } from "lib/variables";
+
+export const DropdownButton = styled.a`
+ display: flex;
+ align-items: center;
+ background-color: transparent;
+ color: ${color.white};
+ cursor: pointer;
+ padding: 0 0 0 10px !important;
+ @media ${bp.tinyUp} {
+ align-self: auto;
+ }
+ height: 100%;
+ &::after {
+ background-position: center center;
+ background-repeat: no-repeat;
+ content: "";
+ display: inline-block;
+ transition: all 0.3s ease-in-out;
+ height: 10px;
+ width: 25px;
+ background-image: url("/static/images/profile-dropdown.svg");
+ background-size: 9px;
+ }
+`;
+
+export const StyledDropdown = styled.div`
+ border-left: 1px solid ${color.blue};
+ cursor: pointer;
+ padding: 10px 20px;
+ hr {
+ border: 1px solid ${color.blue};
+ }
+ a {
+ color: ${color.almostWhite};
+ &.settings {
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ &::before {
+ background-position: center center;
+ background-repeat: no-repeat;
+ content: "";
+ display: block;
+ height: 35px;
+ transition: all 0.3s ease-in-out;
+ width: 35px;
+ color: ${color.white};
+ background-image: url("/static/images/cog.svg");
+ background-size: 18px;
+ }
+ }
+ &.menuitem {
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ padding: 5px 10px;
+ }
+ &.logout {
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ &::before {
+ background-position: center center;
+ background-repeat: no-repeat;
+ content: "";
+ display: block;
+ height: 35px;
+ transition: all 0.3s ease-in-out;
+ width: 35px;
+ background-image: url("/static/images/logout.svg");
+ background-size: 18px;
+ }
+ }
+ }
+`;
+
+export const DropdownMenu = styled.ul`
+ position: absolute;
+ z-index: 9;
+ list-style-type: none;
+ padding: 0;
+ right: 20px;
+ width: 200px;
+ background-color: ${color.lightBlue};
+ border: 2px solid ${color.blue};
+ border-radius: 8px;
+
+ & > .menu-item {
+ padding: 0px !important;
+ &:hover {
+ background-color: ${color.blue};
+ }
+ & > a.settings, & > a.logout {
+ padding: 0;
+ }
+ }
+
+ & > li {
+ margin: 0px;
+ }
+
+ & > ul {
+ padding: 0px;
+ }
+`;
diff --git a/src/components/HeaderMenu/index.js b/src/components/HeaderMenu/index.js
index ccc87e84..7cbde5fc 100644
--- a/src/components/HeaderMenu/index.js
+++ b/src/components/HeaderMenu/index.js
@@ -1,7 +1,7 @@
import React from 'react';
-import { bp, color } from 'lib/variables';
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
+import {StyledDropdown, DropdownMenu, DropdownButton} from "./StyledHeaderMenu";
const useOutsideClick = (callback) => {
const ref = React.useRef();
@@ -50,88 +50,36 @@ const HeaderMenu = ({auth}) => {
return (
<>
-
{auth.user.username}}
- menu={[
- Settings ,
- ,
- Your projects ,
- publicRuntimeConfig.LAGOON_UI_YOUR_ACCOUNT_DISABLED == null && (Your account ),
- ,
- Sign out
- ]}
- />
-
+ menu={[
+
+ Settings
+ ,
+ ,
+
+ Your projects
+ ,
+ publicRuntimeConfig.LAGOON_UI_YOUR_ACCOUNT_DISABLED == null && (
+
+ Your account
+
+ ),
+ ,
+
+ Sign out
+ ,
+ ]}
+ />
>
);
};
@@ -139,51 +87,16 @@ const HeaderMenu = ({auth}) => {
const Dropdown = ({ open, trigger, menu }) => {
return (
<>
-
+
{trigger}
{open ? (
-
+
{menu.map((menuItem, index) => (
{menuItem}
))}
-
+
) : null}
-
-
+
>
);
};
diff --git a/src/components/Honeycomb/index.js b/src/components/Honeycomb/index.js
index 29b8ed24..66f264c5 100644
--- a/src/components/Honeycomb/index.js
+++ b/src/components/Honeycomb/index.js
@@ -4,8 +4,6 @@ import * as R from 'ramda';
import ProblemsByProject from 'components/ProblemsByProject';
import { LoadingPageNoHeader } from 'pages/_loading';
import { ErrorNoHeader } from 'pages/_error';
-import { bp, color } from 'lib/variables';
-// import './styling.css';
const config = {
"width": 1200,
@@ -168,56 +166,6 @@ const Honeycomb = ({ data, filter }) => {
>
}
-