From 29a6130ff17ca35841eee13d71b02a3e714f7e31 Mon Sep 17 00:00:00 2001 From: Nir Shtein <89006520+nirsht@users.noreply.github.com> Date: Thu, 6 Oct 2022 16:38:41 +0300 Subject: [PATCH] Update theme and README --- README.md | 8 ++-- frontend/src/App.tsx | 4 +- .../BlackTransparentButton.tsx | 4 +- .../components/MainView/AboutThisProject.tsx | 8 ++-- .../MainView/YamlBox/YamlBoxComponents.tsx | 4 +- frontend/src/components/MainView/index.tsx | 2 +- frontend/src/services/api-service.ts | 38 ------------------- frontend/src/utils/Colors.ts | 2 +- frontend/src/utils/Themes.ts | 2 + 9 files changed, 18 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 35f6af1..b597132 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ [![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)](https://typescriptlang.org) [![GitHub go.mod Go version of a Go module](https://img.shields.io/github/go-mod/go-version/gomods/athens.svg)](https://github.com/gomods/athens) [![Docker](https://badgen.net/badge/icon/docker?icon=docker&label)](https://https://docker.com/) -### About this project +## About this project Validkube combines the best open-source tools to help ensure Kubernetes YAML best practices, hygiene & security. @@ -19,7 +19,7 @@ Please read [`contributing guidelines`](/contributing.md) before submitting new Policies - A combination of security and best practices. -- **Validate** - Verify your Kubernetes configuration files @[kubeval](https://github.com/instrumenta/kubeval) +- **Validate** - Verify your Kubernetes configuration files @[kubeconform](https://github.com/yannh/kubeconform) - **Clean** - Remove clutter from your Kubernetes manifests @[kubectl-neat](https://github.com/itaysk/kubectl-neat) - **Secure (Trivy)** - Scan your YAML code for security vulnerabilities @[trivy](https://github.com/aquasecurity/trivy) - **Secure (Kubescape)** - Scan your YAML file for Devops best practices and security vulnerabilities @[kubescape](https://github.com/armosec/kubescape) @@ -35,9 +35,9 @@ Validkube is an open-source project, so please feel free to add more tools or ca - Yarn - NPM - Serverless CLI -- Golang v1.17 +- Golang >v1.17 - Netlify-cli -- CLI tools for kubeval, kubescape, trivy and polaris, kubeconform +- CLI tools for kubescape, trivy and polaris, kubeconform ## Deploy diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4750540..dd98dfb 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,12 +4,12 @@ import styled, { createGlobalStyle, ThemeProvider } from "styled-components"; import "./App.css"; import { ThemePreference } from "./components/Context/ThemeContext"; import PrivateRoutes from "./components/Routes/PrivateRoutes"; -import { mainBackgrund } from "./utils/Colors"; +import { mainBackground } from "./utils/Colors"; import { ScrollToTop } from "./utils/scroll"; const GlobalStyle = createGlobalStyle` body { - background-color: ${mainBackgrund}; + background-color: ${mainBackground}; } `; const GlobalStyleLight = createGlobalStyle` diff --git a/frontend/src/components/GenericComponents/BlackTransparentButton.tsx b/frontend/src/components/GenericComponents/BlackTransparentButton.tsx index 29a32f7..813e47c 100644 --- a/frontend/src/components/GenericComponents/BlackTransparentButton.tsx +++ b/frontend/src/components/GenericComponents/BlackTransparentButton.tsx @@ -1,8 +1,8 @@ import styled from "styled-components"; -import { mainBackgrund } from "../../utils/Colors"; +import { mainBackground } from "../../utils/Colors"; export const BlackTransparentButton = styled.button` - background-color: ${mainBackgrund}; + background-color: ${mainBackground}; border: 1px solid white; display: grid; width: fit-content; diff --git a/frontend/src/components/MainView/AboutThisProject.tsx b/frontend/src/components/MainView/AboutThisProject.tsx index bbf54de..85be55c 100644 --- a/frontend/src/components/MainView/AboutThisProject.tsx +++ b/frontend/src/components/MainView/AboutThisProject.tsx @@ -1,6 +1,6 @@ import React, { Fragment } from "react"; import styled from "styled-components"; -import { mainBackgrund, purpleBackground } from "../../utils/Colors"; +import { mainBackground, purpleBackground } from "../../utils/Colors"; import { ReactComponent as CheckIcon } from "./assets/Check.svg"; import { ReactComponent as KomodorLogo } from "./assets/KomodorLogo.svg"; import { ReactComponent as DotIcon } from "./assets/DotIcon.svg"; @@ -34,7 +34,7 @@ const BottomContainer = styled(Container)` @media (max-width: 74rem) { justify-content: space-between; } - background-color: ${mainBackgrund}; + background-color: ${mainBackground}; `; const MainDiv = styled.div` @@ -153,8 +153,8 @@ export const AboutThisProjectHeader: React.FC = () => { { action: "Validate", description: "- Verify your Kubernetes configuration files @", - shortName: "kubeval", - url: " https://github.com/instrumenta/kubeval", + shortName: "kubeconform", + url: " https://github.com/yannh/kubeconform", }, { action: "Clean", diff --git a/frontend/src/components/MainView/YamlBox/YamlBoxComponents.tsx b/frontend/src/components/MainView/YamlBox/YamlBoxComponents.tsx index 833fc91..0590beb 100644 --- a/frontend/src/components/MainView/YamlBox/YamlBoxComponents.tsx +++ b/frontend/src/components/MainView/YamlBox/YamlBoxComponents.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { greyBorder, mainBackgrund } from "../../../utils/Colors"; +import { greyBorder, mainBackground } from "../../../utils/Colors"; export const StyledTextArea = styled.textarea` height: 450px; @@ -9,7 +9,7 @@ export const StyledTextArea = styled.textarea` width: -webkit-fill-available; line-height: 1.45; resize: none; - background-color: ${mainBackgrund}; + background-color: ${mainBackground}; color: white; font-size: 14px; border: hidden; diff --git a/frontend/src/components/MainView/index.tsx b/frontend/src/components/MainView/index.tsx index d5e831a..bc2b9c2 100644 --- a/frontend/src/components/MainView/index.tsx +++ b/frontend/src/components/MainView/index.tsx @@ -24,7 +24,7 @@ const TextAreaContainer = styled.div` const MainViewBodyContainer = styled.div` overflow-y: auto; - background-color: #eeeeee; + background-color: ${(props) => props.theme.mainBgColor}; `; export const BrOnlyOnPc = styled.br` diff --git a/frontend/src/services/api-service.ts b/frontend/src/services/api-service.ts index 1a74e21..5502e48 100644 --- a/frontend/src/services/api-service.ts +++ b/frontend/src/services/api-service.ts @@ -1,6 +1,3 @@ -import { useState } from "react"; -import { Record } from "runtypes"; - const BACKEND_GETWAY_URL = process.env.REACT_APP_API; export const callAPIExample = ( @@ -51,38 +48,3 @@ export const callAPI = ( }; const emptyInterface = {}; -const Response = Record({ - data: Record({}), -}); - -type ResponseType = typeof Response; - -export const useCallAPIHook = ( - endpoint: string, - data: typeof emptyInterface -): [ - respone: ResponseType | undefined, - fetching: boolean, - error: any | null -] => { - const [response, setResponse] = useState(); - const [fetching, setFetching] = useState(true); - const [error, setError] = useState(null); - fetch(`${BACKEND_GETWAY_URL}/${endpoint}`, { - method: "POST", - body: JSON.stringify(data), - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - }) - .then((response) => response.json()) - .then((response) => { - setResponse(response.data); - setFetching(false); - }) - .catch((e) => { - setError(e); - }); - return [response, fetching, error]; -}; diff --git a/frontend/src/utils/Colors.ts b/frontend/src/utils/Colors.ts index 0d2a9f7..3bcfdf8 100644 --- a/frontend/src/utils/Colors.ts +++ b/frontend/src/utils/Colors.ts @@ -1,4 +1,4 @@ -export const mainBackgrund = "#000C37"; +export const mainBackground = "#000C37"; export const yamlTextColor = "#707583"; export const blueForButton = "#007AFF"; export const greyBorder = "#9195a1"; diff --git a/frontend/src/utils/Themes.ts b/frontend/src/utils/Themes.ts index e640fe0..25a6f60 100644 --- a/frontend/src/utils/Themes.ts +++ b/frontend/src/utils/Themes.ts @@ -2,8 +2,10 @@ export const light = { color: "#FFFFFF", text: "#000C37", bgColor: "#000C37", + mainBgColor: "#EEEEEE", }; export const dark = { color: "#000C37", text: "#FFFFFF", + mainBgColor: "#000C37", };