@rpg-engine/long-bow 0.2.41 → 0.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
 
 export enum ButtonTypes {
   RPGUIButton = 'rpgui-button',
@@ -26,5 +27,5 @@ export const Button: React.FC<IButtonProps &
 
 const ButtonContainer = styled.button<any>`
   height: 45px;
-  font-size: 11.5px;
+  font-size: ${uiFonts.size.small};
 `;

package/src/components/Chat/Chat.tsx

@@ -3,7 +3,8 @@ import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import styled from 'styled-components';
-import { colors } from '../../constants/uiColors';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
 import { Button, ButtonTypes } from '../Button';
 import { Input } from '../Input';
 import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
@@ -165,7 +166,7 @@ const CustomContainer = styled(RPGUIContainer)`
   }
 
   .dark-background {
-    background-color: ${colors.darkGrey} !important;
+    background-color: ${uiColors.darkGray} !important;
   }
 
   .chat-body {
@@ -187,7 +188,7 @@ const Form = styled.form`
 const MessageText = styled.p`
   display: block !important;
   width: 100%;
-  font-size: 0.7rem !important;
+  font-size: ${uiFonts.size.xsmall} !important;
   overflow-y: auto;
   margin: 0;
 `;

package/src/components/DraggableContainer.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import Draggable, { DraggableData } from 'react-draggable';
 import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
 import { useOutsideClick } from '../hooks/useOutsideAlerter';
 import { IPosition } from '../types/eventTypes';
 import { RPGUIContainerTypes } from './RPGUIContainer';
@@ -134,7 +135,7 @@ const TitleContainer = styled.div`
 const Title = styled.h1`
   color: white;
   z-index: 22;
-  font-size: 0.6rem;
+  font-size: ${uiFonts.size.large};
 `;
 
 interface ICustomIconProps {
@@ -144,7 +145,7 @@ interface ICustomIconProps {
 const Icon = styled.img`
   color: white;
   z-index: 22;
-  font-size: 10px;
+  font-size: ${uiFonts.size.xsmall};
   width: ${(props: ICustomIconProps) => props.width};
   margin-right: 0.5rem;
 `;

package/src/components/Item/Cards/ItemTooltip.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { uiFonts } from '../../../constants/uiFonts';
 
 interface IProps {
   label: string;
@@ -19,7 +20,7 @@ const Container = styled.div`
   top: 1rem;
   left: 4rem;
 
-  font-size: 0.5rem;
+  font-size: ${uiFonts.size.xxsmall};
   color: white;
   background-color: black;
   border-radius: 5px;

package/src/components/ListMenu.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
 
 interface IListMenuOption {
   id: string;
@@ -11,7 +12,6 @@ export interface IListMenuProps {
   y: number;
   options: IListMenuOption[];
   onSelected: (selectedOptionId: string) => void;
-  fontSize?: number;
 }
 
 export const ListMenu: React.FC<IListMenuProps> = ({
@@ -19,10 +19,9 @@ export const ListMenu: React.FC<IListMenuProps> = ({
   onSelected,
   x,
   y,
-  fontSize = 0.8,
 }) => {
   return (
-    <Container x={x} y={y} fontSize={fontSize}>
+    <Container x={x} y={y}>
       <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
         {options.map((params, index) => (
           <ListElement
@@ -42,7 +41,6 @@ export const ListMenu: React.FC<IListMenuProps> = ({
 interface IContainerProps {
   x?: number;
   y?: number;
-  fontSize?: number;
 }
 
 const Container = styled.div<IContainerProps>`
@@ -56,7 +54,7 @@ const Container = styled.div<IContainerProps>`
   left: ${props => props.x || 0}px;
 
   li {
-    font-size: ${props => props.fontSize}em;
+    font-size: ${uiFonts.size.xsmall};
   }
 `;
 

package/src/components/ProgressBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
 
 export interface IBarProps {
   max: number;
@@ -59,7 +60,7 @@ export const ProgressBar: React.FC<IBarProps> = ({
 };
 
 const ProgressBarText = styled.span`
-  font-size: 1rem;
+  font-size: ${uiFonts.size.small} !important;
   color: white;
   text-align: center;
   z-index: 1;

package/src/components/PropertySelect/PropertySelect.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
 import SelectArrow from '../Arrow/SelectArrow';
 import { Ellipsis } from '../shared/Ellipsis';
 
@@ -80,6 +81,11 @@ const Item = styled.span`
   position: absolute;
   top: 12px;
   width: 100%;
+
+  p {
+    margin: 0 auto;
+    font-size: ${uiFonts.size.small};
+  }
 `;
 
 const TextOverlay = styled.div`

package/src/components/QuestInfo/QuestInfo.tsx

@@ -1,6 +1,8 @@
 import { IQuest } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
 import SelectArrow from '../Arrow/SelectArrow';
 import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
@@ -198,7 +200,6 @@ const QuestSplitDiv = styled.div`
 `;
 
 const QuestColumn = styled(Column)`
-  background: #4e4a4e;
   padding-top: 5px;
   margin-bottom: 20px;
   display: flex;
@@ -206,24 +207,26 @@ const QuestColumn = styled(Column)`
 `;
 
 const TitleContainer = styled.div`
-  background: #4e4a4e;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
+  margin-top: 1rem;
 `;
 
 const Title = styled.h1`
   color: white;
   z-index: 22;
-  font-size: 0.6rem;
+  font-size: ${uiFonts.size.medium} !important;
+  color: ${uiColors.yellow} !important;
 `;
 
 const Thumbnail = styled.img`
   color: white;
   z-index: 22;
-  font-size: 10px;
-  width: 64px;
+  width: 32px * 1.5;
   margin-right: 0.5rem;
+  position: relative;
+  top: -4px;
 `;

package/src/components/QuestList.tsx

@@ -1,6 +1,7 @@
 import { IQuest } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
 import { DraggableContainer } from './DraggableContainer';
 import { RPGUIContainerTypes } from './RPGUIContainer';
 
@@ -72,7 +73,7 @@ const QuestDraggableContainer = styled(DraggableContainer)`
 
 const Title = styled.h1`
   z-index: 22;
-  font-size: 0.6rem;
+  font-size: ${uiFonts.size.medium} !important;
   color: yellow !important;
 `;
 

package/src/components/ScrollList.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { DraggableContainer } from './DraggableContainer';
 import { v4 as uuidv4 } from 'uuid';
+import { uiFonts } from '../constants/uiFonts';
+import { DraggableContainer } from './DraggableContainer';
 
 interface IListMenuOption {
   id: string;
@@ -56,7 +57,6 @@ const ScrollListContainer = styled(DraggableContainer)`
 
 const SkillSplitDiv = styled.div`
   width: 100%;
-  font-size: 11px;
   margin-bottom: 10px;
   hr {
     margin: 0px;
@@ -75,4 +75,5 @@ const ListContainer = styled.ul`
 `;
 const ListElement = styled.li`
   margin-right: 0.5rem;
+  font-size: ${uiFonts.size.small};
 `;

package/src/components/SkillsContainer.tsx

@@ -2,7 +2,7 @@ import { ISkill, ISkillDetails } from '@rpg-engine/shared';
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import { colors } from '../constants/uiColors';
+import { uiColors } from '../constants/uiColors';
 import { DraggableContainer } from './DraggableContainer';
 import { SkillProgressBar } from './SkillProgressBar';
 
@@ -15,7 +15,7 @@ export interface ISkillContainerProps {
 
 const skillProps = {
   attributes: {
-    color: colors.cardinal,
+    color: uiColors.purple,
     values: {
       stamina: 'spell-icons/regenerate.png',
       magic: 'spell-icons/fireball.png',
@@ -26,7 +26,7 @@ const skillProps = {
     },
   },
   combat: {
-    color: colors.purple,
+    color: uiColors.cardinal,
     values: {
       first: 'gloves/leather-gloves.png',
       club: 'maces/club.png',
@@ -38,7 +38,7 @@ const skillProps = {
     },
   },
   crafting: {
-    color: colors.blue,
+    color: uiColors.blue,
     values: {
       fishing: 'foods/fish.png',
       mining: 'crafting-resources/iron-ingot.png',
@@ -101,7 +101,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
 
         <SkillProgressBar
           skillName={'Level'}
-          bgColor={colors.navyBlue}
+          bgColor={uiColors.navyBlue}
           level={Math.round(skill.level) || 0}
           skillPoints={Math.round(skill.experience) || 0}
           skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -2,7 +2,8 @@ import { ITradeResponseItem } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { colors } from '../../constants/uiColors';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
 import SelectArrow from '../Arrow/SelectArrow';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
@@ -102,7 +103,7 @@ const ItemWrapper = styled.div`
   margin-bottom: 1rem;
 
   &:hover {
-    background-color: ${colors.darkGrey};
+    background-color: ${uiColors.darkGray};
   }
   padding: 0.5rem;
 `;
@@ -133,7 +134,6 @@ const NameValue = styled.div`
 `;
 
 const Item = styled.span`
-  font-size: 1rem;
   color: white;
   text-align: center;
   z-index: 1;
@@ -165,5 +165,5 @@ const QuantityContainer = styled.div<IContainerProps>`
 `;
 
 const QuantityDisplay = styled.div`
-  font-size: 0.8rem;
+  font-size: ${uiFonts.size.small};
 `;

package/src/constants/uiColors.ts

@@ -1,10 +1,20 @@
-export const colors = {
-  darkGrey: '#3e3e3e',
+export const uiColors = {
+  lightGray: '#757161',
+  gray: '#4E4A4E',
+  darkGray: '#3e3e3e',
   darkYellow: '#FFC857',
-  orange: '#E9724C',
+  yellow: '#FFFF00',
+  orange: '#D27D2C',
   cardinal: '#C5283D',
+  red: '#D04648',
+  darkRed: '#442434',
   raisinBlack: '#191923',
   navyBlue: '#0E79B2',
-  purple: '#8C3D8C',
-  blue: '#3772FF',
+  purple: '#6833A3',
+  darkPurple: '#522761',
+  blue: '#597DCE',
+  darkBlue: '#30346D',
+  brown: '#854C30',
+  lightGreen: '#6DAA2C',
+  brownGreen: '#346524',
 };

package/src/constants/uiFonts.ts

@@ -0,0 +1,12 @@
+export const uiFonts = {
+  size: {
+    xxsmall: '8px',
+    xsmall: '9px',
+    small: '12px',
+    medium: '14px',
+    large: '16px',
+    xLarge: '18px',
+    xxLarge: '20px',
+    xxxLarge: '24px',
+  },
+};