feat: add paper (#780)

Signed-off-by: hxtree <[email protected]>

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>

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}

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 {

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;

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';

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,
-// }));

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;

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;
+}

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;

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';

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';
+@import './components/PageFooter/style.module.scss';
+@import './components/Paper/style.module.scss';
+
+body {
+  background-color: $color-off-white;
+  color: $color-off-black;
+}

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;
 

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'},