no message

Parts/Button.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from "react"
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
-import { colors, colorsDisabled, colorsHover } from './Colors'
+import { colors, colorsDisabled, colorsHover } from "./Colors"
 
 
 

Parts/Card.js

@@ -1,12 +1,11 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
+
+let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)
+
+export default Card;
 
-export default function Card(props) {
-  return <div {...props} css={[tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`, props.css]}>
-    {props.children}
-  </div>;
-}
 export function CardHeader(props) {
   return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
     <div tw="flex flex-wrap items-center">
@@ -16,4 +15,4 @@ export function CardHeader(props) {
       {props.children}
     </div>
   </div>;
-  }
+}

Parts/Charts.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import Chart from 'chart.js/auto';
+import Chart from "chart.js/auto";
 
 import Card, { CardHeader } from "./Card";
 import { createPopper } from "@popperjs/core";

Parts/Colors.js

@@ -1,6 +1,6 @@
 
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 
 export let colors = {

Parts/DropDown.js

@@ -2,7 +2,7 @@ import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, us
 import { createPopper } from "@popperjs/core";
 
 import tw, { styled } from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
 
 const DropDownItem = styled.button(({ type }) => [
@@ -14,7 +14,7 @@ const DropDownItem = styled.button(({ type }) => [
 ])
 export { DropDownItem }
 
-let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, popper, placement, hover, ...props }, ref) => {
+let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, buttonProps, popper, placement, hover, ...props }, ref) => {
   // dropdown props
   const [overButton, setOverButton] = React.useState(false);
   const [overDropDown, setOverDropDown] = React.useState(false);
@@ -45,17 +45,16 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
     }
   }
 
-
   useEffect(() => {
-    if ('ontouchend' in window) {
+    if ("ontouchend" in window) {
-      document.addEventListener('touchend', handleOutsideClick)
+      document.addEventListener("touchend", handleOutsideClick)
     } else {
-      document.addEventListener('click', handleOutsideClick)
+      document.addEventListener("click", handleOutsideClick)
     }
     // Specify how to clean up after this effect:
     return function cleanup() {
-      document.removeEventListener('touchend', handleOutsideClick)
+      document.removeEventListener("touchend", handleOutsideClick)
-      document.removeEventListener('click', handleOutsideClick)
+      document.removeEventListener("click", handleOutsideClick)
     };
   });
 
@@ -82,6 +81,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
         }}
         onMouseEnter={() => { setOverButton(true); hover && openDropdownPopover() }}
         onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }}
+        {...buttonProps}
       >
         {button}
       </button>

Parts/Input.js

@@ -1,10 +1,11 @@
-import React from 'react'
+import React from "react"
-import tw from 'twin.macro'
-import 'styled-components/macro'
 
-export default function Input({ label, title, name, id, children, ...props }) {
+import tw, { styled } from "twin.macro"
+import "styled-components/macro"
+
+export default function Input({ label, title, className, name, id, children, ...props }) {
   return (
-        <div css={title != null && tw`my-1`}>
+    <div css={[title && tw`my-1`]} className={className}>
       {title && (
         <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
           {title}
@@ -15,9 +16,9 @@ export default function Input({ label, title, name, id, children, ...props }) {
     </div>
   )
 }
-export function TextArea({ label, title, name, id, children, ...props }) {
+export function TextArea({ label, title, className, name, id, children, ...props }) {
   return (
-        <div tw="my-1">
+    <div css={[title && tw`my-1`]} className={className}>
       {title && (
         <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
           {title}
@@ -29,9 +30,9 @@ export function TextArea({ label, title, name, id, children, ...props }) {
   )
 }
 
-export function CheckBox({ label, title, name, id, children, ...props }) {
+export function CheckBox({ label, title, className, name, id, children, ...props }) {
   return (
-        <div tw="my-1 flex text-secondary">
+    <div tw="my-1 flex text-secondary" className={className}>
       <input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " />
       {title != null ? (
         <label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}>

Parts/Layout.js

@@ -1,6 +1,6 @@
-import React from 'react'
+import React from "react"
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 const Full = styled.div(tw`w-full lg:px-2 py-2`)
 export {Full}
@@ -11,6 +11,9 @@ export {Half}
 const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `)
 export {Quarter}
 
+const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `)
+export {Sixth}
+
 const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `)
 export {Third}
 

Parts/Modal.js

@@ -1,12 +1,12 @@
-import React from 'react'
+import React from "react"
-import { Third } from './Layout'
+import { Third } from "./Layout"
 
 import tw, { styled } from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 function Modal({ isOpen, onBackdropClick, ...props }) {
   if (isOpen) {
-        return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75">
+    return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75 z-50">
       <Third {...props} onClick={e=>e.stopPropagation()}>
         {props.children}
       </Third>

Parts/Pagination.js

@@ -1,10 +1,10 @@
 import Button from "./Button";
 import tw, { styled } from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 function CustomBtn({children, setPage, currentPage, page, css, ...props}){
   console.log(css)
-    return <Button onClick={()=>{setPage(page??children); console.log(page??children)}} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
+  return <Button onClick={()=>setPage(Number(page??children))} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
 }
 
 export default function Pagination({ currentPage, maxPages, setPage, ...props }) {

Parts/RangeSlider.js

@@ -2,8 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
 
 import styles from "./RangeSlider.scss"
 
-import tw from 'twin.macro'
+import tw from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 
 export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {
@@ -11,7 +11,7 @@ export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, ri
 
   useEffect(() => {
     if (ref.current) {
-            ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + `%`;
+      ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + "%";
     }
   })
 

Parts/Table.js

@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 export function Table(props) {
   return <div tw="block w-full overflow-x-auto text-secondary">

Parts/Text.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from "react"
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
-import { textColors, textColorsHover } from './Colors'
+import { textColors, textColorsHover } from "./Colors"
 
 
 function Text() {
@@ -26,7 +26,7 @@ const ClickableText = styled.button(({ type }) => [
     
   // Use props to conditionally style your components
   textColors[type], textColorsHover[type]
-  ])
+])
 export {ClickableText}
 
 export default Text

globalStyle.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState } from "react"
-import { createGlobalStyle } from 'styled-components'
+import { createGlobalStyle } from "styled-components"
-import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'
+import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
 
 const CustomStyles = createGlobalStyle`
 body {