CSS and Styling Fixes (#4)

* CSS fix * Minor style changes * Version Bump
the-curve-consulting · Feb 12, 2024 · ac0eee6 · ac0eee6
1 parent c5507cf
commit ac0eee6
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 13 deletions.
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/package.json b/package.json
@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/the-curve-consulting/texmo-react-components.git"
   },
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "dist/index.min.js",
   "module": "dist/index.es.js",

diff --git a/rollup.config.js b/rollup.config.js
@@ -37,7 +37,7 @@ module.exports = {
   plugins: [
     external(),
     postcss({
-      modules: true,
+      modules: false,
       extract: true,
     }),
     // Allow json resolution

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/scss/texmo-react-components.scss b/scss/texmo-react-components.scss
@@ -10,4 +10,3 @@
 @import '../src/components/button/Button.scss';
 @import '../src/components/title/Title.scss';
 @import '../src/components/card/Card.scss';
-@import '../src/components/form/components/FormRichText.scss';
diff --git a/src/components/form/components/FormRichText.scss b/src/components/form/components/FormRichText.scss
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>
   );