feat: updated styles

AndreaPontrandolfo · Nov 20, 2023 · 1938c54 · 1938c54
1 parent 916057f
commit 1938c54
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 126 deletions.
diff --git a/apps/docs-website/src/components/ConfigCombinationForm.module.css b/apps/docs-website/src/components/ConfigCombinationForm.module.css
@@ -0,0 +1,58 @@
+.checkboxGroupContainer {
+  display: flex;
+  align-items: center;
+  border: 2px solid var(--ifm-toc-border-color);
+  border-radius: var(--ifm-global-radius);
+  padding: 9px 16px 8px 16px;
+}
+
+.nativeCheckbox {
+  display: block;
+  margin-right: 12px;
+}
+
+.nativeCheckbox input {
+  padding: 0;
+  height: initial;
+  width: initial;
+  margin-bottom: 0;
+  display: none;
+  cursor: pointer;
+}
+
+.nativeCheckbox label {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+.nativeCheckbox label:before {
+  content: "";
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 2px solid var(--ifm-toc-border-color);
+  border-radius: var(--ifm-global-radius);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  margin-right: 5px;
+  top: -2px;
+}
+
+.nativeCheckbox input:checked + label:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 9px;
+  width: 4px;
+  height: 10px;
+  border: solid var(--ifm-color-primary);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
diff --git a/apps/docs-website/src/components/ConfigCombinationForm.tsx b/apps/docs-website/src/components/ConfigCombinationForm.tsx
@@ -1,7 +1,7 @@
 import { useForm } from "react-hook-form";
 import { DevTool } from "@hookform/devtools";
-import styles from "./RulesTable.module.css";
 import { configCombinationDefaultValues } from "./constants";
+import styles from "./ConfigCombinationForm.module.css";
 
 interface ConfigCombinationFormProps {
   setTableData: (data: FormInputs) => void;
@@ -25,13 +25,15 @@ export const ConfigCombinationForm = ({
 
   const handleVitestChange = (isChecked: boolean) => {
     setValue("vitest", isChecked, { shouldDirty: true, shouldTouch: true });
+
     if (isChecked) {
       setValue("jest", false, { shouldDirty: true, shouldTouch: true });
     }
   };
 
   const handleJestChange = (isChecked: boolean) => {
     setValue("jest", isChecked, { shouldDirty: true, shouldTouch: true });
+
     if (isChecked) {
       setValue("vitest", false, { shouldDirty: true, shouldTouch: true });
     }

diff --git a/apps/docs-website/src/components/QueriedRulesMetricsGroup.module.css b/apps/docs-website/src/components/QueriedRulesMetricsGroup.module.css
@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2rem;
+}
+
+.label {
+  color: var(--ifm-color-emphasis-600);
+}
+
+.number {
+  font-size: 18px;
+  font-weight: 500;
+}
diff --git a/apps/docs-website/src/components/QueriedRulesMetricsGroup.tsx b/apps/docs-website/src/components/QueriedRulesMetricsGroup.tsx
@@ -1,4 +1,4 @@
-import styles from "./RulesTable.module.css";
+import styles from "./QueriedRulesMetricsGroup.module.css";
 
 interface QueriedRulesMetricsGroupProps {
   totalAvailableRulesAmount: number;
@@ -12,17 +12,18 @@ export const QueriedRulesMetricsGroup = ({
   filteredRulesAmount,
 }: QueriedRulesMetricsGroupProps): JSX.Element => {
   return (
-    <div className={styles.queriedRulesMetricsGroup}>
+    <div className={styles.container}>
       <div>
-        <span>Total available rules: </span>
-        <span>{totalAvailableRulesAmount}</span>
+        <span className={styles.label}>Total available rules: </span>
+        <span className={styles.number}>{totalAvailableRulesAmount}</span>
       </div>
       <div>
-        <span>Current config rules: </span>
-        <span>{fetchedConfigRulesAmount}</span>
+        <span className={styles.label}>Current config rules: </span>
+        <span className={styles.number}>{fetchedConfigRulesAmount}</span>
       </div>
       <div>
-        <span>Filtered rules</span>: <span>{filteredRulesAmount}</span>
+        <span className={styles.label}>Filtered rules: </span>
+        <span className={styles.number}>{filteredRulesAmount}</span>
       </div>
     </div>
   );

diff --git a/apps/docs-website/src/components/RulesTable.module.css b/apps/docs-website/src/components/RulesTable.module.css
@@ -40,69 +40,3 @@
   margin-bottom: 16px;
   gap: 1rem;
 }
-
-.checkboxGroupContainer {
-  display: flex;
-  align-items: center;
-  border: 2px solid var(--ifm-toc-border-color);
-  border-radius: var(--ifm-global-radius);
-  padding: 9px 16px 8px 16px;
-}
-
-.nativeCheckbox {
-  display: block;
-  margin-right: 12px;
-}
-
-.nativeCheckbox input {
-  padding: 0;
-  height: initial;
-  width: initial;
-  margin-bottom: 0;
-  display: none;
-  cursor: pointer;
-}
-
-.nativeCheckbox label {
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-}
-
-.nativeCheckbox label:before {
-  content: "";
-  -webkit-appearance: none;
-  background-color: transparent;
-  border: 2px solid var(--ifm-toc-border-color);
-  border-radius: var(--ifm-global-radius);
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.05),
-    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
-  padding: 10px;
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-  cursor: pointer;
-  margin-right: 5px;
-  top: -2px;
-}
-
-.nativeCheckbox input:checked + label:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 3px;
-  left: 9px;
-  width: 4px;
-  height: 10px;
-  border: solid var(--ifm-color-primary);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-
-.queriedRulesMetricsGroup {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 2rem;
-}
diff --git a/apps/docs-website/src/components/RulesTable.tsx b/apps/docs-website/src/components/RulesTable.tsx
@@ -57,7 +57,6 @@ export const RulesTable = (): JSX.Element => {
   const [isLoading, setIsLoading] = useState(false);
   const [pluginsNames, setPluginsNames] = useState<string[]>([]);
   const [totalAvailableRulesAmount, setTotalAvailableRulesAmount] = useState(0);
-  const [fetchedConfigRulesAmount, setFetchedConfigRulesAmount] = useState(0);
   const [configCombination, setConfigCombination] = useState<SheriffSettings>(
     configCombinationDefaultValues,
   );
@@ -98,8 +97,9 @@ export const RulesTable = (): JSX.Element => {
 
         const fetchedData: ServerResponse = await response.json();
 
-        setTotalAvailableRulesAmount(fetchedData.totalAvailableRulesAmount);
-        setFetchedConfigRulesAmount(fetchedData.compiledConfig.length);
+        setTotalAvailableRulesAmount(
+          fetchedData.totalAvailableRulesAmount ?? 0,
+        );
         setPluginsNames(fetchedData.pluginsNames);
         setData(filterDuplicateRules(fetchedData.compiledConfig));
       } catch (error) {
@@ -219,7 +219,7 @@ export const RulesTable = (): JSX.Element => {
         </div>
         <QueriedRulesMetricsGroup
           totalAvailableRulesAmount={totalAvailableRulesAmount}
-          fetchedConfigRulesAmount={fetchedConfigRulesAmount}
+          fetchedConfigRulesAmount={data.length}
           filteredRulesAmount={table.getRowModel().rows.length}
         />
       </div>

diff --git a/apps/docs-website/src/pages/Homepage.tsx b/apps/docs-website/src/pages/Homepage.tsx
diff --git a/apps/docs-website/src/pages/index.module.css b/apps/docs-website/src/pages/index.module.css
@@ -30,3 +30,8 @@
   opacity: 1 !important;
   margin-top: 2px;
 }
+
+.heroActionsBlock {
+  max-width: 24rem;
+  margin: 0 auto;
+}
diff --git a/apps/docs-website/src/pages/index.tsx b/apps/docs-website/src/pages/index.tsx
@@ -1,9 +1,12 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
+import { clsx } from "clsx";
+import Link from "@docusaurus/Link";
+import CodeBlock from "@theme/CodeBlock";
+import SheriffLogo from "../../static/img/sheriff-logo.svg";
 import styles from "./index.module.css";
-import { Homepage } from "./Homepage";
 
-const App = (): JSX.Element => {
+const Homepage = (): JSX.Element => {
   const { siteConfig } = useDocusaurusContext();
 
   return (
@@ -12,9 +15,43 @@ const App = (): JSX.Element => {
       description={siteConfig.tagline}
       wrapperClassName={styles.homepageWrapper}
     >
-      <Homepage />
+      <header className={styles.heroBanner}>
+        <main className="container">
+          <div className="margin--md">
+            <SheriffLogo />
+          </div>
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className={"hero__subtitle margin-bottom--lg"}>
+            {siteConfig.tagline}
+          </p>
+          <div className={styles.heroActionsBlock}>
+            <div
+              className={clsx(
+                "margin-bottom--lg padding-top--md",
+                styles.buttons,
+              )}
+            >
+              <Link
+                className="button button--primary button--lg"
+                to="/docs/introduction"
+              >
+                Get Started
+              </Link>
+              <Link
+                className="button button--outline button--secondary button--lg"
+                to="/docs/rules"
+              >
+                Explore Rules
+              </Link>
+            </div>
+            <CodeBlock className={styles.codeblock} language="bash">
+              npx create-sheriff-config
+            </CodeBlock>
+          </div>
+        </main>
+      </header>
     </Layout>
   );
 };
 
-export default App;
+export default Homepage;
diff --git a/packages/sheriff-types/src/index.ts b/packages/sheriff-types/src/index.ts
@@ -113,5 +113,5 @@ export interface SheriffSettings {
 export interface ServerResponse {
   compiledConfig: Entry[];
   pluginsNames: string[];
-  totalAvailableRulesAmount: number;
+  totalAvailableRulesAmount?: number;
 }