Minor style changes

the-curve-consulting · Feb 9, 2024 · 209c217 · 209c217
1 parent 4e5045a
commit 209c217
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 24 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -969,8 +969,8 @@ h1, .h1 {
   font-size: 3rem;
 }
 .main-nav .nav-link.active {
-  background-color: var(--texmo-bg-secondary);
-  color: var(--texmo-text-color);
+  background-color: var(--texmo-bg-secondary) !important;
+  color: var(--texmo-text-color) !important;
 }
 
 .logo {

diff --git a/dist/index.es.css b/dist/index.es.css
@@ -969,8 +969,8 @@ h1, .h1 {
   font-size: 3rem;
 }
 .main-nav .nav-link.active {
-  background-color: var(--texmo-bg-secondary);
-  color: var(--texmo-text-color);
+  background-color: var(--texmo-bg-secondary) !important;
+  color: var(--texmo-text-color) !important;
 }
 
 .logo {

diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.js b/dist/index.js
@@ -22850,7 +22850,7 @@ Form$1.DateTime = FormDateTime;
 
 var Title = function (_a) {
     var text = _a.text, rest = __rest(_a, ["text"]);
-    return (React.createElement("h1", __assign$1({ className: "title" }, rest), text));
+    return (React.createElement("h1", __assign$1({ className: "fw-bold" }, rest), text));
 };
 
 var Card = function (_a) {
@@ -24290,7 +24290,7 @@ var InfoTileItem = function (_a) {
     return (React.createElement(CardText$1, null,
         React.createElement("span", { className: "d-flex mb-3 justify-content-between" },
             text,
-            React.createElement("span", { className: "badge text-bg-".concat(theme, " p-2") }, value))));
+            React.createElement("span", { className: "badge bg-".concat(theme, " p-2") }, value))));
 };
 
 var InfoTile = function (_a) {
@@ -24300,7 +24300,7 @@ var InfoTile = function (_a) {
             React.createElement(Col$1, { xs: "auto", className: "p-4 d-none d-md-block" },
                 React.createElement("div", { className: "segment p-4 h-100" },
                     React.createElement("i", { className: "bi bi-".concat(icon), style: { fontSize: '4rem' } }))),
-            React.createElement(Col$1, { className: "py-4" },
+            React.createElement(Col$1, { className: "py-4 me-4" },
                 React.createElement(Card$2.Body, null, children)))));
 };
 InfoTile.Item = InfoTileItem;

diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.min.css b/dist/index.min.css
@@ -969,8 +969,8 @@ h1, .h1 {
   font-size: 3rem;
 }
 .main-nav .nav-link.active {
-  background-color: var(--texmo-bg-secondary);
-  color: var(--texmo-text-color);
+  background-color: var(--texmo-bg-secondary) !important;
+  color: var(--texmo-text-color) !important;
 }
 
 .logo {

diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/dist/index.min.js.map b/dist/index.min.js.map
diff --git a/example/pages/HomePage.tsx b/example/pages/HomePage.tsx
@@ -1,10 +1,51 @@
-import { Title } from '@the-curve-consulting/texmo-react-components';
+import { InfoTile, Title } from '@the-curve-consulting/texmo-react-components';
+import { Row, Col } from 'react-bootstrap';
 
 const HomePage = () => {
   return (
-    <div className='mt-5'>
-      <Title text='Home Page'/>
-    </div>
+    <>
+      <Row className="my-5">
+        <Title text='Dashboard'/>
+      </Row>
+
+      <Row className="g-4">
+        <Col xl={6}>
+          <InfoTile icon='calendar-check'>
+            <InfoTile.Title title='My Work Requests'/>
+
+            <InfoTile.Item text='Due in the next 24 hours' value={0} />
+            <InfoTile.Item text='Overdue' theme='danger' value={1} />
+            <InfoTile.Item text='Open Requests' value={1} />
+          </InfoTile>
+        </Col>
+        <Col xl={6}>
+          <InfoTile icon='clipboard-check'>
+            <InfoTile.Title title='My Work Requests'/>
+
+            <InfoTile.Item text='Due in the next 24 hours' value={0} />
+            <InfoTile.Item text='Overdue' theme='danger' value={1} />
+            <InfoTile.Item text='Open Requests' value={1} />
+          </InfoTile>
+        </Col>
+
+        <Col xl={6}>
+          <InfoTile icon='person-vcard'>
+            <InfoTile.Title title={'My Approvals'}/>
+
+            <InfoTile.Item text='Active' value={0} />
+          </InfoTile>
+        </Col>
+
+        <Col xl={6}>
+          <InfoTile icon='diagram-2'>
+            <InfoTile.Title title={'My Work Requests'}/>
+
+            <InfoTile.Item text='Active' value={0} />
+            <InfoTile.Item text='Drafts' theme='info' value={0} />
+          </InfoTile>
+        </Col>
+      </Row>
+    </>
   )
 }
 

diff --git a/scss/App.scss b/scss/App.scss
@@ -22,8 +22,8 @@ h1 {
   }
 
   .nav-link.active {
-    background-color: var(--texmo-bg-secondary);
-    color: var(--texmo-text-color);
+    background-color: var(--texmo-bg-secondary) !important;
+    color: var(--texmo-text-color) !important;
   }
 }
 

diff --git a/src/components/infoTile/InfoTile.tsx b/src/components/infoTile/InfoTile.tsx
@@ -16,7 +16,7 @@ const InfoTile = ({ icon, children }: InfoTileProps) => {
             <i className={`bi bi-${icon}`} style={{ fontSize: '4rem' }}></i>
           </div>
         </Col>
-        <Col className="py-4">
+        <Col className="py-4 me-4">
           <Card.Body>{children}</Card.Body>
         </Col>
       </Row>

diff --git a/src/components/infoTile/components/InfoTileItem.tsx b/src/components/infoTile/components/InfoTileItem.tsx
@@ -17,7 +17,7 @@ const InfoTileItem = ({
     <CardText>
       <span className="d-flex mb-3 justify-content-between">
         {text}
-        <span className={`badge text-bg-${theme} p-2`}>{value}</span>
+        <span className={`badge bg-${theme} p-2`}>{value}</span>
       </span>
     </CardText>
   );

diff --git a/src/components/title/Title.tsx b/src/components/title/Title.tsx
@@ -6,7 +6,7 @@ export interface TitleProps extends React.HTMLProps<HTMLHeadingElement> {
 
 const Title = ({ text, ...rest }: TitleProps) => {
   return (
-    <h1 className="title" {...rest}>
+    <h1 className="fw-bold" {...rest}>
       {text}
     </h1>
   );