Update theme and README

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
 

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`

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;

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",

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;

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`

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<ResponseType>();
-  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];
-};

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";

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",
 };