Adding PatternFly4

LiorKGOW · Apr 13, 2023 · f3ed9a9 · f3ed9a9
1 parent 001ff1d
commit f3ed9a9
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 4 deletions.
diff --git a/react_app/package-lock.json b/react_app/package-lock.json
diff --git a/react_app/package.json b/react_app/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@patternfly/react-core": "^4.276.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/react_app/src/index.js b/react_app/src/index.js
@@ -6,6 +6,7 @@ import {
   Route,
 } from 'react-router-dom';
 import './index.css';
+import "@patternfly/react-core/dist/styles/base.css";
 import reportWebVitals from './reportWebVitals';
 import IndexPage from './pages/IndexPage';
 

diff --git a/react_app/src/pages/IndexPage.js b/react_app/src/pages/IndexPage.js
@@ -1,11 +1,13 @@
 import React from 'react';
+import { Button, TextContent, Text, TextVariants } from '@patternfly/react-core';
 
 const IndexPage = () => (
   <>
-    <h1>Welcome to EmoLens</h1>
-    <p>
-      This is the project of Guy & Lior
-    </p>
+    <TextContent>
+      <Text component={TextVariants.h1}>Welcome to EmoLens</Text>
+      <Text component={TextVariants.h5}>This is the project of Guy & Lior</Text>
+    </TextContent>
+    <Button variant="primary">Checking PF4 works</Button>
   </>
 );