From 67df5aa25c2cd56c01e02d4c92a869273f269923 Mon Sep 17 00:00:00 2001
From: Matthew Heroux <matthew.heroux@gmail.com>
Date: Tue, 26 Dec 2023 00:22:28 -0600
Subject: [PATCH] feat: add paper (#780)

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 .../src/pages/archetypes.page.tsx             | 13 +++---
 .../src/pages/character-sheets.page.tsx       |  6 ++-
 clients/admin-client/src/pages/dice.page.tsx  | 17 ++++----
 clients/admin-client/src/pages/home.page.tsx  | 24 ++++++-----
 .../src/components/Alert/Alert.tsx            |  2 +-
 .../src/components/AppBar/AppBar.tsx          |  2 +-
 .../src/components/AppBar/style.scss          |  2 +-
 .../src/components/Button/style.module.scss   | 13 +++++-
 .../src/components/Icons/Icons.ts             |  1 +
 .../src/components/Layout/Layout.tsx          | 22 ----------
 .../src/components/Paper/Paper.tsx            | 14 +++++++
 .../src/components/Paper/style.module.scss    |  8 ++++
 .../components/Typography/style.module.scss   |  9 ++---
 clients/design-system/src/components/index.ts |  1 +
 clients/design-system/src/index.scss          |  8 +++-
 .../src/styles/utils/_color-pallette.scss     |  5 ++-
 .../stories/pages/Homepage.stories.tsx        | 40 ++++++++++---------
 17 files changed, 110 insertions(+), 77 deletions(-)
 create mode 100644 clients/design-system/src/components/Paper/Paper.tsx
 create mode 100644 clients/design-system/src/components/Paper/style.module.scss

diff --git a/clients/admin-client/src/pages/archetypes.page.tsx b/clients/admin-client/src/pages/archetypes.page.tsx
index fa9be557f..9d614331c 100644
--- a/clients/admin-client/src/pages/archetypes.page.tsx
+++ b/clients/admin-client/src/pages/archetypes.page.tsx
@@ -1,13 +1,16 @@
+import { Paper } from '@cats-cradle/design-system/dist/main';
 import ArchetypeSelect from '../components/ArchetypeSelect';
 
 export default function ArchetypePage() {
   return (
     <main className="container">
-      <h1>Archetypes</h1>
-      <p>
-        Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.
-      </p>
-      <ArchetypeSelect />
+      <Paper elevation="1">
+        <h1>Archetypes</h1>
+        <p>
+          Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.
+        </p>
+        <ArchetypeSelect />
+      </Paper>
     </main>
   );
 }
diff --git a/clients/admin-client/src/pages/character-sheets.page.tsx b/clients/admin-client/src/pages/character-sheets.page.tsx
index 623fe863f..0e02d779c 100644
--- a/clients/admin-client/src/pages/character-sheets.page.tsx
+++ b/clients/admin-client/src/pages/character-sheets.page.tsx
@@ -1,7 +1,11 @@
+import { Paper } from '@cats-cradle/design-system/dist/main';
+
 export default function CharacterSheetsPage() {
   return (
     <main className="container">
-      <h1>Character Sheets</h1>
+      <Paper elevation="1">
+        <h1>Character Sheets</h1>
+      </Paper>
     </main>
   );
 }
diff --git a/clients/admin-client/src/pages/dice.page.tsx b/clients/admin-client/src/pages/dice.page.tsx
index 217c36330..30f694d1e 100644
--- a/clients/admin-client/src/pages/dice.page.tsx
+++ b/clients/admin-client/src/pages/dice.page.tsx
@@ -1,15 +1,18 @@
+import { Paper } from '@cats-cradle/design-system/dist/main';
 import { DiceAnalyzer } from '../components/DiceAnalyzer';
 
 export default function DicePage() {
   return (
     <main className="container">
-      <h1>Dice Notation Analyzer</h1>
-      <p>
-        Determine the appropriate dice notation for skill set rolls and
-        visualizes the impact of luck. Gain valuable insights into
-        chance&apos;s influence on game play outcomes.
-      </p>
-      <DiceAnalyzer />
+      <Paper elevation="1">
+        <h1>Dice Notation Analyzer</h1>
+        <p>
+          Determine the appropriate dice notation for skill set rolls and
+          visualizes the impact of luck. Gain valuable insights into
+          chance&apos;s influence on game play outcomes.
+        </p>
+        <DiceAnalyzer />
+      </Paper>
     </main>
   );
 }
diff --git a/clients/admin-client/src/pages/home.page.tsx b/clients/admin-client/src/pages/home.page.tsx
index 7df966483..1e0373dce 100644
--- a/clients/admin-client/src/pages/home.page.tsx
+++ b/clients/admin-client/src/pages/home.page.tsx
@@ -1,18 +1,20 @@
-import { Button, Link } from '@cats-cradle/design-system/dist/main';
+import { Paper, Button, Link, FontAwesomeIcon, faArrowRight } from '@cats-cradle/design-system/dist/main';
 
 export default function HomePage() {
   return (
     <main className="container">
-      <h1>Cats Cradle</h1>
-      <h2>Latest</h2>
-      <h3>Archetypes</h3>
-      <p>
-      Attention, game masters! Introducing our latest tool designed exclusively for you.
-      Dive into the world of character archetypes with ease.
-      Uncover diverse options, check out base stats, and seamlessly explore backstories—all in one place.
-      No-frills, just a straightforward way to look at the data. Raise a <Link href='https://github.com/hxtree/cats-cradle/pulls'>pull request</Link> to suggest changes.
-      </p>
-      <Button href="/archetypes" color="secondary">Try It!</Button>
+      <Paper elevation="1">
+        <h1>Cats Cradle</h1>
+        <h2>Latest</h2>
+        <h3>Archetypes</h3>
+        <p>
+        Attention, game masters! Introducing our latest tool designed exclusively for you.
+        Dive into the world of character archetypes with ease.
+        Uncover diverse options, check out base stats, and seamlessly explore backstories—all in one place.
+        No-frills, just a straightforward way to look at the data. Raise a <Link href='https://github.com/hxtree/cats-cradle/pulls'>pull request</Link> to suggest changes.
+        </p>
+        <Button href="/archetypes" color="secondary">Try It <FontAwesomeIcon icon={faArrowRight}/></Button>
+      </Paper>
     </main>
   );
 }
diff --git a/clients/design-system/src/components/Alert/Alert.tsx b/clients/design-system/src/components/Alert/Alert.tsx
index ccb2dfe5a..5b28838b3 100644
--- a/clients/design-system/src/components/Alert/Alert.tsx
+++ b/clients/design-system/src/components/Alert/Alert.tsx
@@ -25,7 +25,7 @@ export const Alert = (props: AlertProps) => {
 
   return (
     <>
-      <div className={`alert alert-${severity} d-flex align-items-center mt-4 mb-2`} role="alert">
+      <div className={`alert alert-${severity} d-flex align-items-center mt-5 mb-5`} role="alert">
         <svg className="bi flex-shrink-0 me-2" viewBox="0 0 16 16" fill="currentColor" width="24" height="24" role="img">
           { symbol }
         </svg>
diff --git a/clients/design-system/src/components/AppBar/AppBar.tsx b/clients/design-system/src/components/AppBar/AppBar.tsx
index 6d0907914..ab35d5e0a 100644
--- a/clients/design-system/src/components/AppBar/AppBar.tsx
+++ b/clients/design-system/src/components/AppBar/AppBar.tsx
@@ -29,7 +29,7 @@ export const AppBar = (props: AppBarProps) => {
         </div>
       </nav>
 
-      <nav className="navbar navbar-expand-lg navbar-light shadow-sm app-bar-light">
+      <nav className="navbar navbar-expand-lg navbar-light">
         <div className="container">
           <div className="collapse navbar-collapse" id="navbarNav">
             {children}
diff --git a/clients/design-system/src/components/AppBar/style.scss b/clients/design-system/src/components/AppBar/style.scss
index f7d9fe9f2..a92ea1d1d 100644
--- a/clients/design-system/src/components/AppBar/style.scss
+++ b/clients/design-system/src/components/AppBar/style.scss
@@ -1,7 +1,7 @@
 @import '../../styles/utils/color-pallette';
 
 .app-bar-light {
-  background-color: #e5e5e5!important;
+  background-color: $color-off-white !important;
 }
 
 .app-bar-dark {
diff --git a/clients/design-system/src/components/Button/style.module.scss b/clients/design-system/src/components/Button/style.module.scss
index 7fc93a19f..579b1b99e 100644
--- a/clients/design-system/src/components/Button/style.module.scss
+++ b/clients/design-system/src/components/Button/style.module.scss
@@ -12,6 +12,7 @@
     border: none;
     margin: 8px;
     box-shadow: none;
+    transition: background-color 0.3s ease;
     &.button-disabled {
       opacity: 0.5;
       cursor: not-allowed;
@@ -29,10 +30,14 @@
           color: $color-white;
         }
       }
+      &:hover {
+        border-color:  lighten($color-primary, 5%);
+        background-color: lighten($color-primary, 5%);
+      }
     }
     &.button-secondary {
       border: 3px solid $color-primary;
-      background-color: $color-white;
+      background-color: transparent;
       color: $color-primary;
       &:focus, &.button-selected {
         outline-color: $color-primary;
@@ -43,10 +48,14 @@
           color: $color-primary !important;
         }
       }
+      &:hover {
+        border-color:  lighten($color-primary, 5%);
+        color: lighten($color-primary, 5%);
+      }
     }
     &.button-inherit {
       border: 3px solid $color-primary;
-      background-color: $color-white;
+      background-color: transparent;
       color: $color-primary;
       &:focus, &.button-selected {
         outline-color: $color-primary;
diff --git a/clients/design-system/src/components/Icons/Icons.ts b/clients/design-system/src/components/Icons/Icons.ts
index 9b589d838..c737ccf2b 100644
--- a/clients/design-system/src/components/Icons/Icons.ts
+++ b/clients/design-system/src/components/Icons/Icons.ts
@@ -10,6 +10,7 @@ export {
   faChevronCircleLeft,
   faChevronCircleRight,
   faBars,
+  faArrowRight,
 } from '@fortawesome/free-solid-svg-icons';
 
 export { faGithub } from '@fortawesome/free-brands-svg-icons';
diff --git a/clients/design-system/src/components/Layout/Layout.tsx b/clients/design-system/src/components/Layout/Layout.tsx
index 9e09e0fa8..1c5616e94 100644
--- a/clients/design-system/src/components/Layout/Layout.tsx
+++ b/clients/design-system/src/components/Layout/Layout.tsx
@@ -1,14 +1,6 @@
 import MUIBox, { BoxProps as MUIBoxProps } from '@mui/material/Box';
 import MUIStack, { StackProps as MUIStackProps } from '@mui/material/Stack';
 import MUIGrid, { GridProps as MUIGridProps } from '@mui/material/Grid';
-import MUIPaper, { PaperProps as MUIPaperProps } from '@mui/material/Paper';
-
-export type PaperProps = MUIPaperProps;
-
-export const Paper = (props: PaperProps) => {
-  const { children, ...muiProps } = props;
-  return <MUIPaper {...muiProps}>{children}</MUIPaper>;
-};
 
 export type StackProps = MUIStackProps;
 export const Stack = (props: StackProps) => {
@@ -28,17 +20,3 @@ export const Grid = (props: GridProps) => {
   return <MUIGrid {...muiProps}>{children}</MUIGrid>;
 };
 
-export type ItemProps = PaperProps;
-// style={"padding: 0.5rem; font-family: 'Eczar', serif;"}
-export const Item = (props: ItemProps) => {
-  const { children, ...muiProps } = props;
-  return <Paper {...muiProps}>{children}</Paper>;
-};
-
-// export const Item = styled(Paper)(({ theme }) => ({
-//   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
-//   ...theme.typography.body2,
-//   padding: theme.spacing(1),
-//   textAlign: 'center',
-//   color: theme.palette.text.secondary,
-// }));
diff --git a/clients/design-system/src/components/Paper/Paper.tsx b/clients/design-system/src/components/Paper/Paper.tsx
new file mode 100644
index 000000000..ee50ebc25
--- /dev/null
+++ b/clients/design-system/src/components/Paper/Paper.tsx
@@ -0,0 +1,14 @@
+import './style.module.scss'
+
+export type PaperProps = {
+  children: React.ReactNode;
+  elevation: string;
+};
+
+export const Paper = (props: PaperProps): JSX.Element => {
+  const { elevation, children } = props;
+
+  return (<div className={`paper elevation-${elevation}`}>{children}</div>)
+};
+
+export default Paper;
\ No newline at end of file
diff --git a/clients/design-system/src/components/Paper/style.module.scss b/clients/design-system/src/components/Paper/style.module.scss
new file mode 100644
index 000000000..7e9c20d60
--- /dev/null
+++ b/clients/design-system/src/components/Paper/style.module.scss
@@ -0,0 +1,8 @@
+@import '../../styles/utils/color-pallette';
+
+.paper {
+  background-color: $color-white;
+  box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 30px 0px;
+  padding: 4rem 4.5rem;
+  border-radius: 2.25rem;
+}
\ No newline at end of file
diff --git a/clients/design-system/src/components/Typography/style.module.scss b/clients/design-system/src/components/Typography/style.module.scss
index 750ce7818..a9624982d 100644
--- a/clients/design-system/src/components/Typography/style.module.scss
+++ b/clients/design-system/src/components/Typography/style.module.scss
@@ -9,13 +9,12 @@
     font-family: "Eczar", serif;
     font-weight: 800;
     font-size: 3rem;
-    color: $color-berkeley-blue;
+    color: $color-primary;
     padding: 12px 0;
-    margin-top: 3rem;
     &.fill {
       border-radius: 5px;
       padding: 13px;
-      background-color: $color-berkeley-blue;
+      background-color: $color-primary;
       color: $color-white;
     };
     &.border {
@@ -44,7 +43,7 @@
 
   h2 {
     font-size: 2rem;
-    color: $color-berkeley-blue;
+    color: $color-primary;
     font-weight: bold;
     padding: 12px 0;
     &.border {
@@ -72,7 +71,7 @@
     &.fill {
       border-radius: 5px;
       padding: 20px 13px;
-      background-color: $color-berkeley-blue;
+      background-color: $color-primary;
       color: $color-white;
       font-weight: bold;
       border-bottom: none;
diff --git a/clients/design-system/src/components/index.ts b/clients/design-system/src/components/index.ts
index 5964b4175..b0ff4db7b 100644
--- a/clients/design-system/src/components/index.ts
+++ b/clients/design-system/src/components/index.ts
@@ -20,3 +20,4 @@ export * from './Button/Button';
 export * from './Link/Link';
 export * from './Layout/Layout';
 export * from './Card/BasicCard';
+export * from './Paper/Paper';
diff --git a/clients/design-system/src/index.scss b/clients/design-system/src/index.scss
index f57c36979..cc3bce79b 100644
--- a/clients/design-system/src/index.scss
+++ b/clients/design-system/src/index.scss
@@ -86,4 +86,10 @@ $success: #7952b3;
 @import './components/AppBar/style.scss';
 @import './components/Button/style.module.scss';
 @import './components/SocialMediaBar/style.module.scss';
-@import './components/PageFooter/style.module.scss';
\ No newline at end of file
+@import './components/PageFooter/style.module.scss';
+@import './components/Paper/style.module.scss';
+
+body {
+  background-color: $color-off-white;
+  color: $color-off-black;
+}
diff --git a/clients/design-system/src/styles/utils/_color-pallette.scss b/clients/design-system/src/styles/utils/_color-pallette.scss
index fe702b140..a71c4af17 100644
--- a/clients/design-system/src/styles/utils/_color-pallette.scss
+++ b/clients/design-system/src/styles/utils/_color-pallette.scss
@@ -7,9 +7,12 @@ $color-murrey: #b3105c;
 $color-white: #FFF;
 $color-black: #000;
 $color-gray: #939699;
+$color-off-black: #1e1e1f;
+$color-off-white: #f1f4f9;
+$color-blue: #0077ae;
 
 /* common color abstractions */
-$color-primary: $color-berkeley-blue;
+$color-primary: $color-blue;
 $color-secondary: $color-murrey;
 $color-inherit: $color-gray;
 
diff --git a/clients/design-system/stories/pages/Homepage.stories.tsx b/clients/design-system/stories/pages/Homepage.stories.tsx
index 0706cd655..ce3873a79 100644
--- a/clients/design-system/stories/pages/Homepage.stories.tsx
+++ b/clients/design-system/stories/pages/Homepage.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
-import { AppBar, Button, Typography, Alert, PageFooter, Link } from '../../src/main';
+import { Paper, AppBar, Button, Typography, Alert, PageFooter, Link, faArrowRight, FontAwesomeIcon } from '../../src/main';
 // IconButton, FontAwesomeIcon, faBars, faGithub,
 
 type NavMenuItem = {
@@ -36,29 +36,31 @@ export const Default = () => (
       </AppBar>
       <div className='container'>
         <Alert severity="info">
-        Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula.
+          Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula.
         </Alert>
 
-        <Typography variant="h1">Et malesuada fames ac turpis.</Typography>
-        <Typography variant="intro">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula metus quis sagittis malesuada. Nulla facilisi. Duis feugiat tellus eu justo hendrerit, nec congue odio congue.
-        </Typography>
+        <Paper>
+          <Typography variant="h1">Et malesuada fames ac turpis.</Typography>
+          <Typography variant="intro">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula metus quis sagittis malesuada. Nulla facilisi. Duis feugiat tellus eu justo hendrerit, nec congue odio congue.
+          </Typography>
 
-        <Typography variant="body">
-        Integer malesuada justo eu metus tincidunt, quis luctus elit posuere. Morbi et ipsum euismod, sodales ante in, feugiat justo. Vivamus sed suscipit felis. Sed ut lectus ut arcu laoreet ultricies vel in nulla. Etiam vel diam vel felis dignissim luctus. Integer bibendum fringilla justo, vitae facilisis eros convallis vel. Sed ac tellus vel dui finibus pellentesque.
-        Nullam id elit eu urna ullamcorper bibendum. Sed nec ex nec lectus finibus bibendum ac eget nunc. Vivamus eu dolor vel sem lacinia vestibulum. In hac habitasse platea dictumst. Curabitur sit amet augue nec velit eleifend lobortis.  </Typography>
+          <Typography variant="body">
+          Integer malesuada justo eu metus tincidunt, quis luctus elit posuere. Morbi et ipsum euismod, sodales ante in, feugiat justo. Vivamus sed suscipit felis. Sed ut lectus ut arcu laoreet ultricies vel in nulla. Etiam vel diam vel felis dignissim luctus. Integer bibendum fringilla justo, vitae facilisis eros convallis vel. Sed ac tellus vel dui finibus pellentesque.
+          Nullam id elit eu urna ullamcorper bibendum. Sed nec ex nec lectus finibus bibendum ac eget nunc. Vivamus eu dolor vel sem lacinia vestibulum. In hac habitasse platea dictumst. Curabitur sit amet augue nec velit eleifend lobortis.  </Typography>
 
-        <Typography variant="body">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat est velit egestas dui id ornare arcu. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Consectetur libero id faucibus nisl. Metus aliquam eleifend mi in nulla. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. In hac habitasse platea dictumst quisque sagittis purus. Dictumst quisque sagittis purus sit amet. Amet dictum sit amet justo donec enim diam vulputate ut. Commodo ullamcorper a lacus vestibulum sed. At varius vel pharetra vel turpis. Cras ornare arcu dui vivamus arcu felis bibendum. Vitae proin sagittis nisl rhoncus mattis. Condimentum id venenatis a condimentum <Link href="/">vitae sapien</Link>. Integer vitae justo eget magna fermentum.
-        </Typography>
-        <Button href="/example" color="secondary">
-          Congue nisi
-        </Button>
-        <Button href="/example" color="primary">
-          Tincidunt arcu
-        </Button>
+          <Typography variant="body">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat est velit egestas dui id ornare arcu. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Consectetur libero id faucibus nisl. Metus aliquam eleifend mi in nulla. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. In hac habitasse platea dictumst quisque sagittis purus. Dictumst quisque sagittis purus sit amet. Amet dictum sit amet justo donec enim diam vulputate ut. Commodo ullamcorper a lacus vestibulum sed. At varius vel pharetra vel turpis. Cras ornare arcu dui vivamus arcu felis bibendum. Vitae proin sagittis nisl rhoncus mattis. Condimentum id venenatis a condimentum <Link href="/">vitae sapien</Link>. Integer vitae justo eget magna fermentum.
+          </Typography>
+          <Button href="/example" color="secondary">
+            Congue nisi
+          </Button>
+          <Button href="/example" color="primary">
+            Tincidunt arcu <FontAwesomeIcon icon={faArrowRight}/>
+          </Button>
+        </Paper>
       </div>
-      
+
       <PageFooter siteOwner='Cats Cradle' links={[
         {url: 'https://example.com', label: 'Lobortis scelerisque'},
         {url: 'https://example.com', label: 'Lorem ipsum dolor'},